CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me

The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.

Go Back   Dev Shed ForumsWeb DesignCSS Help

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old September 13th, 2003, 10:29 AM
phatnadz phatnadz is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Jun 2003
Posts: 30 phatnadz User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 10
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">&nbsp;
<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!!!

Reply With Quote
  #2  
Old September 14th, 2003, 12:06 AM
phatnadz phatnadz is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Jun 2003
Posts: 30 phatnadz User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 10
bump

Reply With Quote
  #3  
Old September 14th, 2003, 03:38 AM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed God (5000 - 5499 posts)
 
Join Date: May 2003
Location: Dallas
Posts: 5,268 kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level) 
Time spent in forums: 1 Month 1 Week 4 Days 10 h 31 m 27 sec
Reputation Power: 1954
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.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.

Reply With Quote
Reply

Viewing: Dev Shed ForumsWeb DesignCSS Help > CSS Guru test

Developer Shed Advertisers and Affiliates



Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.

© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap