SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: help with CSS

  1. #1
    SitePoint Member
    Join Date
    May 2001
    Location
    Wantgh, NY
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help with CSS

    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

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    <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

  3. #3
    SitePoint Member
    Join Date
    May 2001
    Location
    Wantgh, NY
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    rev 1.1

    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 ...

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

    Re: rev 1.1

    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>

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Also, if you're going for XHTML, you must properly close your <br> element. It should look like this:
    Code:
    <br />
    --Vinnie

  6. #6
    SitePoint Member
    Join Date
    May 2001
    Location
    Wantgh, NY
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with CSS

    Thats it, thanx for the help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •