CSS struggles

Eric Chadwick · Aug 2006

I'm trying to ditch HTML tables in favor of formating blocks entirely with CSS, but am having some problems.

I'd like a column of images, each having some explanatory text on the right.

<font class="small">Code:</font><hr /><pre>
blah. 1. blah blah. 2. blah.

float: left; clear: left; for the IMGs, it seems to kill the indents of the numbered lists. The numbers are now pushed to the left of the list text, instead of the text being pushed to the right. How do I get those indents back?

I've been poring through the CSS spec to learn CSS. But it's pretty dense reading material at times. Can anyone recommend some good sites for learning commonly-used CSS tips/tricks?

bearkub · Aug 2006

paging Rick Stirling. Rick Stirling to the CSS assistance area.

ChaosEidolon · Aug 2006

hmm...are you floating them inside of a div tag?

If you posted an example I might be able to help, I dont think im quite getting what you mean from your explaination.

snemmy · Aug 2006

www.glish.com/css

Eric Chadwick · Aug 2006

Thanks for looking at this. Here's an example.
http://www.ericchadwick.com/examples/images/test.html

Nice site snemmy, thanks.

sonic · Aug 2006

if you want the bottom text aligned to the right, do something like this:

<font class="small">Code:</font><hr /><pre>
<div style="width:WHATEVERpx" class=wrap>
<div class=top>
<span style="width:90%>
<img src=image.jpg>
</span>
<span style="width:10%">
<top line right text>
</span>
</div>
<div align=right class=bottom>
bottom text you want aligned to the right
</div>
</div>
</pre><hr />

sonic · Aug 2006

or if you want a simple indented list, just do an <ol> or <ul> underneath the first div... if the top margins bother you, just put 'style=margin-top:0px;' in the <li> tags and the <ol> tag... also that doesn't work in firefox, so you'd have to put that above part in an IE conditional and then for firefox put: position:relative; bottom:7px;

sorry if that was super confusing

Rick Stirling · Aug 2006

Paste up an image of exactly how you want it to appear - picture, 1000 words, etc.

The thing about CSS is - it's simple a series of containers (not boxes).

Break everything down into containers, then subdivide each of those.

As a rough guess I think you want a column of data blocks. Each data block is then divided into a left (image) side, and a right (text) side. The text is going to be a list (with a header), and you will apply some styling to the list as well.

using that, a rough guess is

<data block set to clear>
<image block styled to float the next item alongside>
<text block set to clear>
</data block>

Like I say, post an image.

MoP · Aug 2006

Rick, he even posted a page with an example of what he wants. Read the bloody thread!

Eric Chadwick · Aug 2006

Browser rendering differences, eh? I'd like it setup similar to the circled section, rather than the upper part.
http://www.ericchadwick.com/examples/images/css_floats.gif

Would <data block> be the same as <div>? I think I just need to spend more time learning how the CSS block model works, like they outline here, then I'll probably understand a bit more what you're talking about.

I guess I also have to deal with browser-specific rendering. Yuck.

Are there any tools for finding out what's the slowest-rendering part of my code, so I can optimize?

MoP, relax man. I think you misunderstood Rick, he's on a Mac IIRC, different browsers render HTML differently.

Rick Stirling · Aug 2006

Mop - I've read it all , did you?

I looked at ECs page, it shows CSS and HTML tests and comparisons, what he has done in CSS and what he has done in HTML. None of those may be what he wants the final outcome to be. If he posts an image of how he wants it, then we can give him what he wants. I win five pounds.

Eric, easy to do - wanna sex that up a bit, WMD dossier style?

<data block> is a div, but I wanted to try and abstract it, I meant a data block was just a collection of one image and it's text.

Don't worry too much about browser specific - make it work in Firefox, then it'll pretty much work in all browsers. If IE gives you trouble, then all you need to do is override your nice working standards compliant stylesheet with an IE specific one. I do that on my site, telling IE to use GIF images instead of PNG.

ASIDE: A very hard thing for me in CSS is to name classes in a non visual descriptive way. It's easy to call something 'redtext', when a better name would be 'important'. Never call things 'leftcolumn' - you might decide later to put that column on the right, or at the top, or make it into a row instead of a column, so try to name it after the data you want it to contain, like 'navigation'.

I'm assuming for this example that this is a photogallery, just to try and pick semi logical names.

OK, try something like this for your html:

<div class="gallery> -- the column
<div class="photoblock">
<div class="photoimg">IMAGE HERE</div>
<div class="photometa">Title and unordered list in here</div>
</div>

Repeat the photo block at much as you want:

<div class="photoblock">
<div class="photoimg">IMAGE HERE</div>
<div class="photometa">Title and unordered list in here</div>
</div>

</div> -- end of the gallery

in css
photoblock {clear:all;} or maybe clear:both, i'm winging this....
photoimg {float:left; width:250px;}

so each block of photo data is on a new line, and whatever div follows the photoimg will be squeezed up against it.

Text aligning is piss easy once you have the blocks working

hawken · Aug 2006

why not use two divs with float next to one another? would solve your wrapping problem; something like this:

<div (float:left> img </div><div (float:left> ul </div><br clear=all />
<div (float:left> img </div><div (float:left> ul </div><br clear=all />
<div (float:left> img </div><div (float:left> ul </div><br clear=all />
<div (float:left> img </div><div (float:left> ul </div><br clear=all />

I disagree with Rick about name conventions, just call things that mean something to you and something you will remember, like all programming.

Rick Stirling · Aug 2006

Just looking at your HTML, and you know this, but don't realise you do. In the second part, you start off defingina table, its rows and columns. In the CSS you sort of want to do the same, but you've thrown away your outer container (the table), and the table data cells, and you've just tried to make text float up alongside an image.

Just think of everything that you want to style as a block of data, then it becomes easy.

Oh, and since you are using css and xhtml, be sure to close all you tags - you have no </li> and open <img> tags. For img, use <img src=blah ... /> That / before the > closes it. Do the same with your <br> - make it into <br />

Rick Stirling · Aug 2006

[ QUOTE ]
I disagree with Rick about name conventions, just call things that mean something to you and something you will remember, like all programming.

[/ QUOTE ]

You don't think it becomes confusing when the div you called leftcolumn ends up as a row at the top, and redtext become green?

sonic · Aug 2006

lol we're all making this far too complicated for him.

put the text you want indented into a span, give it a class name, and for the class put:

position:relative;
left:10px;

it's the lazy bum way, but it works!

Eric Chadwick · Aug 2006

I'll have to agree with Rick about naming, this is part of a large help doc for a game exporter, eventually to be maintained by someone else. And probably the style will change, I'm already sick of it.

Not too complicated sonic. I knew I was going get different approaches like this, seemed to be some good html heads around here.

About closing tags, I've been using the w3.org validator, and it doesn't seem to care about them if I'm declaring it html4 transitional. I tried validating against xhtml, but too many errors pooped out.

Anyhow, now I'm realizing img-text pairs are going to need way too many images, so I'm thinking instead of doing an img with clickable rects.

I have a screenshot of an interface with lots of little buttons and whatnot, and maybe each one is clickable (possibly mouse-over-highlit) which then populates a frame to the right with explanatory text, bullets, hyperlinks to other sections of the spec, etc.

I'm looking for the least-complicated img-rect solution, simply because the more complicated it is the more likely it'll break later, or not work in someone's browser.

Frames cool? Do I need JavaScript fanciness for the highlighting? (I don't want to load a ton of custom images, maybe just a colored border would be enough mouse feedback) ImageReady's image cut-up work OK? I've seen some horrible examples.

Thanks again for the help.

Eric Chadwick · Aug 2006

I like the simplicity here.
http://www.neilblevins.com/

Wondering if the mouseovers need to be more obvious? I'm dealing with artists (like myself) who hate to read.

When I mouse over an interface snapshot, and see highlights over the widgets, it makes it much more obvious that clicking is going to give me the juice.

Rick Stirling · Aug 2006

Mouse over is easy - my horizontal navbar and my red and gree links both switch.

http://www.rsart.co.uk/

There is no javascript involved, just css styling

a, a:visited {
text-decoration: underline;
color: #799834;
font-weight: bold;
background-color: transparent;
}

a:hover, a:active {
text-decoration: none;
color: #799834;
font-weight: bold;
background-color: transparent;
}

Stay away from frames - they are not necessary

Eric Chadwick · Aug 2006

Maybe I wasn't clear. I'd like to click on different areas within a single image, and it would update a bunch of html text/bullets/links in an area next to the image. Click on a part of the UI screenshot, and get text describing what that gizmo does.

Seems like frames are the only way to do the text replacement. But I'm reading that frames suck for browser history & bookmarking. Any other caveats?

I don't want the mouseovers to require imgs, since the UI has lots of buttons, and I don't want to create all those variations. W3.org seems to suggest js onfocus is the way to go. I'm cool with providing a noscript alternate that doesn't incl. highlighting.

Rick Stirling · Aug 2006

That can be done too.

an image map will get you the clickable parts, you just need a way of getting a dynamic update.

Something like

<div id="Replace">Some text</div>

Then a simple example using a button an onclick, except you'd use onmouseover or something:

<input id="updatetext" type="text" style="width: 400">
<input type="button" value=
"Click me!" onclick="Replace.innerhtml = updatetext.value">

Or - Get Pior in here, he's got some new playtech that might be exactly what you need. It's very sexy.

Rick Stirling · Aug 2006

just thought of a CSS way - put all the content on the page, enclosing each bit in a <div> with a unique name. Set the CSS for each of these DIVS to be be display:none. On mouseover, set the content to be visible.

Eric Chadwick · Aug 2006

Oooh, slick. I'll give it a go. Thanks Rick.

Eric Chadwick · Aug 2006

Hmmm. I can't find the appropriate syntax for controlling a specific div's style... is it something like this?

<OBJECT data="test.gif" type="image/gif" usemap="#test" border="0">
<map name="test">
<area shape="rect" coords="25,18,44,36" onclick="showme.style='visibility:visible'">
</map>
</OBJECT>

<div id="showme" style="visibility:hidden">Show this text when I click.</div>

Eric Chadwick · Aug 2006

OK, found something that mostly works. But now both divs show up at the same time if each rect is clicked, rather than only one at a time...

<html>
<head>
<script type="text/javascript">
function change(id){
ID = document.getElementById(id);

if(ID.style.display == "")
ID.style.display = "none";
else
ID.style.display = "";
}
</script>
</head>
<body>

<OBJECT data="test.gif" type="image/gif" usemap="#test" border="0" style="float:left">
<map name="test">
<area shape="rect" coords="25,18,44,36" onclick="change(1)" href="#" />
<area shape="rect" coords="93,19,271,36" onclick="change(2)" href="#" />
</map>
</OBJECT>

<div id="1" style="display:none">Show this text when I click button 1.</div>
<div id="2" style="display:none">Show this text when I click button 2.</div>

</body>
</html>

Rick Stirling · Aug 2006

Firstly, try this

<area shape="rect" coords="25,18,44,36" onmouseover="change(1)" onmouseout="change(1)" href="#" />
<area shape="rect" coords="93,19,271,36" onmouseover="change(2)" onmouseout="change(2)" href="#" />

Eric Chadwick · Aug 2006

Good idea, but it prevents me from adding clickable links to the div. This tech doc has tons of cross-linkage, like a wiki, so I want to take advantage of that.

Thanks tho, I'm definitely appreciative.

Eric Chadwick · Aug 2006

Ahhh a coder here gave me some help. Works now (so far).

function change(id){
for(i = 98; i < 100; i++)
{
ID = document.getElementById(i);
ID.style.display = "none";
}

ID = document.getElementById(id);

if(ID.style.display == "")
ID.style.display = "none";
else
ID.style.display = "";
}

Thanks everyone for the input.

CSS struggles

Replies