Lists

[the.shadw.dragn]

How do i make lists run hoizontal. Also, how do I align blocks to the body, for example in the top right corner of the BODY?

Also, what if i wanted to make a list of 3 items to spread longer horizontally.

David

Edited January 21, 2009 by the.shadw.dragn

[falkencreative]

you can make a list display in a horizontal line using css:

 

li { display:inline; }

 

There are different ways to do positioning, so if you had a code sample you were working with I would be able to give better advice about your question "how do I align blocks to the body... in the top right corner of the body?". Usually, I would align thing using the CSS "float" property. For example:

 

.nameofclass { float:right; }

[the.shadw.dragn]

Another question, how to i stick a div container to the bottom of the page?

[falkencreative]

That's a bit more tricky, unfortunately, since the size of the browser window can change and browser support isn't perfect. This is the method I usually use:

 

http://themaninblue.com/writing/perspective/2005/08/29/

[JBall]

@Ben

 

Have you seen any negative side effects from this method, cross-browser? I only ask because of the mentioning of ie7 beta troubles in the comments below that trick. Not that I care much. At least not until ie7 in out of beta....

[falkencreative]

@Ben

 

Have you seen any negative side effects from this method, cross-browser? I only ask because of the mentioning of ie7 beta troubles in the comments below that trick. Not that I care much. At least not until ie7 in out of beta....

 

I'm guessing that you are meaning ie8 beta, not 7... Overall, I haven't had any problems with the above method. I don't know how ie8 will handle it, but, ideally, if it handles it like other standards compliant browsers, there shouldn't be much trouble. ie8 is quite buggy, so I wouldn't rely on it or design for it just yet. For the moment, IE6 and 7 and Firefox / Safari / Opera all work fine with the above method.

[PicnicTutorials]

I'm just going to keep coming in behind you Ben - Post: 1,435

Edited January 21, 2009 by Eric

[Wickham]

I've also had trouble with CSS menus in IE8 beta 2 and no one's sure if they will be cured in the final release. The only certain way is to use the emulate IE7 meta tag so that all viewers with IE8 see the page and work dropdown menus using simulated IE7 put this:-

 

 

just after the

tag of the page so that IE8 viewers will see the menu without needing to use Compatibility View (not lower down in the head tag as it often doesn't work unless it's the first item in the head).

 

Use /> instead of > closing tag if using XHTML.

 

With regard to positioning, display inline and float: left both seem to be used. Sometimes the display: inline doesn't work but a lot of codes use display: block for the li tag so float: left has to be used, but many times I've seen both used (belts and braces!).

Edited January 21, 2009 by Wickham