SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    London
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    html and body tag tricks

    Hi there !

    Im just playing around with an idea, im trying to get this page to have a consistant border around the whole window, and im trying to achive it by applying css to the html and body tags only, its become a bit of a struggle.. i have managed to get perfect borders around the top, right and left edges of the window, but for the life of me, i cannot seam to get the bottom of the window to play ball !! if i add "margin-bottom: xxpx" it just ignores it - the only way its working is if i apply a percentage to the bottom.. i dont mind if the border is px or a % - i just want it to be the same...

    any ideas anyone ? Check it out...

    http://www.thesparklab.com/test_csshtml.html

  2. #2
    SitePoint Evangelist
    Join Date
    Apr 2006
    Location
    Halifax, Canada
    Posts
    498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure its such a good idea to apply these kinds of properties to body and html elements because different browsers render them differently. But you can do what you want in Firefox at least using absolute positioning:

    Code:
    <!--
    		html {
    			overflow: hidden;
    			max-height: 100%;
    			margin: 0;
    			padding: 0;
    			background-color: black;
    			height: 100%;
    		}
    
    		body {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    			background: #434343;
    			overflow: auto;
    		}
    		-->
    Paul Butler.org
    JSSpamBlock - Reduce WordPress spam.

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    depends what you want if the content is higher as screen?

    page extends down
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	
    	html,body{height:100%;}
    	
    	*{padding:0;margin:0;}
    	
    	.x{
    	border:20px solid #000000;
    	border-top:none;
    	background:#ff6600;
    	margin-top:-20px;
    	}
    	
    	* html .x{height:100%;}
    	head+body .x{min-height:100%;}
    	
    	.x p{padding:5px;}
    	
    	.y{height:40px;background:#000000;}
    	</style>
    </head>
    <body>
    
    <div class="x">
    <div class="y">&nbsp;</div>
    <p>start<br />
    <!--  
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    -->
    end
    </p></div>
    
    </body>
    </html>
    page starts to scroll

    PS IE 6 is the only browser that can make effective use of the latest technology, the xml prolog

    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	
    	html,body{height:100%;}
    	
    	*{padding:0;margin:0;}
    	
    	.x{border:20px solid #000000;overflow:auto;}
    	
    	* html .x{width:100%;height:100%;background:#ff6600;}
    	
    	head+body .x{
    	position:fixed;
    	top:0;
    	left:0;
    	right:0;
    	bottom:0;
    	}
    	
    	.x p{padding:5px;}
    	</style>
    </head>
    <body>
    
    <div class="x">
    <p>start<br />
    <!-- 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    end
    
    </div>
    
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    London
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice one - i didnt think of that Paulgb.. sweet ! Basically this site is going to be a personal site where i really want to see what i can do with css - without the restrictions of IE and other shoite browsers - i work on a mac, and it looks sweet from all aspects. I want to use the least amount of code as possible, so while All4nerds - your solution works... i wanted to achive this effect without the use of extra divs - oh and <br /> tags :-) hehe.. Cheers guys.

    m


Bookmarks

Posting Permissions

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