[SOLVED] div positioning

makka · January 1, 2009

hey, im having a tough time getting my Divs to align up how i want them to since im designing it from my 1600 odd res pc im getting different results when i change my res or drop and drag onto a smaller monitor (dual screen). an example being when i position my head image i want it to centre up but since it won't i had to put a margin on it i used a % instead of pixels but it still changes and bumps over alot more on a smaller res or monitor.

also probably a stupid question but getting divs to align to the centre im finding tough i think it would be alot easer if i could just make a div, set it to 1000px and put it into the centre atleest i can put everything in there and it will not disrupt my BG or go out side of the "zone"

body {
width: 1000px;
background: #000000 url('images/bg.jpg') top center repeat-y;
margin: 0px 0px 0px 0px;
padding: 0px;
}

#main {
width: 1000px;
}

#head {
width: 1000px;
height: 180px;
background: url('images/head.jpg') top center no-repeat;
margin: 0 0 0 34%;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Blank</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="main">
<div id="head"></div>
</div>
</body>
</html>

htmlstig · January 2, 2009

using margins is quite simple it goes in the order of margin: top right bottom left; so if you want to center it horizontaly you would make the left and right auto. so using your css it would be

#head {
width: 1000px;
height: 180px;
background: url('images/head.jpg') top center no-repeat;
margin: 0 auto 0 auto;
}

also why is the main div set to 1000px is it so its full screen? if so change it to

#main {
width: 100%;
}

i know not many people still use 800x600 resolutions but there are still people out there who do so 1000px would cause horizontal scrolling for them

makka · January 2, 2009

using margins is quite simple it goes in the order of margin: top right bottom left; so if you want to center it horizontaly you would make the left and right auto. so using your css it would be
#head {
width: 1000px;
height: 180px;
background: url('images/head.jpg') top center no-repeat;
margin: 0 auto 0 auto;
}
also why is the main div set to 1000px is it so its full screen? if so change it to
#main {
width: 100%;
}
i know not many people still use 800x600 resolutions but there are still people out there who do so 1000px would cause horizontal scrolling for them

hey thanks after some tweaking i got it to work using auto, the reason im using 1000px over 100% is because i use a res of over 1600 and i have alot of the BG colour showing through each side but my BG image is 1024 with a 100px area in the centre for the content.

also with the 800x600 res prob there is not much i can do except go smaller witch for my case i don't really want to do

makka · January 2, 2009

ive got another prob that i can't get rid of to save my life atm,

basically after ive added my nav bar in its floating to the right and i cant get it to stick to the main div (images will explain)

body {
background: #000000 url('images/bg.jpg') top center repeat-y;
background-attachment: fixed;
margin: 0px 0px 0px 0px;
padding: 0px;
}

#main {
width: 960px;
margin: 0 auto 0 auto;
}

#head {
width: 960px;
height: 180px;
background: url('images/head.jpg') top center no-repeat;
}

#nav {
height: 30px;
width: 960px;
line-height: 30px;
margin: 0 0 1px 0;
overflow: hidden;
list-style: none;
}

#nav ul {
margin: 0;
padding: 0;
}

#nav li {
width: 96px;
height: 30px;
float: left;
background: url(images/nav.jpg) 0 0 no-repeat;
}

#nav li a {
height: 30px;
width: 96px;
color: #ffffff;
display: block;
padding: 0 15px;
float: left;
text-decoration: none;
}

#nav li a:hover {
background: url(images/nav.jpg) 0 -30px no-repeat;
text-decoration: none;
}

#nav li.selected a,
#nav li.selected a:hover {
background: url(images/nav.jpg) 0 -60px no-repeat;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Xtremetutorials</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="main">
<div id="head"></div>

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Classroom</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Submit</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">Contact</a></li>
</ul>


</div>
</body>
</html>

1st image is just the prob so you can see it and the second is using the FF web dev addon to outline the block level elements (aka the divs)

with out using the nav div the main div aligns correctly (just inside the bg image's line same as the left hand side outline) i think the nav bar is pushing it out but soon as i can get it to align right it should sort it self out

[attachment deleted by admin]

makka · January 3, 2009

Bump still need some help

makka · January 3, 2009

just a thault i tried it in IE and it works fine :S that's a 1st

htmlstig · January 3, 2009

whats your css for <ul id="nav"> ?

DamienRoche · January 4, 2009

That gap can sometimes be caused with the ul tag. Take it away, you don't need it. Just use pure li tags. There are some parameters that may take away the margin. It's for the bullets which aren't even there. Take away list-style-type:none; and you'll see what I mean.

Hope that helps.

dropfaith · January 4, 2009

That gap can sometimes be caused with the ul tag. Take it away, you don't need it. Just use pure li tags. There are some parameters that may take away the margin. It's for the bullets which aren't even there. Take away list-style-type:none; and you'll see what I mean.

Hope that helps.

wont validate as proper code lis cant be just floating outside of a ul tag

makka · January 4, 2009

whats your css for <ul id="nav"> ?

#nav {
   height: 30px;
   width: 960px;
   line-height: 30px;
   margin: 0 0 1px 0;
   overflow: hidden;
   list-style: none;
}

#nav ul {
   margin: 0;
   padding: 0;
}

That gap can sometimes be caused with the ul tag. Take it away, you don't need it. Just use pure li tags. There are some parameters that may take away the margin. It's for the bullets which aren't even there. Take away list-style-type:none; and you'll see what I mean.

Hope that helps.

prob is thou it won't display across the screen right its down the page also there is no style to it its just pure links now, also as dropfaith said it won't validate

htmlstig · January 4, 2009

i know if you dont supply something in css its supposed to be used as zero, but i have found that if i dont put padding:0; when i want it to be 0 different browsers have different paddings, what browsers have you tried to view it in? also have you tried putting padding:0;?

makka · January 4, 2009

BINGO that one was annoying me to hell lol, thanks buddy dunno why i didn't think of it.. works fine in FF, chrome and IE now ty vm

ill open i new thread when i get annoyed again

Sign In

[SOLVED] div positioning

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information