[HTML] Hilfe bei HTML-Aufbau - skalierbares Layout

SidDasFaultier · 8. Februar 2012

Hilfe bei HTML-Aufbau - skalierbares Layout

Hey Rushler,

bin echt am verzweifeln. Und zwar möchte folgendes umsetzen:

- Mein Hintergrundbild soll skalierbar sein (immer so groß wie Browserfenster) --> das hab ich hinbekommen

- Nun soll mein Content indem ein png mit einer Transparenz ist, immer so groß wie der darin befindliche Inhalt sein. Und mein Bild soll sich dann in der Höhe auf größe des Inhaltes strecken.

- Zusätzlich habe ich unten fix am Browser positionierte ICONS-Leiste

...soweit so gut, das ist mein Code

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" xml:lang="de" lang="de">
<head>
<link rel="stylesheet" href="./test.css" type="text/css" />
</head>
<body> 

<div id="hintergrund">
 <img src="./bildergalerie-higr.jpg" width="100%" height="100%" />
</div>
<div id="wrapper">
 <div id="wrapper-innen">
 <div id="navigation">
 Hier kommt die Navigation
 </div>
 <div id="logo">
 LOGO
 </div>
 <div id="content">
 <div id="higr-content">
 <img src="./content.png" width="100%" height="100%" />
 </div>
 <div id="content-links">
 Content-Links<br /><br /><br /><br /><br /><br /><br /><br />Ende
 </div>
 <div id="content-rechts">
 Content-Rechts
 </div>
 <div class="clear"></div>
 </div>
 </div>
</div>
<div id="wrapper-icons">
 <div id="icons">
 ICONS
 </div>
</div>

</body>
</html>

und hier mein CSS:

HTML:

html, body {
 margin: 0;
 padding: 0;
 overflow: hidden;
}

#hintergrund {
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
}

#wrapper {
 margin: 0;
 padding: 0;
 width: 100%;
 height: 90%;
 text-align: center;
 position: relative;
 z-index: 2;
 overflow-y: auto;
 overflow-x: hidden;
}

#wrapper-innen {
 margin: 0 auto;
 padding: 0;
 width: 970px;
 height: auto;
 text-align: left;
 position: relative;
}

#navigation {
 margin: 0;
 padding: 0;
 width: 970px;
 height: 48px;
}

#logo {
 margin: 0;
 padding: 0;
 width: 335px;
 height: 218px;
 position: absolute;
 right: 0;
 top: 48px;
 z-index: 4;
 border: 1px solid green;
}

#content {
 margin: 10px 0 0 0;
 padding: 0;
 width: 970px;
 height: auto !important;
 min-height: 500px;
 height: 500px;
}

#higr-content {
 margin: 0;
 padding: 0;
 width: 970px;
 height: 100%;
 position: absolute;
 z-index: 2;
}

#content-links {
 margin: 0;
 padding: 0;
 width: 635px;
 height: auto;
 float: left;
 position: relative;
 z-index: 3;
}

#content-rechts {
 margin: 210px 0 0 0;
 padding: 0;
 width: 335px;
 height: auto;
 position: relative;
 float: left;
 z-index: 3;
}

#wrapper-icons {
 margin: 0 !important;
 margin: -22px 0 0 0;
 padding: 0;
 width: 100%;
 height: 22px;
 z-index: 15;
 position: absolute;
 bottom: 0;
 text-align: center;
}

#icons {
 margin: 0 auto;
 padding: 0;
 width: 970px;
 height:

} 

.clear { clear: both; }

...also bei mir ist das Content Bild iwie zu groß und zwar um genau die Höhe meiner Navigation. ich bekomm das einfach nicht hin -.-
Des Weiteren scrollt mein Content komisch bei einer Auflösung von 1024x798...so sieht man dann den unteren Inhalt nicht mehr.

Hab ihr einen Tipp?

Anzeige

leex · 8. Februar 2012

AW: Hilfe bei HTML-Aufbau - skalierbares Layout

kannste die bilder vielleicht noch dazuposten oder link posten falls du´s irgendwo online hast?!

Milchmann_CL · 8. Februar 2012

AW: Hilfe bei HTML-Aufbau - skalierbares Layout

Das mit dem Bild kannst du wohl nur erreichen, wenn du dies als Hintergrundbild einsetzt.

Alternativ, sagst du dem Bild, dass es ein Block-Element ist und verlegst es mit z-index in den Hintergrund.

HTML:

#img_container { z-index:2; }
img { display:block; width: 100%; height: 100%; z-index:1 }

SidDasFaultier · 8. Februar 2012

AW: Hilfe bei HTML-Aufbau - skalierbares Layout

Habs jetzt so einigermaßen hinbekommen....trotzdem vielen dank

Nützliche Suchen

[HTML] Hilfe bei HTML-Aufbau - skalierbares Layout

Videos zum Themenbereich