[CSS] nested layers and text - Tilted Forum Project Discussion Community

arch13 · 04-27-2005, 10:00 AM

I have a page located at http://www.arch13.com/index.php?id=brewery where the included page brewery is soley CSS based. It's been giving me issues with a nested layer and text indenting, and I was hoping someone could point out what I'm doing wrong.

The actual page, located at www.arch13.com/brewery.php , is the focus here.
The page is constructed by creating a wrapper div that contains all the visable divs (Got that?) The wrapper div sets the total height and width and all the other layers are then nested within. The first layer is photo_image and is where the actual image is displayed.
Then, I have photo_nav where the image description and navigation goes. This is where my problem is.
photo_nav has photo_subnav nested in it.

The actual code looks like:

Code:

<div class="photo_nav">
    <div class="photo_subnav">< 1/12 ></div>
    Crasnton, RI - Built in 1853 as the Providence Trolley house. Used as the 
    repair shop and storage shed for trolleys until 1923 when the city shuttered 
    their traction car system. It was then converted to the Cranston Brewery under 
    which it operated until the company went under in the late 70's.</div>
  </div>

Subnav being where you click to advance to the next image.
The actual CSS dictating the page is:

Code:

.wrapper {
	height: 480px;
	width: 640px;
	margin:0px auto;
	text-align:center;
	padding-top:0px;
	border:1px #fff;
}
.photo_image {
	height: 440px;
	margin: 0 0 0 0px;
	background-color:#BFCCE3;
	remove--->
	font-family: Verdana;
	font-size: 11px;
}
.photo_nav {
	height: 40px;
	margin:0 0 0 0px;
	text-align:left;
	padding:0px 0px 0px 5px;
	border-top:2px solid #ccc;
	background-color:#666;
	font-family: Verdana;
	font-size: 11px;
}
.photo_subnav {
	width: 55px;
	height: 40px;
	background-color:#660000;
	padding:0px 0px 0px 0px;
	float: left;
	color: #FFFFFF;
	}

Now what's killing me is that I want to have photo_subnav only nested in the left corner of photo_nav. I acheived this through float. Please see the linked page, as the red areas is the photo_subnav floated left.

Now, How can I have a margin area between the subnav red box and the text? And how can I have multipule pharagraphs without the new paragraph starting under the subnav red box instead of inline with the previous paragraph?

Ripsaw · 04-29-2005, 04:24 AM

I'm on it.

Ripsaw · 04-29-2005, 04:42 AM

Modified Style Sheet

Quote:

Your redone wrapper div

Quote:

<div class="wrapper">
<div class="photo_image">
<img src='brewerysplash.jpg'></div>
<div class="photo_nav">
<div class="photo_subnav">< 1/12 ></div>
Crasnton, RI - Built in 1853 as the Providence Trolley house. Used as the
repair shop and storage shed for trolleys until 1923 when the city shuttered
their traction car system. It was then converted to the Cranston Brewery under
which it operated until the company went under in the late 70's.</div>
<div class="photo_nav">
<div class="photo_subnav">< 1/12 ></div>
Crasnton, RI - Built in 1853 as the Providence Trolley house. Used as the
repair shop and storage shed for trolleys until 1923 when the city shuttered
their traction car system. It was then converted to the Cranston Brewery under
which it operated until the company went under in the late 70's.</div>
<div class="photo_nav">
<div class="photo_subnav">< 1/12 ></div><div class="spacer"></div>
Crasnton, RI - Built in 1853 as the Providence Trolley house. Used as the
repair shop and storage shed for trolleys until 1923 when the city shuttered
their traction car system. It was then converted to the Cranston Brewery under
which it operated until the company went under in the late 70's.</div>

</div>

I used a spacer div to provide you with the margin you requested. Its two divs, stacked floating left. Renders in Firefox and IE6. Alter the width of .spacer for more or less margin. Let me know if this works, or not, and if you find another way, please share it. Thanks.

04-27-2005, 10:00 AM	#1 (permalink)
arch13 Loves my girl in thongs Location: North of Mexico, South of Canada	[CSS] nested layers and text I have a page located at http://www.arch13.com/index.php?id=brewery where the included page brewery is soley CSS based. It's been giving me issues with a nested layer and text indenting, and I was hoping someone could point out what I'm doing wrong. The actual page, located at www.arch13.com/brewery.php , is the focus here. The page is constructed by creating a wrapper div that contains all the visable divs (Got that?) The wrapper div sets the total height and width and all the other layers are then nested within. The first layer is photo_image and is where the actual image is displayed. Then, I have photo_nav where the image description and navigation goes. This is where my problem is. photo_nav has photo_subnav nested in it. The actual code looks like: Code: <div class="photo_nav"> <div class="photo_subnav">< 1/12 ></div> Crasnton, RI - Built in 1853 as the Providence Trolley house. Used as the repair shop and storage shed for trolleys until 1923 when the city shuttered their traction car system. It was then converted to the Cranston Brewery under which it operated until the company went under in the late 70's.</div> </div> Subnav being where you click to advance to the next image. The actual CSS dictating the page is: Code: .wrapper { height: 480px; width: 640px; margin:0px auto; text-align:center; padding-top:0px; border:1px #fff; } .photo_image { height: 440px; margin: 0 0 0 0px; background-color:#BFCCE3; remove---> font-family: Verdana; font-size: 11px; } .photo_nav { height: 40px; margin:0 0 0 0px; text-align:left; padding:0px 0px 0px 5px; border-top:2px solid #ccc; background-color:#666; font-family: Verdana; font-size: 11px; } .photo_subnav { width: 55px; height: 40px; background-color:#660000; padding:0px 0px 0px 0px; float: left; color: #FFFFFF; } Now what's killing me is that I want to have photo_subnav only nested in the left corner of photo_nav. I acheived this through float. Please see the linked page, as the red areas is the photo_subnav floated left. Now, How can I have a margin area between the subnav red box and the text? And how can I have multipule pharagraphs without the new paragraph starting under the subnav red box instead of inline with the previous paragraph? __________________ 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

04-29-2005, 04:24 AM	#2 (permalink)
Ripsaw Chef in Training	I'm on it. __________________ "We are supposed to be masters of space, but we cant even line up our shoes?" One life, one chance, one opportunity.