title image


Smiley Re: ... und gleich 2 Fragen zu Achim´s Beispiel...
Hallo Ruth,



> Wenn ich im

> * html #inner { padding-top:; /* Höhe der #navi */ }

> keine (!) Höhe eintrage (es also so lasse wie es oben steht), klappt es auch?

> Warum denn das?!



Kann es sein, dass Dein erster Inhalt ein margin-top oder padding-top hat, der diesen

Bereich bereits überbrückt?



Regulär (standard-konform) wird der erste Inhalt durch den positionierten Container

abgedeckt. Ich hoffe mal, dass das so halbwegs nachvollziehbar ist.



Wenn nicht, möglicherweise hilft dir diese Seitenansicht der HTML-Seite weiter:



Diese Ansicht musst Du dir so vorstellen, als würdest Du dir die Seite von der linken

Seite Deines Monitors anschauen







  Inhalte im Textfluss

  positionierter Container



Durch die Herausnahme aus dem Textfluss rutschen alle weiteren Inhalte nach. Der

erste Inhalt steht somit hinter dem positionierten Container.



#inner überbrückt diesen Bereich, sodass der erste Inhalt in ihm sichtbar unterhalb

des positionierten Container erscheint.

Diese Überbrückung kann auch durch ein margin-top oder padding-top eines anderen

Inhaltes erreicht werden, sodass #inner effektiv überflüssig wird.



Die erste Formatierung im CSS (das Sternchen) entfernt alle element-eigenen

margin und padding. Wurde von Dir kein ausreichendes margin-top oder padding-top dem

ersten Inhalt anformatiert, würde dieser Inhalt durch den positionierten Container

teilweise oder ganz (je nach dem, wie hoch der positionierte Container ist)

dargestellt werden.



Für eine Seite macht #inner auch keinen Sinn. Dieser Container ist dafür gedacht,

bei vielen Seiten eine korrekte Darstellung zu erzielen, ohne dass verschiedenen

ersten Inhalten jeweils ein margin-top oder padding-top anformatiert werden muss.



Bis hierhin verstanden?







Um die Darstellung mit einem fixierten Container von oben auf die linke Seite zu

verlegen, müssen nur im CSS ein paar Formatierungen umgeschrieben werden:



Hier gibt es nun 2 Möglichkeiten,

1. fixiert (also mit einem positionierten Container),

2. gefloatet (wäre vorzuziehen)



Möglichkeit 1 und 2:

Beispiel

  Veränderungen im bestehenden CSS



* {

margin: 0;

padding: 0;

}

html {

width: 100%;

height: 100%;

}

body {

width: 100%;

height: 100%;

font-family: arial,helvetica,tahoma,verdana,sans-serif;

font-size: 100.01%;

color: #000000;

background-color: #FFFFFF;

}

#navi {

position: fixed; /* bei gefloateten Containern float: left; */

top: 0; /* bei gefloateten Containern überflüssig */

left: 0; /* bei gefloateten Containern überflüssig */

width: /* gewünschte Breite inkl. Maßeinheit */ ;

height: 100%: /* bei gefloateten Containern min-height: 100%;

}

#content {

margin-left: /* Breite der #navi inkl. Maßeinheit */ ;

min-height: 100%;

}

/* fix for IE-win, hide from IE-mac \*/

* html, * html body {

height: 100%;

overflow: hidden;

}

* html #navi {

positition: absolute; /* bei gefloateten Containern überflüssig */

top: 0;

left: 0;

width: 100%

z-index: 1; /* bei gefloateten Containern überflüssig */

height: 100%;

}

* html #iecorrect {

padding-left: 17px;

}

* html #content {

height: 100%;

overflow: auto;

}

* html #inner {

padding-top: /* Höhe der #navi */

}

/* end fix/hide */



Hinweis

Im HTML-Quelltext wird nichts verändert



mfg Achim

















geschrieben von

Login

E-Mail:
  

Passwort:
  

Beitrag anfügen

Symbol:
 
 
 
 
 
 
 
 
 
 
 
 
 

Überschrift: