...

View Full Version : Resolved Can't Seperate Nav from Header?



Hypn01991
10-29-2010, 03:04 PM
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.



<!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>



@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

abduraooft
10-29-2010, 03:08 PM
Add clear:left; to #header

teedoff
10-29-2010, 03:09 PM
Can you provide a link to your site? Also, have you added margin to the ul tag?

Hypn01991
10-29-2010, 03:29 PM
Add clear:left; to #header

:D you sir are a genius thank you very much


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum