Site Development
Downloads
Help!!
Home
An ExampleHere is an example of a nested <div> box. The nested box is the "title" part. It's a separate <div> box coded inside the parent (brown) box. Nested <div> boxes are commonly used to make various effects much like nested <tables>. Some of the more common uses are: Making separate backgrounds like in our example. Making a border when the parent box's border was used for spacing the box relative to outside objects. Formatting internal content into columns and such. You can nest <div> boxes to as many levels as needed. They load a little quicker than nested <table>s. And, as always, <div>s are more flexible than <tables>. Lets see how our example was made. Making The Parent BoxWe begin nesting <div> boxes by making the parent box. Our parent box is a pretty simple one containing links and the "child" <div> containing the title. We'll start by making the brown box:
<body> The above code is pretty straightforward. Here's how we styled "parentbox":
#parentbox { The links were styled separately using their psuedo-classes. It is typical that content is styled separately from the box containing it. Nesting A BoxNesting the Title Box is pretty simple. In the code for the first box just insert the second.
<body> It is important to note that the entire "nestedbox" is coded inside the parent box -- Both <div> tags and all content. We style the nested box just like we did the parent box using its ID:
#nestedbox { I've emphasized "relative" in the above code because we've not discussed the "position: relative;" declaration much. If we used the "position: absolute;" declaration, the browsers (especially Netscape) would figure we wanted the nested box placed relative to the overall page, and not the parent box. This is important to remember. When nesting <div> boxes, we want them positioned relative to their parent box, not the overall page. To do this we must set the "position:" property to "relative" as opposed to "absolute". The example we've been analyzing is a good example of the difference between "position: absolute;" and "position: relative;" Another thing to mention is that you can "float:" child boxes. This is a handy way to make columns in your parent box. Pay close attention to the child boxes' widths. You'll need to use "position: relative;" so the nested boxes float inside the parent box instead of the overall page. Netscape ProblemsNetscape and IE render the above box very differently. The most noticeable difference is that Netscape "pads" the area between the box's border and background color. If we removed the border, there would still be unwanted padding around the blue background. There's no easy workaround for this and a nested <table> is often used instead of a nested box to avoid the unwanted padding. Another Netscape quirk is that nested boxes don't respond well to being sized or positioned using percentages. That's why I used pixel dimensions and positioning for this box. This varies, so don't be afraid to try percentages if you need them. If it just doesn't work, you can always go back to pixels. Finally, Netscape will completely lose all CSS positioning if the Netscape window is resized. You've probably already noticed this with previous exercises. You have to reload the page to get the CSS to display properly after Netscape window resizing. Some viewers won't know to reload the page and think your page is just pure and simple crap. To avoid this you can have a simple JavaScript automatically reload your page whenever a viewer resizes the browser window. I know this is jumping ahead a little, but you really need to know this if you plan to use CSS positioning in your pages. Remember that this is only needed for Netscape. Here's the code that you'll put in your <body> tag: <body onResize="window.location='URL to your current page'"> I'm not going into any depth explaining this other than it works. Just type in "onResize" like any other HTML attribute. Put the rest in double quotes. The URL will have to go in single quotes because it's already nested in double quotes. The URL, of course, is the URL to the page already loaded. This forces a reload of the page when the browser's window is resized. There are other JavaScript methods to do this, but this one is the most reliable I've found. The reload usually only takes a split second because the page is being reloaded from the viewer's browser's cache on their hard drive, not being downloaded again from your server. .Summary & ExercisesThere's no big trick to nesting <div> boxes inside each other. Just code one box inside another's code. They are styled separately using CSS for ID (a "#" before the ID's name). Remember to use "position: relative;" for nested boxes so the browser knows to position the nested box relative to the parent box, and not the overall page. In some cases, no positioning is needed for nested <div>s. You can just let them render in the "code order". Our example is coded this way. Since the nested box is coded before the parent box's link content, it will appear at the top of the parent box without CSS positioning. To practice this, make three or more boxes similar to our example. Put each item of content in a separate nested box and give them all different background colors for a "striped" parent box. Use <br>s to put the child boxes beneath each other if needed. If you're really brave, try making columns with nested <div> boxes. The "float:" property along with "position: relative" in the child boxes will float the nested boxes inside the parent box. This doesn't work well in Netscape. You'll need to use pixel positioning instead of "float:" Now review some positioning by placing these parent boxes in a column to the left of the page. Code the JavaScript reload script in your <body> tag to get familiar with it.
|
To Second Advanced CSS Review & Exam
Back To Advanced CSS Index