1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS for 2x Navigation in same header?

Discussion in 'CSS' started by buckmajor, Feb 4, 2014.

  1. #1
    Hey yall,

    As you can see I am trying to add the main navigation and a social navigation in the same header. However, I am able to get the main navigation but the social media navigation is broken.
    HTML:
    
    <header>
            <h1 class="logo">NAME</h1>               
            <nav id="top-nav">
                <ul>
                    <li id="home" class="first"><a href="/">Home</a></li>
                    <li class="about"><a href="#">About Me</a></li>
                    <li class="music"><a href="#">Music</a></li>
                    <li class="shows"><a href="#">Shows</a></li>
                    <li class="photos"><a href="#">Photos</a></li>
                    <li class="club"><a href="#">Fan Club</a></li>
                    <li class="contact"><a href="#">Contact</a></li>
                </ul>
            </nav>
            <nav class="sm">
                <ul>
                    <li class="email"><a href="#">Email</a></li>
                    <li class="facebook"><a href="#">Facebook</a></li>
                    <li class="twitter"><a href="#">Twitter</a></li>
                    <li class="instagam"><a href="#">Instagam</a></li>
                    <li class="youtube"><a href="#">Youtube</a></li>
                </ul>
            </nav>        
        </header>
    Code (markup):
    CSS:
    /* ---------------------------------------- */
    /*   HEADER                                 */
    /* ---------------------------------------- */
    header{
        background-image: url(../images/th-02-r.jpg);
        background-repeat: no-repeat;
        background-position: left top;
        height:170px;
        width: 1020px;
        border-top-width: 7px;
        border-top-style: solid;
        border-top-color: #c67e96;
    }
    #top-nav{
        float:left;
        list-style-type: none;
        margin-left: 150px;
    }
    #top-nav li{ float:left; position:relative; list-style-type: none; margin-right:5px;}
    #top-nav a{ height: 34px;
        width: 88px;padding-top:5px; height:20px; display:block; color:#000; font:bold 16px "Trebuchet MS"; text-align:center; text-decoration:none; text-transform:uppercase; }
    #top-nav a:hover, #top-nav a.home.active{
        color: #FFF;
        background-image: url(../images/button.png);
        background-repeat: no-repeat;
        height: 34px;
        width: 88px;
    }
    #top-nav a.active{ color:#fe0af0; }
    li.first#home {
        background-image: url(../images/button.png);
            height: 34px;
        width: 88px;
    }
    nav.sm{
        position: absolute;
        text-indent: -9999;
    }
    nav.sm ul{    text-indent: -9999;}
    nav.sm li{  position:relative; list-style-type: none;    text-indent: -9999;}
    nav.sm a{
        height: 43px;
        width: 43px;
        display: block;
        text-indent: -9999;
    }
    nav.sm li.email{
        background-image: url(../images/n-social-media.png);
        background-repeat: no-repeat;
        height: 43px;
        width: 43px;
        background-position: -10px -65px;
            text-indent: -9999;
    }
    nav.sm li.facebook{
        background-image: url(../images/n-social-media.png);
        background-repeat: no-repeat;
        height: 43px;
        width: 43px;
        background-position: -10px -65px;
            text-indent: -9999;
    }
    Code (markup):
    I would kindly appreciate anyone's help

    Thanks in advance
    CHEERS :)
     
    buckmajor, Feb 4, 2014 IP
  2. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #2
    Can you explain what you are trying to do with the social nav? Keep them on the same line?

    Also I added this to fiddle. http://jsfiddle.net/Fwj2j/ Try and post any code a link or in a fiddle as most people can't be bothered to put it together.
     
    HuggyStudios, Feb 4, 2014 IP
  3. buckmajor

    buckmajor Active Member

    Messages:
    574
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #3
    Ops sorry guys. I want to align both navigation into horizontal alignment: main nav is centered in the header and social media slightly above the main nav in the right hand corner (floated to the right).
    Its been a while since I've been on DP. I will attach the files some how. Sorry Hugs, I haven't used fiddle before. So first I will attach the files and then hopefully progress from there.

    I do apologize for the lack of details in the OP.
    Thanks for being patient with me guys.
     
    buckmajor, Feb 5, 2014 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Well, for starters you have multiple NAV tags for nothing - NAV marks a section user agents can 'skip' when the user wants to go directly to the content, that's what it MEANS (and why in most cases it's redundant to a H2 or the first HR, just another bit of HTML 5 asshattery)... You've got two perfectly good UL, use them.

    Likewise since a page should only have one H1, it probably doesn't need an ID... well, unless you're pissing all over semantics and heading navigation using the stupid malfing HTML 5 "section" tag. (can you tell how much of a HTML 5 fan I am?)

    Of course, you're working with a fixed width so it's automatically accessibility trash... Some condensed properties in the CSS wouldn't hurt either.

    First, I'd gut the markup down to what's needed...

    <header>
    	<h1>NAME</h1>               
    	<nav>
    		<ul id="mainMenu">
    			<li class="home"><a href="/">Home</a></li>
    			<li class="about"><a href="#">About Me</a></li>
    			<li class="music"><a href="#">Music</a></li>
    			<li class="shows"><a href="#">Shows</a></li>
    			<li class="photos"><a href="#">Photos</a></li>
    			<li class="club"><a href="#">Fan Club</a></li>
    			<li class="contact"><a href="#">Contact</a></li>
    		</ul>
    		<ul id="socialMenu">
    			<li class="email"><a href="#">Email</a></li>
    			<li class="facebook"><a href="#">Facebook</a></li>
    			<li class="twitter"><a href="#">Twitter</a></li>
    			<li class="instagam"><a href="#">Instagam</a></li>
    			<li class="youtube"><a href="#">Youtube</a></li>
    		</ul>
    	</nav>        
    </header>
    Code (markup):
    The CSS you've got is typical of what happens when people stuff everything into single lines - you've got multiple declarations overriding each-other (like height), incomplete declarations (no fallback families on the font-family), so on and so forth.

    .. and of course the px metric fonts are an accessibility mess... but I'll leave that be for now since you seem to have image backgrounds.

    I'm guessing WILDLY here without seeing the images -- and I'm going to 'overcomment' because there's a LOT of issues in that CSS... particularly with all the redundant/pointless declarations.

    header{
    	overflow:hidden; /* wrap floats */
    	width: 1020px; /* also trips haslayout, so floats are wrapped */
    	background:url(../images/th-02-r.jpg) 0 0 no-repeat;
    	border-top:7px solid #C67E96;
    }
    
    #mainMenu,
    #socialMenu {
    	list-style:none;
    	float:left;
    	display:inline; /* prevent IE margin doubling */
    }
    
    #mainMenu {
    	margin-left:150px;
    }
    
    #mainMenu li,
    #socialMenu li {
    	display:inline;
    	/*
    		Seriously, don't even waste time TRYING to do anything more unless
    		you're planning on adding drop-down menus
    	*/
    }
    
    #mainMenu a {
    	float:left;
    	display:inline; /* prevent IE margin doubling */
    	width:88px;
    	/* I'm assuming the image is 34px tall */
    	padding:7px 0;
    	text-align:center;
    	text-decoration:none;
    	text-transform:uppercase;
    	font:bold 16px/20px "trebuchet ms",helvetica,sans-serif;
    	color:#000;
    	/*
    		you should probably include a fallback color, and if you have to
    		up-tree link with ../ there's probably something wrong with your
    		directory structure.
    	*/
    	background:#888 url(images/button.png) 0 0 no-repeat;
    }
    
    /*
    	the next two I'm including empty so you have the proper targets 
    	You didn't actually set any new values on them!!!
    */
    
    #mainMenu a:active,
    #mainMenu a:focus,
    #mainMenu a:hover {
    	color:#FFF;
    }
    
    #mainMenu .current {
    	/*
    		I'd adise calling the current element 'current' instead of 'active'
    		so it's not confused with the :active pseudostate
    		
    		It's also considered bad practice to declare hex values in lowercase
    		could be confused with b64 encoding.
    	*/
    	color:#FE0AF0;
    }
    
    #socialMenu a {
    	float:left;
    	height: 43px;
    	width: 43px;
    	/* 
    		this is piss poor image replacement method, since it offers
    		no images off graceful degradation. I'd either suck it up and
    		use image tags, or add SPAN for gilder-levin image replacement
    		if the text is small enough.
    	*/
    	text-indent: -9999;
    	background:url(images/n-social-media.png) 0 0 no-repeat;
    }
    
    /* for each icon you only need to change values that are DIFFERENT!!! */
    #socialMenu .email a {
    	background-position: -10px -65px;
    }
    
    #socialMenu .facebook a {
    	background-position: -10px -65px;
    }
    Code (markup):
    Though again, without seeing the images or what you're aiming for in terms of layout, that's guessing WILDLY; and really whatever you are doing this line ALONE:

    width: 1020px;

    Means I'd toss the entire concept and start over building a semi-fluid elastic responsive layout.
     
    Last edited: Feb 6, 2014
    deathshadow, Feb 6, 2014 IP
  5. buckmajor

    buckmajor Active Member

    Messages:
    574
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #5
    Thanks so much Deathshadow. Sorry for the late response been flat out. I readjusted and used your HTML and CSS code. I tested it out and working fine now. Your comment instruction was really helpful and easy to follow. I only started using HTML5 and CSS3 recently. Although I still need polishing up to get it to that standard. I haven't used fluid or other layouts at this stage, only the basic mainly pixel measurements.
     
    buckmajor, Feb 13, 2014 IP