Viewing Thread:
"CSS Aid"

I'm currently working on my first CSS based site. I have the site with loads of nested tables so I know what I want it to look like, but I'm currently converting to CSS.

I'm doing OK but I am stuck on one thing and Google didn't seem to return anything of use. It's with menus. For this site, I want the menus to appear like:

Menu Header
:: Menu Item 1
:: Menu Item 2

Is there any way so that the :: gets automatically inserted by CSS. I know I could do it using bullet points, but I don't want to use a graphic seeing as :: is just to colons! Please help!

I'm currently working on my first CSS based site. I have the site with loads of nested tables so I know what I want it to look like, but I'm currently converting to CSS.

I'm doing OK but I am stuck on one thing and Google didn't seem to return anything of use. It's with menus. For this site, I want the menus to appear like:

Menu Header
:: Menu Item 1
:: Menu Item 2

Is there any way so that the :: gets automatically inserted by CSS. I know I could do it using bullet points, but I don't want to use a graphic seeing as :: is just to colons! Please help!

You want the ":before" pseudo element: [URL]http://www.w3.org/TR/CSS2/selector.html#before-and-after[/URL] and read at the bottom of the page.

I use it on the category list on my site ([URL]http://timmargh.net/[/URL]):

#categories li a:before { content:url(/images/dots.gif); }

Timmargh wrote:
> You want the ":before" pseudo element:
> [URL]http://www.w3.org/TR/CSS2/selector.html#before-and-after[/URL]
> and read at the bottom of the page.
>
> I use it on the category list on my site
> ([URL]http://timmargh.net/[/URL]):
>
> #categories li a:before { content:url(/images/dots.gif); }

:before is great, but it's CSS2/2.1 and not totally supported across all browsers without a serious hack for IE. I use :after alot for clearing floats, but agin, it requires a little hacking for total support.

#custom-gen ul li:before {
content: "\00BB \0020";
}

= >> xxx as your bullets

From ALA: [URL]http://www.alistapart.com/articles/taminglists/[/URL]
When using these characters, like », it is necessary to encode them as their escaped HEX equivalents. For the right double angle quote, we use \00BB (the other character, \0020, is a space). The final result (remember, the character will only be visible in Opera or Mozilla/Netscape):

Personally I'd go for the image. You only using a single image with a minute file size and it's for visual display only.

Cool, that's great. I think I might make the image tonight. At the moment I have no images on the site.

I've come across a second problem with positioning the footer. It won't put it in the right place:



And my CSS is:

body { font-family: Arial, Tahoma, sans-serif; font-size: small; }

a.menuitem { text-decoration: none; color: #6096BF; display: block; padding-left: 5px; }
a.menuitem:hover { text-decoration: underline; }
a.menuitem:before { content: "\00BB \0020"; }
hr { border: 0; color: #CCCCCC; background-color: #CCCCCC; height: 1px; width: 100%; }

div#container { width: 750px; margin: 0 auto; padding: 0; }
div#footer { border: 1px solid #CCCCCC; }
div#main { float: right; width: 580px; padding: 10px; }
div#sidebar { float: left; width: 120px; padding: 10px; border-right: 1px solid #CCCCCC; }
div.containerbody { background-color: #FFFFFF; padding: 15px; border: 1px solid #6096BF; border-top: 0px; color: #999999; line-height: 1.5em; }
div.containerheader { background-color: #E6F4FF; color: #6096BF; font-size: medium; padding: 3px; padding-left: 20px; border: 1px solid #6096BF; }

span#pageheader { font-family: Arial, Tahoma, sans-serif; font-weight: normal; font-size: 28px; color: #6096BF; display: block; }
span#pagesubheading { font-family: Arial, Tahoma, sans-serif; font-weight: normal; font-size: 20px; color: #80C9FF; }
span.menuheader { color: #596F80; font-size: medium; display: block; line-height: 1.5em; }

Any ideas? The border round the copyright footer is just there to help me see where it is placing it.

Nimco wrote:
> I've come across a second problem with positioning the footer. It
> won't put it in the right place:
>

> div#footer { border: 1px solid #CCCCCC; }
> div#main { float: right; width: 580px; padding: 10px; }
> div#sidebar { float: left; width: 120px; padding: 10px; border-right:
> 1px solid #CCCCCC; }

>
> Any ideas? The border round the copyright footer is just there to
> help me see where it is placing it.

I guess it's those floating divs. Try putting:

between the main div and the footer div as a quick hack.

Read the ALA CSS article, exploring Footers.

Manic Moaner wrote:
> I guess it's those floating divs. Try putting:
>
> between the main div and the footer div as a quick hack.

Worked a charm - cheers. Is there another way to get the layout I am trying achieve without using floating divs?