Align prob (padding? margin?)

m1k3 · #1 Jun 13th, 2006, 14:34

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 · #2 Jun 13th, 2006, 14:51

m1k3 · #3 Jun 13th, 2006, 14:57

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 · #4 Jun 13th, 2006, 15:02

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 · #5 Jun 13th, 2006, 15:22

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 · #6 Jun 13th, 2006, 17:02

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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] margin and padding in different browsers	danny322	Web Page Design	12	Jan 30th, 2008 14:12
[SOLVED] Padding and Margin	mcdanielnc89	Web Page Design	5	Dec 25th, 2007 00:58
Padding and margin for template does not work anymore	LGS	Web Page Design	10	Nov 30th, 2007 20:37
Strange Padding/Margin	MaxCurrent	Web Page Design	2	Jul 24th, 2007 11:36
IE prob	karloff	Web Page Design	11	Apr 24th, 2006 12:41

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Align prob (padding? margin?)