Text control within a div

**Koros** · Jun 18, 2006 09:21

Hi,
I use css to emulate a simple table for a header title in my site, here is the css <div code:

.headerhome {
font-size: 12px;
background-color: #CC0000;
text-align: left;
font-family: verdana, helvetica, sans-serif;
color: #FFFFFF;
width: 100%;
height: 20px;
margin-left: 7px;

}

What i'm missing, is code to control the text inside the div: vertical position of text, and I also want to add some px to the left of the text.

What should I add ?

Thanks,
Koros

**all4nerds** · Jun 18, 2006 09:55

Hello

100% width + margin-left 7px = no fit

little boxes

Code:

<!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" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	
	body{font-family: verdana, helvetica, sans-serif;}
	
	div{text-align:left; }
	
	* {margin:0;padding:0;}
	
	.headerhome{border:1px solid #CC0000;margin:10px}
	
	.headerhome h3,.left h3,.right h3{
	font-size:12px;
	background:#CC0000;
	color:#FFFFFF;
	line-height:20px;
	font-weight:100;
	padding:0 0 0 15px;
	}
	.headerhome p,.left p,.right p{
	font-size:10px;
	padding:0 0 0px 15px;
	}
	
	.left{width:400px;float:left;background:#ccccff;}
	.right{width:200px;float:right;background:#ccccff;}
	
	.x{padding:0 0 5px 0;}
	.x h3{margin:10px 10px 0 10px;}
	.x p{margin:5px 10px 0 10px;padding:0;}
	
	.z{clear:both;height:20px;}
	</style>
	<script type="text/javascript">

	</script>
</head>
<body>
<div class="headerhome">
<h3>12345</h3>
<p>ab<br /><br /><br /><br /><br />cde</p>
</div>

<div class="right">

<div class="headerhome">
<h3>12345</h3>
<p>ab<br /><br />cde</p>
</div>

</div>

<div class="left">

<div class="headerhome">
<h3>12345</h3>
<p>ab<br /><br />cde</p>
</div>

</div>

<p class="z"></p>

<div class="right x">

<h3>12345</h3>
<p>abcde</p>


</div>

<div class="left x">


<h3>12345</h3>
<p>abcde</p>


</div>

</body>
</html>

User Tag List

Thread: Text control within a div

Thread Tools

Display

Text control within a div

Bookmarks

Bookmarks

Posting Permissions