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
    Apr 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool Positioning navigation

    Hello there, this is my first post on the forums.

    Done only a small amount of HTML before, so I have a question.
    I have inserted a picture of the current document. I am just wondering how i would go about moving the navigation up so it is level with the center of the logo. As you can see at the moment they are aligned with the bottom of the logo. I have fiddled with the padding and margin etc but to no avail.

    Here is the HTML so far:
    <!doctype html>
    <html>

    <head>

    <link href="style.css" rel="stylesheet" type="text/css"/>
    <title>Trimmins</title>

    </head>



    <body>
    <header>
    <div class="container">
    <nav align="center">

    <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <h1>EXAMPLE</h1>
    <li><a href="#">STORE</a></li>
    <li><a href="#">CONTACT</a></li>
    </ul>
    </nav>
    <hr>
    </div>
    </header>
    </body>
    </html>


    Here is the CSS
    h1 {
    font-family: "Typo3";
    text-align: center;
    font-size:60px;
    display:inline-block;
    text-decoration:none;
    margin:10px;
    padding-left:50px;
    padding-right:50px;
    }

    nav ul{
    margin:0;
    padding: 0 0 0 0;
    display:inline;


    }

    nav ul li{
    background: none;
    color: white;
    display:inline-block;
    list-style-type:none;
    padding:5px 15px 5px 20px;
    }

    nav ul li a {
    color:black;
    text-decoration:none;
    font-family:"Typo3";
    font-size:9px;
    text-align:center;

    }

    Positioning navigation-dfddfffdsfsd.jpg

    Thanks guys!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,581
    Thanks
    23
    Thanked 643 Times in 642 Posts
    I'm sure you worked this out by now, but in case you haven't:
    Code:
    <!doctype html>
    <html>
    <head>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <title>Trimmins</title>
    <style type="text/css">
    hr{
    	clear:both;
    }
    nav{
    	margin: 0 auto;
    	width: 874px;
    }
    ul{
    	display:inline;
    	float:left;
    	margin-top: 30px;
    	margin-right: 50px;
    	margin-left: 50px;
    }
    li{
    display:inline-block;
    list-style-type:none;
    padding:10px 0;
    }
    h1 {
    font-family: "Typo3";
    text-align: center;
    font-size:60px;
    display:inline-block;
    text-decoration:none;
    margin:10px;
    padding-left:20px;
    }
    </style>
    </head>
    
    <body>
    <header>
    <div class="container">
    	<nav>
    		<ul>
    			<li><a href="#">HOME</a></li>
    			<li><a href="#">ABOUT</a></li>
    		</ul>
    		<h1 style="float:left;">EXAMPLE</h1>
    		<ul>
    			<li><a href="#">STORE</a></li>
    			<li><a href="#">CONTACT</a></li>
    		</ul>
    	</nav>
    </div>
    <hr>
    </header>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Tags for this Thread

    Posting Permissions

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