Span/Div tags acting funky

[Mike]

I'm making a site in full CSS, barely any images. You can see the image version of it here: http://img263.echo.cx/my.php?image=site31mu.gif

So far, I have the header working and now I'm working on the small opaque boxes right below the header. I've tried making 5 different div's, all with each color and just placing them below the header but they are all on different lines. Does anybody know a way to stop <div> from having a line break after it.

OR

I also had the idea of using a <div> as a container and <span>'s to have the different colors. Problem became that there was a space auto-inserted after the </span> tag, and the span tag wouldn't use the size I specified.

Anybody know how to solve either of these problems?

[robot180]

What I would have done is to make one div tag and put those in the div using a tags, instead of span tags. This way they are already links. Then use CSS to change the a tags, all with one class, to whatever width, height, font, background, hover, etc. Then use the div with an id or class to set properties for the group of links.

I'm not sure if this is what you are trying to fix.

[Greg Marra]

Can you use a list? <li>'s can be set to display: an iline, and then they'll all be on the same line. For example (this is a really old website, ignore all content and lack of skill involved in creation): this page's navigation bar is created with an <ul> full of <li>'s.

If you really want to use <div>'s, you could set their position to be non-automatic, but this is really messy and IE doesn't do it right.

Regarding auto-space inserted after <span> tags, don't put line breaks between them. You have to do this when you want images to appear exactly next to each other as well. Break it like this:

<span class="foo">lorem ipsum
</span><span class="foo2">lorem ipsum
</span>...

Except in your case, the spans or empty (or I think they SHOULD include a non-breaking space (&nbsp), don't quote me on that).

Hope that helps!

PS. The site looks really good! Nice work!

PPS. I'd really like to take a look at how you're doing that transparency when you release the site or if you care to explain it to me sooner. It would seem to me that a non-fully opaque red would pick up some of the blue from the background and turn purple.

[jonathan lall]

Mike, try setting the CSS rules for the divs to display: inline. This gets into block element theory, but in a nutshell, it should kill the line break caused by the divs. I can't see your source unfortunately, but if you're doing what I think, it should hit the spot. Perhaps I'm misinterpreting this though, so let me know...

Your alternative is to use tables to divide the boxes, or to use images. Judging by your commentary I get the sense you want to do this page the "right" way, using no iffy tricks and sticking to sound markup. Images to acheive what you want isn't such a bad idea, and even tables are relatively acceptable; since you're not enclosing text or other content in these divs, they make no sense anyway, so from a semantic markup perspective, a table is just as "bad" to use as a div for this purpose.

And um, the site looks great by the way.

[Mike]

Thanks for the help, just checked the thread after I found a solution, for those that are interested the solution is found here.

I'm not sure how the transparency will turn out in CSS, but in Photoshop it was fine... then again Photoshop has layers... and CSS doesn't... what have I gotten myself into. I'll cross that bridge when I get to it (and hope it isn't already ablaze). Thanks for the compliments too =)

[Dan Zollman]

Originally Posted by MikeWasHere05

...Photoshop has layers... and CSS doesn't...

CSS doesn't have layers? Only if z-index doesn't count. Look at:
http://www.w3schools.com/css/css_positioning.asp

[Kamikaze]

Originally Posted by MikeWasHere05

I'm not sure how the transparency will turn out in CSS, but in Photoshop it was fine... then again Photoshop has layers... and CSS doesn't... what have I gotten myself into. I'll cross that bridge when I get to it (and hope it isn't already ablaze). Thanks for the compliments too =)

Transparency will be a nightmare. Just merge layers in Photoshop and cut that out.

By the way: Do not make those opaque boxes by creating separate spans for each. That defeats the purpose of the html/css separation as the span elements don't actually structure any content. You may as well just make the whole header a single image.

[Ryan M.]

Originally Posted by Kamikaze

Transparency will be a nightmare. Just merge layers in Photoshop and cut that out.

By the way: Do not make those opaque boxes by creating separate spans for each. That defeats the purpose of the html/css separation as the span elements don't actually structure any content. You may as well just make the whole header a single image.

I think that's going to be a navbar...

I'd make sure to set your padding (margin, I'm never sure. Just experiment ) to 0px all the way around.

[Mike]

Heh, I'll try to explain what parts of the layout are what.

Top cyan color: Header
Opaque boxes below header: Decoration
Boxes below opaque boxes: Nav Buttons
Light yellow opaque bar under nav bars: Sublinks


Transparency doesn't seem to be the problem, but more of lining the divs up right =(. I'm trying to create the sublink bar now, but it's on top of the nav bar, not the main part... I'll keep trying at it and if I still can't get it I'll post it.

[Dan Zollman]

Speaking of transparency, now that I think of it, someone just gave me this link: http://www.meyerweb.com/eric/css/edg...iral/demo.html
It's a really creative way to do this, but once you read the page you can see why it will only work in IE.

Between using
display: inline; for a containing div
float: left and float:right; for internal divs
and <ul>s for a div with menu-like content, see http://dwight.tendirect.com for an example (not my site),
Divs can be used very flexibly and no different from tables.

I've found that these things appear very differently on different browsers, so make sure you test your page on more than one browser, on both Mac and PC.