36 replies [Last post]
johnyboy
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Joined: 2006-03-16
Posts: 80
Points: 0

hello,

how can i get the yellow dd's following on horizontally listing to the right, on the same baseline as their red dt's?

also when the yellow dd's reach the right edge of the window they should range left to the right of the red dt's. so there's a vertical straight line (imaginery) between the red and yellow blocks -- red on the left and yellow on the right.

i'd like to leave the red dt's pretty much where they are (ranged right) apart from they should move down appropriately when the yellow ones start taking up more lines due to the window being reduced. hope all that made sense. i haven't got a clue how to do that in css. clear: both; in dt seems to do wonders for making the red ones (dt's) move down appropriately. it's mainly making the yellow ones (dd's) start to the right of their red ones on the same baseline that i'm most stuck on.

any pointers/suggestions much appreciated.

on a web page: http://www.hdbatik.co.uk/dlbuttons/testbuttonsdeflist4.html

what it currently looks like in my (old) browser:

the code:

<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>definition list buttons test</title>
	<style type="text/css">
	dl {
		font-size: small;
	}
	dt, dd {
		margin: 2px;
	}
	dt {
		width: 15em;
		text-align: right;
	}
	dd {
		float: left;
	}
	dt a, dd a {
		font-family: sans-serif;
		text-decoration: none;
		color: #000;
	}
	dt a {
		background: red;
	}
	dd a {
		background: yellow;
	}
	</style>
</head>
<body>
<dl>
	<dt><a href="#">abcdefgh ijklmnopqrstuvw</a></dt>
		<dd><a href="#">1234 567</a></dd>
		<dd><a href="#">45678</a></dd>
		<dd><a href="#">78901234 45</a></dd>
	<dt><a href="#">defghij</a></dt>
	<dt><a href="#">ghij klmn opqrstuv</a></dt>
		<dd><a href="#">1111 11111111</a></dd>
		<dd><a href="#">222222</a></dd>
		<dd><a href="#">33333</a></dd>
		<dd><a href="#">444444444 4444</a></dd>
		<dd><a href="#">55555555</a></dd>
		<dd><a href="#">66666</a></dd>
		<dd><a href="#">7777777777</a></dd>
		<dd><a href="#">88888 88 8888888</a></dd>
		<dd><a href="#">999999 9999</a></dd>
		<dd><a href="#">00000 00 0000</a></dd>
		<dd><a href="#">111111</a></dd>
		<dd><a href="#">222</a></dd>
</dl>
</body>
</html>

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 21 weeks 5 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

the dd's in a definition list going horizontally from dt's?

johnyboy,
I'll definitely give you an A for effort on this one, but you really shouldn't start so many topics on the same problem.

Have a gander at this:

dl {
    font-size: small;
    width: 50em;
    list-style: none;
    margin-left: 15em;
    }

dt, dd {
    margin: 4px 0;
    padding: 2px 5px 2px 5px;
    }

dt {
    width: 15em;
    text-align: right;
    float: left;
    clear: left;
    margin-left: -15em;
    padding: 2px 0;
    }

dd {
    float: left;
    }

dt a, dd a {
    border: 1px solid #999;
    padding: 2px 5px 2px 5px;
    font-family: sans-serif;
    text-decoration: none;
    color: #000;
    }

dt a {
    background: #ddf;
    }

dd a {
    background: #fff;
    }

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 29 weeks 1 day ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

the dd's in a definition list going horizontally from dt's?

Floating the dt and dd left and adding a clear both to the second dt should achieve the first part of what you're after but the yellow dd will span the width, you could try margining the first dd off from the right.

The red dt moving in line with the dd as they drop down I'm not sure about , it may be that you're starting to expect rather a lot of an element, in fact the more I look at this the more I wonder whether this isn't more suited to a table.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

johnyboy
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Joined: 2006-03-16
Posts: 80
Points: 0

the dd's in a definition list going horizontally from dt's?

> Have a gander at this

oh, it looked so good to start with, but then i realised it wasn't fluid (at least not in my (old) browser) -- like words in a variable widthed paragraph :/ (thanks for it though -- otherwise, it's great).

looks like i'm after something that's not possible maybe?

i asked about this on another css forum (i "jumped ship" as it were because i couldn't get the converstation onto css off of xhtml (ul's vs dl's)). the subject i used to start with was "have i given myself something too hard to do, or not, in css?".

> it may be that you're starting to expect rather a lot of an element, in fact the more I look at this the more I wonder whether this isn't more suited to a table.

and that answers "yes" to that subject heading i think.

i knew i was causing myself problems by suggesting this design (to who i'm doing this for) -- although, as Hugo says, tables -- so it is do-able *somehow* -- that's the main thing i suppose.

so... stick all the boxes/buttons (made from <a href="....>'s and given boxes using css) into a table, the left table column with a fixed width and elements ranged right (with css) and leave the right column (which will have all the yellow boxes in (as in several posts above)) to sort it's own width out thus getting fluid, word like desired, once and for all, behaviour, right?

a table styled with css right?

> but the yellow dd will span the width, you could try margining the first dd off from the right.

i don't quite understand that. are you talking about the fixed, non-wrapping (like words in a flexibly widthed paragraph) aspect there?

thanks.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 21 weeks 5 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

the dd's in a definition list going horizontally from dt's?

if I understand you correctly, just take the width off of the dl (in my example) and you have fixed (elastic) width dt column (15em) and fluid dl column (adjustable with window size).

johnyboy
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Joined: 2006-03-16
Posts: 80
Points: 0

the dd's in a definition list going horizontally from dt's?

I TABLES

quite a relief to see it working as intended (by any method). and i've got reasonable confidence that it'll work in most browsers ok.

i've got the over lapping problem again -- because they're <a ... elements. i thought display:block; was supposed to help this situation but that really messes it up. could someone tell me how to stop the over lapping that's occuring (without messing it up obviously) please?

on a page: http://www.hdbatik.co.uk/dlbuttons/tablebuttons.html

as a screenshot:

in code:

<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>buttons with table</title>
	<style type="text/css">
	/*table, tr, td {
		border-width: 1px;
        border-style: solid;
        border-color: #000; 
	}*/
	.main {
		text-align: right;
		vertical-align: top;
	}
	tr a {
		white-space: nowrap;
		font-family: sans-serif;
		text-decoration: none;
		color: #000;
		border: 1px solid #999;
		padding: 2px 5px 2px 5px;
	}
	td.main a {
		background: #ddf;
	}
	td a {
		background: #fff;
	}
	</style>
</head>
<body>
<table>
	<tr>
		<td class="main">
			<a href="#">abcdefgh ijklmnopqrstuvw</a></td>
		<td>
			<a href="#">1234 567</a>
			<a href="#">45678</a>
			<a href="#">78901234 45</a>
		</td>
	</tr>
	<tr>
		<td class="main">
			<a href="#">defghij</a>
		</td>
		<td>
			<a href="#">1111 11111111</a>
			<a href="#">222222</a>
			<a href="#">33333</a>
			<a href="#">444444444 4444</a>
			<a href="#">55555555</a>
			<a href="#">66666</a>
			<a href="#">7777777777</a>
			<a href="#">88888 88 8888888</a>
			<a href="#">999999 9999</a>
			<a href="#">00000 00 0000</a>
			<a href="#">111111</a>
			<a href="#">222</a>
		</td>
	</tr>
	<tr>
		<td class="main">
			<a href="#">ghij klmn opqrstuv</a>
		</td>
	</tr>
</table>
</body>
</html>

just as a side question: is there any plans in css to make it possible to say in a style sheet "the first item in the list" or "the last tr in the table" or whatever, rather than having to tag the first item in the list or the last tr in the table -- then you could change the html without thinking about that crap.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 7 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3570
Points: 675

the dd's in a definition list going horizontally from dt's?

johnyboy wrote:

just as a side question: is there any plans in css to make it possible to say in a style sheet "the first item in the list" or "the last tr in the table" or whatever, rather than having to tag the first item in the list or the last tr in the table -- then you could change the html without thinking about that crap.

It's already there - the ":firschild" and ":lastchild" pseudo elements. Unfortunately some browsers whose names we won't mention but which sound a lot like "finternet blexplorer" don't support these. [-X

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 21 weeks 5 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

the dd's in a definition list going horizontally from dt's?

johnyboy, what exactly are you trying to accomplish? Did you try removing the width from the dl like I suggested?

johnyboy
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Joined: 2006-03-16
Posts: 80
Points: 0

the dd's in a definition list going horizontally from dt's?

sorry, i didn't realise what you meant -- i thought you were talking with regards to a table version.

i've taken off the width and it works great -- in css Smile amazing

so that works great by the looks of it -- thanks very much.

johnyboy
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Joined: 2006-03-16
Posts: 80
Points: 0

the dd's in a definition list going horizontally from dt's?

yup it's looking ok.

http://www.hdbatik.co.uk/dlbuttons/testbuttonsdeflist5.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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>definition list buttons test</title>
	<style type="text/css">
	dl {
		font-size: small;
		list-style: none;
		margin-left: 15em;
	}
	dt {
		width: 15em;
		text-align: right;
		float: left;
		clear: left;
		margin: 3px 0px 4px -15em;
		padding: 2px 0;
	}
	dd {
		float: left;
		margin: 3px -3px;
		padding: 2px 5px 2px 5px;
	}
	dt a, dd a {
		border: 1px solid #999;
		padding: 2px 5px 2px 5px;
		font-family: sans-serif;
		text-decoration: none;
		color: #000;
		white-space: nowrap;
	}
	dt a {
		background: #ddf;
	}
	dd a {
		background: #fff;
	}
	dt a:hover {
		background: #cce;
	}
	dd a:hover {
		background: #ede;
	}
	</style>
</head>
<body>
<dl>
	<dt><a href="#">abcdefgh ijklmnopqrstuvw</a></dt>
		<dd><a href="#">1234 567</a></dd>
		<dd><a href="#">45678</a></dd>
		<dd><a href="#">78901234 45</a></dd>
	<dt><a href="#">defghij</a></dt>
	<dt><a href="#">ghij klmn opqrstuv</a></dt>
		<dd><a href="#">1111 11111111</a></dd>
		<dd><a href="#">222222</a></dd>
		<dd><a href="#">33333</a></dd>
		<dd><a href="#">444444444 4444</a></dd>
		<dd><a href="#">55555555</a></dd>
		<dd><a href="#">66666</a></dd>
		<dd><a href="#">7777777777</a></dd>
		<dd><a href="#">88888 88 8888888</a></dd>
		<dd><a href="#">999999 9999</a></dd>
		<dd><a href="#">00000 00 0000</a></dd>
		<dd><a href="#">111111</a></dd>
		<dd><a href="#">222</a></dd>
</dl>
</body>
</html>

can any one tell me how can i get a larger gap between the two different groups of boxes? i've tried (among other things):
dt {
margin: 3px 7px 4px 0px;
...
}
(7px extra to exaggerate it -- it only needs to be 2px) but get this:

which has increased the gap but only for near by ones. obviously modifying dd's changes all the gaps rather than just the one between the two groups of different boxes. any ideas?

does list-style apply to definition lists? i guess not - in css spec it says about list-style Applies to: Elements with display value list-item -- so it doesn't right? it passes the css validation test so maybe it does apply to definition lists? or maybe putting a css command in somewhere where it doesn't apply just gets ignored and isn't considered an error / incorrect?

thanks very much.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 21 weeks 5 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

the dd's in a definition list going horizontally from dt's?

increase the margin-left on the dl

johnyboy
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Joined: 2006-03-16
Posts: 80
Points: 0

the dd's in a definition list going horizontally from dt's?

wolfcry911 wrote:
increase the margin-left on the dl

i found that moved the whole thing together as a block to the right, but decreasing (bearing in mind it was a negative number) dt's left margin did it:

margin: 3px 0px 4px -15em;

to

margin: 3px 0px 4px -15.2em;

is that an ok way to do it? if so.. excellent -- that's *exactly* as i was after, in css Smile thanks very much for your help wolfcry911

one excellent thing is that it even works in my old browser that i use day to day -- safari 1.0.3 (which is the one that corresponds to os x 10.2 - jaguar) which a number of things don't work in, particularly possibly some layout / float type things i think -- so that bodes pretty well i think.

it also works just fine in a later/better/not so buggy version of safari which i've just had a look at it in.

here's how it is now just in case anyone's interested:
http://www.hdbatik.co.uk/dlbuttons/testbuttonsdeflist6.html

Laughing out loud

johnyboy
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Joined: 2006-03-16
Posts: 80
Points: 0

the dd's in a definition list going horizontally from dt's?

i'm scared to ask this: does it ( http://www.hdbatik.co.uk/dlbuttons/testbuttonsdeflist6.html ) work in internet explorer 5 on the pc? -- does it look like the above latest screenshot roughly? and what about ie 6 on the pc? (i'm on a mac, and don't have access to those browsers)

thanks.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 21 weeks 5 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

the dd's in a definition list going horizontally from dt's?

johnyboy, your right I should have stated reduce the left margin (or increase the negative margin).

I'm at work today and can test on a PC (I'm on Mac at home). Unfortunately, it doesn't work in IE 6.0 (don't have access to 5.Innocent. I'm looking into it now...

johnyboy
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Joined: 2006-03-16
Posts: 80
Points: 0

the dd's in a definition list going horizontally from dt's?

> Unfortunately, it doesn't work in IE 6.0 (don't have access to 5.Innocent.

oh no, i thought ie 6 wasn't too bad. i'm just reading about css hacks in a css book at the moment -- they're an absolute minefield. :/ it does show a way to link to another style sheet from the main one just for ie 5 pc and another way of just for ie 5 mac[*], so you can selectively provide hack css appropriately, which takes one or two mines out of the minefield i suppose.

[*] sod ie 5 for mac though -- i did try it in it because i happen to have it on my computer. it didn't look as it should but who cares?, and it was, in a manor, readable/useable.

there's a great thing here: http://www.danvine.com/icapture/ which allows you to see a screen capture of any web page you point it at taken from safari (a recent tiger version). is there anything like that for other browsers? be great if there were. (i know there's a site/company that allows you to remotely use a whole variety of os's and browsers but it costs -- free ones i'm looking for, and just screen shots would be quite adequate).

> I'm at work today and can test on a PC
> I'm looking into it now...

wow, that's very good of you. how is it not working in ie 6? i bet it's float related? -- float seems to be a common badly handled thing.

thanks.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 21 weeks 5 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

the dd's in a definition list going horizontally from dt's?

In IE6 the dts don't show. I fixed that by applying position: relative; (a common IE fix) to the dts. Then they were much too far to the left - IE's double float margin bug. Adding display: inline; to the dt fixed that. Now the dds aren't falling in place properly - something to do with the clear: left not working.

Still trying...

johnyboy
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Joined: 2006-03-16
Posts: 80
Points: 0

the dd's in a definition list going horizontally from dt's?

> ...
> Still trying...

well that's brilliant -- much appreciated. thank you. that sort of thing really is out of my capabilities at the moment for a number of reasons.

two non browser compatability questions:

in order to have content following on after and below the block of buttons, say a paragraph of text, is putting this in the style sheet the way to do that? -- to stop the float?:

	p {
		clear: left;
	}

it does do it, but is there a more generic way to do it -- allowing the html to change, say instead of having a paragraph of text following on underneath an image, without having to modify the css?

say i've got an h1 heading above the block of buttons that i want to line up with the imaginary vertical line that splits the two blocks of blocks, because the dl's style is like this:

dl {
		font-size: small;
		list-style: none;
		margin-left: 13em;
	}

setting h1's style to { font-size: small; margin-left: 13em; } means that the heading lines up nicely regardless what zoom/text size the browser is enlarged or reduced to. but is it possible to get that consistent lining up for a different size of text? if so how?

thanks.

johnyboy
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Joined: 2006-03-16
Posts: 80
Points: 0

the dd's in a definition list going horizontally from dt's?

Ed Seedhouse wrote:
johnyboy wrote:

just as a side question: is there any plans in css to make it possible to say in a style sheet "the first item in the list" or "the last tr in the table" or whatever, rather than having to tag the first item in the list or the last tr in the table -- then you could change the html without thinking about that crap.

It's already there - the ":firschild" and ":lastchild" pseudo elements. Unfortunately some browsers whose names we won't mention but which sound a lot like "finternet blexplorer" don't support these. [-X

oh yeah, :first-child works for me in an early safari version for a list item in an unordered list, but not :last-child or :lastchild -- i don't think that exists but am not sure.

thanks.

edit: i've just come accross :last-child in the book i'm reading so it does exist. sorry, thanks.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 21 weeks 5 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

the dd's in a definition list going horizontally from dt's?

well johnyboy,
I've tried and tried and tried. I'm quite upset actually, that the standards compliant browsers display the dl so well but friggin' IE won't - can't! I have to admit defeat here and suggest (gulp) a table. It might be possible to overcome IE's float troubles with extraneous markup, but what's the point?

I'm sorry I couldn't solve this - perhaps a guru may be able to.

I'm off to pound a wall...

johnyboy
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Joined: 2006-03-16
Posts: 80
Points: 0

the dd's in a definition list going horizontally from dt's?

well if someone who's posted 1539 messages to a css forum has "tried and tried and tried" (for which i'm **very** grateful -- thank you) i'm satisfied that tables are the answer. and looking ok in ie5 and 6 is quite important for me for this. the types of people using the site are very likely to be using one of those browsers.

thanks again for trying, back to the table it is.

johnyboy
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Joined: 2006-03-16
Posts: 80
Points: 0

the dd's in a definition list going horizontally from dt's?

i'm back on this question again. any ideas? thanks.

johnyboy wrote:
i've got the over lapping problem again -- because they're <a ... elements. i thought display:block; was supposed to help this situation but that really messes it up. could someone tell me how to stop the over lapping that's occuring (without messing it up obviously) please?

on a page: http://www.hdbatik.co.uk/dlbuttons/tablebuttons.html

as a screenshot:

in code:

<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>buttons with table</title>
	<style type="text/css">
	/*table, tr, td {
		border-width: 1px;
        border-style: solid;
        border-color: #000; 
	}*/
	.main {
		text-align: right;
		vertical-align: top;
	}
	tr a {
		white-space: nowrap;
		font-family: sans-serif;
		text-decoration: none;
		color: #000;
		border: 1px solid #999;
		padding: 2px 5px 2px 5px;
	}
	td.main a {
		background: #ddf;
	}
	td a {
		background: #fff;
	}
	</style>
</head>
<body>
<table>
	<tr>
		<td class="main">
			<a href="#">abcdefgh ijklmnopqrstuvw</a></td>
		<td>
			<a href="#">1234 567</a>
			<a href="#">45678</a>
			<a href="#">78901234 45</a>
		</td>
	</tr>
	<tr>
		<td class="main">
			<a href="#">defghij</a>
		</td>
		<td>
			<a href="#">1111 11111111</a>
			<a href="#">222222</a>
			<a href="#">33333</a>
			<a href="#">444444444 4444</a>
			<a href="#">55555555</a>
			<a href="#">66666</a>
			<a href="#">7777777777</a>
			<a href="#">88888 88 8888888</a>
			<a href="#">999999 9999</a>
			<a href="#">00000 00 0000</a>
			<a href="#">111111</a>
			<a href="#">222</a>
		</td>
	</tr>
	<tr>
		<td class="main">
			<a href="#">ghij klmn opqrstuv</a>
		</td>
	</tr>
</table>
</body>
</html>

IChao
Offline
Enthusiast
Göttingen, Germany
Last seen: 5 years 20 weeks ago
Göttingen, Germany
Timezone: GMT+2
Joined: 2005-08-16
Posts: 148
Points: 0

the dd's in a definition list going horizontally from dt's?

Haven't read the entire thread. The A are inline; you've added vertical padding, so you have to adjust the line-height.
td {line-height: 2em}

johnyboy
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Joined: 2006-03-16
Posts: 80
Points: 0

the dd's in a definition list going horizontally from dt's?

IChao wrote:
Haven't read the entire thread. The A are inline; you've added vertical padding, so you have to adjust the line-height.
td {line-height: 2em}

yes, that does it -- thanks. is there anyway to have a fixed number of pixels seperating the boxed A's? the em gaps change as the browser's text size is changed and it's hard to get the gap that's above and below the boxes that same as the gap to the right and left of the boxes.

so, anyway to get the gap round the A's by specifying the gap in pixels?

thanks.

IChao
Offline
Enthusiast
Göttingen, Germany
Last seen: 5 years 20 weeks ago
Göttingen, Germany
Timezone: GMT+2
Joined: 2005-08-16
Posts: 148
Points: 0

the dd's in a definition list going horizontally from dt's?

These boxes are inline, in this context, line-height and font parameters determine the vertical spacing.

   tr a {
      padding: 0.25em 0.5em;
   }

would respect this.

I doubt that the inline context is the way to go: in IE6, when the lines wrap, some of the padding keeps on the preceeding line, and in my copy of Safari, the problem is similar, but on the right: see screenshots. I think floats would be more stable, but would force a redo of the CSS.

johnyboy
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Joined: 2006-03-16
Posts: 80
Points: 0

the dd's in a definition list going horizontally from dt's?

IChao wrote:
These boxes are inline, in this context, line-height and font parameters determine the vertical spacing.

right, which makes pixel specification out of the question in this context i suppose?, because if pixel specifcation is used the boxes+text won't expand and reduce uniformly/reasonably when the user +'s and -'s the size in their browser. what i'm after i suppose is something with an em box size and a pixel gap. ems for box size and pixels for margin right? and because we're talking about inline elements, margins can't be used.

Quote:

   tr a {
      padding: 0.25em 0.5em;
   }

would respect this.

thanks for those screenshots, no not good. that doens't give a pixel gap though anyway i don't think.

Quote:
I doubt that the inline context is the way to go: in IE6, when the lines wrap, some of the padding keeps on the preceeding line, and in my copy of Safari, the problem is similar, but on the right: see screenshots. I think floats would be more stable, but would force a redo of the CSS.

"I think floats would be more stable" surprises me because it seems that as soon as floats are introduced problems are more likely, but i'm not experienced in css at all. i suppose there must be different types of use; some stable, some not.

when you say "I doubt that the inline context is the way to go" and "I think floats would be more stable" are you talking about using display:block; in the 'a's selector code, or not? something else?

if i'm understanding and guessing correctly you're suggesting applying (probably among other things) float: left; display:block; to the 'a' elements -- only the ones in the right hand block of boxes -- then having the ability to use margins for those, thus being able to have an em box size and a pixel gap? correct?

thanks Smile

IChao
Offline
Enthusiast
Göttingen, Germany
Last seen: 5 years 20 weeks ago
Göttingen, Germany
Timezone: GMT+2
Joined: 2005-08-16
Posts: 148
Points: 0

the dd's in a definition list going horizontally from dt's?

Yes, I think this is what I meant, see the example code below. For better vertical alignment, I'd float both sides.

Note that 'float' itself changes 'inline' to 'block', see the table in 9.7 Relationships ....

You're right that floats do cause headaches in IE. To our luck, the float bugs are described. In this case, it's the doubled float margin bug that has to be fixed with 'display: inline' in IE6. Again, this element is not inline in the end, it's just a bugfix.

On the other hand, the inline box model of IE6 in completely broken (not described yet); you have seen the missing padding after wrapping of the links, and you probably have noticed the missing top/bottom borders while compiling the example. We could start to fix these problems with more IE specific hacks like position:relative or zoom:1, but the costs are getting high for that bugger.

In the end, having both sides at block level allows for better control of the vertical alignment and height/margin.

I think relying on a table was a good idea. IE6 is not able to manage clear+float on the same element (dt in your case.). (I tried an attempt, without floating the dt, but the costs are way too high.)

Hope that helps.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />

	<title>buttons with table</title>
<style type="text/css">
/*<![CDATA[*/
.main {
	text-align: right;
	vertical-align: top;
	}
	
tr a {
	white-space: nowrap;
	font-family: sans-serif;
	text-decoration: none;
	color: #000;
	border: 1px solid #999;
	padding: 2px 5px 2px 5px;
	}

td.main a {
	float: right;
	background: #ddf; 
	}

ul {
	margin: 0; 
	padding: 0; 
	list-style-type: none;
	}
	
li {
	float: left; 
	padding: 0; 
	margin: 0 2px 3px 0; 
	display: inline;
	}

li a {
	float: left; 
	background: #eee; 
	}
a:hover {background: yellow}
/*]]>*/
</style>
</head>

<body>
	<table>
		<tr>
			<td class="main"><a href="#">abcdefgh ijklmnopqrstuvw</a></td>

			<td>
				<ul>
					<li><a href="#">1234 567</a></li>

					<li><a href="#">45678</a></li>

					<li><a href="#">78901234 45</a></li>
				</ul>
			</td>
		</tr>

		<tr>
			<td class="main"><a href="#">defghij</a></td>

			<td>
				<ul>
					<li><a href="#">1111 11111111</a></li>

					<li><a href="#">222222</a></li>

					<li><a href="#">33333</a></li>

					<li><a href="#">444444444 4444</a></li>

					<li><a href="#">55555555</a></li>

					<li><a href="#">66666</a></li>

					<li><a href="#">7777777777</a></li>
				</ul>
			</td>
		</tr>

		<tr>
			<td class="main"><a href="#">ghij klmn opqrstuv</a></td>
		</tr>
	</table>
</body>
</html>

johnyboy
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Joined: 2006-03-16
Posts: 80
Points: 0

the dd's in a definition list going horizontally from dt's?

IChao wrote:
Hope that helps.

that has helped immensely. it has cleared up a few things i didn't understand **and** has what looks like (with just one *tiny* addition: 'margin-bottom: 3px;' into 'td.main a' to get the empty main heading rows vertically spaced in the same way as the non-empty heading rows) the final sollution!!!!! Smile it's exactly what i was after -- thank you.

does it work in ie6? (5 even?). works and looks good in both safari 1.0.3 and 1.2.3.

http://www.hdbatik.co.uk/dlbuttons/tablebuttonsichao.html

Quote:
Note that 'float' itself changes 'inline' to 'block'

right. didn't realise that. thanks.

Quote:
Yes, I think this is what I meant, see the example code below

well your sollution has more than what i imagined. i didn't imagine using unordered lists in the right hand side of the tables for example but the solution seems completely spot on.

excellent, thanks Smile

IChao
Offline
Enthusiast
Göttingen, Germany
Last seen: 5 years 20 weeks ago
Göttingen, Germany
Timezone: GMT+2
Joined: 2005-08-16
Posts: 148
Points: 0

the dd's in a definition list going horizontally from dt's?

Looks identical in IE6 to IE5.5standalone here, see screenshot. One minor glitch is a 1px vertical misaligment; I think you'll have to vertical-align:top the right td's too.

Best

johnyboy
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Joined: 2006-03-16
Posts: 80
Points: 0

the dd's in a definition list going horizontally from dt's?

IChao wrote:
Looks identical in IE6 to IE5.5standalone here, see screenshot. One minor glitch is a 1px vertical misaligment; I think you'll have to vertical-align:top the right td's too.

Best

oh that's great. thanks very much.

johnyboy
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Joined: 2006-03-16
Posts: 80
Points: 0

the dd's in a definition list going horizontally from dt's?

i'm back on this believe it or not!! partly because it would be good to have a working css non table version but also partly because i'm just trying to learn css and this is a good thing to play around with.

i've done a version myself which is looking not too bad so far. it's based on a different to previous html. this time headings followed by unordered lists. i've actually managed to do the css so far myself which i'm quite amazed/pleased with. finally think i'm starting to slightly understand it a bit. here it is and there's a question below.

<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>headings and unordered lists</title>
	<style type="text/css">
* {
	padding: 0;
	margin: 0;
}
ul {
	list-style-type: none;
	margin-left: 14em;
	font-size: small;
}
li {
	font-size: small;
	float: left;
}
h2 {
	font-weight: normal;
	clear: both;
	width: 14em;
	float: left;
	font-size: small;
}
h2 a, li a{
	white-space: nowrap;
	font-family: sans-serif;
	text-decoration: none;
	color: #000;
	display: block;
	border: 1px solid #999;
	padding: 2px 5px 2px 5px;
	margin: 0 0 3px 3px;
}
h2 a {
	float:right;	
}
p {
	padding-top:2em;
	clear: both;
}
	
	</style>
</head>
<body>

<br /><br /><br />

<h2><a href="#">abcdefgh ijklmnopqrstuvw</a></h2>
<ul>
	<li><a href="#">1234 567</a></li>
	<li><a href="#">45678</a></li>
	<li><a href="#">78901234 45</a></li>
	<li><a href="#">1111 11111111</a></li>
	<li><a href="#">222222</a></li>
	<li><a href="#">33333</a></li>
	<li><a href="#">444444444 4444</a></li>
	<li><a href="#">55555555</a></li>
	<li><a href="#">66666</a></li>
</ul>
<h2><a href="#">defghij</a></h2>
<h2><a href="#">ghij klmn opqrstuv</a></h2>
<ul>
	<li><a href="#">1111 11111111</a></li>
	<li><a href="#">222222</a></li>
	<li><a href="#">33333</a></li>
	<li><a href="#">444444444 4444</a></li>
	<li><a href="#">55555555</a></li>
	<li><a href="#">66666</a></li>
	<li><a href="#">7777777777</a></li>
	<li><a href="#">88888 88 8888888</a></li>
	<li><a href="#">999999 9999</a></li>
	<li><a href="#">00000 00 0000</a></li>
	<li><a href="#">111111</a></li>
	<li><a href="#">222</a></li>
</ul>
<h2><a href="#">zzzzxx yyyy zzzzzzzzz</a></h2>
<ul>
	<li><a href="#">00000000 0000</a></li>
	<li><a href="#">111111 111111111111111</a></li>
</ul>

<p>Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.</p>
</body>
</html>

on a page: http://www.hdbatik.co.uk/temp20060325/buttonblock_h_ul.html

what it looks like in safari:

what i don't understand is this: when i add things to the ul selector the changes only take place to the first ul on the page, not the others that follow on from it. for example replacing the above's ul code with this:

ul {
	list-style-type: none;
	margin-left: 14em;
	font-size: small;
	background: yellow;
	padding-bottom: 5px;
	border: 1px solid #999;
}

makes it look like:

why does the extra bits in ul (the yellow bg and grey lines) only seem to effect the first unordered list? what's going on there? why doesn't applying the yellow background to ul put yellow behind all the list items? it's as if the list items aren't in the unordered list's space if you see what i mean. why is that?

also previous attempted version of this in css without tables failed in ie 6 (and ie 5 i think). does this also fail in ie, or not?

thanks v. much Smile

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 21 weeks 5 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

the dd's in a definition list going horizontally from dt's?

Quote:
why does the extra bits in ul (the yellow bg and grey lines) only seem to effect the first unordered list? what's going on there? why doesn't applying the yellow background to ul put yellow behind all the list items? it's as if the list items aren't in the unordered list's space if you see what i mean. why is that?

The list items actually aren't in the ul's space any longer as they been floated and taken out of the document flow. The uls still exist in the flow and fall in place one after the other. The lines you see are the border. The uls are only 5px in height because they contain nothing (lis were removed) but the padding.

You can have the uls contain they're lis by either using Tony's clearfix code on them, or adding overflow:hidden, or floating the uls themselves. You'll then have to change some settings to realign things.

johnyboy
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Joined: 2006-03-16
Posts: 80
Points: 0

the dd's in a definition list going horizontally from dt's?

wolfcry911 wrote:
The list items actually aren't in the ul's space any longer as they been floated and taken out of the document flow. The uls still exist in the flow and fall in place one after the other. The lines you see are the border. The uls are only 5px in height because they contain nothing (lis were removed) but the padding.

right -- i see. thanks very much for that. that explains it.

Quote:
You can have the uls contain they're lis by either using Tony's clearfix code on them,

i did a search for Tony's clearfix code and found http://www.positioniseverything.net/easyclearing.html -- have yet to read it, will do.

Quote:
or adding overflow:hidden, or floating the uls themselves. You'll then have to change some settings to realign things.

right, i don't quite understand all of that at the minute completely but it's given me plenty to be going on.

thanks Smile

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 4 years 5 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

the dd's in a definition list going horizontally from dt's?

Bit late coming in on this, but for free screen shots in most browsers go here http://browsershots.org/ works well but you may have to wait a bit for the results. I have used it myself.

What smell? that wasn't me
http//www.about-gravesend.co.uk ,
http//www.lordofchaos.co.uk

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 21 weeks 5 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

the dd's in a definition list going horizontally from dt's?

johnyboy, yes that page shows Tony's clearfix method. Just a FYI, Tony Aslett is also the creator of this site and the clearfix method can be read about here:
http://www.csscreator.com/attributes/containedfloat.php

incidentally, I played around with this new source and found it much more difficult to use than the dl used previously - for what that's worth Crying

johnyboy
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Joined: 2006-03-16
Posts: 80
Points: 0

the dd's in a definition list going horizontally from dt's?

Quote:
for free screen shots in most browsers go here http://browsershots.org/

ok thanks. might have a look. i bet it's not mac compatible though -- if it requires some sort of plug in that is.

Quote:
... and the clearfix method can be read about here: ...

ok thanks. haven't had time to look into this but will do definetely later on today.

Quote:
incidentally, I played around with this new source and found it much more difficult to use than the dl used previously - for what that's wort

oh, that's a shame. i hoped just by luck it might be better. i got to the point in the last example fairly easily -- thought that might be a good sign. does it look like it looks in safari in ie or does it suffer the same problem as before?

in the css book i'm reading i'd just got to a bit where they deal with the same kind of menu situation (the xhtml part of it not the css) and to start with they give the unorderd lists in an unordered list example as the most obvious thing but then said this wasn't a good idea -- doesn't give enough importance to the main headings -- makes them a bit knocked back / less important that they should be (in the sans style view of it). then gave the list of headings & unordered lists version which is what i used in that last example. it's also how i thought of doing it right at the very start (without any consideration or knowledge of or about css though). it seemed the most obvious to me. i didn't know about uls in an ul or dl's at that point though.

thanks.

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 4 years 5 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

the dd's in a definition list going horizontally from dt's?

Quote:
ok thanks. might have a look. i bet it's not mac compatible though -- if it requires some sort of plug in that is.
No it works with anything, it's all done on their servers so you don't have to install anything Cool

What smell? that wasn't me
http//www.about-gravesend.co.uk ,
http//www.lordofchaos.co.uk

johnyboy
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Joined: 2006-03-16
Posts: 80
Points: 0

the dd's in a definition list going horizontally from dt's?

i see. "in most browsers" made me think some plug in might be reuiquired. ok, thanks.