ollie-
December 7th, 2006, 10:39 AM
I'm having a problem getting some <div>s to line up horisontally. They all want to occupy the same space. Any idea what I can do to get them to line up correctly (Without giving them individual ids and postioning them using left and top).
Here is the HTML:
<!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=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
@import url(global.css);
</style>
</head>
<div id="header">
<div class="redtab"><div class="redtableft"></div><div class="redtabmiddle"><a href="#">Welcome</a></div><div class="redtabright"></div></div>
<div class="redtab"><div class="redtableft"></div><div class="redtabmiddle"><a href="#">Welcome</a></div><div class="redtabright"></div></div>
<div class="redtab"><div class="redtableft"></div><div class="redtabmiddle">Contact & Mailing List</div><div class="redtabright"></div></div>
</div>
<div id="content">
</div>
<body>
</body>
</html>
And the CSS:
/*Global Properties*/
body {
background-color: #313131;
}
h1 {
}
h2 {
}
h3 {
}
p {
}
a {
}
/* Main Navigation */
#header {
height: 46px;
color: #FFF;
font: 14px Arial, Helvetica, Geneva, sans-serif;
letter-spacing: 1px;
display: inline-block;
}
#header a {
text-decoration: none;
color:#FFF;
}
#header a:link {text-decoration: none}
#header a:visited {text-decoration: none}
#header a:active {text-decoration: none}
#header a:hover {text-decoration: none; color: #dcdcdc;}
/*Red Header Tab*/
.redtab {
position: absolute;
height: 46px;
margin: 2px;
padding: 0px;
background-color: #9D3131;
display: block;
}
.redtabmiddle {
padding: 4px;
}
.redtableft {
position: absolute;
left: 0px;
top: 0px;
width: 6px;
height: 46px;
margin: 0px;
padding: 0px;
background-image: url(images/left.png);
display: block;
}
.redtabright {
position: absolute;
right: 0px;
top: 0px;
width: 6px;
height: 46px;
margin: 0px;
padding: 0px;
background-image: url(images/right.png);
}
This is driving me crazy, so i'd really appreciate someone else's opinion.
:pir:
Here is the HTML:
<!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=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
@import url(global.css);
</style>
</head>
<div id="header">
<div class="redtab"><div class="redtableft"></div><div class="redtabmiddle"><a href="#">Welcome</a></div><div class="redtabright"></div></div>
<div class="redtab"><div class="redtableft"></div><div class="redtabmiddle"><a href="#">Welcome</a></div><div class="redtabright"></div></div>
<div class="redtab"><div class="redtableft"></div><div class="redtabmiddle">Contact & Mailing List</div><div class="redtabright"></div></div>
</div>
<div id="content">
</div>
<body>
</body>
</html>
And the CSS:
/*Global Properties*/
body {
background-color: #313131;
}
h1 {
}
h2 {
}
h3 {
}
p {
}
a {
}
/* Main Navigation */
#header {
height: 46px;
color: #FFF;
font: 14px Arial, Helvetica, Geneva, sans-serif;
letter-spacing: 1px;
display: inline-block;
}
#header a {
text-decoration: none;
color:#FFF;
}
#header a:link {text-decoration: none}
#header a:visited {text-decoration: none}
#header a:active {text-decoration: none}
#header a:hover {text-decoration: none; color: #dcdcdc;}
/*Red Header Tab*/
.redtab {
position: absolute;
height: 46px;
margin: 2px;
padding: 0px;
background-color: #9D3131;
display: block;
}
.redtabmiddle {
padding: 4px;
}
.redtableft {
position: absolute;
left: 0px;
top: 0px;
width: 6px;
height: 46px;
margin: 0px;
padding: 0px;
background-image: url(images/left.png);
display: block;
}
.redtabright {
position: absolute;
right: 0px;
top: 0px;
width: 6px;
height: 46px;
margin: 0px;
padding: 0px;
background-image: url(images/right.png);
}
This is driving me crazy, so i'd really appreciate someone else's opinion.
:pir: