Positioning

Hi, all. I absolutely LOVED the CSS Live class, and hopped right into what I thought would be a really simple web design based on my husband’s business card. And long story short, I’ve been up the last three nights until 2:00 a.m. trying to make it work. I’m asking here not for THE solution, just IF my design is even POSSIBLE! I’m really a beginner, and I will stay up until I figure it out, but I sure would hate to keep trying if it ain’t goin to work! So, here’s the skinny:
On the page are two columns, left side black, about 350 px wide, the other side (main content) is white. I want the firm logo to be fixed on the lower left side of the viewport, so that when you scroll down the page, the black column moves but the logo stays in place (it has a black background that blends in with the column). I want the footer in the white, main content area fixed to the bottom right side of the viewport, so that it lines up with the bottom of the left logo but aligned to the right. It’s just ordinary footer text. In the main content area, I want about 5 headings that I can insert a Spry Accordion in, so that the paragraphs will fold out and in, thus making the height of the page expand up and down. I’d like the main content side to be “liquid” but I can live without that. I’ve tried to attach a rendering (which is more blue and white than black and white, but the final page will be black and white–kind of a moot point). Anyway I have tried all the positioning I know, and I had it at one point until I put the accordion in, then the left side broke, and now I’m so confused I don’t know what all I’ve done and what I haven’t yet tried. So, if any of you kind people who have had the patience to read through this can just tell me, “Lady, this just can’t be done,” I’ll go about this in a different direction, but if it can be done, all I’m really asking is if the positioning rules can accomplish this. Any takers?

After reading your post and looking at the image the answer is - Yes! it is definetly achievable. If you require more help fire away =)

Ant

I’ve uploaded my latest changes to www.kbradshaw.com. It’s looking better (thank you, Rayzur!), but I have a problem when the page gets sized down below 960px and the scroll goes into effect. The content on the right housed inside a Spry Accordion moves under the black logo image on the left. I had to resize the image to make it taller with overflow:hidden to correct a break in the page on resizing, only to discover this other problem. Also, the vertical alignment of the Accordion that worked so nicely in the strictly-CSS-code-“accordion” offered by Rayzur doesn’t work so well using the Spry accordion. Maybe I’m not understanding how to utilize the display:inline property and value correctly. Anybody have any luck with these issues (if I even explained them adequately)? I’m going to do some research on how to make the Spry Accordion work with Javascript disabled, but I haven’t gotten there yet. I disabled my Javascript and couldn’t access the hidden text that becomes visible using a script. Thanks for any feedback!

Both your’s and my designs break when sizing down, and pretty much at the same width. You can see on the attached two screen shots.
Hi,
I haven’t seen your SS’s yet but I know what you are talking about, that is just something about fixed positioning that you have to live with. Early on in this thread i stated that fixed position layouts are very difficult to get working.

Since my last post I have gone through and reworked a lot of the styles in the accordion.css and cleaned up some other things as well. I have the accordion set to a 90% fluid width and 750px max-width now. That div is an inline-block so it will center vertically, I have it centered horizontally now with text-align:center on the #main div. The black BG color on the accordion is just for testing so don’t pay any attention to it.

I have set min-width:820px on the #wrap div now and the accordion does not scroll over the fixed logo unless it gets smaller than that and the user scrolls it over. That is the best you are going to get with this layout I’m afraid.

All the links in my last post have been updated and I have added more comments in both css files. Read through them and they will help you understand what is going on.

I forgot to ask you something, Rayzur: What do you mean by “image replacement technique”?
I have done that and I made the logo an H1. It is still positioned at the bottom of the page but I actually moved it to the top of the source order so it will make sense if css is disabled. I also made the headings in the accordion H2s’. If you view the page with images turned off you will see the replacement text underneath the logo image.

I actually like the way the page displays in IE6 better :slight_smile:
I gave it an AP logo instead and the accordion does not scroll on top of it but it stays at the bottom unless you shrink the viewport height too small. Then it scrolls up with the rest of the page but it is not a big deal.

Dear Rayzur,
Wow! I mean, WOW! I’m kind of speechless at the amount of effort you put into this. And I’m pretty humbled. Thank you.

Okay, I have my breath back.

First of all, I have to apologize. I was getting so frustrated, that I thought, what would this look like if I just made it a “simple” fixed position layout, so I switched courses for a brief time just to see if it would really be that different, then I uploaded it so my husband could see it from his computer at work today. I kind of forgot that I had posted a link to the fluid/fixed positioning site I was working on. So in a way I had temporarily given up, but I also wanted to see if I was just making this harder than it needed to be. So anyone trying to follow my link saw something much different than what my posts were all about. So sorry to be confusing things here. I put my latest rendition back up, and it’s obvious that it still needs a lot of work. And I have to say that when I asked my husband to look at the “fixed width” site today, he politely turned his nose up at it and said he liked the direction my other site was heading in better, and I agree.

Secondly, I have some general and specific questions for you, Rayzur. I see that what you have done “simulates” a spry accordion using CSS. Is that a better way to go than to insert a Spry accordion from Dreamweaver? Is a CSS accordion more accessible than a Spry? The “target” one that you created is great and it seems very (for lack of a better word) sturdy, but it’s not as smooth as the Spry. Do you mind sharing your thoughts on that? In thinking about whether or not to use a Spry accordion, I’m not exactly sure what all I would need to change in your example. I’ll experiment and see what I find out. (I really am learning a whole lot trying to work this out!)

As for specifics:

  1. What does “height: 100%” accomplish in the html and body tags? Fill the viewport w/100% of the web page? I will experiment with commenting it out and see what happens.
  2. What are “whitespace nodes” and how does “font-size: 0;” kill them?
  3. On your #nav li element, why do you put “26px/30px” as your value for the “font” property? Is that a range?

There are other things I don’t understand, but I’m not going to pester you so much right now until I have a chance to maybe answer my own questions. (But WARNING, probably more pestering to come!)

You know, if you worked in my office, assistance like this would warrant flowers or a fruit basket or a free lunch at a nice restaurant. It seems a little insufficient to just say “Thank you,” but I do thank you, very much.

katieB

While I was still focused on this code I went ahead and set up a few more examples with working CSS driven accordions.

You can find them all in This Folder.

The one that uses :focus will not work in safari or chrome.

The pseduo:target version is working in all browsers with a little js help for IE.

The pseudo:hover version works in all browsers without any js. (a little shaky)

I would probably opt for the :target version as it is a clickable alternative to spry or jQuery.

Yes, the script is overriding the overflow:auto and 200px height. When you turn off the js all divs are open at 200px and the scrollbars appear when it overflows.

I just found this Lightweight Accordion when doing a quick google search.

It weighs in at only 1.2kb vs. the 14.9kb that your spry is using (of course your spry js is loaded with comments too)

It might be something to consider :wink:

Howdy, Ray.
I do understand why you don’t want to have long line lengths for ease of reading. I just didn’t understand why you would also apply a 90% width. I know this is a basic concept, but I guess I get confused when you can apply more than one value to the same property, like width. I have been commenting out and also changing the width % to see exactly what it’s a percentage of. I know it’s assigned to the #Accordion1 div; so that would mean the #Accordion1 div can take up to 90% of the #main div? Forgive me for being obtuse about this. It’s these types of confusions that get me stuck.

While I’m at it, the overflow property on the .AccordionPanelContent: What does the value “auto” mean? For experimental purposes, I replaced “auto” with “hidden” and it looks the same to me. I made a guess that maybe “overflow” needed to be set to “auto” so that if Javascript was disabled, the full content wouldn’t be “hidden”; however, I tested that theory out and I was wrong–it didn’t seem to matter. Can you enlighten me?

And I see your “clear:both” attribute on the #logo div. Since it’s fixed, what is it clearing?

(If you are getting bored and wish I would just go away, please, please tell me. I will totally understand. You have helped me understand so much already, more than I could have hoped for. You will not hurt my feelings.)

I have a question on setting the accordion to 90% width and giving it 750px max-width. Why do you need both?

Hi Katie,
You don’t have to use the max-width, I just used it so the nested p tags would not turn into long strings of text on widescreen monitors. Generally speaking you don’t want the user to have to scan from one side of the monitor to the other reading extremely long strings of text.

I forgot to ask you something, Rayzur: What do you mean by “image replacement technique”?

If I read all the requirements correctly, yes this is very possible, you will have to deal with fixed positioning a good bit, but yes it’s possible.

You will also need a good bit of JS on the page, hope you make it accessible for people with JS off :wink:

Thanks, Ray. I’ve been working really hard and haven’t had much time. With your help, I think I’m beginning to understand how to construct a site in a good, solid way (I just wish we weren’t dealing with fixed positioning!). I’m also beginning to understand the “inline-block” attribute. I have a question on setting the accordion to 90% width and giving it 750px max-width. Why do you need both?

Hi Katie,

Your welcome, glad you found it helpful :slight_smile:

As for the 1-3 specifics that you have questions about:

1) The 100% height on the html/body elements serve as a reference for the child elements. Normally we only need it to serve as a reference for the first direct child of the body which is the main wrapping div. Most of the time that is done so we can set min-height:100% on the wrapping div. In this case I am trickling that 100% height all the way down to the <span id=“va-mid”>. That is what is centering the #nav vertically. It has to be an inline element (or a table) in order for vertical-align to work, I used a span in your page but it can be a <b> element also as seen below.

Here is a reduced example of the method.

2) Whitespace nodes are caused when there are adjoining inline elements in the html that start on a new line in the page source. It creates a space between them that is about 3px wide and it is sometimes undesirable when it happens in a <UL>. It is because the <LI>s’ are not all in one long string of characters which is just as undesirable when you are setting up your code.

Take this example and comment out the font-size:0 from the #nav and you will see the nodes appear.
font-size:0; on the parent kills the nodes because the nodes are derived from the font-size. For the sake of testing you can set font-size:40px; on the #nav in that example and you will see the nodes get very large.

Here is an article gives some more explanation on it.
[URL=“http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/”]CSS display: inline-block: why it rocks, and why it …

3) 26px/30px ?
The 26px is the font-size and the 30px is the line-height.
That is how you group those property values together when using the shorthand font property.

Dear Rayzur,
Once again you’ve solved my problems (I’m beginning to be embarrassed). And once again I have more questions. I understand what you are talking about when you say

You really need to keep the logo as narrow as possible because fixed elements are positioning from the viewport.
One problem with this is my husband wanted the logo bigger and the black area wider. He has an MFA in art and I can’t draw stick figures, so I don’t argue too much about the design aspect. Both your’s and my designs break when sizing down, and pretty much at the same width. You can see on the attached two screen shots. So that’s why I made the logo image really tall, with overflow hidden, since with this design, the focus is at the bottom instead of the top. But of course, it’s not without its drawback. If there’s no fix for this, and you don’t see any drawback other than the obvious, it may just have to be his choice. I left the “faux” image in, but unless someone was viewing the page on a very large screen, I don’t think it’s going to come in to play with the way I have it now.

Thanks for sorting out the vertical alignment. I actually had the right idea, that the #nav css would transfer to the accordion. And I left in the span tag in the html and knew that the css that went with it needed to transfer to a part of the Accordion, but I didn’t see how you could use display:inline-block for a whole div. I thought it could only be applied to an inline element, and I didn’t see how a whole accordion could be an inline element. Of course, you had placed it on a nav element and an ul element, so I should have known better. Also, since the Spry Accordion creates its own style sheet upon insertion, I didn’t realize you could style it from the styles.css page, too. Anyway, thanks for fixing that.

I commented out width:500px on the #Accordion1 tag because my husband really likes the fluid text aspect. Is that going to cause any problems? It doesn’t seem to, at least not with Safari, Firefox or Opera. I usually have to go to work to check on IE7, and I can check tomorrow on IE8, too.

I have been trying to learn web development for a couple of years. I have taken a class in HTML/CSS, Photoshop and Dreamweaver at the local community college, and I’ve bought a lot of books, subscribe to lynda.com, and just recently participated in Sitepoint’s CSS Live class. I use Dreamweaver as my text editor, but I don’t use the WYSIWIG feature because I’d rather be behind the scenes, so to speak. Besides, it never works right when I try to do a page in design mode. I have a lot to learn, I just need more time in a day! Going back and forth on this has been really helpful. Thank you.

but if it can be done, all I’m really asking is if the positioning rules can accomplish this. Any takers?
Hi katieB :slight_smile:

I had noticed your post when you first posted it a couple of days ago. I knew it was going to be tricky hence the reason you never really got any firm instructions on how to go about it. The only one that would really need any scripting would be IE6 since it does not support position:fixed.

I just looked at your current progress, it looks like you may of gave up on the fixed footer and logo. I’ll go ahead and post what I had come up with.

I had saved a copy of your original image from post#1 of how you wanted it to look and I was tinkering with it in my spare time. From looking at the image it appears that you wanted the text/accordion items on the right side to be vertically centered in the viewport. That could have been done easily with display:table and vertical-align:middle but once again IE6/7 spoil that option since they don’t support display:table.

We can get around that by using display:inline-block; and some other workarounds for IE6/7. They don’t have native support for inline-block but they can imitate it quite well. In my example below, the list items on the right side (with the white background) are vertically centered between the top of the viewport and the top of the footer. The ul#nav (green background) has a 65px bottom padding which helps accomplish that.

Fixed position elements are similar to absolute positioned elements except they position from the viewport. They can be kinda difficult to work with since they are removed from the normal page flow, the main trick is to preserve the neighboring elements with padding so the fixed elements have the room they need.

Here is a live example of what I came up with, it has some bright BG colors to show what is going on.
http://www.css-lab.com/test/katieB/katie.html

I don’t really bend over backwards to simulate fixed positioning in IE6 anymore and I just give it a working page with position:absolute as a fallback for the fixed elements. Luckily IE7 does support it so that is not a problem there.

The code may be a bit confusing but if you have any questions I will try to explain it if needed.

I also used This Image to color the left side of the body element, that allowed me to keep the BG color as white so it blended in with the #main div.

Hope that Helps :slight_smile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>McCracken Law Firm</title>

<style type="text/css">
html,body {
    height:100&#37;;/*reference height for #wrap*/
}
body {
    margin:0;
    padding:0;  
    font:100%/1.4 arial,helvetica,sans-serif;
    background:#FFF url(faux.png) repeat-y 0 0;/*color the left column*/
}
ul,ol {
    margin:0;
    padding:0;
    list-style:none;
}
#wrap { /*for IE6 min-width*/
    height:100%;
    min-width:960px;
    position:relative;/*for IE6 AP footer/logo*/
}
#main {
    height:100%;
    margin:0 0 0 350px;/*space for the left #logo*/
    background:#FFF;  
}
#nav {
    width:500px;/*600px w/padding*/
    display:inline-block;
    vertical-align:middle;
    padding:5px 50px 65px 50px;/*65px bottom padding to preserve footer*/
    background:lime;
    text-align:center;
    font-size:0;/*kill whitespace nodes*/
}
    #nav li {
        display:inline-block;
        width:500px;
        margin:5px 0;
        font:bold italic 26px/30px georgia;/*reset font-size*/
        background:#FFF;
    }
span#va-mid {/*center the ul#nav vertically*/
    height:100%;
    display:inline-block;
    vertical-align:middle;
    overflow:hidden;/*Oopera needs this*/
    /*font-size:0; /*commented out for demo to show what 100% high span is doing*/
    background:red;/*just to show "height-reference span" in the demo*/
}

ul#footer {
    position:fixed;
    left:0;right:0;bottom:0;    
    height:32px;/*60px w/padding*/
    padding:14px 0 14px 350px;
    text-align:center;
    background:#77F;
    font-size:0;/*kill whitespace nodes*/
}
    #footer li {
        display:inline-block;
        padding-left:8px;
        font:bold 14px/18px arial;/*reset font-size*/
        background:#FF0;
    }
    #footer li b {
        display:inline-block;
        vertical-align:top;
        height:14px;
        margin-top:2px;
        padding-left:7px;
        border-right:1px solid #000;
        font-size:0;
        overflow:hidden;/*IE6*/
    }
    #footer li.last b {
        border:none;
        padding-left:8px;
    }
    
#logo {
    position:fixed;
    left:0;
    bottom:0;
    width:350px;
    height:100px;
    background:#111 url(logo.jpg) no-repeat;/*future logo image as BG*/
    color:#FFF;
}
    #logo p { /*temporary placeholder for BG image*/
        margin:0;
        padding:10px 0;
        font:bold 20px/22px georgia;
        text-align:center;
    }        
</style>

<!--[if lt IE 8]>
<style type="text/css">
* html #wrap {
    position:relative;/*IE6 (for footer and logo)*/ 
    width:expression( document.body.clientWidth < 962 ? "960px" : "auto" ); /* set min-width for IE6 */
}
#nav, #nav li, #footer li {display:inline;}/*IE6/7 inline-block trip*/
* html #logo,* html #footer {position:absolute; margin-top:-60px;} /*IE6 (no native support for fixed position)*/
#footer li b {margin:1px 0 0;}
</style>
<![endif]-->

</head>
<body>

<div id="wrap">
    <div id="main">
        <ul id="nav">
            <li>This firm will bring you more than<br> "just" results</li>
            <li>Meet the Lawyers</li>
            <li>Interesting Reading</li>
            <li>Resources for You</li>
        </ul>
        <span id="va-mid">&nbsp;</span>
    </div>    
    <ul id="footer">
        <li>McCracken Law Firm<b>&nbsp;</b></li>
        <li>3200 SW Freeway<b>&nbsp;</b></li>
        <li>Sometown, State 77777<b>&nbsp;</b></li>
        <li class="last">Copyright 2010<b>&nbsp;</b></li>
    </ul>
    <div id="logo">
        <p>McCRACKEN<br>LAW FIRM<br>Trials and Appeals</p>
    </div>
</div>

</body>
</html>

Well…since you offered. Here is a link to what I have so farhttp://www.kbradshaw.com. I know the image is fuzzy, and the accordion isn’t formatted quite right, but it’s the jist of what I’m looking for. However, looking at it on IE7 and 8, the “bottomline” div (the footer) is cut off, and I can’t even fit the page on the IE7 computer at looked at it on this afternoon. So I have more work to do. Also, there is a default border that appears most of the time (not all the time) on the accordion once you click on it, and I would really like to get rid of that (I’ve removed every border property I could find!). Then RyanReese pointed out that some people might have JavaScript turned off, so I have to think about what to do there. I may have to jump on over to the JavaScript forum because I know NOTHING about JS. I really wish everything looked the way it does on Firefox 3.6 on the Mac, ah, then life would be a dream…

I do understand why you don’t want to have long line lengths for ease of reading. I just didn’t understand why you would also apply a 90% width.
I gave it a fluid width because you had said that is what you wanted. I gave it the max-width for readability as you understand. The fluid width helps prevent a premature horizontal scrollbar until the layout reaches 820px.

I know this is a basic concept, but I guess I get confused when you can apply more than one value to the same property, like width. I have been commenting out and also changing the width % to see exactly what it’s a percentage of. I know it’s assigned to the #Accordion1 div; so that would mean the #Accordion1 div can take up to 90% of the #main div? Forgive me for being obtuse about this. It’s these types of confusions that get me stuck.
That’s correct, it is 90% of the available space of #main and it does not exceed the max-width on large monitors.

While I’m at it, the overflow property on the .AccordionPanelContent: What does the value “auto” mean?
When a height is set on an overflow:auto; element it will give it a scrollbar if the content exceeds the height. A lot of times it is done for insurance to allow access to the content when a fixed height is set.

The script must be overriding the height though because I just cranked up my font-size and I never got a scrollbar on that div.

And I see your “clear:both” attribute on the #logo div. Since it’s fixed, what is it clearing?
I think that got left in there by mistake, I was floating a left column at one point in time when i was working on it.

If you are getting bored and wish I would just go away, please, please tell me.
Your not bothering me, don’t worry about it :slight_smile:
I think you have seen what this layout is and isn’t capable of doing but just fire away if you have any more questions.

but I have a problem when the page gets sized down below 960px and the scroll goes into effect. The content on the right housed inside a Spry Accordion moves under the black logo image on the left.
Hi Katie,
That is because the fixed left #logo creates a new stacking order since it is a positioned element. The other problem is because you have increased it’s height. The code I was using had it as short as possible while using a repeating image on the left side of the body to tie it together and create a column.

You really need to keep the logo as narrow as possible because fixed elements are positioning from the viewport. I changed it back to 350px,
what I did was slice out the text in your image and scaled it down (kinda blurry you might want to remake the image) 350px x 140px.

Here is the Logo Image I’m using and here is the [URL=“http://www.css-lab.com/test/katieB/test/images/faux-350.png”]Faux Image

Here is the New Page and here is [URL=“http://www.css-lab.com/test/katieB/test/”]All the Files

Also, the vertical alignment of the Accordion that worked so nicely in the strictly-CSS-code-“accordion” offered by Rayzur doesn’t work so well using the Spry accordion. Maybe I’m not understanding how to utilize the display:inline property and value correctly.
I kinda thought you may not have understood how that was working :slight_smile:

You removed the span rules from the css and you need to transfer my #nav rules to the spry div.

You will find these selectors in the styles.css located in “all the files” above.


#Accordion1 { /*this was the #nav rules*/
    width:500px;/*600px w/padding*/
    display:inline-block;
    vertical-align:middle;
    padding:5px 50px 65px 50px;/*65px bottom padding to preserve footer*/
    outline:0;
}

span#va-mid {/*center the #nav vertically*/
    height:100&#37;;
    display:inline-block;
    vertical-align:middle;
    overflow:hidden;/*Oopera needs this*/
    font-size:0; /*commented out for demo to show what 100% high span is doing*/
}

It would be a good idea to set that logo as an H1 and use an image replacement technique as well as setting those accordion titles as H2s’. That will give the page some structure that it really needs.