Hypn01991
10-29-2010, 02: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
<!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