|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
September 13th, 2003, 10:29 AM
|
|||
|
|||
|
CSS Guru test
I have a complex, graphically section of a page that I would like to build using CSS instead of tables within tables within tables. Below is an image of what I am trying to build with CSS:
Linky (Keep in mind this is just a section of the page, not the complete page.) This portion of the page houses the main content, and therefore needs to be able to dynamically expand vertically if I decide to add more or less text. I was thinking about doing this using a container DIV with the following properties: .body { background-color: #CCCCCC; overflow: visible; position: absolute; padding: 5px; width: 730px; left: 10px; top: 10px; border-top: 0px solid #999999; border-right: 2px solid #999999; border-bottom: 0px solid #999999; border-left: 2px solid #999999; } As for the embedded DIV, I am at a loss about how to do this. I know that I will need to use images for the four rounded edges, but I don't have the slightest clue about how to position these elements, especially considering how it has to scale depending on the text. My experiment with embedded DIVs did not work out, as I get this when displayed in a browser: Linky Below is the source for this error: <style type="text/css"> <!-- .dad { background: gray; width: 400px; left: 20px; top: 20px; position: absolute; } .son { padding: 4px; overflow: visible; background: silver; height: 96px; width: 396px; left: 2px; top: 2px; position: absolute; } --> </style> </head> <body> <div class="dad"> <div class="son"><p>The lazy brown fox jumps over the dog. The lazy brown fox jumps over the dog. The lazy brown fox jumps over the dog. The lazy brown fox jumps over the dog. The lazy brown fox jumps over the dog. The lazy brown fox jumps over the dog. The lazy brown fox jumps over the dog. The lazy brown fox jumps over the dog. </p></div> </div> </body> Obviously, the problem is that the container DIV does not scale depending on the size of the embedded DIV. Is it possible to establish this relationship so that the container scales with the internal DIV? THANKS!!!
|
|
#3
September 14th, 2003, 03:38 AM
|
||||
|
||||
|
Code:
.dad {
border: 2px solid blue;
padding: 5px;
/*border and padding added for clarity*/
width: 400px;
left: 20px;
top: 20px;
position: absolute;
}
.son {
border: 2px solid red;
/*border added for clarity*/
padding: 4px;
left: 2px;
top: 2px;
}
Is this what you want? cheers, gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing. Ask a better question, get a better answer.
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > CSS Guru test |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
