Align prob (padding? margin?)

[m1k3]

Hi
okay i'm playing with CSS to make a new site. Im trying to get the background image to move down from the top of the page by around 3cm or 200px approx but i cant figure out how to do it. Can anyone help a CSS n00b. Thanks
Image so you can see what i meean.

http://img100.imageshack.us/img100/4571/help2wq.jpg

[Rob]

url?

[m1k3]

no url mate its local.

code for CSS is

#container {
background:#f0f0f0 url(img/bodybg.jpg) repeat-x;
color:#303030;
margin:0;
min-width:770px;
padding:0;
text-align:left;
width:100%;
}

tried alsorts

[minute44]

So you want that bar to appear behind the navigation?

Could you not just put the navigation in a div and give the div a repeating backgground of that bar image?

This is gonna be really hard unless you post the entire style sheet and HTML.

My guess is that you've got a mixture of floats and relative and absolute positioning.

[m1k3]

ok sorry i will post up my code in full.

I want to set the navigation aproxx 200px down so's that i can have a banner image at the top of the site.

CSS

Code: Select all

 

body {
background:#8b8b8b
color:#303030;
font:76% Verdana,Tahoma,Arial,sans-serif;
margin:0;
padding:0;
text-align:center;
}
a {
color:#505050;
font-weight:bold;
text-decoration:none;
}
a:hover {
color:#808080;
text-decoration:underline;
}
p {
line-height:1.5em;
margin:0 0 15px;
}
/*** MAIN BANNER ***/
#banner {
background: url(img/Title1.jp) no-repeat;
margin-left: 0%; 
margin-right: 0%;
height: 92px;
width: 800px;
padding:0;
text-align:left;
width:100%;
}
 
/*** Main container ***/
#container {
background:#f0f0f0 url(img/bodybg.jpg) repeat-x;
color:#303030;
margin:0;
min-width:770px;
text-align:left;
width:100%;
}
/*** Header section ***/
#sitename {
color:#006699;
height:92px;
margin:0 20px 10px;
text-align:left;
}
#sitename h1,#sitename h2 {
font-weight:400;
letter-spacing:-2px;
margin:0;
padding:0;
}
#sitename h1 {
font-size:2.4em;
padding-top:20px;
}
#sitename h2 {
font-size:1.6em;
}
/*** Horizontal menu ***/
#mainmenu {
float:left;
margin-bottom:25px;
}
#mainmenu ul {
font-size:16px;
margin:0;
padding:0;
}
#mainmenu li {
float:left;
height:35px;
list-style:none;
margin:0;
padding:0;
}
#mainmenu a {
border-right:1px solid #b0b0b0;
color:#606060;
display:block;
font-size:0.7em;
padding:11px 10px 10px;
text-transform:uppercase;
}
#mainmenu a:hover {
background:#f0f0f0 url(img/menuhover.jpg) top left repeat-x;
color:#505050;
text-decoration:none;
}
#mainmenu a.current {
background:#f0f0f0 url(img/menuhover.jpg) top left repeat-x;
color:#505050;
text-decoration:none;
}
/*** Content wrap ***/
#wrap {
clear:both;
font-size:0.9em;
padding:0;
}
/*** Sidebars ***/
#leftside,#rightside {
margin:0;
padding:0 10px 10px;
width:165px;
}
#leftside {
float:left;
margin-right:10px;
}
#rightside {
float:right;
margin-left:10px;
}
#leftside h1,#rightside h1 {
color:#505050;
font-size:1.6em;
font-weight:bold;
letter-spacing:-1px;
margin:0 0 12px;
}
#leftside h2,#rightside h2 {
font-size:1.1em;
margin:0 0 20px;
}
#leftside p,#rightside p {
font-size:0.9em;
line-height:1.4em;
margin:0 0 16px 10px;
}
.linklist {
list-style:none;
margin:0 0 16px 10px;
padding:0;
}
.linklist li {margin-bottom:0.7em;}
/*** Sidebar menu ***/
.nav {
background:#e8e9ea;
border:1px solid #b0b0b0;
color:#606060;
display:block;
margin-top:8px;
padding:5px 4px 4px 10px;
position:relative;
text-transform:uppercase;
width:140px;
}
.nav:hover,.active {
background:#f8f9fa;
border:1px solid #909090;
color:#303030;
text-decoration:none;
}
.sub {
font-size:0.8em;
letter-spacing:1px;
margin:3px 0 2px 10px;
padding:4px 2px 2px 8px;
width:125px;
}
/*** Content ***/
#content,#contentalt {
background-color:#fafcff;
border:1px solid #909090;
color:#2a2a2a;
padding:15px 20px 5px;
}
#content {margin:0 200px;}
#contentalt {margin:0 200px 0 20px;}
#content h1,#content h2,#contentalt h1,#contentalt h2 {
background-color:inherit;
color:#606060;
font-size:1.8em;
font-weight:bold;
letter-spacing:-1px;
margin:0 0 15px;
padding:0;
}
#content h2,#contentalt h2 {
font-size:1.6em;
margin-bottom:10px;
}
#content img,#contentalt img {
border:1px solid #b0b0b0;
float:left;
margin:5px 15px 6px;
padding:5px;
}
/*** Footer ***/
#footer {
background:#8b8b8b url(img/footerbg.jpg) top left repeat-x;
clear:both;
color:#d0d0d0;
font-size:0.9em;
font-weight:bold;
margin:0;
padding:20px 0;
text-align:center;
width:100%;
}
#footer a {
color:#d0d0d0;
font-weight:bold;
}
/*** Various classes ***/
.thumbnail {
background:#fafbfc;
border:1px solid #b0b0b0;
margin:0 0 10px 10px;
padding:5px;
}
.searchform {margin:0;}
.searchbox {
background:#f0f0f0;
border:1px solid #b0b0b0;
margin:0 4px 0 0;
width:100px;
}
.searchbutton {
background:#f0f0f0;
border:1px solid #b0b0b0;
}
.clearingdiv {
clear:both;
height:30px;
width:1px;
}
.hide {display:none;}
/*** Text format ***/
.intro {
font-size:1.1em;
font-weight:bold;
letter-spacing:-1px;
}
.small {font-size:0.8em;}
.large {font-size:1.4em;}
.center {text-align:center;}
.right {text-align:right;}
/*** End of file ***/

HTML

Code: Select all

 
<head>
<link rel="stylesheet" href="sc.css" type="text/css" media="screen" />
</head>
<body>
 
<div id="container">

<div id="sitename">
  <div id="banner"></div>
  
</div>
<div id="mainmenu">
<ul>
<li><a class="current" href="index.html">Home</a></li>
<li><a href="/forums">Forums</a></li>
<li><a href="/forums/showthread.php?t=758">Specifications DataBase</a></li>
<li><a href="contacts.html">Contact Us</a></li>
<li><a href="links.html">Links / Sponsors</a></li>
<li><a href="misc.html">Misc</a></li>
</ul>
</div>
 
<div id="wrap">
<div id="leftside">
<h1>Car Specifications 
Navigation</h1>
<p>
<a class="nav active" href="index.html">Home</a><span class="hide"> | </span>
<a class="nav" href="/forums">Forums</a><span class="hide"> | </span>
<a class="nav" href="/forums/showthread.php?t=758">Specs Database</a><span class="hide"> | </span>
</p>
 
</div>

<div id="rightside">
<!--
<h1>Search</h1>
<p class="searchform">
<input type="text" alt="Search" class="searchbox" />
<input type="submit" value="Go!" class="searchbutton" />
</p>
<h1>Latest news</h1>
<p><strong>11th June 2006: </strong>
Development on the new site.
</strong></p>
-->
<h2><center> News:</center></h2>
print here
</div>
<div id="content">
<h1>Welcome</h1>
<p class="intro">
<font size="2">
<b><center> TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE 
</center></b></font>
</p>
<p>

<h2><center>
<font size="4">
<b>TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE</b>
</font>
</center></h2>
<p>
<font size="2">
<center>AND HERE</center>
<center>TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE </center> 
</font>
</div>
<p>

</div>
<div class="clearingdiv">&nbsp;</div>
</div>
</div>
<div id="footer">&copy; ME 2006 </a></div>
</body>
</html>

[masonbarge]

I don't get exactly what you're trying to do. It seems like you have a 1-px-wide background image with a bar at the top, and you want the bar 3cm lower. If so, just change the graphic so the bar is 3cm lower.