• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Einige Anfängerfragen, Hilfe!

Status
Für weitere Antworten geschlossen.
M

MarkusW

Neues Mitglied
Hi.

Ich habe immer Tabellen benutzt und möchte jetzt auf CSS umsteigen. Habe mir einige Infos im Netz gelesen, so weit, so gut. Habe aber ein paar Probleme.

Ich habe so eine Anordnung:

HEADER
LEFTRIGHT
FOOTER

Die Vorlage, die ich verwendet habe, ist nicht so enigestellt, wie ich sie haben möchte. Momentan ist alles zentriert und fängt oben an.

Ich möchte es aber so haben, dass der Header immer oben ist, der Footer immer am unteren Browserrand...und leftright wird unten je nach Browsergröße erweitert...aufgefüllt.

Wie geht das? Wäre toll, wenn mir wer weiterhelfen könnte.

Hier mein Code:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#wrapper {
margin: 0 auto;
width: 800px;
}
#header {
color: #000000;
width: 788px;
float: left;
padding: 0px;
border-bottom: 6px solid #0000ff;
border-left: 6px solid #0000ff;
border-right: 6px solid #0000ff;
border-top: 6px solid #0000ff;
height: 130px;
margin: 0px 0px 0px 0px;
background: #ffffff;
}
#leftcolumn {
float: left;
color: #000000;
border-bottom: none;
border-left: 6px solid #0000ff;
border-right: none;
border-top: none;
background: #ffffff;
margin: 0px 0px 0px 0px;
padding: 0px;
height: 400px;
width: 194px;
}
#rightcolumn {
float: right;
color: #000000;
border-bottom: none;
border-left: none;
border-right: 6px solid #0000ff;
border-top: none;
background: #ffffff;
margin: 0px 0px 0px 0px;
padding: 0px;
height: 400px;
width: 594px;
}
#footer {
width: 788px;
height: 30px;
clear: both;
color: #000000;
border-bottom: 6px solid #0000ff;
border-left: 6px solid #0000ff;
border-right: 6px solid #0000ff;
border-top: none;
background: #ffffff;
margin: 0px 0px 0px 0px;
padding: 0px;
}
 
Hi,

wenn der footer immer unten kleben soll:Foot Sticker alt.

Ach ja, die erste Zeile deiner CSS sollte am besten immer:
Code: 
* { padding:0; margin:0; }
sein.
Alle Abstände werden auf null gesetzt. Erleichtert die Anpassung an die unterschiedlichen Browser.:wink:
 
Danke. Das Beispiel auf der Seite funktioniert aber gar nicht. :sad:
Da ist der Footer nicht sichtbar und man muss runterscrollen.
 
Verstehe ich dich richtig??

Du willst dass dein FOOTER immer sichtbar ist, und das am unteren Rand des Browserfensters... er soll sich nicht verschieben, auch wenn du scrollst....:D

LG MAsteR ChieF
 
Ja.

TOP
xxx
FOOTER

Top ist immer oben, immer sichtbar. Also fixiert. Footer ist immer sichtbar, auch fixiert. Dazwischen kommt der Inhalt. Er teilt sich auf in left und right. Left ist das Menü. Scrollt nicht. Right ist der Content. Er scrollt.
Man sieht also quasi eine Art Rahmen von Top und Footer und das dazwischen kann man scrollen.

Wenn jemand eine höhere Auflösung hat, ist Top und Footer trotzdem fixiert...und das xxx dazwischen, wo left und right ist, das dehnt sich.

z.B.

800x600

Top
xxx
xxx
Footer

1600x1200

Top
xxx
xxx
xxx
xxx
xxx
xxx
Footer

Es dehnt sich aber nur vertikal aus, horizontal nicht.

Ich hab mal den Header gemacht. Ich habs mal hingekriegt, da ich ja Anfänger bin...aber es wird nur ein Bild richtig angezeigt (Logo)...es hängt im Rahmen bisschen top und left entfernt. Und die zweite Graphik hand.jpg soll im Header auf der rechten Seite hinzugefügt werden. Aber es wird trotzdem links UNTER logo angezeigt?

<!-- Begin Header -->
<div id="header" style="color: #000000; width: 788px; float: left; padding: 0px; border-bottom: 6px solid #4B0082; border-left: 6px solid #4B0082; border-right: 6px solid #4B0082; border-top: 6px solid #4B0082; height: 132px; margin: 0px 0px 0px 0px; background: #ffffff;">
<div id="Logo" style="position:relative; top: 5px; left: 1px; width: 351px; height: 121px; z-index: 1; background-image: url(logo.jpg); background-repeat: no-repeat;"></div><div id="Logo2" style="position:relative; top: 5px; right: 1px; width: 202px; height: 121px; z-index: 1; background-image: url(hand.jpg); background-repeat: no-repeat;"></div>
</div>
<!-- End Header -->
 
Hi,

MarkusW schrieb:
Danke. Das Beispiel auf der Seite funktioniert aber gar nicht. :sad:
Da ist der Footer nicht sichtbar und man muss runterscrollen.
Zum Vergrößern anklicken....

du darfst dir die die Art der Seite nicht zum Vorbild nehmen, dort wird nur die Technik, wie du das verwirklichen kannst erklärt.

Wenn die Seite länger als der Viewport ist, der Footer aber trotzdem immer unten kleben soll und das ganze ohne iframe schau mal bei
Stu Nicholls vorbei.
Rechte Seite "Fixed Layout 1-4".
Vielleicht hilft dir das weiter.:wink:
 
Sowas ist nicht ganz einfach.
Ohne Browserweiche geht das nicht. Hier mal die Variante für moderne Browser:
Code: 
  <style type="text/css">
  /* <![CDATA[ */
* {
margin : 0px;
padding : 0px;
}


html, body {
height : 100%;
overflow : hidden;
}



  #Kopf  {
    background-color : #afcdd1;
    position : absolute ;
    height : 100px;
    overflow : auto;
    width : 100%;
   }


  #mitte {
    background-color : #E9E9E9;
    width : 100%;
    bottom : 50px;
    position : absolute;
    top : 100px;
   }

  #links {
    background-color : #A3A3A3;
    width : 20%;
    position : absolute;
    top : 0px;
   }

  #rechts {
    position : absolute;
    top : 0px;
    left : 20%;
    width : 80%;
    overflow : auto;
   }


  #fuss  {
    background-color : #afcdd1;
    position : absolute ;
    height : 50px;
    bottom : 0px;
    overflow : auto;
    width : 100%;
   }

  /* ]]> */
  </style>
</head>
<body>
<div id="Kopf">
<p>Kopf</p>
</div>


<div id="mitte">

<div id="links">
links
</div>

<div id="rechts">
rechts
</div>


</div>

<div id="fuss">
<p>Fuß</p>
</div>


</body>
</html>
Das ist aufs allernötigste beschränkt.
Das Prinzip ist, daß der mittlere Bereich mit position:absolute top und bottom platz für Kopf und Fuß lässt.
Wenn du damit fertig bist, kannst du das alles erstmal wieder vergessen.
Denn der IE versteht top und left nicht in einem Element gleichzeitig.
Der braucht einen anderen stylesheet. Also eine eigene css-Datei.
Ein Beispiel zum Download hab ich auf :

css | Spalten :: css-Gerüste
 
Zuletzt bearbeitet:
Kann mir bitte wer erklären, was das * ist? Zuerst der Code für den Content...und dann * html content? Was ist das?
Ist das für den alten IE, der Bugs hatte und es nicht richtig darstellen konnte?

#content {
display:block;
overflow:auto;
position:absolute;
z-index:3;
top:150px;
bottom:52px;
width:640px;
margin-left:-321px;
left:50%;
border-left:1px solid #000;
border-right:1px solid #000;
background:#fff;
}
* html #content {
top:0;
bottom:0;
height:100%;
width:642px;
border-top:154px solid #fff;
border-bottom:50px solid #fff;
}
 
Hi,

* ist der Universalselektor.
Bei * html liest nur der IE6 weiter, alle anderen Browser brechen da ab.

Besser wäre es solche Hacks per Conditioell Comment für die jeweilige IE-Version im <head> deines Dokuments einzubinden, dort kannze * html weglassen weil CC's nur von der angesprochenen IE-Version abgearbeitet werden.
 
MarkusW schrieb:
Kann mir bitte wer erklären, was das * ist? Zuerst der Code für den Content...und dann * html content? Was ist das?
Ist das für den alten IE, der Bugs hatte und es nicht richtig darstellen konnte?
Zum Vergrößern anklicken....
Ja * html {style} ignorieren alle Browser außer IE5 bis IE6.
Aber darum würde ich mich erst kümmern wenn es für andere Browser funktioniert.
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben