Ok, I'm sure this has to do with CSS. I'm trying to make a very simple XHTML document and format it with CSS. Sounds easy enough, but I can't think of how to do some of the layout stuff.
For example, how would you put a <div> inside another <div> that doesn't exist? Ex: You have <div id="nav">, <div id="search">, etc. and then you want to put those inside another div, <div id="side">. However, the side div doesn't exist because it might be layed out differently in other alternate CSS's.
Another, some sites place there body content at the top of the HTML document and the nav towards the bottom. However when displayed, the nav is on the top. I think I know how that's done but what exacly do they do?
Boy that sounds confusing.. If you fallow do you have any ideas? ThanksHumm..to extend on the first question. How would you insert more HTML code that doesn't exist before or after a div? Let's say I have <div id="title"> and I want to put a image before it and some more text after. I know I could just hard code this in but I'm going to have alternate CSS that won't need the image, etc. ThanksWell, to answer that question, slightly, design related images are usually implemented as background images. Also, Extra <div>s don't really hurt anything. Just don't use them in the alternate stylesheets.Ya, I kinda figured I'd have to just put everything in a div were I want it. It's just that if it's in a div for like the side but for a different template/css you want it in the header, how would you do that. I'll explain, lets say you have:
<div id="header">Title</div>
<div id="middle">
<div id="side">
<div id="search">Search Form</div>
<div id="navigation">Links</div>
</div>
<div id="content">Main Body Content Here</div>
</div>
<div id="footer">Copyright</div>
But for a different template/design/css, whatever, you want it like on the right side of the header.
<div id="header">
<div id="title">Title</div>
<div id="search">Search Form</div>
</div>
<div id="middle">
<div id="side">
<div id="navigation">Links</div>
</div>
<div id="content">Main Body Content Here</div>
</div>
<div id="footer">Copyright</div>
Without having to make a different template, how can I do this with CSS? I was thinking about just having each secton seprate and then putting them were they need to go with CSS. Ex:
<div id="header">Title</div>
<div id="search">Search Form</div>
<div id="navigation">Links</div>
<div id="content">Main Body Content Here</div>
<div id="footer">Copyright</div>
That way it's not hard coded as to where things are positioned. It would help down the road in case we want to change design, simply a new CSS. Let me know if you need more explination. Thanks!!Well, I think just take a page from CSS Zen Garden (<!-- m --><a class="postlink" href="http://www.csszengarden.com/">http://www.csszengarden.com/</a><!-- m -->) and add a lot of nested <div>s... you haven't made the styles yet, have you? There is no cross-browser CSS to add markup, though.I'll have to take a look at that. Do you think just setting the postion with top, bottom, left, and right would work? In combination with height and width.
Also, how can I layer two seprate divs without nesting? Like if you have:
<div id="nav"></div>
<div id="side"></div>
How would you have nav sit on top of side?
Thanks for your help. I've got way too many questions. LOL
For example, how would you put a <div> inside another <div> that doesn't exist? Ex: You have <div id="nav">, <div id="search">, etc. and then you want to put those inside another div, <div id="side">. However, the side div doesn't exist because it might be layed out differently in other alternate CSS's.
Another, some sites place there body content at the top of the HTML document and the nav towards the bottom. However when displayed, the nav is on the top. I think I know how that's done but what exacly do they do?
Boy that sounds confusing.. If you fallow do you have any ideas? ThanksHumm..to extend on the first question. How would you insert more HTML code that doesn't exist before or after a div? Let's say I have <div id="title"> and I want to put a image before it and some more text after. I know I could just hard code this in but I'm going to have alternate CSS that won't need the image, etc. ThanksWell, to answer that question, slightly, design related images are usually implemented as background images. Also, Extra <div>s don't really hurt anything. Just don't use them in the alternate stylesheets.Ya, I kinda figured I'd have to just put everything in a div were I want it. It's just that if it's in a div for like the side but for a different template/css you want it in the header, how would you do that. I'll explain, lets say you have:
<div id="header">Title</div>
<div id="middle">
<div id="side">
<div id="search">Search Form</div>
<div id="navigation">Links</div>
</div>
<div id="content">Main Body Content Here</div>
</div>
<div id="footer">Copyright</div>
But for a different template/design/css, whatever, you want it like on the right side of the header.
<div id="header">
<div id="title">Title</div>
<div id="search">Search Form</div>
</div>
<div id="middle">
<div id="side">
<div id="navigation">Links</div>
</div>
<div id="content">Main Body Content Here</div>
</div>
<div id="footer">Copyright</div>
Without having to make a different template, how can I do this with CSS? I was thinking about just having each secton seprate and then putting them were they need to go with CSS. Ex:
<div id="header">Title</div>
<div id="search">Search Form</div>
<div id="navigation">Links</div>
<div id="content">Main Body Content Here</div>
<div id="footer">Copyright</div>
That way it's not hard coded as to where things are positioned. It would help down the road in case we want to change design, simply a new CSS. Let me know if you need more explination. Thanks!!Well, I think just take a page from CSS Zen Garden (<!-- m --><a class="postlink" href="http://www.csszengarden.com/">http://www.csszengarden.com/</a><!-- m -->) and add a lot of nested <div>s... you haven't made the styles yet, have you? There is no cross-browser CSS to add markup, though.I'll have to take a look at that. Do you think just setting the postion with top, bottom, left, and right would work? In combination with height and width.
Also, how can I layer two seprate divs without nesting? Like if you have:
<div id="nav"></div>
<div id="side"></div>
How would you have nav sit on top of side?
Thanks for your help. I've got way too many questions. LOL