Thomas: Top Bereich in bestehendes CSS einbauen

SELF-Forum

Top Bereich in bestehendes CSS einbauen

Thomas
– Informationen zu den Bewertungsregeln

Hallo,
ich möchte in meinen 3 spaltigen CSS Aufbau in den oberen Bereich einen Top Bereich einbauen, der über die ganzen 3 Spalten geht. Dieser Top Bereich sollte eine Breite haben von 760 Pixel, also so breit wie der gesamte Content und eine Höhe von 150 Pixel. Das ganze sollte aber so sein, dass sich nicht der Rest nach unten verschiebt (soweit hatte ich das auch schon) und dann Scrollbalken entstehen, sondern die Höhe soll dann wieder 100% des Browserfensters einnehmen ohnen Scrollbalken.

Wie kann ich das machen.

Hier der Quelltext:

<!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" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>unbenanntes Dokument</title>
<style type="text/css">
html {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
width: 100%;
height:100%;
text-align: center /* Zentrierung für den IE */
background-color:#333333;
}
#content {
margin: 0 auto;  /* Zentrierung andere Browser */
width: 760px;
height:100%;
text-align: left; /* Schriftausrichtung in allen Browsern linksbündig */
background-color:#ffffff;
}
#content #menue {
margin: 0;
width: 150px;
height:100%;
float: left;
background-color:#55442f;
}
#content #news {
margin: 0;
width: 150px;
height:100%;
float: right;
background-color:#cc552f;
}
#content #inner {
margin: 0 150px;
height:100%;
background-color:#fff;
}
* html #content #inner {
position: absolute;
margin: 0;
width: 460px;
</style>
</head>
<body>
<div id="content">
<div id="menue">Menue</div>
<div id="news">News</div>
<div id="inner">
<p>Übersicht</p>
<p>Impressum</p>
</div>
</div>
</body>
</html>

Gruss
Thomas

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Top Bereich in bestehendes CSS einbauen

    Ashura
    – Informationen zu den Bewertungsregeln

    puts "Hallo " + gets.chomp + "."

    ?> Thomas
    => Hallo Thomas.

    Dieser Top Bereich sollte eine Breite haben von 760 Pixel, also so breit wie der gesamte Content und eine Höhe von 150 Pixel.

    Warum diese unsinnigen pixelgenauen Maße?

    Das ganze sollte aber so sein, dass sich nicht der Rest nach unten verschiebt (soweit hatte ich das auch schon) und dann Scrollbalken entstehen, sondern die Höhe soll dann wieder 100% des Browserfensters einnehmen ohnen Scrollbalken.

    Dann wirst du wohl nicht umhin kommen, diesen Kopfbereich aus dem Elementfluss zu nehmen.

    html {

    width: 100%;
    height: 100%;
    }

    • {
      margin: 0;
      padding: 0;
      }
      body {
      margin: 0;
      padding: 0;
      width: 100%;
      height:100%;
      
Schau hier einmal genau hin...  
Kurform: `html, body{margin:0;padding:0;height:100%;}`{:.language-css}  
  
Ich wüsste nicht, wozu hier width angegeben werden sollte.  
  
  
Einen schönen Mittwoch noch.  
  
Gruß, Ashura  

-- 
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|  
[30 Days to becoming an Opera8 Lover](http://operalover.tntluoma.com/8/) -- [Day 20: search.ini](http://operalover.tntluoma.com/8/day_20_searchini)  
Meine Browser: Opera 8.01 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0  
[\[Deshalb frei! - Argumente pro freie Software\]](http://deshalbfrei.org/)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln