CSS Teething Issues - Page 2

Fuyu · May 9th, 2007, 9:36 AM

Hey Dan,

Thanks for the eyeball. I had made some changes to the source before I noticed your post.

The thing (for me) with reading up on this stuff is that it is so easy to jump the tracks into the realm of syntactical bullsh*t without noticing! Get a containing div, add two more divs in that parent div, float the children where you want them, define CSS styling for each div using classes that can be tuned by div id and you're done. Apparently simple enough. 3 days later and I'm still trying to figure out how to get stacked child divs heights to take up half of the height space of the parent div.

Code:

/* Middle Section */
.middle {
position:relative;

height:430px;  /* If set to 100% it will stretch to fit ALL content -not good */
}


.middle .mainpane {
float:left;
width:75%;
overflow:auto;
padding-right:1em;
height:430px;  /* Can't this be dyanmic?  A percentage? */
}

.middle .submenus {
width:auto;
height:100%;  /* Becomes .middle .mainpane height:430px */
overflow:hidden;
}
.middle .submenus .submenu1 {
width:auto;
height:50%; /* Half of the height available to .middle .submenus */

}

.middle .submenus .submenu2 {
width:auto;
height:auto; /* The remainder (should be 50%) of the height available in .submenus after .submenu1 has taken its share */

}

**cowboy** · May 9th, 2007, 12:54 PM

.middle has been assigned a height on 5 occasions. Each selector should only have 1 assignment for each property. You can sub reassign individual grouping by using id (#) or element (< >) combined with the class (.)

Code:

#middle.middle {
} /* <div id="middle" class="middle"> /*
#middle.mainpain {
} 
div.middle {
} /* <div class="middle"> */

#middle and .middle are each different selectors.

#middle.middle will inherit #middle properties unless individual properties are redefined for this selector combination only, (it will not redefine #middle itself).

Fuyu · May 9th, 2007, 5:02 PM

Thanks Cowboy,

I've made the changes as best I could figure out. How does it look now?

Cheers.

**cowboy** · May 9th, 2007, 5:51 PM

Quote:

Originally Posted by Fuyu

Thanks Cowboy,

I've made the changes as best I could figure out. How does it look now?

Cheers.

Looking good. You might want to add the background color for #submenu2 to your #submenus instead of #fff to extend the background to the bottom.

**cowboy** · May 10th, 2007, 1:20 AM

Fuyu, with a bit more time and after digesting your comments in your css and your paragraph before the C&P data in the middle frame, a couple of thoughts.

You question why your %'s don't seem to work:

Your main container height is "auto". A % of auto is anything. Set your container to a specific height, then you can use % from then on since there is a constant to take a % of. (You can use code to determine the client window and dynamically set this to their display window.)

Your #middle should have the height specified, (you seem to want it about 80% of the container), rather than one of the 2 selectors (.mainpane). The submenus should not be inside the .mainpane, so your .mainpane /div should be before the submenus div. The #submenus and .mainpane can now be set to 100% (of #middle 80% of #container).

#submenu2 has to also be 50% to fill the entire 100%. With it set at auto it will automatically stop at the end of the data.

Hint: Keeping track of beginning and ending elements can be visualized easier by making a note to yourself including with the canceling tag:

Code:

<div id="general" class="specific">
 
Your content and code
 
</div> <!-- general.specific -->

A font size for the css body should be specified in em's, either a constant or %, for browser resolution consistency. Setting margin and padding to 0 in the body sets the browser's starting point.
.

**cowboy** · May 11th, 2007, 8:56 AM

PS. The scroll bar takes space from the selector. Reduce width to accommodate, or, add overflow property and content to another div inside.

Fuyu · May 11th, 2007, 10:48 AM

Thanks cowboy.

I thought I had it. Bugs were being squashed left and right, positioning falling into place. Soon, in at least 3 countries, spittless elderly ladies would be getting their toy lap dogs to lick the backs of stamps with my face on it (whom else uses stamps any more?). It was awesome. Then, I noticed that somewhere along the way I had exposed a positioning issue that has stamp printers and lickers holding their breath...

Padding. Occurs independantly of content flow. Content flow is bounded by the enclosing div. I should use margins to govern the flow and match colored padding to margins to illustrate flow boundaries? Or, get colored box of side x. Layer content box of side x-padding on top?

Yikes.

Fuyu · May 11th, 2007, 10:53 AM

Quote:

Originally Posted by cowboy

PS. The scroll bar takes space from the selector. Reduce width to accommodate, or, add overflow property and content to another div inside.

So the scrollbar wouldn't fit inside the 75% it would be generated outside the 75%? I will look into styling the scrollbars to restrict it's dimensions to some predictable size.

Hmm, I may have misunderstood your advice above, If the scrollbar is triggered I can control which div it appears in (#scrollloc?) -it's not an attribute/widget of the div?

**cowboy** · May 11th, 2007, 10:57 AM

Quote:

Originally Posted by Fuyu

So the scrollbar wouldn't fit inside the 75% it would be generated outside the 75%? I will look into styling the scrollbars to restrict it's dimensions to some predictable size.

Hmm, I may have misunderstood your advice above, If the scrollbar is triggered I can control which div it appears in (#scrollloc?) -it's not an attribute/widget of the div?

Is this what you want? http://simple2say.com/pepto/

May 9th, 2007, 9:36 AM	#10 (permalink)
Fuyu Registered User Seasoned Poster Joined in Jan 2004 Lives in Atlanta, GA, USA Hosted on PASS3 66 posts Gave thanks: 7 Thanked 0 times	The clears and breaks were throwing me off Hey Dan, Thanks for the eyeball. I had made some changes to the source before I noticed your post. The thing (for me) with reading up on this stuff is that it is so easy to jump the tracks into the realm of syntactical bullsht without noticing! Get a containing div, add two more divs in that parent div, float the children where you want them, define CSS styling for each div using classes that can be tuned by div id and you're done. Apparently simple enough. 3 days later and I'm still trying to figure out how to get stacked child divs heights to take up half of the height space of the parent div. Code: / Middle Section / .middle { position:relative; height:430px; / If set to 100% it will stretch to fit ALL content -not good / } .middle .mainpane { float:left; width:75%; overflow:auto; padding-right:1em; height:430px; / Can't this be dyanmic? A percentage? / } .middle .submenus { width:auto; height:100%; / Becomes .middle .mainpane height:430px / overflow:hidden; } .middle .submenus .submenu1 { width:auto; height:50%; / Half of the height available to .middle .submenus / } .middle .submenus .submenu2 { width:auto; height:auto; / The remainder (should be 50%) of the height available in .submenus after .submenu1 has taken its share */ } __________________ Server: Pass3 (72.29.75.151)

May 9th, 2007, 12:54 PM	#11 (permalink)
cowboy Surpass Fan Excelling Contributor Joined in Nov 2005 Lives in Colorado Hosted on DEDI 934 posts Gave thanks: 2 Thanked 94 times	.middle has been assigned a height on 5 occasions. Each selector should only have 1 assignment for each property. You can sub reassign individual grouping by using id (#) or element (< >) combined with the class (.) Code: #middle.middle { } /* <div id="middle" class="middle"> /* #middle.mainpain { } div.middle { } /* <div class="middle"> */ #middle and .middle are each different selectors. #middle.middle will inherit #middle properties unless individual properties are redefined for this selector combination only, (it will not redefine #middle itself). __________________ Where would you be if you were at the highest court in the land (US)?

May 9th, 2007, 5:02 PM	#12 (permalink)
Fuyu Registered User Seasoned Poster Joined in Jan 2004 Lives in Atlanta, GA, USA Hosted on PASS3 66 posts Gave thanks: 7 Thanked 0 times	Thanks Cowboy, I've made the changes as best I could figure out. How does it look now? Cheers. __________________ Server: Pass3 (72.29.75.151)

May 10th, 2007, 1:20 AM	#14 (permalink)
cowboy Surpass Fan Excelling Contributor Joined in Nov 2005 Lives in Colorado Hosted on DEDI 934 posts Gave thanks: 2 Thanked 94 times	Fuyu, with a bit more time and after digesting your comments in your css and your paragraph before the C&P data in the middle frame, a couple of thoughts. You question why your %'s don't seem to work: Your main container height is "auto". A % of auto is anything. Set your container to a specific height, then you can use % from then on since there is a constant to take a % of. (You can use code to determine the client window and dynamically set this to their display window.) Your #middle should have the height specified, (you seem to want it about 80% of the container), rather than one of the 2 selectors (.mainpane). The submenus should not be inside the .mainpane, so your .mainpane /div should be before the submenus div. The #submenus and .mainpane can now be set to 100% (of #middle 80% of #container). #submenu2 has to also be 50% to fill the entire 100%. With it set at auto it will automatically stop at the end of the data. Hint: Keeping track of beginning and ending elements can be visualized easier by making a note to yourself including with the canceling tag: Code: <div id="general" class="specific"> Your content and code </div> <!-- general.specific --> A font size for the css body should be specified in em's, either a constant or %, for browser resolution consistency. Setting margin and padding to 0 in the body sets the browser's starting point. . __________________ Where would you be if you were at the highest court in the land (US)?

May 11th, 2007, 8:56 AM	#15 (permalink)
cowboy Surpass Fan Excelling Contributor Joined in Nov 2005 Lives in Colorado Hosted on DEDI 934 posts Gave thanks: 2 Thanked 94 times	PS. The scroll bar takes space from the selector. Reduce width to accommodate, or, add overflow property and content to another div inside. __________________ Where would you be if you were at the highest court in the land (US)?

May 11th, 2007, 10:48 AM	#16 (permalink)
Fuyu Registered User Seasoned Poster Joined in Jan 2004 Lives in Atlanta, GA, USA Hosted on PASS3 66 posts Gave thanks: 7 Thanked 0 times	Thanks cowboy. I thought I had it. Bugs were being squashed left and right, positioning falling into place. Soon, in at least 3 countries, spittless elderly ladies would be getting their toy lap dogs to lick the backs of stamps with my face on it (whom else uses stamps any more?). It was awesome. Then, I noticed that somewhere along the way I had exposed a positioning issue that has stamp printers and lickers holding their breath... Padding. Occurs independantly of content flow. Content flow is bounded by the enclosing div. I should use margins to govern the flow and match colored padding to margins to illustrate flow boundaries? Or, get colored box of side x. Layer content box of side x-padding on top? Yikes. __________________ Server: Pass3 (72.29.75.151)

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search