godpunk Posted March 1, 2005 Report Share Posted March 1, 2005 Hey everyone-I have a CSS template that I made that I'd like to use for a website. The issue here is that it's built for 1024x 768 resolution; therefore, any computer using a higher resolution than that sees my website in the top left corner of their browser. Is there any code that I can use to center the entire site in the center of the browser window? Thanks for any help.-godpunk Link to comment
Seph Posted March 1, 2005 Report Share Posted March 1, 2005 You can center it horizontally very easily by adding a:margin-left: 50%;margin-right: auto;to the main container selector.You will also need to add text-align:center; so that IE listens to that centering statement, it will treat the selector attribute that apparently affects text only. The downside to this is that any inherited text alignment in the contained selectors in the main container will be set to center, so you will need to specify from thereon where you want your text to be, right, center or left.Vertically however is not an easy thing to do as internet explorer will crap on your vertical alignment.Hope that helps.EDIT: I am sure they make much more sense at Simplebits Link to comment
godpunk Posted March 2, 2005 Author Report Share Posted March 2, 2005 Hmm...well I did what the link told me to, and no dice. Am I just being retarded? would posting the entire code here help?-godpunk Link to comment
wizard Posted March 2, 2005 Report Share Posted March 2, 2005 I thought to center it it would bebody {margin: 0 auto 0 auto;}But in order for that to work in Internet Explorer, you need to add as the first line<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Link to comment
Seph Posted March 2, 2005 Report Share Posted March 2, 2005 Or the html doctype for that matter. (and yes, Wizard, you couldve done it that way too ) Post the code, Godpunk, lets see what we can do. Link to comment
pwnzrzpat Posted March 3, 2005 Report Share Posted March 3, 2005 you merely need some code like this:body { text-align:center; margin:0; }#container { margin: 0 auto; }with your xHTML doctype on the top, and a container div with that id in the body.. Link to comment
Seph Posted March 3, 2005 Report Share Posted March 3, 2005 isnt that basically what has been said? :confused: Link to comment
pwnzrzpat Posted March 3, 2005 Report Share Posted March 3, 2005 isnt that basically what has been said? :confused:No...you said margin-left: 50%, and wizard didn't mention text-align center.Oh. BTW, you should change your text align for the things inside of the container div, else they be centered! Link to comment
Seph Posted March 3, 2005 Report Share Posted March 3, 2005 ergo, it had been said, right? even your extra tip... you seem to be posting only redundantly nowadays Link to comment
godpunk Posted March 4, 2005 Author Report Share Posted March 4, 2005 Ok, sorry for the delay; here is the code as it stands...the attempted modifications are included. Hopefully someone will be able to see where i went wrong!<html><head><title>A Treasure Trove of Crap</title><style type="text/css">A:link{ font-family: Verdana; font-size: 10; font-weight: bold; text-decoration: none; color:#FFF04E; }A:visited{ font-family: Verdana; font-size: 10; font-weight: bold; text-decoration:none; color:#FFF04E; }A:active{ font-family: Verdana; font-size: 10; font-weight: bold; text-decoration: line-through; color:#FFF04E; }A:hover{ font-family: Verdana; font-size: 10; font-weight: bold; color: white; text-decoration: none; } </style><style type="text/css"><!--BODY {font-family: Verdana;font-size: 10;color:black;scrollbar-face-color: #222222;scrollbar-highlight-color: #222222;scrollbar-3dlight-color: #222222;scrollbar-darkshadow-color: #222222;scrollbar-shadow-color: #222222;scrollbar-arrow-color: #FFF04E;scrollbar-track-color: #222222;}.container { margin-left: 50%; margin-right: auto; } .entriesdate { font-family: Verdana, Helvetica, Tahoma; font-size: 12 px; color:#FFFFFF; letter-spacing:0.1em; font-weight:bold; text-align:center;}.entriestitle { font-family: Verdana, Helvetica, Tahoma; font-size: 12 px; color:#000000; letter-spacing:0.1em; font-weight:bold; text-align:center;}.navtitle { font-family: Verdana, Helvetica, Tahoma; font-size: 12 px; color:#FFFFFF; text-decoration:none; letter-spacing:0.3em; font-weight:bold; text-align:center; }.sidebar { font-family: Verdana; font-size: 10 px; color:#000000;}--></STYLE></head><body> <div id="container"><body bgcolor="#000000"><img name="index" src="http://www.digikitten.com/playhousev2/files/godpunk/crap.jpg" STYLE="position: absolute; Z-INDEX: 1; LEFT: 0px; TOP: 0px"><div id="Layer1" style="position:absolute; left:115px; top:141px; width:535px; height:409px; overflow: auto; padding: 5px; z-index:2; filter: chroma(color=#222222);"> <p> </p><Blogger><BlogItemTitle><p class="entriestitle"><u><$BlogItemTitle$></u></p></BlogItemTitle><BlogDateHeader><p class="entriesdate"><$BlogDateHeaderDate$></p></BlogDateHeader><$BlogItemBody$><div align="right"><BlogItemCommentsEnabled> <a href="<$BlogItemCommentCreate$>" <$BlogItemCommentFormOnClick$>> <$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div><div align="center">__________________________________________________________________</div><Br></blogger></div><div id="Layer1" style="position:absolute; left:769px; top:141px; width:195px; height:419px; overflow:auto; z-index:2; filter: chroma(color=#222222)"> <p class="navtitle">About Adam</p> <div align="center"><p class="sidebar">I'm 22 and in my senior year at Carroll College in Helena, Montana. After I graduate, I hope to spend my career getting Democrats elected.</p></div><p class="navtitle">Today I Feel...</p><div align="center"><a href="http://www.unkymoods.com" target="_top"><img src="http://www.unkymoods.com/moodimgsrv.php?mID=44758" border=0></a></div><p class="navtitle">Instant Messenger</p><div align="center"><p class="sidebar">click to add me</p></div><div align="center"><!-- Begin Online Status Indicator code --><!-- http://www.onlinestatus.org/ --><A HREF="http://snind.gotdns.com:8080/message/msn/rhythm_rock_shocker@hotmail.com"><IMG SRC="http://snind.gotdns.com:8080/msn/rhythm_rock_shocker@hotmail.com"align="absmiddle" border="0" ALT="MSN Online Status Indicator"onerror="this.onerror=null;this.src='http://snind.gotdns.com:8080/image/msnunknown.gif';"></A><!-- End Online Status Indicator code --><!-- Begin Online Status Indicator code --><!-- http://www.onlinestatus.org/ --><A HREF="aim:goim?screenname=iliveforweez"><IMG SRC="http://snind.gotdns.com:8080/aim/iliveforweez"align="absmiddle" border="0" ALT="AIM Online Status Indicator"onerror="this.onerror=null;this.src='http://snind.gotdns.com:8080/image/aimunknown.gif';"></A><!-- End Online Status Indicator code --><!-- Begin Online Status Indicator code --><!-- http://www.onlinestatus.org/ --><A HREF="ymsgr:sendIM?godpunk935"><IMG SRC="http://snind.gotdns.com:8080/yahoo/godpunk935"align="absmiddle" border="0" ALT="Yahoo Online Status Indicator"onerror="this.onerror=null;this.src='http://snind.gotdns.com:8080/image/yahoounknown.gif';"></A><!-- End Online Status Indicator code --></div> <p> </p> <p> </p> </div></body></html></div> </body>-godpunk Link to comment
Tadis Posted March 4, 2005 Report Share Posted March 4, 2005 Try this: <html><head> <title>A Treasure Trove of Crap</title> <style type="text/css"> a:link { font-family: Verdana; font-size: 10; font-weight: bold; text-decoration: none; color:#FFF04E; } a:visited { font-family: Verdana; font-size: 10; font-weight: bold; text-decoration:none; color:#FFF04E; } a:active { font-family: Verdana; font-size: 10; font-weight: bold; text-decoration: line-through; color:#FFF04E; } a:hover { font-family: Verdana; font-size: 10; font-weight: bold; color: white; text-decoration: none; } body { font-family: Verdana; font-size: 10; background-color: #000; color:black; scrollbar-face-color: #222222; scrollbar-highlight-color: #222222; scrollbar-3dlight-color: #222222; scrollbar-darkshadow-color: #222222; scrollbar-shadow-color: #222222; scrollbar-arrow-color: #FFF04E; scrollbar-track-color: #222222; } #container { position: absolute; left: 50%; margin-left: -515 } .entriesdate { font-family: Verdana, Helvetica, Tahoma; font-size: 12 px; color:#FFFFFF; letter-spacing:0.1em; font-weight:bold; text-align:center; } .entriestitle { font-family: Verdana, Helvetica, Tahoma; font-size: 12 px; color:#000000; letter-spacing:0.1em; font-weight:bold; text-align:center; } .navtitle { font-family: Verdana, Helvetica, Tahoma; font-size: 12 px; color:#FFFFFF; text-decoration:none; letter-spacing:0.3em; font-weight:bold; text-align:center; } .sidebar { font-family: Verdana; font-size: 10 px; color:#000000; } </style></head><body> <div id="container"> <img name="index" src="http://www.digikitten.com/playhousev2/files/godpunk/crap.jpg" STYLE="position: absolute; Z-INDEX: 1; LEFT: 0px; TOP: 0px"> <div class="Layer1" style="position:absolute; left:115px; top:141px; width:535px; height:409px; overflow: auto; padding: 5px; z-index:2; filter: chroma(color=#222222);"> <p></p> <Blogger> <BlogItemTitle> <p class="entriestitle"> <u><$BlogItemTitle$></u> </p> </BlogItemTitle> <BlogDateHeader> <p class="entriesdate"><$BlogDateHeaderDate$></p> </BlogDateHeader> <$BlogItemBody$> <div align="right"> <BlogItemCommentsEnabled> <a href="<$BlogItemCommentCreate$>" <$BlogItemCommentFormOnClick$>> <$BlogItemCommentCount$> comments</a> </BlogItemCommentsEnabled> </div> <div align="center">__________________________________________________ ________________</div> </Blogger> </div> <div class="Layer1" style="position:absolute; left:769px; top:141px; width:195px; height:419px; overflow:auto; z-index:2; filter: chroma(color=#222222)"> <p class="navtitle">About Adam</p> <div align="center"> <p class="sidebar"> I'm 22 and in my senior year at Carroll College in Helena, Montana. After I graduate, I hope to spend my career getting Democrats elected. </p> </div> <p class="navtitle">Today I Feel...</p> <div align="center"> <a href="http://www.unkymoods.com" target="_top"> <img src="http://www.unkymoods.com/moodimgsrv.php?mID=44758" border=0> </a> </div> <p class="navtitle">Instant Messenger</p> <div align="center"> <p class="sidebar">click to add me</p> </div> <div align="center"> <!-- Begin Online Status Indicator code --> <!-- http://www.onlinestatus.org/ --> <a href="http://snind.gotdns.com:8080/message/msn/rhythm_rock_shocker@hotmail.com"> <img src="http://snind.gotdns.com:8080/msn/rhythm_rock_shocker@hotmail.com" align="absmiddle" border="0" ALT="MSN Online Status Indicator" onerror="this.onerror=null;this.src='http://snind.gotdns.com:8080/image/msnunknown.gif';"> </a> <!-- End Online Status Indicator code --> <!-- Begin Online Status Indicator code --> <!-- http://www.onlinestatus.org/ --> <a href="aim:goim?screenname=iliveforweez"> <img src="http://snind.gotdns.com:8080/aim/iliveforweez" align="absmiddle" border="0" ALT="AIM Online Status Indicator" onerror="this.onerror=null;this.src='http://snind.gotdns.com:8080/image/aimunknown.gif';"> </a> <!-- End Online Status Indicator code --> <!-- Begin Online Status Indicator code --> <!-- http://www.onlinestatus.org/ --> <a href="ymsgr:sendIM?godpunk935"> <img src="http://snind.gotdns.com:8080/yahoo/godpunk935" align="absmiddle" border="0" ALT="Yahoo Online Status Indicator" onerror="this.onerror=null;this.src='http://snind.gotdns.com:8080/image/yahoounknown.gif';"> </a> <!-- End Online Status Indicator code --> </div> <p> </p> <p> </p> </div> </div></body></html> Link to comment
pwnzrzpat Posted March 4, 2005 Report Share Posted March 4, 2005 I have an issue with your scrollbar color CSS that is for IE...But anyways, you didn't try what I suggested. (and the thing wizard said)Anyways, I can't read your code wholly, because it stretches the layout so far I can't possible scroll and view at the same time on my 1024x768 12" screen... Link to comment
godpunk Posted March 4, 2005 Author Report Share Posted March 4, 2005 Hi Tadis-Thanks for the work you did...unfortunately I can't try it out because I can't seem to copy the new code in the browser! :S Is there any way you could dump it into a text file and attach it to the boards? It's kinda lame how 'Select All' won't work in the window without selecting the entire page. Thanks!-godpunk Link to comment
Tadis Posted March 4, 2005 Report Share Posted March 4, 2005 here you go bud, just rename to htmlNew.txt Link to comment
godpunk Posted March 5, 2005 Author Report Share Posted March 5, 2005 Thanks Tadis, that worked great!Now I know Seph said vertical alignment is harder because of explorer being finicky, but does anyone know anything about this? I'd like to align it vertically too, if possible. Thanks again for all your help, everyone!-godpunk Link to comment
pwnzrzpat Posted March 5, 2005 Report Share Posted March 5, 2005 if you are using HTML and not xHTML you can do but I highly unrecommened it!!! Link to comment
godpunk Posted March 5, 2005 Author Report Share Posted March 5, 2005 Do you know where in the code I would place that? Thanks.-godpunk Link to comment
Seph Posted March 5, 2005 Report Share Posted March 5, 2005 God, someone needs to fix this code view. I couldnt read past teh first paragraph... and i have a considerably big res... GodPunk: I suggest you avoid using the vertical alignment as the only way to go about it (That i have encountered) is to give the container a fix height (this way you know exactly where you place it) which will ruin accesibility (people will see a messed up site when zooming, and when visiting with smaller than planned browsers) Personally, I would avoid this method. If you absolutely must have vertical alignment and cannot do without it, then a table-based hack is probably the best way to go. Otherwise, I'd just put some extra padding on the top of the body, as vertical centering will only make much difference if you have a gimongous monitor (and they deserve to be punished because they make me jealous anyway ) Link to comment
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now