...

View Full Version : auto position divs vertically



snunicycler
11-07-2006, 09:34 PM
i know you can use
margin-left: auto; and
margin-right: auto; to position left and right margins automatically but i need to position a bunch of <p class>s automatically on top of each other. i would use absolute positioning but i will constantly be changing the amount of type that is in each class so to make my site look good i would constantly be changing the top margins of each one.
thanks-snunicycler

Graft-Creative
11-07-2006, 09:51 PM
i need to position a bunch of divs automatically on top of each other.

Being block level elements, < p>s will stack, one below the other, by default - according to the natural document flow.

Don't know if that's what you meant or not?

Kind regards,

Gary

snunicycler
11-08-2006, 07:54 PM
that is what i thought originally, but for some reason it doesnt work... here is my html and my css
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http:www.W3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Metroplex Fellowship Church of the Nazarene</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link type="text/css" rel="stylesheet" href="metroplex.css" />
<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
</head>
<body>

<div id="header">
<img src="images/banner.png" alt="Metroplex Fellowship Church of the Nazarene" />
</div>

<div id="menu">
<dl>
<dt onmouseover="javascript:show();"><a href="" title="Return to home">Home</a></dt>
</dl>

<dl>
<dt onmouseover="javascript:show();"><a href="aboutus/aboutus.html" title=" About Us">About Us</a></dt>

</dl>


<dl>
<dt onmouseover="javascript:show('smenu2');">Ministries</dt>
<dd id="smenu2" onmouseover="javascript:show('smenu2');" onmouseout="javascript:show('');">
<ul>
<li><a href="ministries/youth.html">The Youth Group</a></li>
<li><a href="ministries/college.html">The College Group</a></li>
<li><a href="ministries/children.html">The Children's Group</a></li>
<li><a href="ministries/sundayschool.html">Sunday School</a></li>
<li><a href="ministries/homeschool.html">Home School</a></li>
<li><a href="ministries/prayer.html">Prayer</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="javascript:show('smenu3');">Menu 3</dt>
<dd id="smenu3" onmouseover="javascript:show('smenu3');" onmouseout="javascript:show('');">
<ul>
<li><a href="---------------------">sub-menu 3.1</a></li>

</ul>
</dd>
</dl>

<dl>
<dt onmouseover="javascript:show('smenu4');">Menu 4</dt>
<dd id="smenu4" onmouseover="javascript:show('smenu4');" onmouseout="javascript:show('');">
<ul>
<li><a href="#">sub-menu 4.1</a></li>
<li><a href="#">sub-menu 4.2</a></li>
<li><a href="#">sub-menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>




<p class="seminar1"> the seminars will be at this time at this place on this and this days.... it will cover these topics and things so that i will be able to tell where the info will be going.
</p>
<p class="seminar2"> the seminars will be at this time at this place on this and this days.... it will cover these topics and things so that i will be able to tell where the info will be going. the seminars will be at this time at this place on this and this days.... it will cover these topics and things so that i will be able to tell where the info will be going.
</p>
<p class="seminar3"> the seminars will be at this time at this place on this and this days.... it will cover these topics and things so that i will be able to tell where the info will be going. the seminars will be at this time at this place on this and this days.... it will cover these topics and things so that i will be able to tell where the info will be going.
</p>

<p id="main"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec purus nisi, molestie quis, tristique et, vestibulum vel, velit. Mauris interdum lacinia erat. Sed volutpat. Pellentesque lacus eros, pellentesque quis, cursus a, sollicitudin ac, nibh. Donec faucibus. Suspendisse potenti. Donec vitae turpis sit amet dui pulvinar eleifend. Nulla facilisi. Vivamus ultrices. Pellentesque fermentum sapien at mauris. Integer sed ipsum. Sed in risus. Sed in erat. Donec neque. Cras ut mi id lorem feugiat malesuada. Quisque porta tellus sed dui. Vivamus scelerisque pharetra dolor. Suspendisse dictum ornare dui.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec purus nisi, molestie quis, tristique et, vestibulum vel, velit. Mauris interdum lacinia erat. Sed volutpat. Pellentesque lacus eros, pellentesque quis, cursus a, sollicitudin ac, nibh. Donec faucibus. Suspendisse potenti. Donec vitae turpis sit amet dui pulvinar eleifend. Nulla facilisi. Vivamus ultrices. Pellentesque fermentum sapien at mauris. Integer sed ipsum. Sed in risus. Sed in erat. Donec neque. Cras ut mi id lorem feugiat malesuada. Quisque porta tellus sed dui. Vivamus scelerisque pharetra dolor. Suspendisse dictum ornare dui.

</p>


<p id="hours">
Sunday Services<br/>
<br/>
Sunday School: 9:30am-10:15am<br/>
<br/>
Morning Service: 10:30am-12:00pm<br/>
<br/>
Evening Service: 6:00pm-7:30pm<br/>
<br/>
<br/>
Wednesday Services<br/>
<br/>
Wednesday Night Meal: 6:00pm-6:30pm<br/>
<br/>
Services: 7:00pm-8:00pm
</p>

</body>
</html>

css:
body {
position: absolute;
left: 0px;
background-color: black;
font-family: sans-serif;
font-size: 12px;
}
.seminar1 {
font-family: sans-serif;
background: blue url(images/seminar.jpeg);
position: absolute;
left: 310px;
color: green;
background-repeat: no-repeat;
padding-left:55px;
padding-top: 10px;
width: 397px;

background-position: 10px 10px;



}
.seminar2 {
font-family: sans-serif;
background: blue url(images/seminar.jpeg);
position: absolute;
left: 310px;
color: gray;
background-repeat: no-repeat;
padding-left:55px;
width: 397px;


padding-top: 10px;

}
.seminar3 {
font-family: sans-serif;
background: blue url(images/seminar.jpeg);
position: absolute;
left: 310px;
color: red;
background-repeat: no-repeat;
padding-left:55px;
padding-top: 15px;
width: 397px;


}

#main {
font-family: sans-serif;
position: absolute;
top: 468px;
left: 310px;
border: none;
background-color: #ffffff;
width: 432px;
text-align: center;
padding: 10px;
}


#hours {
font-family: sans-serif;
position: absolute;
top: 237px;
left:-10px;
color: white;
margin: 0px 10px 10px 10px;
background: blue;
width: 303px;
text-align: center;
z-index: 3;
padding-top: 10px;
padding-bottom: 10px;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu {
position: absolute;
top: 222px;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 152.5px;
margin: 0 px;
padding-left: 0px;
}
#menu dt {
padding-left: 0px;
font-weight: bold;
background: yellow;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
padding-left: 0px;
}
#menu li {
list-style: none;
padding-left: 0px;
text-align: center;
background: yellow;
}
#menu li a, #menu dt a {
color: green;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: red;
padding-left: 0px;
}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: green;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}

a {
text-decoration: none;
color: black;
color: #222;
}



i dont know why it wont work. thanks -snunicycler

_Aerospace_Eng_
11-08-2006, 08:32 PM
Don't use absolute positioning. Use margins and floats instead.

Graft-Creative
11-08-2006, 08:54 PM
Absolute positioning has it's place, but its rarely the fix-all that a lot of beginners think it is - it can bring a whole schlew of problems with it when used innapropriately.

I'd suggest thinking more in terms of the natural document flow, and then making adjustments to that with, as Aero sagely suggested, floats (and more specifically - I think - in this case margins).

Your paragraphs will automatically stack below one another as I said earlier.
Absolute positioning will negate this default browser rendering, which is why you have the problem you now have.

Try this:



.seminar1 {
font-family: sans-serif;
background: blue url(images/seminar.jpeg);
margin-left: 310px;
color: green;
background-repeat: no-repeat;
padding-left:55px;
padding-top: 10px;
width: 397px;
background-position: 10px 10px;
}

..apply the same margin rule to .seminar2 etc. ..and see how it swings.

Kind regards,

Gary

snunicycler
11-09-2006, 03:22 AM
aaahhh, i understand all of that now... thanks. it makes so much more sense when you do it correctly. i didnt know exactly how the absolute positioning worked. thanks again!
-snunicycler



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum