...

View Full Version : Table with CSS / Multiple lines of text



OES
08-10-2011, 09:39 PM
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.

resdog
08-10-2011, 10:02 PM
Yes, the html would be:



<img src="" class="alignleft" />
<h2>Header Text Here</h2>
<p class="yellow">Yellow text</p>
<p>Other text here</p>


and the CSS:


.alignleft {
float: left;
margin-right: 10px;
}
h2 {
font-size: 25px;
}
.yellow {
color: yellow;
}
p {
font-size: 12px;
}

OES
08-13-2011, 02:48 PM
Yes, the html would be:



<img src="" class="alignleft" />
<h2>Header Text Here</h2>
<p class="yellow">Yellow text</p>
<p>Other text here</p>


and the CSS:


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

vikram1vicky
08-13-2011, 03:05 PM
you can use line-height property of CSS to set height of each line. Following is sample


p {
line-height:15px;
}

OES
08-14-2011, 05:04 AM
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?

Sammy12
08-14-2011, 05:13 AM
http://w3schools.com/css/default.asp

start out by adding a doctype to the top of your page

Avril
08-14-2011, 11:10 AM
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


#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


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum