elmu
04-21-2008, 10:16 PM
Hello,
I want to make a header section for products where I want to align category to the left, the price to the right and the name in the middle of the complete header.
I have a code below where the left and right align works, but I don't know how to put the "Item name" in the middle.
Any idea?
Thanks!
<!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>
<style type="text/css">
<!--
.header{
overflow:hidden;
width:500px;
background-color:#cccccc;
}
.logo {
font-size:18px;
font-weight:bold;
padding:0px 3px;
float:left;
}
.category {
font-size:10px;
padding:5px 3px;
float:left;
}
.title {
font-size:14px;
font-weight:bold;
text-align:center;
float:left;
}
.price {
font-size:12px;
font-weight:bold;
text-align:right;
}
-->
</style>
</head>
<body>
<div class="header">
<div class="logo">S</div>
<div class="category">Item category</div>
<div class="title">Item name</div>
<div class="price">$110</div>
</div>
</body>
</html>
I want to make a header section for products where I want to align category to the left, the price to the right and the name in the middle of the complete header.
I have a code below where the left and right align works, but I don't know how to put the "Item name" in the middle.
Any idea?
Thanks!
<!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>
<style type="text/css">
<!--
.header{
overflow:hidden;
width:500px;
background-color:#cccccc;
}
.logo {
font-size:18px;
font-weight:bold;
padding:0px 3px;
float:left;
}
.category {
font-size:10px;
padding:5px 3px;
float:left;
}
.title {
font-size:14px;
font-weight:bold;
text-align:center;
float:left;
}
.price {
font-size:12px;
font-weight:bold;
text-align:right;
}
-->
</style>
</head>
<body>
<div class="header">
<div class="logo">S</div>
<div class="category">Item category</div>
<div class="title">Item name</div>
<div class="price">$110</div>
</div>
</body>
</html>