Pendergast
Erfahrenes Mitglied
Ich hab zwei Probleme mit meinem Stylesheet.
a) In einem Kopfbereich (<div id="head">) möchte ich eine Headline vertikal zentriert anzeigen, und zwar browserunabhängig (was mir nicht gelingen möchte).
b) Ich habe ein zweispaltiges Design, welches in einen Content-Bereich (<div id="Inhalt">) und in einen Info-Bereich (<div id="Info">) unterteilt ist. Die beiden Bereiche sollen natürlich nebeneinander angezeigt werden, weshalb ich den Info-Bereich als floating div definiert habe. Allerdings kommt es mitunter vor, dass der Info-Bereich höher ist als der Content-Bereich, und das Seitenende (<div id="footer"> und <div id="bottom">) überlagert. Diese beiden divs sollen natürlich erst unter Info- und Content-Bereich angezeigt werden und nicht einfach immer direkt unter dem Content-Bereich. Mag mir auch nicht gelingen.
Mittlerweile bin ich dazu übergegangen, nur noch planlos überall irgendwelche Werte im Stylesheet zu ändern in der Hoffnung, dass ich irgendwann mal zufällig eine funktionstüchtige Kombination treffe.
Da halt ich es dann doch für besser, wenn ich mal nachfrage. Kann mir jemand weiterhelfen?
Website:
Stylesheet:
a) In einem Kopfbereich (<div id="head">) möchte ich eine Headline vertikal zentriert anzeigen, und zwar browserunabhängig (was mir nicht gelingen möchte).
b) Ich habe ein zweispaltiges Design, welches in einen Content-Bereich (<div id="Inhalt">) und in einen Info-Bereich (<div id="Info">) unterteilt ist. Die beiden Bereiche sollen natürlich nebeneinander angezeigt werden, weshalb ich den Info-Bereich als floating div definiert habe. Allerdings kommt es mitunter vor, dass der Info-Bereich höher ist als der Content-Bereich, und das Seitenende (<div id="footer"> und <div id="bottom">) überlagert. Diese beiden divs sollen natürlich erst unter Info- und Content-Bereich angezeigt werden und nicht einfach immer direkt unter dem Content-Bereich. Mag mir auch nicht gelingen.
Mittlerweile bin ich dazu übergegangen, nur noch planlos überall irgendwelche Werte im Stylesheet zu ändern in der Hoffnung, dass ich irgendwann mal zufällig eine funktionstüchtige Kombination treffe.
Da halt ich es dann doch für besser, wenn ich mal nachfrage. Kann mir jemand weiterhelfen?Website:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="_style.css" />
</head>
<body>
<div id="head">
<h1>Titel</h1>
</div>
<ul id="menu">
<li><a href="1.php">Link 1</a></li>
<li><a href="0.php" style="color: #66F">Link 0</a></li>
</ul>
<div id="Info">
Infobox mit Zusatzinfos und weiteren Links
</div>
<div id="Inhalt">
Eigentlicher Seiteninhalt
</div>
<div id="footer">
Fußzeile
</div>
<div id="bottom">
</div>
</body>
</html>Stylesheet:
Code:
@charset "utf-8";
html {
background-color: white;
}
body {
font-size: 100.01%;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 8%;
margin-right: 8%;
background-color: white;
color: #11111A;
font-family: Arial, "Trebuchet MS", Tahoma, Verdana;
font-size: 12px;
line-height: 125%;
}
img {
border:none
}
#head {
padding: 1px;
background-image: url(images/banner.png);
background-position: right;
background-repeat: no-repeat;
height: 50px;
}
#head h1 {
vertical-align: middle;
padding: 0px;
margin: 0px;
}
#bottom {
padding: 1px;
background-image: url(images/banner2.png);
background-position: right;
background-repeat: no-repeat;
height: 50px;
}
#menu {
background-color: #191970;
margin: 0;
padding-top:3px;
padding-bottom: 3px;
line-height: 140%;
vertical-align: bottom;
text-align: center;
font-size: 11px;
list-style-type: none;
padding-left: 12px;
padding-right: 12px
}
#menu li {
display: inline;
}
#menu li a {
padding-right: 15px;
padding-left: 15px;
color: white;
}
#footer {
background-color: #cd853f;
margin: 0;
line-height: 100%;
vertical-align: bottom;
text-align: center;
font-size: 10px;
list-style-type: none;
padding-top:3px;
padding-bottom: 3px;
padding-left: 12px;
padding-right: 12px;
}
#footer a {
color: black;
}
a:link, a:visited {
color: #cd853f;
text-decoration: none;
}
a:hover, a:active {
color: #cd853f;
text-decoration: underline;
}
fieldset {
padding: 6px;
background: white;
border: 1px dotted #191970;
margin-left: 20px;
margin-right: 20px;
margin-top: 6px;
}
fieldset legend {
color: #fff;
background-color: #cd853f;
font-size: smaller;
padding: .1ex .5ex;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
font-weight: bold;
}
table {
background-color: white;
border-spacing: 1px;
margin-left: 0px;
margin-right: 20px;
width: 95%;
}
tr.head {
background-color: #191970;
font-size: 11px;
color: white;
font-weight: bold;
}
tr.r0 {
background-color: #ffefd5;
font-size: 11px;
}
tr.r0x {
background-color: #ffefd5;
font-size: 11px;
}
tr.r0x td {
border-bottom: 1px solid #cd853f;
}
tr.r1 {
background-color: white;
font-size: 11px;
}
tr.r1x {
background-color: white;
font-size: 11px;
}
tr.r1x td {
border-bottom: 1px solid #cd853f;
}
tr.footer {
background-color: #cd853f;
margin: 0;
padding: 0;
padding-top:3px;
padding-bottom: 3px;
line-height: 100%;
vertical-align: bottom;
text-align: right;
font-size: 7pt;
list-style-type: none;
}
td {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 5px;
padding-right: 5px;
}
td.newsinfo {
vertical-align: top;
text-align: center;
font-size: 0.8em;
}
td.news {
vertical-align: top;
text-align: left;
}
div#Info {
font-size: 0.9em;
float: right;
width: 16em;
margin: 0 0 1.1em;
padding: 0.5em;
color: #666;
border-left: 1px dotted #666;
}
div#Info h2 {
font-size: 1.33em;
margin: 0.2em 0;
}
div#Info p {
font-size: 1em;
}
div#Inhalt {
margin: 0 16em 0 0;
padding: 0.5em 0;
min-height: 250px;
}
* html div#Inhalt {
height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
}
div#Inhalt h2 {
font-size: 1.5em;
margin: 0.2em 0;
}
div#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
