Hallo!
Ich sitze schon seit Wochen an einem Design und habe es soweit gut nach meinen Vorstellungen hinbekommen. Leider bin ich bei einem Punkt angelangt, wo ich einfach nicht mehr weiterkomme.
Folgende Probleme habe ich:
- Der Contendbereich [Div] (die weiße Box) soll ohne Eingabe von vielen Text bis zum Seitenrand des Browsers runtergehen. Habe hier auch schon height: 100% (auch auf die Parent-Divs, wie es hier in der FAQ stand) versucht, jedoch ohne Erfolg (Jetzt wieder aus dem Code rausgenommen). Auch Spielereien mit min-height 100% usw bringen nicht das gewünschte Ergebnis. Wenn ich jedoch den Text bis über den Browserrand schreibe, geht die Box mit, so wie es auch sein soll. Kann mir hier jemand bitte helfen, wie ich den Contendbereich bis zum Browserrand bringe? Bin wirklich schon am verzweifeln :/
- Ich verwende in meiner Navigation für die einzelnen Nav-Punkte Bilder. Leider werden im IE8 die Navigationspunkte um 1 Pixel zu hoch dargestellt. Daraus folgt, dass ich bei jedem Nav-Punkt einen Streifen mit dem Hintergrund habe (da das Bild schon aus ist). Wie bereits in eurer FAQ steht habe ich hier auf html, body, p, ul, h1, h2 und auf * ein margin und padding auf 0 am Anfang der CSS gesetzt, jedoch ohne Erfolg. Gibts eine Möglichkeit den Streifen weg zu bekommen?
Wenn nicht kann ich die einzelnen Bilder notfalls auch noch um 1 px mit dem nächsten Eintrag erweitern.
Hier ein Link zum Design:
ThorCP Lite
Der Code nocheinmal extra hier:
grundstruktur.html
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ThorCP Lite</title>
<style type="text/css">
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 377px;
top: 167px;
}
</style>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header1">
<div id="logo"></div>
<div id="logo_header"></div>
<div id="headmenu">
<div class="headmenu_position">Übersicht | Logout</div>
</div>
</div>
<div id="header2">
<div class="logo_down">
<span class="logo_down">v0.9</span>
</div>
<div class="headtext">
<div class="headtext2" id="ht_home">
<h1>Übersicht</h1>
</div>
</div>
</div>
<div id="base">
<ul class="nav">
<li><a href="#" class="nav_top">lalalala</a></li>
<li><a href="#" class="nav_entry">Hyperlink 2</a></li>
<li><a href="#" class="nav_entry">Hyperlink 3</a></li>
<li><a href="#" class="nav_bottom">Hyperlink 4</a></li>
</ul>
<div class="contend">
<div id="contend_bgborder1">
<div id="contend_bgborder2">
<div class="contend_bgangle">
<div class="contend_main">
sadsad sadsa<br />
fdfgdfg<br />
dfghghfH<br />
fgfhgfhgfh<br />
fghgfhgfhdf<br />
sdfsdfsdfsdf<br />
sdfsdfsdfsdf</div>
</div>
</div>
</div>
</div>
<div class="bottomtext">
<p id="loadtime">
Ladezeit: 0,012 ms
</p>
<img src="img/bottomtext_strip.gif" width="143" height="2" alt="Bottomtext-Strip" />
<p id="copyright">
© 2010-2011 ThorCP
</p>
</div>
</div>
</div>
</body>
</html>
style.css
PHP-Code:
html, body {
height: 100%;
background-color: #7080BB;
}
html, body, p, ul, h1, h2 {
margin: 0;
padding: 0;
}
* { margin: 0; padding: 0; }
#wrapper {
/* Für moderne Browser */
min-height: 100%;
/* Für den Internet Explorer */
height: auto !important;
margin: 0;
padding: 0;
background-image: url(img/wrapper-bg.gif);
background-repeat: repeat-x;
}
#logo {
margin: 0px;
padding: 0px;
float: left;
height: 88px;
width: 297px;
background-image: url(img/logo.gif);
}
#logo_header {
background-image: url(img/header1.gif);
padding: 0px;
float: left;
height: 61px;
width: 423px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
position: relative;
}
.logo_down {
background-image: url(img/logo-down.gif);
background-repeat: no-repeat;
height: 46px;
width: 199px;
float: left;
background-color: #7080BB;
clear: left;
}
span.logo_down {
padding-top: 26px;
padding-left: 6px;
color: #8493C4;
font-family: Verdana, Geneva, sans-serif;
font-size: 0.8em;
}
div.headtext {
float: left;
height: 46px;
min-width: 521px;
overflow: hidden;
background-image: url(img/headtext_strip.gif);
background-repeat: no-repeat;
background-position: 1px 38px;
}
div.headtext2 {
height: auto;
background-repeat: no-repeat;
background-position: 0px 8px;
height: 46px;
}
.headtext2 h1 {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
padding-left: 34px;
padding-top: 16px;
color: #FFF;
}
#ht_home {
background-image: url(img/ht_symbols.png);
}
#header1 {
min-width: 720px;
max-width: 1142px;
float: left;
}
#header2 {
clear: left;
float: left;
min-width: 720px;
max-width: 1142px;
background-color: #7080BB;
}
ul.nav {
float: left;
padding: 0;
margin: 0;
list-style: none;
margin-top: 134px;
}
ul.nav a.nav_top {
background-image: url(img/nav_entry_top.gif);
background-repeat: no-repeat;
padding-top: 7px;
height: 24px;
width: 120px;
overflow: hidden;
}
ul.nav a.nav_top:hover, ul.nav a.nav_top:active, ul.nav a.nav_top:focus,
ul.nav a.nav_entry:hover, ul.nav a.nav_entry:active, ul.nav a.nav_entry:focus,
ul.nav a.nav_bottom:hover, ul.nav a.nav_bottom:active, ul.nav a.nav_bottom:focus {
color: #FFF;
}
ul.nav a.nav_entry {
background-image: url(img/nav_entry.gif);
background-repeat: no-repeat;
padding-top: 4px;
height: 24px;
overflow: hidden;
}
ul.nav a.nav_bottom {
background-image: url(img/nav_entry_bottom.gif);
background-repeat: no-repeat;
padding-top: 4px;
height: 24px;
overflow: hidden;
}
ul.nav a, ul.nav a:visited {
display: block;
width: 120px; /*IE6 reagiert auf Mausklicks.*/
text-decoration: none;
color: #536492;
font-size: 14px;
font-family: Arial;
font-weight: bold;
padding-left: 28px;
}
#headmenu {
float: left;
min-width: 423px;
max-width: 845px;
background-image: url(img/headmenu-bg.gif);
background-repeat: repeat-x;
height: 27px;
overflow: hidden;
position: static;
}
.headmenu_position {
padding-top: 3px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 15px;
color: #536492;
}
#base {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
height:auto !important;
position: absolute;
left: 0;
right: auto;
/*background-color: #023;*/
}
.contend {
margin-top: 134px;
margin-left: 168px;
/*min-width: 100%;
width:auto !important;*/
min-height: 100%;
height:auto !important;
}
div#contend_bgborder1 {
background-image: url(img/contend_bordertop.gif);
background-repeat: repeat-x;
background-color: #fff;
}
div#contend_bgborder2 {
background-image: url(img/contend_borderleft.gif);
background-repeat: repeat-y;
}
div.contend_bgangle {
background-image: url(img/contend_angle.gif);
background-repeat: no-repeat;
}
div.contend_main {
background-image: url(img/spacer.gif);
background-repeat: repeat-y;
text-align: center;
}
.bottomtext {
clear: left;
float: left;
width: 148px;
position:absolute;
bottom: 0;
text-align: center;
padding-bottom: 5px;
}
#loadtime {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
color: #D7E3FF;
margin: 0px;
padding-top: 3px;
padding-right: 2px;
padding-bottom: 1px;
padding-left: 2px;
}
#copyright {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
color: #D7E3FF;
margin: 0px;
padding-top: 8px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 2px;
}
Habe beides bereits CSS und HTML
validiert, keine Fehlermeldungen, Warnungen.
Danke schonmal im Voraus für die Hilfe!