Hello all! I'm trying to re-make the current design of http://www.game-patch.org (dating-sim translation group) which I'm webmaster/designer on. If you look at the current page, you'll see that it's using DIV's and TABLE's all around the place. Which are not very pretty to look at (coding-wise). To explain my problem better, I'll say something about some of the structure of (or at least what I'm trying to do here) the layout. Here's what I've been doing so far: <div id="container"> <div id="header"> <img id="logo" width="236" height="128" src="images/primula_css/header_logo.jpg" alt="GamePatch" /> <div id="navHeader_container"> <ul> <li><img src="images/primula_css/header_spacer1_off.jpg" alt="defualt style" /></li> <li><img src="images/primula_css/header_rin_off.jpg" alt="rin style" /></li> <li><img src="images/primula_css/header_sia_off.jpg" alt="sia style" /></li> <li><img src="images/primula_css/header_nerine_off.jpg" alt="nerine style" /></li> <li><img src="images/primula_css/header_kaede_off.jpg" alt="kaede style" /></li> <li><img src="images/primula_css/header_asa_off.jpg" alt="asa style" /></li> <li><img src="images/primula_css/header_primula.jpg" alt="primula style" /></li> </ul> </div> </div> </div> HTML: PS. I'm currently working on the header of the page. It looks nice and all in both FF and IE, but when resizing the browsers the elements do move under each other (when resizing from the right to left). This doesn't happen when I'm using TABLES, and I've no clue how to fix this. I'm also getting pretty tired of trying and failing for hours (just waste of time) so that's why I'm pleading to you guys on this forum for some help and directions. It's also worth mentioning that I'm still a noob when it comes to web standards and DIV's. Oh yes. I've been looking up articles/tutorials, but didn't find anything that seems to answer my question. Thanks.
Can do. The Template: http://www.game-patch.org/e107_themes/v3_revisted/ The CSS File: http://www.game-patch.org/e107_themes/v3_revisted/style.css Thanks!
I suggest adding a min-width to your #container. #container { min-width:600px; } Min-width doesn't work in IE6, but I think it's a good solution for the rest of the browsers. Two other things I noticed when looking through your code: * I don't think you need the "position:relative;" on #container. Try commenting it out (using /* and /*) for now. * Consider using conditional comments (http://www.quirksmode.org/css/condcom.html) instead of the JavaScript to provide a different stylesheet for IE. I've found conditional comments to be more flexible, and more reliable than JS browser detectors.
Thanks a lot! Actually, I tried out min-width on the main container before even reading this post, and it works fine in FF and IE7 (I don't have IE6 to test it on) so that fixed my main issue. I got another question: Is there a way to center an element like the <center> way/text-align: center (css way). I'm trying to center a <ul><li>data here</li></ul> but I'm pretty stuck with that. Edit: It's a vertical list like: item 1 item 2 item 3 (just within a list) =) Thank you!
You know there's boxes and inlines, right? Ul's are boxes. To center boxes, you use margins like margin: whatevertopandbottomnumber auto; Auto for the sides means the browser sets the same amount of margin on each side, regardless of total available space-- centers! With lists, I end up wanting funky margins so I get something like margin: 10px auto 20px; 10 top, 20 bottom, auto sides. This only works when something has a set width. "Auto" width doesn't work. The container it's in I believe does not have to have a set width-- I think that because you can center things to the body which changes with the viewport. Inlines center with text-align:center <center> tags, like the pandas, must die. : )