zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Contendbereich 100% Höhe, Navigationspunkte im IE um 1px zu hoch

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.01.2011, 20:07
PHP-Freelancer
neuer user
Thread-Ersteller
 
Registriert seit: 04.01.2011
Ort: Graz
Beiträge: 1
Reiser befindet sich auf einem aufstrebenden Ast
Beitrag Contendbereich 100% Höhe, Navigationspunkte im IE um 1px zu hoch

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:
  1. 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 :/
  2. 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">&Uuml;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>&Uuml;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">
       &copy; 2010-2011 ThorCP
     </p>
    </div>
  </div>
</div>
</body>
</html>

style.css
PHP-Code:
htmlbody {
    
height100%;
    
background-color#7080BB;
}

htmlbodypulh1h2 {
    
margin0;
    
padding0;
}

* { 
margin0padding0; }

#wrapper {
    /* Für moderne Browser */
    
min-height100%;
    
    
/* Für den Internet Explorer */
    
heightauto !important;

    
margin0;
    
padding0;
    
background-imageurl(img/wrapper-bg.gif);
    
background-repeatrepeat-x;
}

#logo {
    
margin0px;
    
padding0px;
    
floatleft;
    
height88px;
    
width297px;
    
background-imageurl(img/logo.gif);
}
#logo_header {
    
background-imageurl(img/header1.gif);
    
padding0px;
    
floatleft;
    
height61px;
    
width423px;
    
margin-top0px;
    
margin-bottom0px;
    
margin-left0px;
    
positionrelative;
}
.
logo_down {
    
background-imageurl(img/logo-down.gif);
    
background-repeatno-repeat;
    
height46px;
    
width199px;
    
floatleft;
    
background-color#7080BB;
    
clearleft;
}
span.logo_down {
    
padding-top26px;
    
padding-left6px;
    
color#8493C4;
    
font-familyVerdanaGenevasans-serif;
    
font-size0.8em;
}
div.headtext {
    
floatleft;
    
height46px;
    
min-width521px;
    
overflowhidden;
    
background-imageurl(img/headtext_strip.gif);
    
background-repeatno-repeat;
    
background-position1px 38px;
}

div.headtext2 {
    
heightauto;
    
background-repeatno-repeat;
    
background-position0px 8px;
    
height46px;
}
.
headtext2 h1 {
    
font-familyVerdanaGenevasans-serif;
    
font-size14px;
    
font-weightbold;
    
padding-left34px;
    
padding-top16px;
    
color#FFF;
}
#ht_home {
    
background-imageurl(img/ht_symbols.png);
}

#header1 {
    
min-width720px;
    
max-width1142px;
    
floatleft;
}
#header2 {
    
clearleft;
    
floatleft;
    
min-width720px;
    
max-width1142px;
    
background-color#7080BB;
}

ul.nav {
    
floatleft;
    
padding0;
    
margin0;
    list-
stylenone;
    
margin-top134px;
}
ul.nav a.nav_top {
    
background-imageurl(img/nav_entry_top.gif);
    
background-repeatno-repeat;
    
padding-top7px;
    
height24px;
    
width120px;
    
overflowhidden;
}
ul.nav a.nav_top:hoverul.nav a.nav_top:activeul.nav a.nav_top:focus,
ul.nav a.nav_entry:hoverul.nav a.nav_entry:activeul.nav a.nav_entry:focus,
ul.nav a.nav_bottom:hoverul.nav a.nav_bottom:activeul.nav a.nav_bottom:focus {
    
color#FFF;
}


ul.nav a.nav_entry  {
    
background-imageurl(img/nav_entry.gif);
    
background-repeatno-repeat;
    
padding-top4px;
    
height24px;
    
overflowhidden;
}

ul.nav a.nav_bottom {
    
background-imageurl(img/nav_entry_bottom.gif);
    
background-repeatno-repeat;
    
padding-top4px;
    
height24px;
    
overflowhidden;
}

ul.nav aul.nav a:visited {
    
displayblock;
    
width120px;  /*IE6 reagiert auf Mausklicks.*/
    
text-decorationnone;
    
color#536492;
    
font-size14px;
    
font-familyArial;
    
font-weightbold;
    
padding-left28px;
}

#headmenu {
    
floatleft;
    
min-width423px;
    
max-width845px;
    
background-imageurl(img/headmenu-bg.gif);
    
background-repeatrepeat-x;
    
height27px;
    
overflowhidden;
    
position: static;
}

.
headmenu_position {
    
padding-top3px;
    
font-family"Lucida Sans Unicode""Lucida Grande"sans-serif;
    
font-size15px;
    
color#536492;
}

#base {
    
margin0;
    
padding0;
    
width100%;
    
min-height100%;
    
height:auto !important;
    
positionabsolute;
    
left0;
    
rightauto;
    
/*background-color: #023;*/
}
.
contend {
    
margin-top134px;
    
margin-left168px;
    
/*min-width: 100%;
    width:auto !important;*/
    
min-height100%;
    
height:auto !important;
}

div#contend_bgborder1 {
    
background-imageurl(img/contend_bordertop.gif);
    
background-repeatrepeat-x;
    
background-color#fff;
}

div#contend_bgborder2 {
    
background-imageurl(img/contend_borderleft.gif);
    
background-repeatrepeat-y;
}
div.contend_bgangle {
    
background-imageurl(img/contend_angle.gif);
    
background-repeatno-repeat;
}
div.contend_main {
    
background-imageurl(img/spacer.gif);
    
background-repeatrepeat-y;
    
text-aligncenter;
}

.
bottomtext {
    
clearleft;
    
floatleft;
    
width148px;
    
position:absolute;
    
bottom0;
    
text-aligncenter;
    
padding-bottom5px;
}
#loadtime {
    
font-familyVerdanaGenevasans-serif;
    
font-size10px;
    
color#D7E3FF;
    
margin0px;
    
padding-top3px;
    
padding-right2px;
    
padding-bottom1px;
    
padding-left2px;
}
#copyright {
    
font-familyVerdanaGenevasans-serif;
    
font-size10px;
    
color#D7E3FF;
    
margin0px;
    
padding-top8px;
    
padding-right2px;
    
padding-bottom3px;
    
padding-left2px;

Habe beides bereits CSS und HTML validiert, keine Fehlermeldungen, Warnungen.


Danke schonmal im Voraus für die Hilfe!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.01.2011, 20:22
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Zu Punkt 1: google mal nach sticky footer.
Es gibt viele Lösungen.
New CSS Sticky Footer - 2010 - HTML for Bottom of Page Footer
CSS-LAB.com - Ray's CSS Demos

Stell am besten dein Beispiel online zum testen.

Gruß Manfred
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
contend div 100% höhe, contendbereich 100% höhe, nav ie 1px zu hoch

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Dynamische Größen Killhunter CSS 0 14.05.2011 17:56
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
Problem mit CSS Style flo007 CSS 3 25.01.2009 18:08
Grafik in ein Template als Hintergrund einbinden. monsun CSS 0 30.06.2008 13:58
Balken in der Navibox stören Spiders CSS 11 30.06.2005 00:29


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:39 Uhr.