10 replies [Last post]
Gala Gradiva
Gala Gradiva's picture
Offline
newbie
Last seen: 13 years 47 weeks ago
Joined: 2006-12-02
Posts: 7
Points: 0

I actually succeeded in having one div stretch with content (cross-browser), but when I introduced a third element to the CSS "table" I could not suceed in getting the third DIV to stretch with the first one and have the second DIV stick to the same height (I have one DIV on the left which is the same height of two divs on the right on top of one another. The big div is where the content goes. The smaller ones are the menu of two different kinds).

I am posting here the CSS code, and below I am posting the html:

a img { border: none; /*Eliminates the border from all pictures*/ }

html, body {
height: 100%; /*Grants that the page always stretches full length. Necessary for div height stretching*/
width:100%;
}

body {
background: #ebe8d9;
color: #666;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding:0;
text-align:center;
}

#header {
background:#ffffff;
height: 140px;
margin-left:auto; /*Governs white top part above banner*/
margin-right:auto;
width:100%;
}

#header p {
background: url('http://www.sito.com/images/general_images/ytv_header.jpg') top left no-repeat #ffffff;
font: bold 60% Tahoma, Verdana, Arial, Helvetica, sans-serif;
text-align:left;
height:140px;
width:800px;
margin-top:0px;
margin-left:auto;
margin-right:auto;
color: #b3a492
}

#headernav a {
color: #666;
text-decoration: none; /*Governs header links*/
}

#headernav a:hover {
color: #888; /*Governs header links*/
text-decoration: none;
}

#headernav {
position:absolute;
font: bold 90% 'Times New Roman', Times, serif;
left:54%;
top:120px;
letter-spacing:-0.1mm; /*Governs header links*/
text-align:left;
margin-left:auto;
margin-right:auto;
}

#headbanner {
background: url('http://www.sito.com/images/general_images/pool_rental_siena_vacation.jpg') top center no-repeat #ffffff;
padding:0px;
position: relative;
width: 800px;
margin-top:0px; /*Governs site head banner*/
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
height:166px;
}

#dec3lines {
background: url('http://www.sito.com/images/general_images/3line_bg.gif') top center repeat-x #ebe8d9;
padding:0px;
position: relative;
width: 800px; /*Governs the 3 line stripe above the head banner*/
margin-top:0px;
margin-left:auto;
margin-right:auto;
height:21;
}

#propmenubar {
background:#b3a492;
padding:0px;
position:relative;
width:646px;
margin-top:0px; /*Governs the property menu bar*/
margin-left:0px;
margin-right:5px;
margin-bottom:0px;
height:22;
float:left;
display: inline;
}

#topmenubar {
background:#b3a492;
padding:0px;
position:relative; /*Governs site's sections top menu bar*/
width:149px;
margin:0px;
height:22;
float:right;
display: inline;
}

#container {
background:#ebe8d9;
padding:0px;
position:relative;
width:800px;
margin-top:0px;
margin-left:auto; /*Contains #topmenubar and #propmenu bar*/
margin-right:auto;
margin-bottom:0px;
height:22;
}

#allcontainer {
background:transparent;
padding:0px;
position:relative;
width:800px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
margin-bottom:5px;
height:100%;
display:table;
}

#btcontainer {
background:#ebe8d9;
padding:0px;
position:relative;
width:800px;
margin-top:0px; /*Contains #bodytext and #containmainmenu*/
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
height:100%;
display:table;
}

#bodytext {
font: 90% Tahoma, Verdana, Arial, Helvetica, sans-serif;
background:#d7caba;
padding:0px;
position:relative;
width:646px;
margin-top:0px; /*Governs the main section of the page, the text area*/
margin-left:0px;
margin-right:5px;
float:left;
height: 100%;
display: inline;
text-align:left;
}

#containmainmenu {
background:#ebe8d9;
padding:0px;
position:relative;
width:149px;
margin-top:0px;
margin-left:auto;
margin-right:0;
margin-bottom:0px;
float:right;
display: table;
height:100%;
}

#mainmenutop {
background:#d7caba;
padding:0px;
width:149px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
height: 350px;
display: inline;
float:left;
}

#mainmenubottom {
background:#b3a492;
padding:0px;
width:149px;
margin-top:5px;
margin-left:0px;
margin-right:0px;
position:relative;
display: inline;
float:left;
}

#footer {
background: url('http://www.sito.com/images/general_images/footer.jpg') top center no-repeat #ffffff;
height:140px;
margin-left:auto; /*Governs footer*/
margin-right:auto;
}

#footer a {
font: bold; /*Governs footer links*/
color: #999966;
text-decoration: underline;
}

#footer a:hover {
font: bold; /*Governs footer links*/
color: #bdbd9b;
text-decoration: underline;
}

#footer p {
background:transparent;
font: 60% Tahoma, Verdana, Arial, Helvetica, sans-serif;
width:800px;
margin-top:0px;
margin-left:auto;
margin-right:auto;
color: #666666;
padding-top:30px;
}

#copyright {
position:relative;
background:#ffffff;
font: 60% Tahoma, Verdana, Arial, Helvetica, sans-serif;
width:100%;
margin-top:0px;
margin-left:auto;
margin-right:auto;
color: #666666;
padding-top:30px;
}












































































































































































Thanks in advance for your help!!

mod note/have deleted your other post, try and keep to one thread - else we get confused!/tph

Gala Gradiva
Gala Gradiva's picture
Offline
newbie
Last seen: 13 years 47 weeks ago
Joined: 2006-12-02
Posts: 7
Points: 0

It's comforting when your

It's comforting when your post is the only one on the page with zero replies....

Any ideas anyone?

To the moderator:
Sorry for the confusion. I had initially posted in a thread that was solved. So I decided to start anew to get more visibility. Thanks for deleting my other post!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 44 weeks 10 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Well I for one am much too

Well I for one am much too lazy to cut and paste your code into a local page and then look at it. If you'd put your page at a reachable url and give us a link lazy folks like me would have much less of an excuse to pass you by.

To put it another way, as you are asking for free help it is to your interest to make giving that help as easy as possible.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Gala Gradiva wrote:It's

Gala Gradiva wrote:
It's comforting when your post is the only one on the page with zero replies....

Any ideas anyone?

You posted your topic less than 24 hours ago, give it time!

And don't worry about the other reply. It's best anyway to start a new topic, but if you have already replied, stick to one instead of both, it makes replying easier.

Verschwindende wrote:
  • CSS doesn't make pies

Gala Gradiva
Gala Gradiva's picture
Offline
newbie
Last seen: 13 years 47 weeks ago
Joined: 2006-12-02
Posts: 7
Points: 0

You're right Ed, that would

You're right Ed, that would be the best thing to do, the only reason why I do not do it is for commercial concerns of the company I work for.

If there is a way of sending it private I will.

Thanks!

PS: just sent you a private msg. If anyone would like to help, just drop a line here or in private. I'll send the URLs Thanks!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 44 weeks 10 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Quote:PS: just sent you a

Quote:
PS: just sent you a private msg.

Well, please don't do that again. BTW if you can put it in a PM on this board you should be quite safe posting it publicly.

The page, as I told you in my reply, has no doctype declaration, no name space declaration, no character encoding, and the W3C validator gives up without even trying. You need to go back to the basics and get those right. The information on how to do so is available on this site so you don't really (IMHO) have an excuse.

Sorry if that comes across as grouchy, but while it is at least past noon where I live I still haven't had time to start my drinking for the day.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Gala Gradiva
Gala Gradiva's picture
Offline
newbie
Last seen: 13 years 47 weeks ago
Joined: 2006-12-02
Posts: 7
Points: 0

I am really sorry for having

I am really sorry for having sent you a private without your consensus. I really cannot publish the link publicly. Please understand this. As you seemed interested, I thought a private was the right way to go.

I really appreciate your insights. I am working at validating the code with W3C. I did see the section on the site, and did insert a doctype declaration. But I have also seen that there are plenty of other errors which I did not deem fundamental during this stage. But I guess that you are right and I am straighting that up.

As for being grouchy, don't worry. But do not excuse yourself for being grouchy when you really meant to be grouchy with your reply. I expect a grown-up Leader aspiring at becoming Moderator of this forum such as yourself to be more straight-forward. If you throw the stone and hide the hand, that is not right. I respect you being upset by my wrong behavior, and apologize again for that. Hope you get your fix for today and will be less rough towards other newbies that happen to approach this forum with wholehearted trust in those that know more and are [supposedly] willing to help.

Having said this I would like to close this little incident, if that's ok with you. Again, thanks for your private reply and I will not bother you again.

Gala Gradiva
Gala Gradiva's picture
Offline
newbie
Last seen: 13 years 47 weeks ago
Joined: 2006-12-02
Posts: 7
Points: 0

Page validated

Now the page validates correctly. I used this tool to validate it: http://validator.w3.org/ (in case someone else needs it. It's really great!). Thank goodness it was an easy one to solve.

Well, again, if anyone would like me to send the CSS and XHTML URLs through private I gladly will. My company policies forbid me to do it here, unfortunately.
Thanks for your understanding and help!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 44 weeks 10 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Gala Gradiva wrote:Now the

Gala Gradiva wrote:
Now the page validates correctly. I used this tool to validate it: http://validator.w3.org/

Congrats for validating - but you'll find the W3C validater is known to just about any of the experienced designers here. It is the standard.

Quote:

Well, again, if anyone would like me to send the CSS and XHTML URLs through private I gladly will. My company policies forbid me to do it here, unfortunately.

Well that's a bad policy and you should try to persuade them to change it.

It will certainly be an obstacle to your getting the kind of help we provide around here. Not an insuperable obstacle one hopes.

Per some of your comments in the previous post, one gets to be a "leader" by posting five hundred messages, or perhaps the number is lower, but it has nothing to do with being knowledgable about CSS in any event. And I wouldn't be a moderator unless someone paid me (well) to do it. Fortunately for the rest of you that's extremely unlikely to happen.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Gala Gradiva
Gala Gradiva's picture
Offline
newbie
Last seen: 13 years 47 weeks ago
Joined: 2006-12-02
Posts: 7
Points: 0

As I said, If anyone else

As I said, If anyone else volunteers to help out constructively, please let me know. Again, thanks.

Gala Gradiva
Gala Gradiva's picture
Offline
newbie
Last seen: 13 years 47 weeks ago
Joined: 2006-12-02
Posts: 7
Points: 0

Solved

Done!! I made it! God was it tough! Translating a table site into a pure css site is no small feat.

I accomplished it with a faux column. I do not love this much as I tend to be a purist, but I do not care as it works great cross browser, with all resolutions, and resizing the window in all possible manners, and also at good text magnification degrees. So be it.

Thanks for the validation support. That was great advice I needed.

Cheers