roondog Posted December 19, 2006 Share Posted December 19, 2006 The title might be confusing but my problem isn't easy to describe quickly. Here goes, I'm trying to get some things in the middle of my page. I've seperated the content into 3 divs.Left is some link buttons, middle is an img and right is some more link buttons. I haven't actually added the buttons to the code yet and the colors in the code are just so I can see anything can someone help me sort this out. I will also repeat something similar underneath as well. <html><head><style type="text/css">body{text-align:center;}div.container{margin-top:-15px;width: 800px;height:600px;background-color: yellow;}div.header{width: 800px;}div.main{width: 600px;height: 200px;margin-top: 0px;background-color: green;}div.linksleft{margin-left: -100px;width: 150px;height: 200px;background-color: black;position: absolute;z-index: 1;}div.linksright{margin-right: -100px;width: 150px;height: 200px;background-color: black;position: absolute:z-index: 3;}img.logo{width: 150px;height: 200px;position: absolute;z-index: 2;}</style></head><body><div class="container" align="center"><div class="header" align="center"><img src="http://tevershamhotspurs.250free.com/headers/title.jpg" /></div><div class="main"><div class="linksleft" >links</div><img class="logo" src="http://tevershamhotspurs.250free.com/pictures/pheonix4.jpg" /><div class="linksright" >links</div></div></div></body></html> Link to comment Share on other sites More sharing options...
jlhaslip Posted December 19, 2006 Share Posted December 19, 2006 You might want to google on three column layouts using fixed sidebar sizes and a fixed or floating centre column. CSSPLAY.co.uk has a couple designs. There would be several ways to do this. Try to float the left and right columns in their own direction and centre the middle column. Have a look at that approach and let us know how it goes. Link to comment Share on other sites More sharing options...
roondog Posted December 20, 2006 Author Share Posted December 20, 2006 I just floated them left and right. It seems ok on work computer with ie6 haven't checked on anything else. Cheers for the help.Finished article can be seen at Here now to finish the other pages. Link to comment Share on other sites More sharing options...
jlhaslip Posted December 21, 2006 Share Posted December 21, 2006 div.linksleft{float: left;margin-left: -225px; // delete this. It is pushing the left sidebar too far leftmargin-top: 50px;line-height: 10px;width: 150px;height: 200px;position: absolute // delete this. Can't float and position absolute, tooz-index: 1;} Link to comment Share on other sites More sharing options...
roondog Posted December 21, 2006 Author Share Posted December 21, 2006 Thanks alot for that. Link to comment Share on other sites More sharing options...
roondog Posted December 21, 2006 Author Share Posted December 21, 2006 It looks terrible in firefox and opera. where hasit gone wrong Link to comment Share on other sites More sharing options...
jlhaslip Posted December 22, 2006 Share Posted December 22, 2006 Lose the position:absolute and negative margins. Handle the next set of div's as per above. Float one left, the other one right and centre the middle one. Link to comment Share on other sites More sharing options...
roondog Posted December 23, 2006 Author Share Posted December 23, 2006 Still looks terrible in firefoxthis is the html <!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" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /><style type="text/css">img{border:0px;}div.header{width: 800px;}div.main{width: 600px;height: 200px;margin-top: 0px;text-align: center;background-color: white;}div.linksleft{float: left;margin-top: 50px;line-height: 75px;width: 150px;height: 200px;}div.linksright{float: right;margin-right: 0px;margin-top: 50px;width: 150px;height: 200px;}img.logo{margin-left: -75px;width: 150px;height: 200px;}div.main2{text-align: center;margin-top: -30px;width: 780px;height: 200px;}div.team{margin-top: 50px;float: left;}div.intro{float: left;margin-left: -50px;font-size: 12pt;border: solid yellow 1px;width: 300px;height: 100%;}div.shield{float:right;margin-left: 190px;margin-top: 50px;}p.roon{float:left;margin-left: 160px;color: gray;font-size: 8pt;}div.footer{margin-top: 20px;}</style><link rel="stylesheet" type="text/css"href="/stylesheet.css" /><title>THFC Home</title></head><body><div class="container" align="center"><div class="header" align="center"><img src="/headers/title.jpg" alt="Banner" /></div><div class="main"><div class="linksleft" ><a href="/mainpages/fixtures.html"><img src="/buttons/fixtures.jpg" alt="fixtures" /></a><br /><a href="/mainpages/news.html"><img src="/buttons/news.jpg" alt="news" /></a><br /><a href="/mainpages/table.html"><img src="/buttons/table.jpg" alt="table" /></a><br /><a href="/mainpages/profiles.html"><img src="/buttons/players.jpg" alt="players" /></a><br /><a href="/mainpages/stats.html"><img src="/buttons/statistics.jpg" alt="stats" /></a><br /></div><img class="logo" src="/pictures/pheonix4.jpg" alt="logo" /><div class="linksright" ><a href="/mainpages/info.html"><img src="/buttons/info.jpg" alt="info" /></a><br /><a href="/mainpages/archive.html"><img src="/buttons/archive.jpg" alt="archive" /></a><br /><a href="/mainpages/wallpaper.html"><img src="/buttons/downloads.jpg" alt="downloads" /></a><br /><a href="http://www.a-free-guestbook.com/guestbook.php?username=Tevershamhotspurs"><img src="/buttons/guestbook.jpg" alt="guestbook" /></a><br /><a href="/mainpages/links.html"><img src="/buttons/links.jpg" alt="links" /></a><br /></div></div><div class="main2"><div class="team"><img src="/pictures/teamphoto.jpg" alt="teamphoto" /><br /></div><div class="intro"><p align="center">Welcome to the home of Teversham Hotspurs Football Club. Created from the death of Cherry Hinton reserves and started life in 2005 in the <a href="http://135.196.23.137/pls/gn/V3_League.HomePage?partner_id=154">Tucker Gardner Alliance Sunday league</a>. In the first season Teversham won the second division dropping only two points. In the 2006/7 season Teversham started in division one looking to continue their success and make the club's history an illustrious one.</p></div><div class="shield"><img src="/pictures/shield.jpg" alt="shield" /></div></div><div class="footer"><img src="/pictures/border.jpg" alt="border" /></div><div class="validate"><div class="xhtml"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="xhtml" /></div><p class="roon">Designed by Roondog Interweb Design<br />MMVI</p><div class="css"><img src="http://www.w3.org/Icons/valid-css-blue" alt="css" /></div></div></div></div></body></html> and css body {font-family: times;text-align:center;}.container{height:100%; width: 800px;text-align: center;}.banner {float: left;} div.links {float:left;margin-top: -25px;margin-left: 0px;width:800px;min-width: 800px;font-family: Comic Sans MS, Comic Sans MS5, cursive;font-size: .35cm;} div.validate{margin-top: 5px;}div.xhtml{float:left;}div.css{float:right;}a:link {color : black; } a:visited {color : black; } a {text-decoration:none}a:hover {text-decoration:underline} Link to comment Share on other sites More sharing options...
yoshida Posted December 23, 2006 Share Posted December 23, 2006 My comment will be hardly constructive, but it will outline what you just experienced: IE doesn't play by the rules. If you write a site that works for IE, chances are your code doesn't comply with W3 standards (and, more important yet, look like crap in other browsers).Firefox and Opera do play by the rules (especially Opera). It's better to design a page for Opera and adapt it to IE (just because it's one of the major browsers your target audience will be using) than the other way around. Else you'll learn how to write 'bad css' for a 'bad browser'.Now for some constructive advise. IE and Firefox handle 'float' differently. Also, if you want to center a div in Firefox, you should add 'margin-left: auto;' and 'margin-right: auto;'. The host div (or body) will have to include 'text-align: center' for IE to comply with your creative thinking.So, in short, the container can be aligned in Mozilla-like browsers by adding 'margin-left: auto;' and 'margin-right: auto;'. See what it does and go from there.Tinker around and have fun.EDIT: some samples Link to comment Share on other sites More sharing options...
roondog Posted December 28, 2006 Author Share Posted December 28, 2006 Thanks for all the help. I've now got it looking right in IE, FF and Opera so it should look right for everyone that looks at it. Please let me know if you spot anything wrong with it. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now