...

View Full Version : inside div text positioning issue



Dhuan
04-01-2009, 08:28 PM
<style>
.title{
width:100%;
height:50px;
background-color:skyblue;
font-size:20px;
}
</style>

<div class="title">
here's my title
</div>



What I want to do is, positionate the text (not the div), without affecting the div's size/width.

I tried using 'padding-bottom: 5px' but then it affected the div size...

Excavator
04-01-2009, 08:47 PM
Hello Dhuan,
The way it is now there is no tags for styling the text so your limited to styling .title

Since it's just a heading you could use h1, h2, h3 ... and style that. Works really well and that's what the heading tags were made for.

I've used your example, h1 tag on the second example and styled the text in the 3rd example here -
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 14px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
outline: none;
border: none;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
.title {
width:100%;
height:50px;
line-height: 50px; /*vertically centers text*/
background-color:skyblue;
font-size:20px;
margin: 10px 0; /*just to separate them a little*/
}
.title p {
text-align: left;
color: #3F0;
margin: 0 0 0 100px;
}
</style>
</head>
<body>
<div id="container">
<div class="title">
here's my title
</div>

<h1 class="title">here's another title</h1>

<div class="title">
<p>a third title</p>
</div>
<!--end container--></div>
</body>
</html>

http://www.w3schools.com/css/css_text.asp

...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum