Web Analytics Made Easy -
StatCounter Help with ul styling - CodingForum

Announcement

Collapse
No announcement yet.

Help with ul styling

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Help with ul styling

    So basically all I am trying to do is have the "Jake Freedman Photography" anchored left, The "Landscapes", "Wildlife", and "Conceptual" anchored center, and the "About" and "Contact" anchored right. I feel like I am close..

    CSS
    Code:
    /*
    Supersized - Fullscreen Slideshow jQuery Plugin Stylesheet Version 3.0
    By Sam Dunn (www.buildinternet.com // www.onemightyroar.com)
    Version: supersized.3.0.js
    Website: www.buildinternet.com/project/supersized
    */
    
    	*{
    	    margin:0;
    	    padding:0;
    	}
    	a{
    	    color:#8FC2FF;
    	    text-decoration: none;
    	    outline: none;
    	}
    	img{
    	    border:none;
    	}
    	body {
    	    overflow:hidden;/*Needed to eliminate scrollbars*/
    	    background:#000;
    	}
    	/*Area to place content normally*/
    	#content-wrapper{ 
    		width:100%; 
    		height:100%; 
    		position:absolute; 
    		top:0; 
    		overflow:auto; 
    		z-index:4; 
    		text-align:center; 
    	}
    	
    	/*Controls Section*/
    	#controls-wrapper{
    	    margin:0px auto;
    	    height:62px;
    	    width:100%;
    	    bottom:40px;
    		right:50%;
    	    z-index: 5;
    	    position:absolute;
    	}
    	#controls{
    	    overflow: hidden;
    	    height: 100%;
    	    text-align:left;
    	    z-index: 5;
    		bottom:40px;
    	     /* Increase padding to give thumbnails room */
    	}
    	#slidecounter{
    	    float:left;
    	    color:#888;
    	    font:23px "Helvetica Neue", "Helvetica", Arial, sans-serif;
    	    font-weight:bold;
    	    text-shadow: #000 0px -1px 0px;
    	    margin:19px 10px 18px 20px;	
    	}
    	#slidecaption{
    	    overflow: hidden;
    	    float:left;
    	    color:#FFF;
    	    font:16px "Helvetica Neue", "Helvetica", Arial, sans-serif;
    	    font-weight:bold;
    	    text-shadow: #000 0px 2px 0px;
    	    margin:23px 20px 23px 0;
    	}
    	
    	
    	/*Supersized Link*/
    	.stamp{ float: right; margin: 15px 30px 0 0;}
    	
    	
    	/*Supersize Plugin Styles*/
    	#navigation{
    	    float: right;
    	    margin:10px 20px 0 0;
    	}
    	
    	#about {
        width:33.333333%;
        height: 45%;
    	padding-left:8px;
    	padding-right:8px;
        position:absolute;
        bottom:40px;
        overflow:auto;
        z-index:4; 
        background: rgba(0, 0, 0, 0.8);
    	list-style: none;
        margin-left:20px;
        line-height: 40px;
        font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
        font-size: 13.5px; 
    	color: #fff;
    }
    
    #contact {
        width:25%;
        height: 10%;
    	padding-left:8px;
    	padding-right:8px;
    	margin-right:20px;
        position:absolute;
        bottom:40px;
    	right:0;
        overflow:auto;
        z-index:4; 
        background: rgba(0, 0, 0, 0.8);
    	line-height: 40px;
        font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
        font-size: 13.6px; 
    	color: #fff;
    }
    	
    	#navBar {
        width:100%;
        height: 60px;
        position:absolute;
        bottom:0;
    	padding-top:20px;
        overflow:auto;
        z-index:4; 
        background: rgba(0, 0, 0, 0.8);
    }
    
    #navBar ul {
        list-style: none;
        margin-left: 60px;
        line-height: 40px;
        font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
        font-size: 20px;     
    }
     
    #navBar ul li {
        float:right;
        margin-right: 50px;
    }
     
    #navBar ul li a {
        color: #fff;
    }
     
    #navBar ul li a:hover {
        color: #52caf5;
    }
    
    #navBar ul li:first-child {
      font-family: Georgia, sans-serif;
      font-variant: small-caps;
      font-size: 30px;
      margin-right:25%;
      float:left;
    }
    
    #navBar ul li:nth-child(6) {
    	float:left;
    
    }
    
    #navBar ul li:nth-child(5) {
    	float:left;
    
    }
    
    #navBar ul li:nth-child(4) {
    	float:left;
    }
    
    	#loading {
    	    position: absolute;
    	    top: 49.5%; 
    	    left: 49.5%;
    	    z-index: 10;
    	    width: 24px; 
    	    height: 24px;
    	    text-indent: -999em;
    	    background-image: url(images/progress.gif);
    	}
    	#supersized{
    	    position:fixed;
    	}
    	#supersized img{ -ms-interpolation-mode: bicubic; }
    	#supersized img, #supersized a{
    	    height:100%;
    	    width:100%;
    	    position:absolute;
    	    z-index: -1;
    	}
    	
    	#supersized .prevslide, #supersized .prevslide img{
    	    z-index: 1;
    	}
    	#supersized .activeslide, #supersized .activeslide img{
    	    z-index: 2;
    	}
    	
    	#nextthumb, #prevthumb{ z-index:6; display:none; position:absolute; bottom:12px; height:75px; width:100px; overflow:hidden; border:2px solid #fff; -webkit-box-shadow: 0px 0px 5px #000; }
    	#nextthumb{ right:12px; }
    	#prevthumb{ left:12px; }
    		#nextthumb img, #prevthumb img{ width:150px; }
    		#nextthumb:active, #prevthumb:active{ bottom:10px; }
    		
    		/*Add hover pointer*/
    		#controls > *:hover, #nextthumb:hover, #prevthumb:hover{ cursor:pointer; }
    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
    
    	<head profile="http://gmpg.org/xfn/11">
    
    	<title>Home - JFP</title>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    	
    	<link rel="stylesheet" href="supersized.css" type="text/css" media="screen" />
    	
    	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    	<script src="js/effects.core.js"></script>
    	<script src="js/effects.slide.js"></script>
    	
    	<script type="text/javascript" src="supersized.3.0.js"></script>
    	<script type="text/javascript">  
    		$(function(){
    			$.fn.supersized.options = {  
    				startwidth: 1200,  
    				startheight: 800,
    				vertical_center: 1,
    				slideshow: 1,
    				navigation: 1,
    				thumbnail_navigation: 1,
    				transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
    				pause_hover: 0,
    				slide_counter: 1,
    				slide_captions: 1,
    				slide_interval: 5000,
    				slides : [
    					{image : 'slides/slide-1.jpg'},
    					{image : 'slides/slide-2.jpg'},
    					{image : 'slides/slide-3.jpg'},
    					{image : 'slides/slide-4.jpg'},
    					{image : 'slides/slide-5.jpg'},
    					{image : 'slides/slide-6.jpg'},
    					{image : 'slides/slide-7.jpg'},
    					{image : 'slides/slide-8.jpg'},
    					{image : 'slides/slide-9.jpg'},
    					{image : 'slides/slide-10.jpg'},
    
    				]
    			};
    	        $('#supersized').supersized(); 
    	    });
    	</script>
    	
    	<style type="text/css"></style>
    </head>
    
    <body>
    
    <!--Loading display while images load-->
    <div id="loading">&nbsp;</div>
    
    <div id="navBar">
        <ul>
            <li><a href="index.html">Jake Freedman Photography</a></li>
            <li><a href="nature.html">Contact</a></li>
            <li><a href="nature.html">About</a></li>
            <li><a href="experimental.html">Landscapes</a></li>
            <li><a href="about.html">Wildlife</a></li>
            <li><a href="contact.html">Conceptual</a></li>
        </ul>
     
    </div>
    
    <!--Slides-->
    <div id="supersized"></div>
    
    
    
    </body>
    </html>

  • #2
    I would consider moving the "Jake Freedman Photography" part OUT of the list and making it the H1. Structurally the page SHOULD have a h1 as the heading that everything on every page of the site is a subsection of. Just like how at the top of every page or fold-pair in a book or newspaper the title of the book/paper is there. That's a H1's job.

    Likewise, not sure I'd have the "DIV for nothing" around the UL unless the H1 were separate and you wanted the same background on both... to that same end though you're declaring font-sizes in pixels telling users with accessibility needs to wholesale sod off, so there's a good deal I'd be doing differently there... same for all the unnecessary 100% width declarations and endless pointless absolute positioning that's just asking for a fragile inaccessible layout.

    Of course, I'd also axe the scripted loading div nonsense and massive space and bandwidth wasting slideshow rubbish -- not really a fan of either even for an artists site since that too is a giant middle finger to accessibility.

    I would be doing something more like:

    Code:
    <div id="top">
    	<h1><a href="/">Jake Freedman Photography</a></h1>
    	<ul>
    		<li><a href="contact.html">Contact</a></li>
    		<li><a href="about.html">About</a></li>
    		<li><a href="experimental.html">Landscapes</a></li>
    		<li><a href="nature.html">Wildlife</a></li>
    		<li><a href="concept.html">Conceptual</a></li>
    	</ul>
    <!-- #top --></div>
    So you have a proper semantic accessible design structure -- something you should write BEFORE you even THINK about screwing around applying style to the page... (or DIV for that matter)

    Code:
    /*
    	assuming BODY is 100%, though in practice I'd probably have 85%
    	rather than screwing around with that 13.6px rubbish you have on
    	#content
    */
    #top {
    	padding:3.75em 2.75em 0 0;
    }
    
    h1 {
    	float:left;
    }
    
    #top,
    h1 {
    	font:normal 100%/150% arial,helvetica,sans-serif;
    }
    
    
    #top a {
    	display:inline-block;
    	padding:0.25em 0.5em;
    	margin-left:2.75em; /* might have to lower 0.4em for non-floated ones? */
    	vertical-align:top;
    }
    
    #top ul {
    	list-style:none;
    	overflow:hidden; /* wrap floats */
    	text-align:center;
    }
    
    #top li {
    	display:inline;
    	vertical-align:top;
    }
    
    #top li:first-child,
    #top li:nth-child(1) {
    	float:right;
    }
    Though it won't be perfectly centered given the elements have a dynamic width and there's only the h1 on the left and two items on the right... you'd have to play with the padding and margins on certain elements to eyeball it.

    ... and of course, don't forget to plan for media queries to re-arrange all that when there isn't enough screen space to pull off having them all on one line.
    Last edited by deathshadow; Oct 5, 2016, 02:42 AM.
    Walk the dark path, sleep with angels, call the past for help.
    https://cutcodedown.com
    https://medium.com/@deathshadow

    Comment


    • #3
      Hey thanks for the help! I'm gonna keep trying to improve this, but now you've got me thinking about a whole new layout.. Do you have any good examples (this could be already built sites from other artists) of pleasing to look at and yet still highly accessible artist sites?

      Comment

      Working...
      X