PDA

View Full Version : css font position problem...


fattat
05-25-2009, 05:38 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
</head>
<style type="text/css">
body{
padding:0;
margin:0;
font-family:Arial, Helvetica, sans-serif;
color:#999;
}
div,img, p{
margin:0; padding:0;
}
ul{
padding::0;
margin:0;
list-style-type:none;
font-size:0;
line-height:0;
}
/*-------------main-------------*/
/*-------------top--------------*/
#top{
padding:12px 0 0 0;
margin:0 auto;
width:1022px;
border-left:dashed #999 1px;
border-right:dashed #999 1px;
background:url(images/top_bdg.gif) 0 0 repeat-x;
height:28px;
}
#top p.toptxt1{
font:bold 24px Arial, Helvetica, sans-serif;
color:#3d3d3d;
float:left;
margin:0 0 0 13px;
display:block;
width:250px;
}
#top p.toptxt1 span{
font:normal 14px Arial, Helvetica, sans-serif;
color:#908f8f;
}
#top p.toptxt1 span a{
color:#908f8f;
text-decoration:none;

}
#top p.toptxt1 span a:hover{
color:#000000;
}
</style>
<body>
<!---------------top---------------->
<div id="top">
<p class="toptxt1">VOLUNTEER <span><a href="#">read more</a></span></p>
</div>
<!--------------end top------------->
</body>
</html>



the below is the image i take from photoshop,
that is the layout i want
http://img37.imageshack.us/img37/1298/picture8o.png (http://img37.imageshack.us/my.php?image=picture8o.png)


but when i do it in dreamweaver
the text cant be at the central...
in this code #top p.toptxt1,
how to make the text "volunteer" at the top in #top p.toptxt1,
http://www.freeimagehosting.net/uploads/c964aab4fe.png (http://www.freeimagehosting.net/)


thank for helping

davidj
05-25-2009, 08:32 PM
download firebug extension for firefox

this will help debug any css issues

the div which the text is in. Try adding some margin-bottom to that to push it up

fattat
05-26-2009, 12:43 AM
download firebug extension for firefox

this will help debug any css issues

the div which the text is in. Try adding some margin-bottom to that to push it up


even adding margin-bottom the text still cant push it up
http://img38.imageshack.us/img38/8504/picture4qzr.png (http://img38.imageshack.us/my.php?image=picture4qzr.png)
i adding margin-bottom 4px, but the margin-bottom exceed the main div


i think is maybe some script i missing, not firefox css bug problem (in IE also same problem)

DWcourse
05-26-2009, 01:27 AM
You set the height in the style #top to 28 pixels. Get rid of the height property or increase it.

Corrosive
05-26-2009, 11:18 AM
i think is maybe some script i missing, not firefox css bug problem (in IE also same problem)

Firebug is a plug-in for firefox browser. It is a tool for easily seeing what may be a problem with your CSS. It doesn't matter which browsers it looks ok in.