SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with this CSS example

    I'm new to tableless tables, and I'm trying to create a layout for my website. I made it work, but don't think I did it right. Even though it does work, are there any suggestions to maybe clean it up a little??

    Here's the CSS:
    #cruise {
    width: 620px;
    position: relative;
    overflow: auto;
    margin-right: 70px;
    }

    .cl-name {
    position: relative;
    float: left;
    width: 260px;
    border-top: 1px dotted #000000;
    border-bottom: 1px dotted #000000;
    color: #B71000;
    font: bold 12px/150% Arial, sans-serif;
    text-align: center;
    margin-bottom: 5px;
    }

    .cr-city {
    position: relative;
    float: left;
    width: 260px;
    border-top: 1px dotted #000000;
    border-bottom: 1px dotted #000000;
    color: #B71000;
    font: bold 14px/150% Arial, sans-serif;
    text-align: center;
    margin-bottom: 5px;
    }

    .cr-info {
    position: relative;
    float: left;
    clear: left;
    width: 260px;
    font: bold 10px Verdana, Arial, sans-serif;
    text-align: center;
    }

    .cr-text {
    position: relative;
    float: right;
    width: 340px;
    font-size: 12px Arial, sans-serif;
    text-align: justify;
    margin-left: 20px;
    }

    .cr-nav {
    width: 320px;
    position: relative;
    float: right;
    text-align: center;
    margin: 8px 0px 50px 0px;
    }

    Here's the sample:
    <div id="cruise">
    <div class="cr-city">APOPKA</div>
    <div class="cr-text">Held at the Rock Springs Bar and Grill, 4939 Rock Springs Road, and limited to vehicles 1982 and older. There's three trophies randomly awarded, DJ and karaoke, 50/50 drawing, $2 beer specials, and food is available.</div>
    <div class="cr-info">Second Sunday of the Month<br />2:00 PM - 6:00 PM<br />(407) 886-0057</div>
    <div class="cr-nav"><a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=4939+Rock+Springs+Road,+Apopka,+FL&sll=37.0625,-95.677068&sspn=33.160552,78.662109&ie=UTF8&ll=28.758668,-81.508491&spn=0.008954,0.019205&t=h&z=16&iwloc=A" target="top"><img src="events/map.png" border="0"></a></div>
    </div>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    A layout like that might get hard to manage as the site gets bigger. first consider the whole page design, then work out the best way to organize things. If you have columns, it's best to wrap each column in a div to help things stay in place.

    At the moment, there doesn't seem to be a role for position: relative on any of those divs.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    tableless tables
    ????????!??????

    Just to be clear, if your data is tabular (there is semantic/contetxual meaning in the columns/rows.. then use TABLE), for the most part you will be able to stile it to look whichever way you want with CSS anyway.


    That beign said...
    you DONT need to give every element position:relative; just those that you intend to display or those who have AP'ed descendants which you want position relative to the afore mentioned elements ( not of this is present in your small sample)

    Also, semantically, your navigation should be a UL.


    hope that helps a lil.

  4. #4
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help! After reading both your comments, CSS makes a little more sense to me. And especially the tip about the navigation! Thanks again, and I'm sure I'll be back soon!


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
  •