[CSS] Nested layers included into parent page - Tilted Forum Project Discussion Community

arch13 · 01-23-2005, 09:25 PM

I've been trying to slowley use my site rebuild as an excuse to learn about new syntax and scripting for site building. Lord know's I've driven theFez crazy with javascript and php questions.

I have a main page that call's it's center element in via ?id=xxx where xxx is the page name being included.
The site is http://www.arch13.com and the image is what's included by defualt.

I've been making a page to serve as a menu for recent work, and decided since it's a simple and sparse page, I'd try my hand at css layout for it. Silly me.

The page is http://www.arch13.com/recent.php and looks great when viewed indivigualy. Not so great when viewed in context. For some reason the nested layers are skewing to the right overlaying the border to the template include area. I have the nested layers inside a layer called wrapper that is supposed to be the outer boundry of this included page. The two layers nested that form the titleblock/masthead and menu.
The page called into the index template is http://www.arch13.com/index.php?id=recent . See what I mean? (note, I'ver been working in Firfox, so I have no idea how it looks in IE yet)

How can I make sure that the titleblock/masthead and menu stay inside the include area?

The relevant css to recent.php is:

Code:

<!--
.recent_wrapper 	{
	width:630px;
	height: 353;
	margin:0px auto;
	text-align:center;
	padding-top:0px;
	border:1px #fff;
	background-color:#eee;
	}
.recent_mast 	{
	width:620px;
	height:25px;
	margin: 0 0 0 0px;
	text-align:left;
	padding:15px;
	border-bottom:2px solid #fff;
	background-color:#5B5B33;
	}
.recent_menu 	{
	width:620px;
	height:40px;
	margin:0px auto;
	text-align:left;
	padding:15px;
	border-top:4px solid #fff;
	background-color:#E6E4C3;
	}

-->

additionally, css doesn't seem to let me nest any layers inside .recent_mast . I wanted to place a titleblock of text inside this layer and position it using css but can't seem to get that right. Does anyone have any pointers or spot anything blatantly wrong about this css work?

Edit seem to have figred this out to some degree. Still having overlapping trouble though. Any help or pointers are very much appreciated.

franzelneekburm · 01-24-2005, 02:52 AM

It's seems you are working on it at the moment, so I can't really comment on the specific CSS, but I can recommend a couple of general things.

Pull the CSS out into a separate file and include it from the index page (not the pages you include), that should make the behaviour more predictable (or at least it will be easier to read).

Seems when you include the "body" you are including an entire HTML document, meaning you have a DOCTYPE and an <html> inside a <td>. Most browsers will probably display this, but it certainly isn't valid HTML; more importantly, I don't know how it will handle the <meta>'s and <link>'s inside the nested <head>, and it's quite possible that won't be what you want.

I'd put just the content you are including in that file, and have a barebones template that includes it when you want to display it by itself (ie everything outside of <body>).

arch13 · 01-24-2005, 03:45 AM

Quote:

Originally Posted by franzelneekburm

It's seems you are working on it at the moment, so I can't really comment on the specific CSS, but I can recommend a couple of general things.

Pull the CSS out into a separate file and include it from the index page (not the pages you include), that should make the behaviour more predictable (or at least it will be easier to read).

Seems when you include the "body" you are including an entire HTML document, meaning you have a DOCTYPE and an <html> inside a <td>. Most browsers will probably display this, but it certainly isn't valid HTML; more importantly, I don't know how it will handle the <meta>'s and <link>'s inside the nested <head>, and it's quite possible that won't be what you want.

I'd put just the content you are including in that file, and have a barebones template that includes it when you want to display it by itself (ie everything outside of <body>).

Actualy, I'm only leaving the css in the document for the moment. I pull it out to layout.css when I have it looking the way I want it to. It's just easier to have one window open than a css window and a php window, which requires switching between the two to make changes.
I try to keep all documents as basic php files, headers included so that a migration to a diferent setup does not pose a problem. php_include just ignores any header info besides calls for css links and stylesheets.

Css called by an included document is valid under xhtml transitional, but not strict. I have no interest in moving to strict.
I'm actually calling it a night. You have no idea how long it took me to figure out how to make the two columns of links appear like that. This is not easy for a beginer. I just want the right side of the included document to stop overlapping.

Thank you for the comments. they are always appreciated.

franzelneekburm · 01-24-2005, 05:49 AM

Quote:

Originally Posted by arch13

Actualy, I'm only leaving the css in the document for the moment. I pull it out to layout.css when I have it looking the way I want it to. It's just easier to have one window open than a css window and a php window, which requires switching between the two to make changes.

Of course in Firefox you can always edit CSS live.
No accounting for taste though, I suppose - I can't seem to get any work done unless I have at least 17 windows in which I'm working.

Quote:

I try to keep all documents as basic php files, headers included so that a migration to a diferent setup does not pose a problem. php_include just ignores any header info besides calls for css links and stylesheets.

So each file contains a copy of the headers? Just seemed odd - I don't know much about how things are done in PHP-land, as you can probably tell.

Quote:

You have no idea how long it took me to figure out how to make the two columns of links appear like that. This is not easy for a beginer. I just want the right side of the included document to stop overlapping.

Removing the 'padding: 0;' from '.recent_nav ul' stops the ULs from overlapping the H2 (setting it to other values doesn't make a difference). BTW, it's kinda hard to get these things looking right when you specify absolute sizes for your block elements, most layout engines will do better with a bit more leeway. (not the least of the problems is that Gecko and IE calculate DIV width and height differently)

arch13 · 01-24-2005, 12:26 PM

Quote:

Originally Posted by franzelneekburm

Removing the 'padding: 0;' from '.recent_nav ul' stops the ULs from overlapping the H2 (setting it to other values doesn't make a difference). BTW, it's kinda hard to get these things looking right when you specify absolute sizes for your block elements, most layout engines will do better with a bit more leeway. (not the least of the problems is that Gecko and IE calculate DIV width and height differently)

Actaully, that parts intentional

I'm trying to get the two UL's to appear next to each other as if there where two colums, one called recent architecture and one called recent handwork. Seems to be semi working here: http://www.arch13.com/index.php?id=recent ,

What's actualy cuasing my huge headache at this point can be seen here ( http://www.arch13.com/index.php?id=test/recent_ex ) where I have removed all the css concerning UL's and LI's and simply left the page formating css. Notice how the peach toned recent_nav is overlapping the right hand grey side bar of the parent page? It's driving me nuts!

The wrapper div is set to a width of 630, and the two child divs (nested) are set to 620. I just want them to all look the same width inside the parent page when called as an include.

For reference, the page seperate is at http://www.arch13.com/test/recent_ex.php
ndthe relevant css code that hasn't really changed at all is:

Code:

.recent_wrapper 	{
	width:630px;
	height:353;
	margin:0px auto;
	text-align:center;
	padding-top:0px;
	border:1px #fff;
	background-color:#eee;
	}
.recent_mast 	{
	width:620px;
	height:30px;
	margin: 0 0 0 0px;
	text-align:left;
	padding:5px;
	border-bottom:2px solid #fff;
	background-color:#5B5B33;
	color: #E6E4C3;
	}
.recent_nav 	{
	width:620px;
	height:75px;
	margin:0 0 0 0px;
	text-align:left;
	padding:15px;
	border-top:4px solid #fff;
	background-color:#E6E4C3;
	font-family: Verdana;
	font-size: 11px;
	}

.Recent_wrapper and .recent_mast both behave fine and appear correctly. It's .recent_nav that is overflowing it's "boundry" persee.
Looking at these pages, can anyone point me towards a way to stop recent_nav from breaking the layout like it is?

franzelneekburm · 01-24-2005, 07:23 PM

Quote:

Originally Posted by arch13

The wrapper div is set to a width of 630, and the two child divs (nested) are set to 620. I just want them to all look the same width inside the parent page when called as an include.

Sorry, took me a while to get what you meant.

Why do you need to specify the width for the DIVs insidte 'recent_wrapper'? Block elements default to filling their containing block, since you already set the 'recent_wrapper' width, its children will be the same width as the parent by default, you don't need to do anything else. Just taking out the widths for recent_nav and recent_mast makes it behave properly (at least for me), both as a separate page and when included.

Unless I'm still not getting what you are trying to do, in which case - sorry, just being slow.

arch13 · 01-24-2005, 07:59 PM

Quote:

Originally Posted by franzelneekburm

Sorry, took me a while to get what you meant.

Why do you need to specify the width for the DIVs insidte 'recent_wrapper'? Block elements default to filling their containing block, since you already set the 'recent_wrapper' width, its children will be the same width as the parent by default, you don't need to do anything else. Just taking out the widths for recent_nav and recent_mast makes it behave properly (at least for me), both as a separate page and when included.

Unless I'm still not getting what you are trying to do, in which case - sorry, just being slow.

I could kiss you franzelneekburm.

Thank you for the help!

Okay, I have one new question.
The recent architecture and recent handwork columns in this page. There created by just taking two <ul>'s and assigning the css property:

Code:

.recent_nav h2,
.recent_nav ul		{
						margin-top: 12px;
						padding: 0;
						float: left;
						}

The only problem is, I have no idea why this works, or how to modify it. It was swipped from a relative on the basis of "Hmm, that's a good nav technique. Lets see if I can peel it appart to learn how he pulled it off", which is what I'm obviously doing. (And yes, I will be changing the colors and more to it. I'm not any more down than the next person with blatant copyright use, even among family.)
I pulled out the padding like you suggested above, but that causes them to no longer appear as two columns.
I want the lists to appear as two columns, I just want to adjust the spacing of the lists and not let the two list titles over-run the lists anymore.
Also, How on earth can I make sure that as these lists grow, the height of recent_nav increases to accomodate the text instead of the text overlapping between recent_nav and recent_wrapper?

franzelneekburm · 01-27-2005, 02:25 AM

Sorry, took a while to get back to this.

Quote:

Originally Posted by arch13

I want the lists to appear as two columns, I just want to adjust the spacing of the lists and not let the two list titles over-run the lists anymore.

I would dispense with the ULs, if you make them plain DIVs, modifying the spacing and padding is a lot more intuitive:

Code:

<html>
<head>
<style type="text/css">
<!--
.contents 	{
	margin:0 0 0 0px;
	text-align:left;
	padding:15px;
	border-top:2px solid #ccc;
	background-color:#E6E4C3;
	font-family: Verdana;
	font-size: 11px;
}
.contents .header {
	font-weight: bold;
	float: left;
}
.contents .links {
	float: left;
}
.defloat {
	clear: both;
}
-->
</style>
</head>
<body>
<div class="contents">
<div class="header">Recent Architecture</div>
<div class="links">
	Architecture - Sonoma Valley Windery<br>
	Architecture - RISD: South Water Street
</div>
<div class="header">Recent Handwork</div>
<div class="links">
	Damascus Steel Japanese Chisel Set<br>
	Handcrafted Soap<br>
	Photos - Diesel Plant
</div>
<div class="defloat"/>
</div>
</body>

Just add your desired formatting to .header and .links, they should behave more like you'd expect.

Quote:

Also, How on earth can I make sure that as these lists grow, the height of recent_nav increases to accomodate the text instead of the text overlapping between recent_nav and recent_wrapper?

That's actually trickier than it should be. In the simplest case - if you didn't have the 'float' and didn't need a minimum height - it's simple, you don't specify anything and the height grows to accomodate the contents. If you want a minimum height you get a compatibility problem: say you set 'height: 75px', IE will use that if the contents are smaller and grow that if the contents need more space, Firefox on the other hand, will follow the spec and always leave it at 75px, with excess text hanging off the bottom. What we really want here are the min-height and max-height properties which are CSS3 (I think) and not yet supported by either browser.

In our case we have the 'float's to arrange them in column, the "contents" div will ignore the size of it's floated components when calculating its size. That's why we need the "defloat" div - by setting 'clear: both;' we are disallowing floated components either side of it, so it will appear below the floated lists and force the "contents" div to grow (This element can be an inline element in IE, but has to be a block element in Firefox). The above still applies, I don't know how to solve that properly. You either have a box that grows dynamically (don't specify anything for height), or one with absolute height.

arch13 · 02-01-2005, 11:24 PM

I'd like to keep the lists in order to make sure that if the presentation formate changes, I can still choose if I want bullets for each list entry without having to use a graphic.

I'm taking copious notes from your post however, and think I'll try out the

Code:

.defloat {
	clear: both;
}

It looks like a good way to solve that issue. By simply limiting the entries in each list to 6, I can controll the max height anyway. (The page is after all recent work

)
I think I have a clear handle on how to controll the height of .nav via your suggestions, but still just can't get the two lists working using <ul>'s. The list titles don't seem to want to space correctly and crowd the actual list in standards browsers like firefox. They look good in IE, but I'm trying to be standard complient.
Is there a way to increase the padding between the list titles and list entry's while keeping them as lists?

I don't know what to edit in my css that affects this property.

franzelneekburm · 02-02-2005, 06:22 AM

Quote:

Originally Posted by arch13

I'd like to keep the lists in order to make sure that if the presentation formate changes, I can still choose if I want bullets for each list entry without having to use a graphic.
...
Is there a way to increase the padding between the list titles and list entry's while keeping them as lists?

Have you tried using <div> or <span> with

Code:

{ display:  list-item;}

That would allow you to use proper bullets and such, might end up being the same thing as actual ul tags, but possibly could be easier to control.

Personally, it seems like it's been a long time since I've used any tags apart from div, span and table (for actual tabular data), CSS can do everything with those; don't know if this is good style or not, just what I seem to end up with.

01-23-2005, 09:25 PM	#1 (permalink)
arch13 Loves my girl in thongs Location: North of Mexico, South of Canada	[CSS] Nested layers included into parent page I've been trying to slowley use my site rebuild as an excuse to learn about new syntax and scripting for site building. Lord know's I've driven theFez crazy with javascript and php questions. I have a main page that call's it's center element in via ?id=xxx where xxx is the page name being included. The site is http://www.arch13.com and the image is what's included by defualt. I've been making a page to serve as a menu for recent work, and decided since it's a simple and sparse page, I'd try my hand at css layout for it. Silly me. The page is http://www.arch13.com/recent.php and looks great when viewed indivigualy. Not so great when viewed in context. For some reason the nested layers are skewing to the right overlaying the border to the template include area. I have the nested layers inside a layer called wrapper that is supposed to be the outer boundry of this included page. The two layers nested that form the titleblock/masthead and menu. The page called into the index template is http://www.arch13.com/index.php?id=recent . See what I mean? (note, I'ver been working in Firfox, so I have no idea how it looks in IE yet) How can I make sure that the titleblock/masthead and menu stay inside the include area? The relevant css to recent.php is: Code: <!-- .recent_wrapper { width:630px; height: 353; margin:0px auto; text-align:center; padding-top:0px; border:1px #fff; background-color:#eee; } .recent_mast { width:620px; height:25px; margin: 0 0 0 0px; text-align:left; padding:15px; border-bottom:2px solid #fff; background-color:#5B5B33; } .recent_menu { width:620px; height:40px; margin:0px auto; text-align:left; padding:15px; border-top:4px solid #fff; background-color:#E6E4C3; } --> additionally, css doesn't seem to let me nest any layers inside .recent_mast . I wanted to place a titleblock of text inside this layer and position it using css but can't seem to get that right. Does anyone have any pointers or spot anything blatantly wrong about this css work? Edit seem to have figred this out to some degree. Still having overlapping trouble though. Any help or pointers are very much appreciated. __________________ Seen on an employer evaluation: "The wheel is turning but the hamsters dead" ____________________________ Is arch13 really a porn diety ? find out after the film at 11. -Nanofever Last edited by arch13; 01-24-2005 at 03:47 AM..

02-01-2005, 11:24 PM	#9 (permalink)
arch13 Loves my girl in thongs Location: North of Mexico, South of Canada	I'd like to keep the lists in order to make sure that if the presentation formate changes, I can still choose if I want bullets for each list entry without having to use a graphic. I'm taking copious notes from your post however, and think I'll try out the Code: .defloat { clear: both; } It looks like a good way to solve that issue. By simply limiting the entries in each list to 6, I can controll the max height anyway. (The page is after all recent work ) I think I have a clear handle on how to controll the height of .nav via your suggestions, but still just can't get the two lists working using <ul>'s. The list titles don't seem to want to space correctly and crowd the actual list in standards browsers like firefox. They look good in IE, but I'm trying to be standard complient. Is there a way to increase the padding between the list titles and list entry's while keeping them as lists? I don't know what to edit in my css that affects this property. __________________ Seen on an employer evaluation: "The wheel is turning but the hamsters dead" ____________________________ Is arch13 really a porn diety ? find out after the film at 11. -Nanofever

01-24-2005, 02:52 AM	#2 (permalink)
franzelneekburm Tilted Location: Boston	It's seems you are working on it at the moment, so I can't really comment on the specific CSS, but I can recommend a couple of general things. Pull the CSS out into a separate file and include it from the index page (not the pages you include), that should make the behaviour more predictable (or at least it will be easier to read). Seems when you include the "body" you are including an entire HTML document, meaning you have a DOCTYPE and an <html> inside a <td>. Most browsers will probably display this, but it certainly isn't valid HTML; more importantly, I don't know how it will handle the <meta>'s and <link>'s inside the nested <head>, and it's quite possible that won't be what you want. I'd put just the content you are including in that file, and have a barebones template that includes it when you want to display it by itself (ie everything outside of <body>).