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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Unhappy Can't Seperate Nav from Header?

    Hey guys, im having difficulty adding some space between my navigation div and header div. i've tried margin & padding but obv i'm not doing something right. below is the html & css any help would be appreciated.


    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/master.css" rel="stylesheet" type="text/css" />
    <title>Prestige communications | Home</title>
    </head>
    
    <body>
    <div id="page-container">
    <div id="main-nav">
    <ul class="nav-links">
    		<li><a href="index.html" title="home">Home</a></li>
            <li><a href="services.html" title="services">Services</a></li>
            <li><a href="products.html" title="services">Products</a></li>
    		<li><a href="about.html" title="about">About Us</a></li>
    		<li><a href="contact.html" title="contact">Contact</a></li>
    		</ul>
    </div>
    <div id="header">
      <h1><img src="images/ptlogo1.png" 
    		width="305" height="36" alt="Prestige coms" border="0" /></h1>
    </div>
    <div id="sidebar-a">
    	<div class="padding">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
    	Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 
    	Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
    	euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
    	Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
    	purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
    	</div>
    </div>
    <div id="content">
    	<div class="padding">
    <h2><img src="images/about.png" width="98" height="14" alt="About" /></h2>
    	<p><strong>Prestige Com</strong> is an communication systems provider that specialises in solutions for your business needs.</p>
    	<p>We are currently undergoing a 'face lift', so if you have any questions or would like more information about the services we provide please feel free to contact us.</p>
    	
    	<h2><img src="images/contactus.png" width="98" height="14" alt="Contact" /></h2>
    	<p>Phone:   <br />
        Fax:     <br />
        Mobile: <br />
        Main Office: <br />
    	Email:   <a href="mailto:md@prestige.com.au">md@prestige.com.au</a><br />
    	</p>
    	</div>
    </div>
    <div id="footer">
    <div id="altnav">
    		<a href="index.html">Home</a> | 
    		<a href="services.html">Services</a> | 
            <a href="products.html">Products</a> |
    		<a href="about.html">About Us</a> | 
    		<a href="contact.html">Contact</a> |  
    	  	<a href="privacy.html">Privacy Policy</a> |
            <a href="https://toolkit.smartyhost.com.au/">Login</a>
    	</div>
      <a href="#">Copyright</a> © 2010 Prestige PTY LTD </div>
    
    
    </div>
    </body>
    </html>

    Code:
    @charset "utf-8";
    /* CSS Document */
    *
    {
    	margin: 0px;
    	padding: 0px;
    	border: none;
    }
    body 
    {
    	font-family:Arial, Helvetica, Verdana, Sans-serif;
    	font-size:12px;
    	color:#666666;
    	background:#ffffff;
    }
    .hidden
    {
    	display:none;	
    }
    #page-container
    {
    	width:760px;
    	margin: auto;	
    	
    }
    #main-nav
    {
    	clear:both;
    	float:left;
    	padding-left:11px;
    	width:355px;
    }
    .nav-links li
    {
    	float: left;
    	list-style-type: none;
    	display:block;
    }
    .nav-links li a 
    {
     	float: left;
    	width: 71px;
    	height: 41px;
    	text-decoration: none;
    	text-transform: capitalize;
    	color: #000;
    	font-size: 12px;
    	text-align: center;
    	padding-top: 25px;
    	
    }
    .nav-links li a:hover 
    {
     	color: #fff;
     	background-color:#1473e8;
    }
    
    #header 
    {
    	height:150px;
    	background:#1473e8
    	            url(../images/banner.png);
    }
    h1 
    {
    	margin:0;
    	padding:0;
    	float:right;
    	margin-top:56px;
    	padding-left:50px;
    }
    #sidebar-a
    {
    	float:right;
    	width:280px;
    	line-height:18px;
    }
    #sidebar-a .padding 
    {
    	padding:25px;
    }
    
    #content
    {
    	margin-right:280px;
    	line-height:18px;
    	
    }
    #content .padding 
    {
    	padding:25px;
    }
    #content h2 
    {
    	margin:0;
    	padding:0;
    	padding-bottom:15px;
    }
    #content p 
    {
    	margin:0;
    	padding:0;
    	padding-bottom:15px;
    }
    #footer 
    {
    	clear:both;
    	font-family:Tahoma, Arial, Helvetica, Sans-serif;
    	font-size:10px;
    	color:#c9c9c9;
    	border-top:1px solid #efefef;
    	padding:13px 25px;
    	line-height:18px;
    }
    #footer a 
    {
    	color:#c9c9c9;
    	text-decoration:none;
    }
    #footer a:hover 
    {
    	color: #1473e8;
    }
    #footer #altnav 
    {
    	width:350px;
    	float:right;
    	text-align:right;
    }

    thanks
    Last edited by Hypn01991; 10-30-2010 at 11:54 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Add clear:left; to #header
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Hypn01991 (10-30-2010)

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Can you provide a link to your site? Also, have you added margin to the ul tag?

  • Users who have thanked teedoff for this post:

    Hypn01991 (10-30-2010)

  • #4
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Add clear:left; to #header
    you sir are a genius thank you very much

    Quote Originally Posted by teedoff View Post
    Can you provide a link to your site? Also, have you added margin to the ul tag?
    sorry hasn't gone live yet, problem sorted by 1st responder thanks for ur help


  •  

    Posting Permissions

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