Hallo,
hier ist ein Seitenaufbau der leider nicht so funktioniert wie ich mir das vorstelle.
Der schwarze Header soll sich über die gesamte Breite erstrecken, 90Pixel gross sein. Im Header befinden sich unten zwei 8 Pixel grosse Trennlinien zu optischen Trennung, diese sind natürlich auch über die gesamte Breite gestreckt. Der Seiteninhalt soll 636 Pixel breit sein und zentriert ausgerichtet sein. Das Banner (oder Text, Menu, Links usw.) welches sich im Header befindet soll die gleiche Breite wie der Seiteninhalt haben, also 636 Pixel.
Hier ist mein HTML:
Und das CSS:
Bei mir wird der Header und Seiteninhalt richtig angezeigt, das Banner wird jedoch direkt an den linken Rand geklebt und nicht zentriert ausgerichtet, und das obwohl text-align: center angegeben ist.
Patrick
hier ist ein Seitenaufbau der leider nicht so funktioniert wie ich mir das vorstelle.
Der schwarze Header soll sich über die gesamte Breite erstrecken, 90Pixel gross sein. Im Header befinden sich unten zwei 8 Pixel grosse Trennlinien zu optischen Trennung, diese sind natürlich auch über die gesamte Breite gestreckt. Der Seiteninhalt soll 636 Pixel breit sein und zentriert ausgerichtet sein. Das Banner (oder Text, Menu, Links usw.) welches sich im Header befindet soll die gleiche Breite wie der Seiteninhalt haben, also 636 Pixel.
Hier ist mein HTML:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Test Design</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
@import "helper/styles2.css";
</style>
</head>
<body>
<div id="header">
<div id="banner">
<h1>Titelleiste</h1>
<p> bla bla bla bla bla</p>
</div>
<div id="firstLine"></div>
<div id="secondLine"></div>
</div>
<div id="page">
<div id="content">
<p>Seiteninhalt</p>
</div>
</div>
</body>
</html>
HTML:
html {
height: 100%;
}
/* Zero default margin & padding around common elements */
body, dd, dl, dt, form, h1, h2, h3, h4, h5, h6, li, ol, p, ul {
margin: 0;
border: 0 none transparent;
padding: 0;
}
body {
height: 100%;
background-color: #333;
color: #000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
text-align: center;
}
#page {
width: 636px;
min-height: 100%;
margin: 0 auto;
padding: 0;
background-color: #fff;
text-align: left;
}
#header {
padding: 0;
height: 90px;
color: #fff;
background-color: #000;
text-align: center;
}
#banner {
height: 74px;
width: 636px;
background-color: #bbb;
}
#firstLine {
height: 8px;
background-color: #074a97;
}
#secondLine {
height: 8px;
background-color: #4784ca;
}
#content {
}Patrick
