A few CSS problems

stfc_boy

07-09-2008, 01:15 PM

Hi All,

I'm completely stuck on two (pretty simple) things that I can't get my head around, and one other general question:

The first problem is my <p> tags. The text appears way beneath each other when I want it with a very small gap in-between the paragraphs. Can someone help?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html><head>
<title>Testing</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style>

.left {
float:left;
display:inline;
width:300px;
height:200px;
background:#EEEEEE;
border: 1px solid #CCC;
}

.left:hover {
float:left;
display:inline;
border: 1px solid #FFED97;
width:300px;
height:200px;
background:#FFFDF2;
}

.left p {
font-family:verdana;
font-size:0.90em;
margin-bottom:2px;
color: #333;
}

img.the_image {
display:inline;
float:left;
padding:6px;
}

</style>

<div class="left">
<img src="image.png" width="62" height="62" class="the_image"/>
<p>» Add a News Item</p>
<p>» Add a News Item</p>
<p>» Add a News Item</p>
</div>

</body>
</html>

2) The second one is another simple one, say I have another style named .right and all of the styles are the same, rather than writing them out again can I say they are the same styles? IE something like:

.left:hover, right:hover {
float:left;
display:inline;
border: 1px solid #FFED97;
width:300px;
height:200px;
background:#FFFDF2;
}

.left p, right p {
font-family:verdana;
font-size:0.90em;
margin-bottom:2px;
color: #333;
}

3) Say all the styles were the same .left and .right, apart from one thing the background colour on .right, what's the best practice for this, just stating the new background in the style like:

<div class="right" style="background:#FFF;"></div>

Many Thanks

Chris

rangana

07-09-2008, 01:50 PM

For your first question. Try to reset the margins and padding of p element:

p{margin:0px;padding:0px;}

Or alternatively, use CSS reset:

*{margin:0px;padding:0px;}

For your second question. This is'nt a problem, but I would like to point out that you were describing right class, but the CSS you've shown might prove you missed something:

.left:hover, .right:hover {
float:left;
display:inline;
border: 1px solid #FFED97;
width:300px;
height:200px;
background:#FFFDF2;
}

.left p, .right p {
font-family:verdana;
font-size:0.90em;
margin-bottom:2px;
color: #333;
}

You can do the way you did in #3, but you can also do the same in your CSS:

.right{background:#fff;}

Hope it keeps you going.

jerry62704

07-09-2008, 03:57 PM

STFC, 1) you can set the line height (http://www.w3schools.com/css/pr_dim_line-height.asp. You have a margin at the bottom of your ".left p" - was that wanted if you want to bring them closer together?

2) yes (check your syntax)

3)
.left:hover, right:hover {
float:left;
display:inline;
border: 1px solid #FFED97;
width:300px;
height:200px;
background:#FFFDF2;
}

.right {
background-color: your choice;
}

The styles and attributes are additive unless they are duplicated in which case last home wins. Generally it is better not to hard code in the page as you lose flexibility.