6 replies [Last post]
stlauc
Offline
newbie
Last seen: 13 years 2 weeks ago
Joined: 2007-09-22
Posts: 5
Points: 0

I'm trying to make one div in my page show different contents at different times. I need:

1. Div contents to change "onclick"
2. The wrapper div to expand if the contents expands (which means I need a relative div)
3. The div to stay in the same place no matter what content shows (which means I need an absolute div)
4. Ideally, I'll use a class to define the attributes (position, absolute) and an ID to identify a layer for show/hide layers (which means I need an absolute div)

#2 is causing me grief; I can't get the wrapper to enclose the long contents

There is a Dreamweaver behaviour, "Set text of layer" which looks neat, but it doesn't work for me since I've got 3 nested divs to give me a dynamically resized background box. The background gifs fail if I use this feature on the outer div, and I can't get it to work on the inner div. The outer div is the one I'm manipulating in #1-4 above.

The test code is here at this time (it may come down in the future, for later readers of this post):

http://s179034073.onlinehome.us/suzie/services.htm

Here are my divs:

.left-wrapper {
width: 500px;
margin-left: 25px;
margin-right: 15px;
float: left;
clear: left;
margin-top: -30px;
margin-bottom: 15px;
}

.expandable-box-left { /*outer layer I'm manipulating */
position: relative; /*needs to be absolute to make it a layer, overlap*/
width: 500px;
z-index:9;
background: url(../images/bottom-left.gif) no-repeat left bottom;
visibility: visible;
}

#exec1 { /*id I've named first content div*/
visibility: visible;
position: relative; /*made it relative to enclose it in wrapper*/
}

#exec2 { /*id I've named second content div*/
visibility: hidden;
position: absolute; /*needs to be absolute to overlay exec1*/
}

The HTML:

Reduce Risks while Improving Results

my content

Related Services

my other content

Rest of the CSS fyi

/*cosmetic background stuff*/
.box-outer {
background: url(../images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 10px;
}

.box-inner {
background: url(../images/top-left.gif) no-repeat left top;
z-index:11;
}

.expandable-box-left h2 {
background: url(../images/top-right.gif) no-repeat right top;
padding-top: 20px;
padding-bottom: 10px;
}

Any ideas are very welcome.

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

Hi stlauc, would it not be

Hi stlauc,

would it not be easier (and less confusing for the end-user) if you just actually used separate pages?

Verschwindende wrote:
  • CSS doesn't make pies

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

Also it's confusing to talk

Also it's confusing to talk of layers in CSS. CSS has no concept of "layers" at all.

Dreamweaver tacks this concept on top of CSS, in my opinion confusingly and misleadingly, and it has done much damage in creating brittle, confusing pages that don't work well cross browser.

If you want to design with CSS, learn CSS. Dreamweaver is a fine text editor, but it's "layers" feature is nonsense and should be shunned.

Ed Seedhouse

Posting Guidelines

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

stlauc
Offline
newbie
Last seen: 13 years 2 weeks ago
Joined: 2007-09-22
Posts: 5
Points: 0

Separate pages work, but if

Separate pages work, but if a common thing changes on 10 pages that are 90% the same, it's hard to update. I'd use DW templates to avoid this, but DW 8 doesn't show my layers properly in templates, so it's not very friendly. I'm using DW library items to mitigate this, but there must be a better way, and a non-DW dependent way. How do you share common content?

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

You do that with a server

You do that with a server side processing language like PHP or (shudder) .asp, or even Apache's built in "server side includes" methods.

Ed Seedhouse

Posting Guidelines

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

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

I tend to create a file call

I tend to create a file call nav.inc.php, save it in a folder called "includes" and have

that's all that's in the file... then in your index.php file where I want the menu to parse i use this line of code

<?php include ("includes/nav.inc.php"); ?>

then when you unlease the code onto the web, it automagically™ puts in the navigation

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

stlauc
Offline
newbie
Last seen: 13 years 2 weeks ago
Joined: 2007-09-22
Posts: 5
Points: 0

thanks

Love it - thanks

carole