Forum Moderators: not2easy
I don't know if I've tried to do too much with nested divs or what, but the parent doesn't expand vertically to fit the child divs.
In other words, instead of doing this:
------------
¦ parent ¦
¦ ---------- ¦
¦ ¦child ¦ ¦
¦ ¦ ¦ ¦
¦ ¦________¦ ¦
¦ ---------- ¦
¦ ¦child ¦ ¦
¦ ¦ ¦ ¦
¦ ¦________¦ ¦
¦___________ ¦
____________
¦ parent ¦
¦ ---------- ¦
¦ ¦child ¦ ¦
¦ ¦ ¦ ¦
¦ ¦ ¦ ¦
¦ ¦________¦ ¦
¦ ---------- ¦
¦_¦child ¦_¦
¦ ¦
¦ ¦
¦________¦
I have tried using
<div class="spacer"> </div>div.spacer {
clear: both;
}The child divs are identical (these will be PHP repeating regions in the finished product), but they themselves have several nested divs inside - four for text placement (title div has bkground color of white, top and bottom one have same background image, but middle has no color, no image), and two for graphic elements (I suppose I could make a class using float for those two, but I'm sick and tired of this). I'd just like to figure out what I'm doing wrong, or if I'm trying to stretch CSS too much.
I don't have text styles done yet - I am just trying to get the layout done first. I'm also concerned about expanding and contracting child divs and placement one after the other - I'm starting to regret trying to skin this in CSS rather than tables.
I'm a mess! Can someone please help me out?
[edited by: EsmereldaPea at 4:58 am (utc) on June 17, 2003]
On to your problem - it looks like the content in your storyblock class is contained in a nested DIV that is using an inline style that positions it absolutely (look at the DIVs called Layer100 and Layer222). Try removing the inline styles (or at least the positioning parts). Hope this helps.
By the way, you might want to edit your post and remove your URL - it's against the TOS...
LisaB
And I have been messing around with the in-line styles and putting them into classes and it's an even bigger mess!
Not only does the parent div not expand, but now I can't even get all of my images to line up so I can get my "border". Sheesh - guess I didn't learn that much from Eric Meyer's book after all.
I am just so frustrated and confused. I understand the difference between relative and an absolute positioning, but why do some divs not respond to for example
position:relative
top:-27 pixels
when another does? (the one I'm having trouble with is the second child of a parent div). I'm also having trouble getting a background image for these child divs - figured I'd just set a background image, but it doesn't work - does it have anything to do with the fact that there's a background image set for the parent?
Or when I set positioning to absolute, should it be absolute relative to the parent div? - if so, it's not working that way. I thought I knew this stuff somewhat well, but guess I've never worked with nested divs before that much.
BTW, I am testing in Win/IE 6.x and Opera 7.x
should be
top: -27px;Are either of your child DIVs floating?
If so then they are removed from the normal flow of text and the parent div will now grow to fit them.
Okay, I made a few changes to my style sheet (and way too many hours), and at least we're getting closer. I re-arranged the styles in the order they appear within the divs, and that corrected some of my problems. At least I am closer than I was.
You can find a link to this page in my profile.
The first child div looks great! (although the parent is STILL not expanding), but the following one is off. I have two graphics in divs within the child, but I have positioning set to absolute, so they are only showing up on the first child div (even though they should position relative to their parent, not the "grandparent", right?). When I change positioning to relative, it throws EVERYTHING off (most of which I could overcome by setting top to a negative number, but some unpredictable things that I don't know if I could fix)
Oh, phooey - I just noticed that my liquid layout is screwed up as well.!
Am I stuck with tables on this one?
Anyone care to take a look and try to find out what my problem is? I've spend several hours wading through CSS books and sites last night and today, and by this time, I'm a bit more encouraged, but still stumped.
These nested divs are a bear, aren't they?
If you look at the link in my profile, that gives you what I had with absolute positioning. Change the 4 to a 5, and you can see what I did as for relative positioning. It is getter better, but I've still got a few problems.
By setting the two image divs that precede the titleblock div to relative, I lost the ability to have my titleblock automatically set its width based on text in the block. I tried moving my titleblock class to the top of the stylesheet, but that didn't make a difference. I tried putting a clear div before the titleblock, but that didn't help either.
I have a huge "white" space in between my two child divs. The parent div isn't expanding. And it now looks funky in Opera (just upgraded to 7.11), but fine in IE.
Welcome to the wonderful world of web design and browsers, huh?
Am I just in way over my head?
You want to have a parent div with two children like this..
parentchild onechild two
yes?
So your html should look like this..
[pre]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>EXPERIMENT</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type"
content="text/css">
<link rel="stylesheet" media="all"
href="experiment.css" type="text/css">
</head>
<body>
<div id="parent">
parent
<div id="child1">
I am child one
</div>
<div id="child2">
I am child two
</div>
</div>
</body>
</html>
[/pre]
And for clarity put this in your CSS file...
[pre]
#parent {
border: 1px solid #00f;
}
#child1 {
border: 1px solid #0f0;
}
#child2 {
border: 1px solid #f00;
}
[/pre]
Okay, view that in a browser, you now have a parent div (with blue border) containing two child divs (first with a green border, second with a red border). As the child divs expand the parent will grow to aaccomodate them.
Now.. what is it you want to do with this?
[edited by: Marcia at 2:39 pm (utc) on June 18, 2003]
[edit reason] Line breaks to fix side scrolling. [/edit]
_______________________
¦ Parent ¦
¦ ¦
¦ ___________________ ¦
¦ ¦_¦1__¦___4___¦_3_¦ ¦
¦ ¦ ¦_____5_________¦ ¦
¦ ¦2¦ ¦ ¦
¦ ¦ ¦ ¦<----------Child 1
¦ ¦_¦ 6 ¦ ¦
¦ ¦ ¦ ¦
¦ ¦_________________¦ ¦
¦ ¦________7________¦ ¦
¦ ¦
¦ ___________________ ¦
¦ ¦_¦1__¦___4___¦_3_¦ ¦
¦ ¦ ¦_____5_________¦ ¦
¦ ¦2¦ ¦ ¦
¦ ¦ ¦ ¦<---------Child 2
¦ ¦_¦ 6 ¦ ¦
¦ ¦ ¦ ¦
¦ ¦_________________¦ ¦
¦ ¦________7________¦ ¦
¦ ¦
¦_____________________¦1 spans the child div (its parent) 100%. It is a repeating y-image so it can (theoretically) resize within the div with the browser window (worked great as an in-line style, but breaks on re-size with css).
2 has a single image. I tried to make it into a background image for the class, but it wouldn't show, so it is placed within the div. The z-index is greater than div1, so it overlaps for a "seamless" graphic at top:0px; left:0 px
3 is a terminating graphic (a "fringe" for the woven tapestry in divs 1 and 2). It is aligned right so it is always the termination of the y-repeating image in div1. Again tried to make it into a background image, but it wouldn't show, so it is an image within the div.
4 is a title div for the story within the child. When set as an inline style, it would resize itself based on the text inside the div and the padding I had set. As CSS style, it NEEDS to have some sort of width designation, or it goes crazy, over-indulges, if you will, so it won't auto-size.
5 is another block for the date posted - seems to work fine so far for the most part. Acts a little funky in IE and Opera - differently funky, but funky nonetheless!
6 is the block for the actual story - seems to work fine for the most part.
7 is the footer (which is positioned at bottom left - seems to be fine except for some funky widths, which I can live with)
This child div could potentially repeat several times on a page (it's a PHP repeating region). They are resizing vertically just fine (although there is a big gap between the two, and no hidden <p's>
Other than the 2 child divs within the parent, there are a couple of more divs on the page, which are absolutely positioned, and seem to work just fine.
Due to the complexity of the design, am I just asking for trouble? Is this a job for tables? I really wanted to have a liquid layout, but I'm beginning to think this is impossible.
I did the three image divs so that the top tapesty could expand and contract based on window size, instead of doing just one image as a background and no-repeat.
I THINK I did this logically, but maybe it's too complex.
Would appreciate any help . . . BTW, thanks for all of the help you given so far!
_______________________
¦......Parent.........¦
¦.....................¦
¦.___________________.¦
¦.¦_¦1__¦___4___¦_3_¦.¦
¦.¦ ¦_____5_________¦.¦
¦.¦2¦...............¦.
¦.¦ ¦...............¦<----------Child 1
¦.¦_¦.... 6........ ¦.¦
¦.¦.................¦.¦
¦.¦_________________¦.¦
¦.¦________7________¦.¦
¦.___________________.¦
¦.¦_¦1__¦___4___¦_3_¦.¦
¦.¦ ¦_____5_________¦.¦
¦.¦2¦...............¦.
¦.¦ ¦...............¦<----------Child 2
¦.¦_¦.... 6........ ¦.¦
¦.¦.................¦.¦
¦.¦_________________¦.¦
¦.¦________7________¦.¦
¦_____________________¦
Heres the basic markup for your story structure (without the fancy background stuff at the top).
<div id="stories">
<div class="story">
<h1 class="storytitle">A Story Title</h1>
<div class="dateposted">Posted on 18th June 2003</div>
<div class="storytext">
<p>
This is the text of the story.
</p>
<p>
blah blah blah.
</p>
</div>
<div class="footer">I am the story footer</div>
</div>
</div>
Fairly sensible stuff.
Notice that this looks okay and makes sense even without any CSS styling - this is a 'good thing'. It also validates as HTML4.01 Strict - this also is a good thing :)
Feel free to repeat the <div class="story"> block a few times withink #stories to simulate multiple stories.
Now lets add some of those styles you want..
#stories {
width: 70%;
margin: 0 auto;
border: 1px solid #000;
background: #eeb;
}
.story {
border: 1px solid #000;
padding: 5px 20px;
margin: 20px;
background: #fff;
}
h1.storytitle {
display: block;
margin: 0;
text-align: center;
}
.dateposted, .footer {
text-align: center;
font-style: italic;
}
That should look fairly reasonable, if a little bland.
And it should display the behaviour you were looking for (i.e. #stories grows to fit its children, whole page is fluid, long headlines wrap properly)
Okay so far?
This is what I ended up with that works (with a couple of little quirks left):
body {background-color:#1b3500;}
div#schebang {
position:absolute;
top:15;
left:10;
border: 6px inset #FFEe77;
background: #f5f8ef url(vytis_bk4_sm.gif) bottom right no-repeat fixed;
z-index:1;
}
div.storyblock {
position:relative;
margin:100 25 0 175;
z-index:3;
}
div.story {
z-index:3;
background-image: url(st_zime_1_trans.gif);
background-repeat: repeat-x; border: 1px none #000000;
}
div.zimeend {
position:relative;
width:100%;
height:28px;
z-index:11;
right: 0px;
top: 0px;
border: 1px none #000000;
text-align: right;
}
div.sidezime {
position:relative;
width:27px; height:121px;
z-index:20;
left: 0px;
top: -28px;
}
div.titleblock {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: left;
position:relative;
z-index:11;
left:70px;
top: -146px;
border: 1px none #000000;
padding: 3px 15px 0px 15px;
background: #FFFFFF;
}
div.posttime {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
font-size: 85%;
position:relative;
top:-146px;
height:27px;
z-index:6;
padding: 10px 10px 10px 37px;
background-image: url(story_hd_bk.gif);
font-size: 85%;
}
div.storytext {
position:relative;
top:-170px;
z-index:6; padding: 10px 25px 10px 67px; border: 1px none #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
font-size: 85%;
}
div.storyfooter {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
font-size: 85%;
position:relative;
bottom:0px;
height:27px;
z-index:6;
padding: 10px 10px 10px 37px;
background-image: url(story_hd_bk.gif);
}
I set the storyblock position:relative and added margins instead of top: and left:
I took my logo, navigation, and weatherblock divs (they've still got inline styles, but not for long) out of the schebang div, where they were screwing up the relative position of the storyblock div. I tried them before schebang, but it still threw things off, so they are at the bottom of the doc.
The only problems I have left, it seems are these:
So, thanks for your help, and for helping me help myself. If you have any insight as to the last quirks, I sure would appreciate it!
Oh, you can see the new page in action (with the unhappy fix for the titleblock) by going to the updated link in my profile. AND both IE and Opera like it! I admit I don't have the best testing environment. I had to tweak a few things to get both happy.
P.S. I usually use Dreamweaver, but does it screw up the positioning in the WYSIWYG environment! - it's basically just a plain text editor with easy access to previews and uploads when using CSS for positioning.
[edited by: EsmereldaPea at 2:12 pm (utc) on June 18, 2003]
Start from the code I just gave you, it has all the basics you are looking for and behaves correctly.
There is a navigation menu to the left that there has to be room for, another box at the top where the storyblock needs to move down from the top, and all of the divs within each story need to line up exactly. If you have any suggestions for accomplishing this without using position:relative, then I'll be happy to try, but after hours of changing, previewing, and reading references, and getting help from you - this is what I came up with that works. If something is cleaner and sleeker, I'd be happy to try, just give me some direction as to positioning without using position:relative or position:absolute.
I thought I had accomplished quite a feat, based on my failures over the last two days to get anything resembling my original design, but perhaps it's still only a start . . .
Can't help you anymore tonight - I'm off to bed - but I'll drop by tomorrow and see how its progressing.
Meanwhile I suggest you try using the W3C CSS Validator [jigsaw.w3.org] to check your CSS. I can see at least 2 mistakes (missing measurement units).
from bunltd;
By the way, you might want to edit your post and remove your URL - it's against the TOS...
I looked through the TOS, and nowhere does it say you cannot post a url of a page you are requesting help with (otherwise, the url tag would not be allowed in style codes, right?)
The TOS does say that "Links to adult content . . . or messages describing anything against the law will be removed as soon as possible" by no stretch of the imagination is my page considered adult content.
It goes on to say "Please don't drop promotional urls" and "We do not allow review my site posts" This was neither.
In addition, the Charter for the CSS forum states "Url's, "check my profile" and "Sticky Me" posts will also be edited". This is at best vague - regarding what?
"Linking: We do occasionally link to authorative sites. We prefer not to link or post urls to tutorials and articles under most circumstances. We do not post 'test pages' or 'examples'. or personal urls of any nature. We prefer to educate by giving people authoritative resources and prevent any possible conflicts of interest. "
I took this last paragraph to mean that those giving help do not post "test pages." I have seen many older posts in this forum with urls to pages they are working on, and they have not been edited out. With a complex page like this (at least the layout is complex to me), how am I supposed to give people who are trying to help me an idea of what exactly it is that I am trying to do?
I removed my URL as you requested, but on greater examination, perhaps I didn't need to. I would like to hear from the moderator on this, so I don't upset the TOS, but can still get the help I need, and I'll be happy to abide by his/her guidance.
Sweet Dreams!
Line : 19 Level : 1 You have no color with your background-color : body
(along with a couple of others)
Yet it later goes on to list the following under Valid CSS informations
body {
background-color : #1b3500;
}
Is it giving me that because I am not using a "web-safe" color?
When I first arrived I also thought this was a little strange, but in fact it makes good sense. Say you have a problem with a page and you post a url. You then have a discussion and fix the page. That thread is now worthless to everyone else because the page is fixed so they can;t see what the problem was.
Conversely if you post some code or an explanation then the problem and its solution is there for everyone to see for years to come. :)
In general posting links is discouraged because they want this board to be a resource in its own right - but links to authorative sites (like w3c) are allowed and often useful.
Is it giving me that because I am not using a "web-safe" color?
Nah.. its just a warning because in theory you are supposed to always specify a color: when you specify a background: and vice versa. Its still valid though. If you want to get rid of it then just specify
color:inheritSo where were we?
The code I gave you describes the basic story structure - so what extras do you need? A nav bar? For the story or for the whole page? A fancy background image or two?
Try setting a bottom rule to match the top rule, i.e.,
...
top:-170px;
bottom:170px;
...
That *should* (in effect) shift the entire content block up 170 pix and allow for the next block to begin directly below it.
Shelumi`El
Jordan
S.D.G
I exchanged a few emails privately with EsmereldaPea and we got her layout working as she wanted it.
Basically we ditched (almost) all the absolute positioning and used just used normal flow instead.
I try to avoid using absolute positioning where possible. Sticking to a normal flow layout means that the site now makes sense even without any CSS. This is an important feature as it means better accessibility, compatability with small screen browsers and good spidering.
Note: the site design did NOT change, we produced exactly the same look with normal flow as EsmereldaPea was aiming for with her absolute layout.
