Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Header Title, Slogan, Logo, and Navigation Parallel

    How do I make my header title and slogan parallel to my logo and all those parallel to my navigation? A example picture is below:



    jsFiddle Example:
    http://jsfiddle.net/JordanSimps/hgwyS/

    HTML:
    Code:
    <body class="body">
    	<header class="mainHeader">
        
        	<nav><ul>
            	<li class="active"><a href="#">Home</a></li>
                <li><a cass="active" href="#">Menu</a></li>
                <li><a href="#">Location</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Specials</a></li>
                <li><a href="#">Contact</a></li>
            </ul></nav>
            
            	<h1><a href="#" class="title" title="Index">Mario’s Luigis<br /> Downtown</a></h1>
            <footer>
            	<p class="slogan">
            Fine Italian dining & old world charm.
            	</p>
            </footer>
          <img src="http://dubdown.web44.net/mariosluigis/images/liberty.png" />
        </header>
    CSS:
    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    body {
    	color: #000305;
    	font-size: 87.5%;
    	font-family: Arial, 'Lucida Sans Unicode';
    	line-height: 1.5;
    	text-align: left;
    }
    
    a {
    	text-decoration: none;
    }
    
    a:link, a:visited {
    	
    }
    
    a:hover, a:active {
    	
    }
    
    .body {
    	margin: 0 auto;
    	width: 90%;
    	clear: both;
    }
    
    .title {
    	color: #000;
    }
    
    .mainHeader h1 {
    	font-family: "Existence Light";
    	line-height: 1.4em;
    	font-weight: lighter;
    	font-size: 48px;
    }
    
    .mainHeader h1 a:hover {
    	color: #DC9101;
    }
    
    .slogan {
    	color: #DC9101;
    	font-family: "Adobe Devanagari";
    	font-size: 18px;
    }
    
    .mainHeader img {
    	position: ;
    	width: 10%;
    	height: auto;
    }
    
    .mainHeader nav {
    	width: 100%;
    	height: 143px;
    }
    
    .mainHeader nav a {
    	color: #000;
    	font-family: "Adobe Devanagari";
    	font-size: 18px;
    }
    
    .mainHeader nav ul {
    	list-style: none;
    	margin: 5% auto;
    	float: right;
    }
    
    .mainHeader nav a:link, mainHeader nav a:visited {
    	display: inline-block;
    	padding: 0.4em;
    	height: 0.15em;
    }
    
    .mainHeader nav a:hover, .mainHeader a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited {
    	color: #DC9101;
    	text-shadow: none;
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    I would combine this:
    Code:
    body {
    	color: #000305;
    	font-size: 87.5%;
    	font-family: Arial, 'Lucida Sans Unicode';
    	line-height: 1.5;
    	text-align: left;
    }
    And this:
    Code:
    .body {
    	margin: 0 auto;
    	width: 90%;
    	clear: both;
    }
    They are the same thing. Also remove the footer tags in the header.

    Here is a easy header to see how it's done. It needs work though:
    Code:
    <body>
    <header class="mainHeader" style="border:1px solid red;">
    
    <div style="float:left;width:25%;margin-left:2%;margin-top:2%;">
    <h1><a href="#" class="title" title="Index">Mario’s Luigis<br /> Downtown</a></h1>
    <p class="slogan">
    Fine Italian dining & old world charm.
    </p></div>
    
    <img src="http://dubdown.web44.net/mariosluigis/images/liberty.png" style="float:left;margin-top:2%;" />
    
    <nav style="float:right;margin-right:2%;margin-top:2%;">
    	<ul>
    	  	<li class="active"><a href="#">Home</a></li>
          <li><a cass="active" href="#">Menu</a></li>
          <li><a href="#">Location</a></li>
          <li><a href="#">Gallery</a></li>
          <li><a href="#">Specials</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    </header>
    </body>
    Evolution - The non-random survival of random variants.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •