Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    OES
    OES is offline
    New to the CF scene
    Join Date
    Aug 2011
    Location
    Ohio
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Table with CSS / Multiple lines of text

    Before I start, I want to let you all know that I'm pretty green when it comes to using CSS. There is currently no CSS on my site (other than some Facebook stuff). I used tables and standard HTML formatting to get the tables the way they currently appear. I would like to duplicate this effect using CSS or some sort of combination of HTML and CSS.

    Go to ohioexploration.com and take a look at Internet Links on the main page. You could also navigate to one of the sub-sections (i.e. Structures, Cemeteries, etc.) and see how it is set up. There is a thumbnail image on the left with three lines of text to the right, each line with it's own formatting. Clicking the thumbnail or the first line of text will take you to a different site/page. Is there a way I can replicate this using CSS, or a combination of CSS and HTML?

    Once I receive a couple of suggestions, I'll give them a try and upload a test page to the site with the changes.

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    Yes, the html would be:

    Code:
    <img src="" class="alignleft" />
    <h2>Header Text Here</h2>
    <p class="yellow">Yellow text</p>
    <p>Other text here</p>
    and the CSS:
    Code:
    .alignleft {
        float: left;
        margin-right: 10px;
    }
    h2 {
       font-size: 25px;
    }
    .yellow {
        color: yellow;
    }
    p {
     font-size: 12px;
    }

  • Users who have thanked resdog for this post:

    OES (08-13-2011)

  • #3
    OES
    OES is offline
    New to the CF scene
    Join Date
    Aug 2011
    Location
    Ohio
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by resdog View Post
    Yes, the html would be:

    Code:
    <img src="" class="alignleft" />
    <h2>Header Text Here</h2>
    <p class="yellow">Yellow text</p>
    <p>Other text here</p>
    and the CSS:
    Code:
    .alignleft {
        float: left;
        margin-right: 10px;
    }
    h2 {
       font-size: 25px;
    }
    .yellow {
        color: yellow;
    }
    p {
     font-size: 12px;
    }
    Thanks for the help! I tried this out, but the spacing between the lines is off now...there's a lot more space than in the original. I uploaded what I have so far to a secure directory on my website. Go to 2012.ohioexploration.org and (u) tester and (p) test123 will get you in. Is there a way to reduce the amount of space between the lines of text to make it look like the original page?

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    you can use line-height property of CSS to set height of each line. Following is sample

    Code:
    p {
        line-height:15px;
    }

  • #5
    OES
    OES is offline
    New to the CF scene
    Join Date
    Aug 2011
    Location
    Ohio
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I've tried the line-height, but it still doesn't look right and I have the spacing at 0px. Is there any such thing as a negative setting? Any other suggestions?

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    http://w3schools.com/css/default.asp

    start out by adding a doctype to the top of your page
    Last edited by Sammy12; 08-14-2011 at 05:22 AM.

  • #7
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    To replicate the table using just .css here is a basic layout (everything has been nested in a div called locationswrap and I've given them borders in colour so that you can recognize them):

    The .css
    Code:
    #locationswrap {float: left; width: 740px; background-color: #000; border: 1px solid red; 
    }
    
    .leftcolumn { float:left; clear: right; width: 120px; border: 1px solid #fff; margin-bottom: 5px;
    }
    
    .rightcolumn { float:left; width: 603px; height: 80px; border: 1px solid blue; color:#FFF; margin-bottom: 5px; padding: 5px;
    }
    The .html
    Code:
    <div id="locationswrap">
    
    <div class="leftcolumn"><img src="images/myfirstimage.jpg" alt="1st location" width="120px"height="90px"></div>
    <div class="rightcolumn"> Here's where the text for the first location comes
    </div>
    
    <div class="leftcolumn"><img src="images/mysecondimage.jpg" alt="2nd location" width="120px"height="90px"></div>
    <div class="rightcolumn"> Here's where the text for the second location comes 
    </div>
    
    <div class="leftcolumn"><img src="images/mythirdimage.jpg" alt="3rd location" width="120px" height="90px"></div>
    <div class="rightcolumn"> Here's where the text for the third location comes
    </div>
    
    </div>


  •  

    Posting Permissions

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