Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2006
    Location
    okc, ok
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    auto position divs vertically

    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
    Last edited by snunicycler; 11-07-2006 at 10:48 PM. Reason: edit* sorry, i just realized that what i am wanting to arrange on top of each other are <p class>s not divs thanks.

  • #2
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by snunicycler View Post
    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

  • #3
    New to the CF scene
    Join Date
    Oct 2006
    Location
    okc, ok
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Don't use absolute positioning. Use margins and floats instead.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    .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
    Last edited by Graft-Creative; 11-08-2006 at 09:56 PM. Reason: tiny typo

  • #6
    New to the CF scene
    Join Date
    Oct 2006
    Location
    okc, ok
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •