CSS: Style ohne position?

SilentSight · 24.07.2008, 21:25

Hi,

ich hätte da mal eine Frage bezüglich meines CSS-Designs.
Unter Firefox wird alles so angezeigt, wie es sein soll.
Aber unter Internet Explorer wird das ganze Design falsch dargestellt!

Folgender Code macht mir Probleme:

Code:

#header {
  width: 100%;
  position: fixed;
  top: 0px;
  height: 100px;
  color: inherit;
  background-color: #CCCCCC;
  border-bottom: 1px solid black;
  z-index: 10;
}

#navigation {
  float: left;
  position: fixed;
  height: 75%;
  padding: 10px;
  border-right: 1px solid black;
}

#content {
  margin: 100px 0 100px 150px;
  left: 150px;
  text-align: left;
  padding: 10px;
  z-index: 1;
}

#footer {
  width: 100%;
  height: 100px;
  position: fixed;
  bottom: 0px;
  color: inherit;
  background-color: #CCCCCC;
  border-top: 1px solid black;
  z-index: 10;
}

Wie ihr seht wird die Navigation, der header und der footer ausgerichtet und der Rest für den Content verwendet, wobei ich im Content wieder Abstände definieren muss.
Das geht doch bestimmt auch einfacher!?
Am besten wäre es, wenn es komplett ohne die position-Anweisungen funktionieren würde...

Hoffe ihr könnt mir helfen
SilentSight

nikosch · 24.07.2008, 21:30

Ja. float/clear oder position/margin.
Cascading Style Sheets { Tutorials : CSS-Layouts basiert auf Positionierungen }

Felix · 25.07.2008, 14:05

Code:

#header {
  position: fixed;
  top: 0px;
  left:0px;
  right:0px;
  height: 100px;
  background-color: #CCCCCC;
  border-bottom: 1px solid #000000;
}

#navigation {  
  position: fixed;
  top:101px;
  width:150px;
  bottom:100px;
  left:0px;
  border-right: 1px solid #000000;
}

#content {
  position:fixed;
  left: 151px;
  top:101px;
  bottom:101px;
  right:0px;
  overflow:auto;
}

#footer {
  height: 100px;
  position: fixed;
  bottom: 0px;
  left:0px;
  right:0px;
  background-color: #CCCCCC;
  border-top: 1px solid black;
}

probiere mal dies!
....viel Spaß Felix

SilentSight · 25.07.2008, 14:48

Danke Felix für deine Hilfe.
Ich schätze das funktioniert erst ab IE7?

Montellese · 25.07.2008, 16:04

Ja position: fixed wird von IE6 noch nicht unterstützt. Es gäbe zwar irgendwelche IE Hacks, die auf JavaScript basieren und ziemlich einfach einzubauen sind, aber wenns irgendwie geht, am besten drauf verzichten.

cycap · 25.07.2008, 16:12

Zitat:

Zitat von Montellese

Ja position: fixed wird von IE6 noch nicht unterstützt. Es gäbe zwar irgendwelche IE Hacks, die auf JavaScript basieren und ziemlich einfach einzubauen sind, aber wenns irgendwie geht, am besten drauf verzichten.

das kommt mir doch bekannt vor hehe

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Position einer zeile in einer sortierten tabelle bestimmen	Drache	Datenbanken	9	17.06.2007 10:45
Problem mit DBMenu im IE	RoDa	HTML, Usability und Barrierefreiheit	4	16.05.2007 18:12
Mauszeiger Position (ohne Event)	cowabunga1984	HTML, Usability und Barrierefreiheit	4	04.04.2007 12:01
Footer position fixed	andrew22	HTML, Usability und Barrierefreiheit	1	14.11.2006 16:00
Position eines Strings rausfinden, der mehrmals vorkommt		PHP Tipps 2006	5	12.02.2006 19:20
mit position nachruecken	imported_kremser	Datenbanken	2	08.02.2006 21:50
Position abfragen		Datenbanken	5	29.09.2005 16:31
Style		Beitragsarchiv	3	14.07.2005 15:00
position einer abfrage		Datenbanken	7	14.06.2005 20:48
Scrollbar Position auslesen und an Link übergeben...	Plague	PHP Tipps 2005	6	17.05.2005 16:40
[Erledigt] nur in tabelle style benutzen!		HTML, Usability und Barrierefreiheit	10	17.12.2004 20:23
Style von php.de?		Off-Topic Diskussionen	7	22.11.2004 12:07
Position in der Datenbank.		PHP-Fortgeschrittene	2	21.11.2004 16:10
Position relative oder absolute	Stümper	HTML, Usability und Barrierefreiheit	3	12.09.2004 11:56
CSS Style Problem		HTML, Usability und Barrierefreiheit	5	09.08.2004 10:35

24.07.2008, 21:25
SilentSight Erfahrener Benutzer Registriert seit: 27.04.2008 Beiträge: 107	CSS: Style ohne position? Hi, ich hätte da mal eine Frage bezüglich meines CSS-Designs. Unter Firefox wird alles so angezeigt, wie es sein soll. Aber unter Internet Explorer wird das ganze Design falsch dargestellt! Folgender Code macht mir Probleme: Code: #header { width: 100%; position: fixed; top: 0px; height: 100px; color: inherit; background-color: #CCCCCC; border-bottom: 1px solid black; z-index: 10; } #navigation { float: left; position: fixed; height: 75%; padding: 10px; border-right: 1px solid black; } #content { margin: 100px 0 100px 150px; left: 150px; text-align: left; padding: 10px; z-index: 1; } #footer { width: 100%; height: 100px; position: fixed; bottom: 0px; color: inherit; background-color: #CCCCCC; border-top: 1px solid black; z-index: 10; } Wie ihr seht wird die Navigation, der header und der footer ausgerichtet und der Rest für den Content verwendet, wobei ich im Content wieder Abstände definieren muss. Das geht doch bestimmt auch einfacher!? Am besten wäre es, wenn es komplett ohne die position-Anweisungen funktionieren würde... Hoffe ihr könnt mir helfen SilentSight


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

24.07.2008, 21:30
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Ja. float/clear oder position/margin. Cascading Style Sheets { Tutorials : CSS-Layouts basiert auf Positionierungen } __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

25.07.2008, 14:48
SilentSight Erfahrener Benutzer Registriert seit: 27.04.2008 Beiträge: 107	Danke Felix für deine Hilfe. Ich schätze das funktioniert erst ab IE7?

25.07.2008, 16:04
Montellese Erfahrener Benutzer Registriert seit: 30.07.2007 Beiträge: 541	Ja position: fixed wird von IE6 noch nicht unterstützt. Es gäbe zwar irgendwelche IE Hacks, die auf JavaScript basieren und ziemlich einfach einzubauen sind, aber wenns irgendwie geht, am besten drauf verzichten.