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 5 of 5

Thread: blog navigation

  1. #1
    New Coder
    Join Date
    Jan 2014
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    blog navigation

    When I use my mouse button to zoom out the screen, the links on a menu bar changes position they just go left but the whole content stays in the middle.
    How can I make it stay centered so neither links nor the whole menu bar wouldn't change the position. This way they would become small cause of zooming but stay where they have to. Would be thankful for your help.

    Code:
    <nav id="nav-1">
    		<ul>
    			<li><a class="link-1" href="#">HOME</a></li>
    			<li><a class="link-1" href="#">HOME</a></li>
    			<li><a class="link-1" href="#">HOME</a></li>
    			<li><a class="link-1" href="#">HOME</a></li>
    		</ul>
    	</nav>
    Code:
     body{@importurl(http://fonts.googleapis.com/css?family=Raleway);
     margin: 0px; 
    }
    
    nav {
     margin-top: 124px;
     padding: 13px;  
     font-family: Raleway;
     box-shadow: 2px 2px 8px -1px #000000;
    }
    
    #nav-1 li { 
     display: inline; 
     padding: 9px; 
    }
    #nav-1 ul {
     margin-left: 120px; 
    }
    
    #nav-1 {
      background: #3fa46a;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello xewax,
    This is kind of an incomplete question since you don't show how the rest of your site is centered or the reason for the 120px left margin on your #nav-1 ul. Look at it like this once, see if it gives you some ideas -
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {margin: 0;}
    nav#nav-1 {
    	margin-top: 124px;
    	padding: 13px;
    	background: #3fa46a;
    	box-shadow: 2px 2px 8px -1px #000000;
    	font-family: Raleway;
    }
    #nav-1 ul { text-align: center; }
    #nav-1 li {
    	display: inline-block;
    	padding: 9px;
    }
    </style>
    </head>
    <body>
    	<nav id="nav-1">
    		<ul>
    			<li><a class="link-1" href="#">HOME</a></li>
    			<li><a class="link-1" href="#">HOME</a></li>
    			<li><a class="link-1" href="#">HOME</a></li>
    			<li><a class="link-1" href="#">HOME</a></li>
    		</ul>
    	</nav>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jan 2014
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This seems to be working, however, when we use text-align: center; the text stays just in the middle of the menu bar so when I zoom in it stays in the middle, but I want it pushed using margin-left: 120px;. Is there anything we can do to keep the text/links. Just like in a picture.
    There's a few lines of my css code that might be important to you.

    Code:
    /* Reset */
    html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre
    a, address, code, img,
    small, strong, dl, dt, ol, ul, li, 
    fieldset, form, label {
     margin: 0;
     padding: 0;
     border: 0;
     outline:0;
     font-size: 100%;
     vertical-align: baseline;
     background: transparent;
    }
    
    body {
     line-height: 1.5;
     font-family: helvetica, arial, sans-serif;
    }
    Code:
    /* Main Styles */
    body {
     background: #f8f8f8 url(img/bg.png); 
    }
    
    #wrap {
     width: 1050px;
     margin: auto;
    }
    
    #header h1 {
     background: url(img/logo.png) no-repeat;
     width: 168px;
     height: 83px;
     text-indent: -9999px;
     float: left;
     margin-top: -151px;
    }
    Code:
    /* Main Content */
    #main {
     clear: both;
     overflow: hidden;
    }
    
    #main #primary {
     float: left;
     width: 720px;
    }
    
    #main #sidebar {
     float: right;
     width: 300px;
    }
    Attached Thumbnails Attached Thumbnails blog navigation-menu-bar.jpg  

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I misunderstood. I thought you wanted your menu centered. Try something like this then?
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body { margin: 0; }
    /* Reset */
    html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre a, address, code, img, small, strong, dl, dt, ol, ul, li, fieldset, form, label {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-size: 100%;
    	vertical-align: baseline;
    	background: transparent;
    }
    body {
    	line-height: 1.5;
    	font-family: helvetica, arial, sans-serif;
    }
    body { background: #f8f8f8 url(img/bg.png); }
    #wrap {
    	width: 1050px;
    	margin: auto;
    }
    #header h1 {
    	background: url(img/logo.png) no-repeat;
    	width: 168px;
    	height: 83px;
    	text-indent: -9999px;
    	float: left;
    	margin-top: -151px;
    }
    nav#nav-1 {
    	margin: 124px 0 0 0;
    	padding: 13px;
    	background: #3fa46a;
    	box-shadow: 2px 2px 8px -1px #000000;
    	font-family: Raleway;
    }
    #nav-1 ul {
    	margin: 0 0 0 120px;
    	overflow: auto;
    }
    #nav-1 li {
    	float: left;
    	padding: 9px;
    	list-style: none;
    }
    /* Main Content */
    #main {
    	clear: both;
    	overflow: hidden;
    }
    #main #primary {
    	float: left;
    	width: 720px;
    }
    #main #sidebar {
    	float: right;
    	width: 300px;
    }
    </style>
    </head>
    <body>
    	<nav id="nav-1">
    		<ul>
    			<li><a class="link-1" href="#">HOME</a></li>
    			<li><a class="link-1" href="#">HOME</a></li>
    			<li><a class="link-1" href="#">HOME</a></li>
    			<li><a class="link-1" href="#">HOME</a></li>
    		</ul>
    	</nav>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    xewax (03-22-2014)

  • #5
    New Coder
    Join Date
    Jan 2014
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for your time and effort. I've found an article here on what I wanted to do. It's sorted now and it works fine.


  •  

    Posting Permissions

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