Antworten zum Thema „[CSS] height: 100%;“

Akwa · 14.08.2009

Hallo liebe Community,

Ich habe ein Bild mit CSS auf höhe 100% gestellt.
Aber in meinem Browser ist unten immer noch ein grauer
Streifen vom hintergrund.

Der Link zur Internetseite:

Tattoomaus78 · 14.08.2009

AW: [CSS] height: 100%;

füge mal

*{margin:0; padding:0;}

ganz oben in deine css ein

Akwa · 14.08.2009

AW: [CSS] height: 100%;

Danke aber das funktioniert nicht

Ich habe das auch schon in body { margin: 0; padding: 0; } gemacht

waterwebdesign · 14.08.2009

AW: [CSS] height: 100%;

Der Rand kommt durch eine Differenz von dem Div "textfeld" und dem Bild "class" zustande. Beide sind 100% hoch, aber:
Dein div.textfeld hat einen Abstand zum oberen Bildrand von 135px.
Dein img.content hat einen Abstand zum oberen Bildrand von 131px.
Das Bild fängt also nur früher an, als das Textfeld. Ich würde einfach den Text einfach 4px nach oben schieben.

Akwa · 14.08.2009

AW: [CSS] height: 100%;

Vielen Dank das hat geholfen

Darauf habe ich garnicht geguckt ^^

Akwa · 26.10.2009

AW: [CSS] height: 100%;

sry ich muss das Thema nochmal benutzen:

ich habe jetzt das selbe Problem nochmal aber der code ist etwas anders:

CSS Datei

Code:

/* Farben */
/* Rot/ Braun: #800000 */
/* Blau: #00179f */
/* Gelb: #fced88 */

/* Wichtige Einstellungen */
body { color: #800000; font-family: Arial, Helvetica, sans-serif; font-size: 13px; margin: 0 auto; padding: 0; }
.wrap { margin: 0 auto; width: 831px; height: 100%; }
.wrap2 { margin: 0 auto; width: 823px; height: 100%; }

/* Navigation */


/* Überschriften & Untertitel */
h3 { color: #00179f; }    
h5 { color: #800000; font-size: 11px; }    

/* Textfelder */


/*     Links */
a { color: #7d7d7d; font-family: Arial; font-size: 13px; text-decoration: none; }
a:hover { color: #00a4dd; font-family: Arial; font-size: 13px; text-decoration: none;}    
a.text {color: #00a4dd; font-family: Arial; font-size: 13px; text-decoration: none;}
a.text:hover {color: #00a4dd; font-family: Arial; font-size: 13px; text-decoration: underline; }
a.f {color: #ffffff; font-family: Arial; font-size: 13px; text-decoration: none; }
a.f:hover { color: #ffffff; text-decoration: underline; }

/* Bilder */
img.header { position: absolute; top: 5px;  z-index: 6; }    
img.content { position: absolute; top: 0px; height: 100%; width: 831px; z-index: 5; }    
img.footer { position: absolute; bottom: 0px; z-index: 5; width: 823px; height: 32px; }
img.bg { position: absolute; top: 0px; width: 100%; height: 768px; z-index: 4; }
img.startseite { position: absolute; top: 5px; z-index: 6; }
img.druck { position: absolute; top: 42px;  z-index: 6; }
img.scan { position: absolute; top: 79px;  z-index: 6; }
img.plotten { position: absolute; top: 116px;  z-index: 6; }
img.weiterverarbeitung { position: absolute; top: 153px;  z-index: 6; }
img.buchbindungen { position: absolute; top: 190px;  z-index: 6; }
img.geschenkartikel { position: absolute; top: 227px;  z-index: 6; }

HTML Datei

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" />

<link rel="stylesheet" href="css/style.css" type="text/css">

<title>Seitentitel</title>

</head>

<body>

<!-- Hintergrund -->
<img src="img/bg.jpg" class="bg" />
    
<!-- Wrap -->
<div class="wrap">

    <!-- Content -->
    <img src="img/content.png" class="content" />
</div>    
    <div class="wrap2">
    
        <!-- Images -->
        <a href="index.html"><img src="img/header/header_01.png" class="header" border="0"></a>

        <img src="img/rot.jpg" class="footer" />

        <!-- Images - Buttons -->
        <a href="index.html" onmouseover="startseite.src='img/startseite_hover.jpg';" onmouseout="startseite.src='img/startseite.jpg';">
        <img src="img/startseite.jpg" class="startseite" border="0" name="startseite"/>
        </a>
    
        <a href="druck.html" onmouseover="druck.src='img/druck_u_kopie_hover.jpg';" onmouseout="druck.src='img/druck_u_kopie.jpg';">
        <img src="img/druck_u_kopie.jpg" class="druck" border="0" name="druck"/>
        </a>
    
        <a href="scan.html" onmouseover="scan.src='img/scannen_u_archivieren_hover.jpg';" onmouseout= "scan.src='img/scannen_u_archivieren.jpg';">
        <img src="img/scannen_u_archivieren.jpg" class="scan" border="0" name="scan"/>
        </a>
    
        <a href="plotten.html" onmouseover="plotten.src='img/plotten_u_laminieren_hover.jpg';" onmouseout="plotten.src='img/plotten_u_laminieren.jpg';">
        <img src="img/plotten_u_laminieren.jpg" class="plotten" border="0" name="plotten"/>
        </a>
    
        <a href="weiterverarbeitung.html" onmouseover="weiterverarbeitung.src='img/weiterverarbeitung_hover.jpg';" onmouseout=       "weiterverarbeitung.src='img/weiterverarbeitung.jpg';">
        <img src="img/weiterverarbeitung.jpg" class="weiterverarbeitung" border="0" name="weiterverarbeitung"/>
        </a>
    
        <a href="buchbindungen.html" onmouseover="buchbindungen.src='img/buchbindungen_hover.jpg';" onmouseout="buchbindungen.src='img/buchbindungen.jpg';">
        <img src="img/buchbindungen.jpg" class="buchbindungen" border="0" name="buchbindungen"/>
        </a>
    
        <a href="geschenkartikel.html" onmouseover="geschenkartikel.src='img/geschenkartikel_hover.jpg';" onmouseout="geschenkartikel.src='img/geschenkartikel.jpg';">
        <img src="img/geschenkartikel.jpg" class="geschenkartikel" border="0" name="geschenkartikel"/>
        </a>
    </div>
    
</body>
</html>

Dennis Kovarik · 26.10.2009

AW: [CSS] height: 100%;

die anweisung die du brauchst, hat tattoomaus dir doch schon gepostet.

HTML:

 * { margin: 0; padding: 0; }

edit: wenns um die 100% höhe geht dann so:

HTML:

html, body { 
  height:100%; 
  margin:0; 
  padding:0; 
} 
 
div#wrap { 
  width:831px; 
  min-height:100%; 
  margin: 0 auto; 
} 
 
/*IE6*/ 
 
* html div#wrap { 
  height:100%; 
}

gruß

Akwa · 26.10.2009

AW: [CSS] height: 100%;

Ich hab jetzt den Editierten Code eingefügt und da Tut sich nichts.
Ach ja hab ich ganz vergessen ich habe diesen "Rand" unten nur wenn man das Fenster verkleinert

Dennis Kovarik · 26.10.2009

AW: [CSS] height: 100%;

Akwa schrieb:
Ich hab aber immer noch das Problem

Mit? Die Höhe soll 100% sein, von der gesamten Seite?
Dann so, wie ich es gepostet habe.

Poste mal den Link von deiner Seite bitte.

Akwa · 26.10.2009

AW: [CSS] height: 100%;

Ok mach ich ich editiere gleich rein

Dennis Kovarik · 26.10.2009

AW: [CSS] height: 100%;

Akwa schrieb:
Ok mach ich ich editiere gleich rein

ok, aber meine frage haste noch nicht beantwortet.
was ist jetzt dein genaues problem? und eine weitere frage,
warum alles mit position: absolute; positioniert?

ich muss jetzt leider off, schau aber morgen früh nochmal rein.
falls dir bis dahin keiner geholfen hat, dann mach ichs.

bin jetzt off,

grüße

Akwa · 26.10.2009

AW: [CSS] height: 100%;

na das bild content soll 100% höhe haben und wenn man das fenster verkleinert und dann scrollt hat man einen Abstand

und ich möchte das der abstand vom Contentbild zum Browserrand nicht mehr kommt.

Dennis Kovarik · 26.10.2009

AW: [CSS] height: 100%;

Akwa schrieb:
na das bild content soll 100% höhe haben und wenn man das fenster verkleinert und dann scrollt hat man einen Abstand

und ich möchte das der abstand vom Contentbild zum Browserrand nicht mehr kommt.

wenn der content 100% höhe haben soll, dann sieht es so aus: siehe link unten.
schau dir den quelltext mal an. jetzt passt du das nur noch für deine seite an.

jetzt bin ich aber weg,

gruß

Akwa · 27.10.2009

AW: [CSS] height: 100%;

Dankeschön werde es heute abend mal ausprobieren

Dennis Kovarik · 27.10.2009

AW: [CSS] height: 100%;

Hab die Seite jetzt nochmal angepasst, OHNE position: absolute; =
Du musst jetzt nur noch die Navigation einfügen (derzeit ne Grafik).

Aber das kriegste auch ohne mich hin...

Edit again: Im übrigen empfehle ich dir, eine Liste für dein Menü zu erstellen, so in etwa:

HTML:

<div id="navigation">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>

Diese gestaltest du dann mit CSS und verzichte, wenn es nicht zwingend nötigt ist, auf das absolute positionieren.

Gruß

Akwa · 27.10.2009

AW: [CSS] height: 100%;

Thx das ist wirklich klasse ^^
(Gibt es hier eine Bedankenfunktion?)

Dennis Kovarik · 27.10.2009

AW: [CSS] height: 100%;

Akwa schrieb:
Thx das ist wirklich klasse ^^
(Gibt es hier eine Bedankenfunktion?)

Ich nehm es so hin, keine Ursache, gern

Grüße