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 5 of 5
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    div elements and placement

    I am designing my works website from the ground up and I am having some problems doing one of the things that I thought would be simple. I am post in my test code below so you can see what I am trying to do...in the code is also my two questions.

    I will restate my questions here too though....
    1) How can I get a my "block" (div element) to start at the very top left of the page?
    2) Why does my height of my block not work when the width does?


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    		<title>Untitled Page</title>
    		<style>
    			#test {
    				background-color: black;
    				color: white;
    				top: 0px;
    				left:0px;
    				margin: 0px;
    				height: 40%;
    				width: 50%;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div id="test">
    			<p>How can I get this block so it is at the very top left of                                   this page?</p>
    			<p>I set the height of the block at 40% of the page height but that does not work like I though it would even though the width part does work...So how do I get that part to work?</p></p>
    		</div><!-- close "test" -->
    	</body>
    
    </html>
    Thanks to all that take the time to read this post...

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by dcanup View Post
    1) How can I get a my "block" (div element) to start at the very top left of the page?
    use

    Code:
    body{
    padding:0;
    margin:0;
    }
    Quote Originally Posted by dcanup View Post
    2) Why does my height of my block not work when the width does?
    use this

    Code:
    body{
    padding:0;
    margin:0;
    
    height:600px;
    width:800px; 
    
    }
    Last edited by abduraooft; 05-24-2007 at 02:28 PM.

  • #3
    New Coder
    Join Date
    Dec 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I should have though of the margin of the body... ...thanks

    So to get the %'s to work I have to have a set size for the page? And how bad does that effect the usability of the site?

  • #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
    It doesn't. Thats the way to do things. To set a percentage height the parent element also needs to have a set height though the better thing to do would be to use min-height so try something like this
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Untitled Page</title>
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    height:100%;
    }
    #test {
    background-color: black;
    color: white;
    min-height: 40%; /*this way the box will resize in height if more content is added or the font-size is resized*/
    width: 50%;
    }
    #test p {
    margin:0;
    padding:10px;
    }
    /*hide from IE Mac\*/
    * html #test { /*fakes min-height in IE6 and below*/
    height:40%;
    }
    /*end hide*/
    </style>
    </head>
    <body>
    <div id="test">
    	<p>How can I get this block so it is at the very top left of this page?</p>
    	<p>I set the height of the block at 40% of the page height but that does not work like I though it would even though the width part does work...So how do I get that part to work?</p>
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by dcanup View Post
    Code:
    			#test {
    				background-color: black;
    				color: white;
    				top: 0px;
    				left:0px;
    				margin: 0px;
    				height: 40%;
    				width: 50%;
    			}
    Just an FYI, but the top and left properties don’t do anything except for elements that are relatively, absolutely, or fixed positioned via the position property. You can also get rid of the px, if you want, for values of zero; the number zero doesn’t require a unit.

    Quote Originally Posted by dcanup View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    I would use HTML instead. See this recent post.

    Quote Originally Posted by abduraooft View Post
    use

    Code:
    body{
    padding:0;
    margin:0;
    }
    I would set all padding and margins to zero at the start of your primary style sheet from now on. This way, you don’t get hit by unexpected defaults, which may vary from browser to browser.

    Code:
    * { margin: 0; padding: 0; }
    Of course, this means that you’ll have to explicitly restore desired margins, but you’ll have the advantage of knowing what they are (since you set them) and that the default is zero. As an example, you may want to restore the paragraph margins, as shown below.

    Code:
    * { margin: 0; padding: 0; }
    p { margin: 1em; }
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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