Thread: HTML/CSS Puzzle
right... have website, validated strict html, utf-8 , got css validated level 3 standard w3c.
unfortunately, can't work out i'm getting space from.
<url>.
i'm using javascript point different browsers different css files, browser i'm using development <browser&version>, currents *works* firefox , sort of works ie. can't test on ie because ie doesn't support linux >.<; nor safari.
on page, down right hand side, you'll see thick black line. (it's body). now, have div tag use container rest of website instead of using body.
set site reaches 100%, i've tried setting max-widths , min-widths, no avail, can't seem rid of 200px worth of black space.
think might have floats i'm using, i'm not sure. i've tried pretty every way can think of rid of 200px worth of space nothing has worked.
want have crack @ whip?
html 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" lang="en" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title><sitename></title> <script type="text/javascript" src="jscript/csschange.js"></script> <link rel="shortcut icon" href="<url>/favicon.ico" /> <link rel="stylesheet" type="text/css" href="h<url>/css/fonts.css" /> </head> <body> <div class="container"> <div class="abovediv"> <div class="headbanner"> <div class="<a classname"> <h1><a header></h1> </div> <div class="tagline"> <h2><a tagline></h2> </div> </div> <div class="nav"> <div class="navblock"> <a href="index.html">home!</a> | no more links! </div> </div> </div> <div class="central"> <div class="leftdiv"></div> <div class="middlediv"> <br /> <div class="textblock"> <h3>greetings </h3> <p> welcome <site> site. hope <blurb>.</p> <p><b><i>the administrator</i></b></p> </div> </div> <div class="rightdiv"> <div class="lighttextblock"> <h4>announcements</h4> <p class="announcements"> website in construction phase</p> </div> <div class="badgecontainer"> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="valid css!" /> </a> <a href="http://validator.w3.org/check?uri=referer"> <img src="http://www.w3.org/icons/valid-xhtml10" alt="valid xhtml 1.0 strict" height="31" width="88" /> </a> <p class="testedwith"> tested opera 10.60, firefox 3.0, midori 0.1, </p> </div> </div> </div> <div class="belowdiv"> <div class="footdiv"> <script type="text/javascript" src="jscript/date.js"></script> <script type="text/javascript" src="jscript/detectfirefox.js"></script> <script type="text/javascript" src="jscript/detectie.js"></script> <script type="text/javascript" src="jscript/detectopera.js"></script> </div> </div> </div> </body> </html>code:/*maincss files*/ body { background-color: black; } div.container { position: absolute; top: -21px; /* mysterious gap caused doctype work around!*/ left: 0px; height: 100%; width: 100%; max-height: 1200px; min-height: 500px; max-width: 1200px; min-width: 500px; } div.abovediv { position: relative; top: 0px; left: 0px; height: 30%; min-height: 100px; max-height: 200px; width: 100%; background-color: green; } div.headbanner { position: relative; top: 0px; height: 80%; min-height: 80px; max-height: 170px; left: 0px; width: 100%; background-color: #83eac8; } div.<div name> { position: relative; top: 0px; height: auto; width: auto; left: 30px; } div.tagline { position: relative; top: -30px; height: auto; width: auto; left: 120px; } div.nav { position: relative; height: 20%; max-height: 40px; min-height: 30px; left: 0px; width: 100%; background-color: #599f88; } div.central { position: relative; top: 0%; left: 0px; height: 60%; min-height: 200px; max-height: 800px; width: 100%; min-width: 400px; background-color: #599f88; } div.leftdiv { position: relative; left: 0px; top: 0px; height: 100%; min-height: 300px; width: 20%; max-width: 200px; min-width: 50px; background-color: #58d4ab; float: left; display: inline; } div.middlediv { position: relative; left: 0%; top: 0px; height: 100%; min-height: 300px; width: 60%; max-width: 600px; min-width: 200px; background-color: white; display: inline; float: left; } div.textblock { position: relative; left: 0px; top: 0px; height: auto; width: auto; padding: 10px; } div.rightdiv { position: relative; left: 0%; top: 0px; height: 100%; min-height: 300px; width: 20%; max-width: 200px; min-width: 50px; background-color: #58d4ab; float: left; display: inline; } div.lighttextblock { position: relative; left: 0px; top: 0px; height: auto; width: auto; margin-left: 10px; margin-top: 10px; margin-right: 5px; margin-bottom: 5px; padding-left: 5px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; background-color: #9eead1; } div.badgecontainer { position: relative; height: auto; width: auto; left: 0px; top: 0px; margin-left: 10px; margin-top: 0px; margin-right: 5px; margin-bottom: 5px; } div.belowdiv { position: relative; top: 0px; left: 0px; height: 5%; width: 100%; background-color: #599f88; } div.footdiv { position: relative; top: 0px; left: 0px; padding-left: 5px; padding-top: 5px; height: auto; width: auto; }
hello!
since didn't reset of margins , paddings, you'll hit different standard values different browsers have. recommend adding following top of css file, fix issue:
after you've done have define few paddings , margins want have them, relied upon default values main browser.code:* { margin: 0; paddign: 0; }
that's why start above in css file, don't have go , recreate of wanted whitespace regions.
happy codin'!
Forum The Ubuntu Forum Community Ubuntu Specialised Support Development & Programming Programming Talk HTML/CSS Puzzle
Ubuntu
Comments
Post a Comment