CSS driving me bonkers

fightinfilipino

so i'm trying to put together a student organization website, and i want to create a header using multiple images and an image-based menu bar.

way back when, i would have used a table for this. i'm sorely tempted to just do that now. but i KNOW there's a way to do this in CSS. can anyone point me in the right direction on this?

Arminas

Well your description is rather vague except that it's an image-based menu bar driven by CSS.

You still need the markup frame to hold the menu items either in table, span or div format. And I guess you could use the hover property, but not all browsers support it.

Or were you looking for a builder of some kind? like.. uhhh google gives me this one
http://www.cssmenumaker.com/

fightinfilipino

well, ok.

i originally had my mockup in photoshop like this:



before, all i would do was split up the mockup into sections, like i have laid out here with the green lines, and then put it together using table html for a web page.

except i know that that's really bad practice, and that there's a way to get images of various sizes, like my slices here, to fit exactly like i want them using CSS.

i just can't figure out what's the best way of doing exactly this...

L Ron Howard

Make divs, give them the different background images, and put them in the exact spot you want..

The_Glad_Hatter

div it. I just started using css to do something similar, and it's very easy to pick up using the WC3 website tutorial/ schooland just googling any problem you encounter (if your google-fu is strong)

wmelon

I'd probably suggest using a ul with an li for each of your menu items. you can set the lis to display:inline-block and have them show up like you've got there.

ransim

http://csscreator.com/version2/pagelayout.php
http://cssmenumaker.com/

These pages will give you exactly what you need and the code to go with it. Like someone else said you want to use a UL with display:inline on the list items for your menu.

Tables are the devil, you only use them for displaying data. If you'd ever been privy to using a screen reader you'd understand why table layouts are the devil.

Also a kitten dies every time you even think about making a table based webpage layout. :P

Edit: Also don't use images for your menu. At least not for the text.

fightinfilipino

ok, i think i'm starting to figure things out.

something i want to do with this layout is stick in a <div> box with no content, but a repeating background image instead, in between two of my image slices. here's my css code so far:

#headertop, #headermid, #headerbtm { 
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	clear: both;
}

#headertop img { 
	height: 48px;
	margin: 0;
	padding: 0;
	float: left;  
}
#headertop .mid {
	width: 531px;
	height: 48px;
	float: left;
	background-image: url(images/site/HeaderTopMidPattern.jpg);
	background-repeat: repeat-x;
}

and the corresponding html:

<div id="headertop">
            <img src="images/site/HeaderTopLeft.jpg" />
            <img src="images/site/Logo.jpg" />
            <div class="mid"></div>
            <img src="images/site/HeaderTopRight.jpg" />
        </div>

is my syntax even correct here? am i way off base?

one of the reasons i want to use a repeating image is to cut down on bandwidth usage as much as possible.

thanks!

splash

People have started to explain it, use divs. Use even more divs than how you currently have illustrated by the slices.

Looking at what you're trying to do, the proper way, you don't need to set any of those divs to margin 0, padding 0, float, clear, or block.

Did you leave any code out? I have to say first of all you want to get started off correctly. The proper thing to do is "Reset The CSS."

body {
background: url(../images/body_bg.png) repeat #f0f0f0;
color: #404040;
font: 100% Verdana, sans-serif;
margin: 0 auto;
padding: 0;
}

That's an example. You want to set the defaults that way, especially starting with the body tag. Then you further define defaults with other tag elements if needed.

Secondly you always want to make a div around the whole content area.

#wrap {
width: 940px;
margin: 0 auto;
}

margin: 0 auto centers the div in the middle of the page.

You can repeat much of the background graphics as you say, but where it curves you need a small div. And where there is solid color and then goes to a gradient you need two separate divs.



I quickly have an example with orange sections to show how I would put the divs. The whole orange border around it is the wrap div. Note: you should put divs within divs. As in there is a large wrap around everything, a wrap around the whole header portion, a wrap around the bottom half portion and work inwards setting the exact width (and height) when needed with additional divs. And as you probably know for any gradient and straight line all you really need is 1 pixel wide by whatever that inside div is height and repeat it along x or y.

I know it's too hard to tell what I've done but it's to illustrate the "divs within divs" concept

fightinfilipino

ok, i spent a lot of today working on this before seeing your last post, so i didn't follow exactly what you recommended, but i feel i'm getting close. i focused on the column setup and basically "started from scratch".

here's what i did: the CSS file:

#container {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0px auto;
	width: 938px;
	border: 1px solid black;
}

#content {
	width: 450px;
	overflow: hidden;
	background-image:url(images/site/CenterColumnPattern.jpg);
	background-repeat: repeat-y;
}

#primary, #secondary {
    position: relative;
	overflow: hidden;
    width: 244px;
}

#primary {
	float: left;
	background-image:url(images/site/LeftColumnPattern.jpg);
	background-repeat:repeat-y;
}

#primary img.foot, #secondary img.foot, #content img.foot {
	bottom: 0;
	padding: 0;
	margin: 0;
	z-index: -1;
}

#secondary {
	float: right;
	background-image: url(images/site/RightColumnPattern.jpg);
	background-repeat: repeat-y;
}

#footer {
        clear: both;
        width: 100%;
}

and the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="3c-b.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
	<div id="primary">LEFT COLUMN<img class="foot" src="images/site/LeftColumnFooter.jpg"></div>
    <div id="secondary">RIGHT COLUMN<img class="foot" src="images/site/rightColumnFooter.jpg" /></div>
    <div id="content">CENTER<img class="foot" src="images/site/CenterColumnFooter.jpg"></div>
    <div id="footer">FOOTER</div>
</div>
</body>
</html>

what i end up getting is:



what i'd like to have happen is the background images in the left, center, and right columns stretch all the way to the bottom of their respective divs, but i can't seem to get that to happen. is there a way to get that to work at all?

i can then mess with the internal text formatting later...

fightinfilipino

ok seriously css is kind of retarded

Dranyth

CSS is amazing (and weird), but I'm not sure what's going on in that example that isn't what you said you want it to do. The backgrounds in the left center and right columns do seem to be going to the bottom of their divs. Of course, you can't stretch background images in CSS, you can only tile or position them, though can still have a fill-in color. Maybe it'll become more clear when there's more content in them to make them taller, in which case you *should* be able to set them all to 100% height so that all of them are the height of the one that makes the containing div the tallest. I think anyway.

splash

Well at some parts of your design you want it to stretch and others you don't right? When the design shouldn't be done with a repeating background image, if you set an exact height and width for the div it will stretch to that. Or if you don't set a height but start putting things into it like <p> tags it will automatically stretch. So it all depends on whats the actual width and height of the background image?

What I think you're trying to do is:

background: url(images/site/RightColumnPatternBottom.jpg); no-repeat bottom right;

That will make it show up at the bottom right area of the div.

But what I was trying to illustrate is that for the right bottom panel you can divide it into two divs. The top div has a background image set to the right and the rest is #color grayish whatever it is. That would be accomplished with something like:

background: url(images/site/RightColumnPatternBorder.jpg); repeat-x top right #ccf; (or whatever color)
You can keep repeating the white line part of the design along the right panel and the rest to the left of it will be filled in with whatever color is listed, #ccf in this example. You can use one background: line of CSS instead of background-image, background-position, etc.

The second div, the bottom div, takes care of that curved line portion of the design and the gradient.

However I differed in my approach in that I think it can be done without floating the right panel to the right but using a couple more divs within divs. But there's a few ways to divide the site up to get the same result really.

Just a general statement about CSS. It is annoying especially when things don't work as you expect and jumping right into it is gonna be a struggle even though it would seem to be so simple. You want your site to look the same across all browsers so you must take the time to start things right instead of hack at things till they work.

fightinfilipino

splash wrote: »

Just a general statement about CSS. It is annoying especially when things don't work as you expect and jumping right into it is gonna be a struggle even though it would seem to be so simple. You want your site to look the same across all browsers so you must take the time to start things right instead of hack at things till they work.

this is probably one of the more frustrating things about CSS. a few browsers (*COUGH*INTERNET EXPLORER*COUGH*) don't render CSS according to spec, and even between the least offensive browsers there are differences.

i'm trying my best not to hack away at it, and reading as much as i can online about "proper" CSS :P

hopefully i'll have a post this afternoon to show for it...

Dranyth

This may help, I've been using it at the beginning of all of my style sheets for a while now (I think it's this version anyway) http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/

It 'resets' CSS taking out some of the differing defaults various browsers have on some elements, in theory then causing anything you do to behave the same way on all browsers.

IE7 is still a bitch about some things though.

splash

Talkin about compatibility.. try Opera. That browser is weird.

For the CSS reset there's tons of HTML tags that nobody will use. Personally here is my official CSS reset start point which I don't think you can go wrong with using XHTML:

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, address, form, fieldset, blockquote {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}
table { border-collapse: collapse; border-spacing: 0; }
td, th, caption { font-weight: normal; text-align: left; }
img, fieldset { border: 0; }
ol, ul { padding-left: 1.4em; list-style-type: square;}

Although I guess I could use the address and fieldset tag I never have. Hmm.

Dranyth

I'm rather curious what issues you've experienced with Opera. It's my main browser of choice and I virtually never see any issues when I'm developing. Opera, Firefox and Chrome all behave pretty much identically. Even IE8 is usually fine, it's only IE7 anymore that I have to tweak for.

fightinfilipino

i've learned Opera has some weird quirks.

CSS for hr elements, for instance. they just don't work the same as Chrome and Firefox.


IE is by far the worst offender though. seriously, FUCK IE6. like, what the hell.



if anyone wants an update on my progress (and seriously, if anyone would like to comment or has suggestions), here's the site i've been working on: www.usdsba.org.