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 10 of 10
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    best method to position a div on a page

    Hi,

    It has come to my attention that I may in fact not be using the proper method for positioning all of my divs. I currently use margins to position everything... is this how I'm supposed to do it or is there a better way? I've just always done it like this.

    the code below can be viewed in action here: www.enviromark.ca/head/
    Code:
    /* CSS Document */
    * {
    padding: 0;
    margin: 0;
    outline: 0;
    }
    * html #pageContainer {
    height:100%;
    }
    * img {
    border: 0 
    }
    #pageContainer {
    min-height: 100%;
    }
    .clear {
    clear:both;
    font-size:0;
    line-height:0px;
    }
    #topText {
    position: relative;
    margin-top:75px;
    margin-left: 75px;
    }
    #logoC {
    margin-left: 175px
    }
    #bottomText {
    margin-left: 75px;
    margin-top: 67px
    }
    #links_BW {
    float: left;
    position: absolute;
    display: block;
    margin-left: 75px;
    margin-top: 25px;
    width: 70px;
    }
    #topBorder {
    position: relative;
    display: block;
    margin-top:75px;
    margin-left: 75px;
    }
    #contentarea {
    position: relative;
    margin-left: 155px;
    margin-top: 27px;
    margin-right: 150px;
    }
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Testing</title>
    
    
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <script language="JavaScript" type="text/javascript" src="js/dynamic_content.js"></script>
    <script language="JavaScript" type="text/javascript" src="js/nav_fade.js"></script>
    
    </head>
    
    <body onload="zxcInitImages('logoC','links_BW')">
    <div id="pageContainer">
    	<div id="topText"><img src="images/logoButtons/top_text.gif"></div>
    	<div id="logoC">
    		<img src="images/logoButtons/info_C.gif" >
    		<img src="images/logoButtons/YPP_C.gif" >
    		<img src="images/logoButtons/social_C.gif" >
    		<img src="images/logoButtons/med_C.gif" >
    		<img src="images/logoButtons/legal_C.gif" >
    		<img src="images/logoButtons/J2K_C.gif" >
    		<img src="images/logoButtons/street_C.gif" >
    	</div>
    	<div id="bottomText"><img src="images/logoButtons/bottom_text.gif"></div>
    	<div id="links_BW">
    		<img src="images/logoButtons/info_BW.jpg" onclick="ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/pages.css')">
    		<img src="images/logoButtons/YPP_BW.jpg" >
    		<img src="images/logoButtons/social_BW.jpg" >
    		<img src="images/logoButtons/med_BW.jpg" >
    		<img src="images/logoButtons/legal_BW.jpg" >
    		<img src="images/logoButtons/J2K_BW.jpg" >
    		<img src="images/logoButtons/street_BW.jpg" >
    
    	</div>
    	<div class="clear"></div>
    	<div id="contentarea"></div>
    </div>
    </body>
    </html>
    edit: Also feel free to comment on any other aspects of the coding, as this is a learning process
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    alright, I guess i'll continue doing this then... I don't know why Vic keeps getting annoyed with me for using margins.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Just remember that in IE6 sometimes the left margin doubles on a left-floated element! Something to be wary of when using margins.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    I shall keep that in mind

    I guess my question was 'is there any other way to do this?'
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #5
    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
    Quote Originally Posted by canadianjameson View Post
    alright, I guess i'll continue doing this then... I don't know why Vic keeps getting annoyed with me for using margins.
    I'm guessing because Javascript doesn't work with margins to well when it comes to calculating certain things.

    As to your code I would still use a list for your menus but you don't seem to listen so I won't bother telling you anymore.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    actually I tried it and had problems with it, so i went back for now because i had a deadline for presenting the layout (yesterday).

    I had another look at the situation in which you wanted me to remove the div and use the list... I need the 'id' of a container for a script to work, but i suppose i could add that to the <ul>... it just seems like adding more code for nothing.

    What's generally better, semantically correct or more code?
    Last edited by canadianjameson; 07-12-2007 at 11:22 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #7
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Semantically correct... although when you get to building huge pages I don't think you're going to worry as much. It's simply good practise to code semantically. It's like checking your blind spot on a car, not many people do it... but it should be done because it's the right thing to do (and can save lives).
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #8
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    I tried to change it to a list and it broke the script. I'll play around with it a bit later and get it semantically correct, but I have taken that in mind when doing further updates
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #9
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by canadianjameson View Post
    Also feel free to comment on any other aspects of the coding, as this is a learning process
    You cannot simultaneously absolutely position and float an element [1]. More correctly stated, when you do so the floating is ignored.

    You have this:
    Code:
    #links_BW {
    float: left;
    position: absolute;
    display: block;
    margin-left: 75px;
    margin-top: 25px;
    width: 70px;
    }
    which is equivalent to this:
    Code:
    #links_BW {
    position: absolute;
    display: block;
    margin-left: 75px;
    margin-top: 25px;
    width: 70px;
    }
    [1] http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo

  • #10
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Thank you for the link, I have bookmarked it and will read it in dept on Monday (i'm packing right now -- weekend shenanigans here I come!)

    I did remove, one at a time, the positioning and the float, and both caused the div to shift in different ways (one down, one to the left)... so it obviously isnt being ignored... what is happening?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  

    Posting Permissions

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