help with CSS

**mgray** · Dec 6, 2002 18:44

I am trying to make the transition from tables to CSS but am having a some problems. This is how i would do it with a table

<table cellpadding='7'>
<tr>
<td>
red<br>widgets
</td>
<td>
blue<br>Widgets
</td>
<td>
green<br>Widgets
</td>
<td>
yellow<br>widgets
</td>
<td>
purple<br>widgets
</td>
<td>
pin<br>widgets
</td>
</tr>
</table>

here is my CSS code

<style type="text/css">
.midnavtext {
font: 13px arial, verdana, Helvetica, sans-serif;
color: #000000;
font-weight: bold;
text-align: right;
text-decoration: none;
margin: 0;
padding: 7px;
}
</style>
<body>
<div id='midnav'>
<nobr>
<div class='midnavtext'>
red<br>widgets
</div>
<div class='midnavtext'>
blue<br>Widgets
</div>
<div class='midnavtext'>
green<br>Widgets
</div>
<div class='midnavtext'>
yellow<br>widgets
</div>
<div class='midnavtext'>
purple<br>widgets
</div>
<div class='midnavtext'>
pin<br>widgets
</div>
</nobr>
</div>

Its not laying out properly, any help would be appreciated

**vgarcia** · Dec 6, 2002 19:06

<div>s have a block display. For inline display (which is what I assume you're trying to do with <nobr> tags), use <span>s. Also, the <nobr> tag is not standard HTML. Netscape and MSIE have both supported it in the past, but it was never in any HTML spec, and thus is not standard if you're trying to stick with XHTML.

--Vinnie

**mgray** · Dec 6, 2002 19:27

like this ?

<span class='midnavtext' >
red<br>widgets
</span>
<span class='midnavtext' >
blue<br>Widgets
</span>
<span class='midnavtext'>
green<br>Widgets
</span>
<span class='midnavtext'>
yellow<br>widgets
</span>
<span class='midnavtext'>
purple<br>widgets
</span>
<span class='midnavtext'>
pin<br>widgets
</span>

didn't seem to help much ...

**vgarcia** · Dec 7, 2002 07:22

Originally posted by mgray
like this ?

<span class='midnavtext' >
red<br>widgets
</span>
<span class='midnavtext' >
blue<br>Widgets
</span>
<span class='midnavtext'>
green<br>Widgets
</span>
<span class='midnavtext'>
yellow<br>widgets
</span>
<span class='midnavtext'>
purple<br>widgets
</span>
<span class='midnavtext'>
pin<br>widgets
</span>

didn't seem to help much ...

This is what I got when trying to create a table-style layout. It worked though:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Test!</title>
<style type="text/css">
.midnavtext {
font: 13px arial, verdana, Helvetica, sans-serif;
color: #000000;
font-weight: bold;
text-align: right;
display:inline;
text-decoration: none;
margin: 0;
padding: 7px;
width:100px;
float:left;
}
</style>
</head>
<body>

<span class='midnavtext'>
			red<br>widgets
		</span>
		<span class='midnavtext'>
			blue<br>Widgets
		</span>
		<span class='midnavtext'>
			green<br>Widgets
		</span>
		<span class='midnavtext'>
			yellow<br>widgets
		</span>
		<span class='midnavtext'>
			purple<br>widgets
		</span>
		<span class='midnavtext'>
			pin<br>widgets
		</span>

</body>
</html>

**vgarcia** · Dec 7, 2002 07:23

Also, if you're going for XHTML, you must properly close your <br> element. It should look like this:

Code:

<br />

--Vinnie

**mgray** · Dec 7, 2002 09:32

Thats it, thanx for the help.

User Tag List

Thread: help with CSS

Thread Tools

Display

help with CSS

rev 1.1

Re: rev 1.1

Help with CSS

Bookmarks

Bookmarks

Posting Permissions