HTML/CSS Div Positionierung

Neo1010

.

Registered: May 2003
Location: -
Posts: 1212

25.09.2007 - 18:04

Hallo!

Ich fasse mich ganz kurz und zeig euch anhand von Bilder und Code was mein Problem ist. btw. suche schon seit 8 stunden eine Lösung

Code:

<html>
<head>
<style type="text/css">

* {
padding: 0;
margin: 0;
}

#container{
position:absolute;
background-color:black;
left:0px;
top:0px;
width:100%;
height:100px;

}

#item{
position:absolute;
background-color:blue;
left:200px;
right:0px;
top:200px;
height:60px;
}
</style>
</head>
<body>
<div id="container">
<div id="item">
</div>
</div>
</body>
</html>

Im Firefox sieht es richtig aus:

Im IE sieht es leider so aus: (sollte aber aussehen wie im ff)

wie müsste die css datei für den IE aussehen?

Danke euch jetzt schon für eure Hilfe, bräuchte heute noch eine Lösung

Nico

former person of interest

Registered: Sep 2006
Location: -
Posts: 4082

25.09.2007 - 18:22

gib eine breite an vom blauen

Neo1010

.

Registered: May 2003
Location: -
Posts: 1212

25.09.2007 - 18:23

nein, breite soll variabl sein.

Nico

former person of interest

Registered: Sep 2006
Location: -
Posts: 4082

25.09.2007 - 18:25

ein prozentwert ergibt auch eine variable breite

Neo1010

.

Registered: May 2003
Location: -
Posts: 1212

25.09.2007 - 18:34

also zu genaueren Erklärung:

so sollt die Seite einmal aussehen:

Sollte man das Browserfenster in X-Richtung verkleiner sollten sich der gelbe und grüne Bereich verkleiner sowie Header und Footer. Ich hab die Seite auch schon fertig nur ist hab ich das oben geschilderte Problem.

gue

Addicted

Registered: Feb 2003
Location: Linz
Posts: 400

25.09.2007 - 18:46

Mir fehlt der Qualle

Zu diesem HTML DIV CSS POSITIONIERUNGS Mist gibt es eh schon 1000000 Threads und mit Google findet man nochmal 1000000 Websites die sich damit beschäftigen.

Neo1010

.

Registered: May 2003
Location: -
Posts: 1212

25.09.2007 - 18:51

Hab auch schon mindestens 100 Seiten besucht, aber kein Problem dergleichen gefunden

ica

hmm

Registered: Jul 2002
Location: Graz
Posts: 9822

25.09.2007 - 18:55

also bitte das ist doch das "standardstmäßigste" css layout überhaupt, da findest wirklich genug im internet.

aber bitte:

header:
<div>blah</div>

menu:
<div style="float:left; width: 200px; margin-right: 10px;">blah</div>

grün:
<div style="float:left">blah</div>

gelb:
<div style="float:left">blahblah</div>

footer:
<div style="clear:both"></div>
<div>blah</div>

wobei du das grüne und das gelbe noch in ein div packst:
<div>blah</div>
<div style="float:left; width: 200px; margin-right: 10px;">blah</div>
<div style="float:left;">
<div style="float:left">blah</div>
<div style="clear:left;"></div>
<div style="float:left">blahblah</div>
</div>
<div style="clear:both"></div>
<div>blah</div>

mat

Administrator
Legends never die

Registered: Aug 2003
Location: nö
Posts: 25538

25.09.2007 - 21:52

Zitat von gue
Mir fehlt der Qualle

Zu diesem HTML DIV CSS POSITIONIERUNGS Mist gibt es eh schon 1000000 Threads und mit Google findet man nochmal 1000000 Websites die sich damit beschäftigen.

bitte höflich bleiben. klar ist die thematik durchgekaut, aber deshalb müsst keine allzu harten worte fallen.

Nightstalker

ctrl+alt+del

Registered: Jan 2002
Location: .^.
Posts: 6701

26.09.2007 - 08:21

Ich befass mich auch grad mit CSS layout und auch wenn das vielleicht nicht unbedingt dein Problem direkt löst aber einen Tipp hab ich für dich!

Besorg dir einen GUTEN CSS EDITOR, ich hab jetzt einige getestet und es gibt ein paar die neben Codevalidierung und Browsersuppoertanzeige auch noch direkt eine Preview usw. haben, das ist eine große Erleichterung beim Arbeiten und die Editoren kosten zwischen 0 und 50 € das kann man verkraften!

Hier gibts ein paar, der StyleMaster hat mir gut gefallen aber probier einfach ein paar aus:
http://www.pixelgraphix.de/log/2005...m-vergleich.php

Hier gibts noch eine nützliche Sache, einen Editor der dir parallel die Ergebnisse in IE6 und FIREFOX zeigt:
http://lifehacker.com/software/wind...ista-271237.php

ica

hmm

Registered: Jul 2002
Location: Graz
Posts: 9822

26.09.2007 - 09:36

für mich ist das wichtigste firebug und ie developer toolbar

Nightstalker

ctrl+alt+del

Registered: Jan 2002
Location: .^.
Posts: 6701

26.09.2007 - 10:56

Wie gut bist du mit CSS drauf?

Ich stell mir eigentlich schon LANGE die Frage wann CSS endlich wirklich den Durchbruch schafft.
Seit ich mich mit Webdesign befasse, und das sind nun doch schon einige Jahre (Seit Dreamweaver 3 in etwa) kenn ich auch CSS und hab mir schon oft gedacht dass das ne tolle Sache ist aber leider funktioniert eben fast garnix wirklich in jedem Browser...

Wann wird CSS denn nun endlich so weit sein oder besser, wann sind denn endlich die Browser so weit dass man WIRKLICH auf CSS umsteigen kann, derzeit verwende ich es nachwievor nur für Textformatierungen und derartiges, ein Layout damit zu erstellen ist jedenfalls sehr mühsam da man soviele Dinge testen und beachten muss

IE5 und IE6 sowie Netscape sind die größten Hindernisse bei der Sache aber leiderwerden vorallem die IEs doch von sehr sehr vielen Leuten verwender

fatmike182

Agnotologe

Registered: Oct 2005
Location: VIE
Posts: 4223

26.09.2007 - 11:12

CSS ist gut und CSS funktioniert super - aber die Browser sind schlecht.
Trotz der mittlerweile dominanten Rolle von CSS gelingt es nicht in IE wenigstens die wesentlichsten Funktionen zu implementieren. Verstehe IE-User so oder so nicht. Probleme die bei Opera oder Firefox auftreten sind fast immer eigene CSS-Fehler

shadowman

OC Addicted

Registered: Oct 2000
Location: Feldkirchen
Posts: 1612

26.09.2007 - 11:38

Na der IE7 ist bei CSS eh schon besser. Nur kannst dich dann wieder mit einer Browserweiche extra rumschlagen.

@Topic
IE7 kann was ich weiß ein Viereck über top,left usw. aufspannen. IE<6 leider nicht, damit musst leben.
Die Lösung hast aber eh schon gesehn
Maybe kannst dich auch hier Anregungen holen
http://www.cssplay.co.uk/layouts/

ica

hmm

Registered: Jul 2002
Location: Graz
Posts: 9822

26.09.2007 - 12:35

Zitat von Nightstalker
Wie gut bist du mit CSS drauf?

Wann wird CSS denn nun endlich so weit sein oder besser, wann sind denn endlich die Browser so weit dass man WIRKLICH auf CSS umsteigen kann, derzeit verwende ich es nachwievor nur für Textformatierungen und derartiges, ein Layout damit zu erstellen ist jedenfalls sehr mühsam da man soviele Dinge testen und beachten muss (

also ich verwende css jeden tag in der arbeit und baue layouts eigentlich nur mit css. außer hin und wieder mal ne table wenns sinn macht. auf alles nehme ich allerdings auch nicht rücksicht, getestet wird mit ie6, ie7, firefox, safarai, firefox für mac.

bis auf ein paar kleinigkeiten dessen man sich bewusst sein muss (vorallem wie paddings und margins in zusammenhang mit der breite von browsern gehandelt wird) gibts eigentlich keine probleme.

Neo1010 . Registered: May 2003 Location: - Posts: 1212	25.09.2007 - 18:04 Hallo! Ich fasse mich ganz kurz und zeig euch anhand von Bilder und Code was mein Problem ist. btw. suche schon seit 8 stunden eine Lösung Code: <html> <head> <style type="text/css"> * { padding: 0; margin: 0; } #container{ position:absolute; background-color:black; left:0px; top:0px; width:100%; height:100px; } #item{ position:absolute; background-color:blue; left:200px; right:0px; top:200px; height:60px; } </style> </head> <body> <div id="container"> <div id="item"> </div> </div> </body> </html> Im Firefox sieht es richtig aus: Im IE sieht es leider so aus: (sollte aber aussehen wie im ff) wie müsste die css datei für den IE aussehen? Danke euch jetzt schon für eure Hilfe, bräuchte heute noch eine Lösung
Nico former person of interest Registered: Sep 2006 Location: - Posts: 4082	25.09.2007 - 18:22 gib eine breite an vom blauen
Neo1010 . Registered: May 2003 Location: - Posts: 1212	25.09.2007 - 18:23 nein, breite soll variabl sein.
Nico former person of interest Registered: Sep 2006 Location: - Posts: 4082	25.09.2007 - 18:25 ein prozentwert ergibt auch eine variable breite
Neo1010 . Registered: May 2003 Location: - Posts: 1212	25.09.2007 - 18:34 also zu genaueren Erklärung: so sollt die Seite einmal aussehen: Sollte man das Browserfenster in X-Richtung verkleiner sollten sich der gelbe und grüne Bereich verkleiner sowie Header und Footer. Ich hab die Seite auch schon fertig nur ist hab ich das oben geschilderte Problem.
gue Addicted Registered: Feb 2003 Location: Linz Posts: 400	25.09.2007 - 18:46 Mir fehlt der Qualle Zu diesem HTML DIV CSS POSITIONIERUNGS Mist gibt es eh schon 1000000 Threads und mit Google findet man nochmal 1000000 Websites die sich damit beschäftigen.
Neo1010 . Registered: May 2003 Location: - Posts: 1212	25.09.2007 - 18:51 Hab auch schon mindestens 100 Seiten besucht, aber kein Problem dergleichen gefunden
ica hmm Registered: Jul 2002 Location: Graz Posts: 9822	25.09.2007 - 18:55 also bitte das ist doch das "standardstmäßigste" css layout überhaupt, da findest wirklich genug im internet. aber bitte: header: <div>blah</div> menu: <div style="float:left; width: 200px; margin-right: 10px;">blah</div> grün: <div style="float:left">blah</div> gelb: <div style="float:left">blahblah</div> footer: <div style="clear:both"></div> <div>blah</div> wobei du das grüne und das gelbe noch in ein div packst: <div>blah</div> <div style="float:left; width: 200px; margin-right: 10px;">blah</div> <div style="float:left;"> <div style="float:left">blah</div> <div style="clear:left;"></div> <div style="float:left">blahblah</div> </div> <div style="clear:both"></div> <div>blah</div>
mat Administrator Legends never die Registered: Aug 2003 Location: nö Posts: 25538	25.09.2007 - 21:52 Zitat von gue Mir fehlt der Qualle Zu diesem HTML DIV CSS POSITIONIERUNGS Mist gibt es eh schon 1000000 Threads und mit Google findet man nochmal 1000000 Websites die sich damit beschäftigen. bitte höflich bleiben. klar ist die thematik durchgekaut, aber deshalb müsst keine allzu harten worte fallen.
Nightstalker ctrl+alt+del Registered: Jan 2002 Location: .^. Posts: 6701	26.09.2007 - 08:21 Ich befass mich auch grad mit CSS layout und auch wenn das vielleicht nicht unbedingt dein Problem direkt löst aber einen Tipp hab ich für dich! Besorg dir einen GUTEN CSS EDITOR, ich hab jetzt einige getestet und es gibt ein paar die neben Codevalidierung und Browsersuppoertanzeige auch noch direkt eine Preview usw. haben, das ist eine große Erleichterung beim Arbeiten und die Editoren kosten zwischen 0 und 50 € das kann man verkraften! Hier gibts ein paar, der StyleMaster hat mir gut gefallen aber probier einfach ein paar aus: http://www.pixelgraphix.de/log/2005...m-vergleich.php Hier gibts noch eine nützliche Sache, einen Editor der dir parallel die Ergebnisse in IE6 und FIREFOX zeigt: http://lifehacker.com/software/wind...ista-271237.php
ica hmm Registered: Jul 2002 Location: Graz Posts: 9822	26.09.2007 - 09:36 für mich ist das wichtigste firebug und ie developer toolbar
Nightstalker ctrl+alt+del Registered: Jan 2002 Location: .^. Posts: 6701	26.09.2007 - 10:56 Wie gut bist du mit CSS drauf? Ich stell mir eigentlich schon LANGE die Frage wann CSS endlich wirklich den Durchbruch schafft. Seit ich mich mit Webdesign befasse, und das sind nun doch schon einige Jahre (Seit Dreamweaver 3 in etwa) kenn ich auch CSS und hab mir schon oft gedacht dass das ne tolle Sache ist aber leider funktioniert eben fast garnix wirklich in jedem Browser... Wann wird CSS denn nun endlich so weit sein oder besser, wann sind denn endlich die Browser so weit dass man WIRKLICH auf CSS umsteigen kann, derzeit verwende ich es nachwievor nur für Textformatierungen und derartiges, ein Layout damit zu erstellen ist jedenfalls sehr mühsam da man soviele Dinge testen und beachten muss IE5 und IE6 sowie Netscape sind die größten Hindernisse bei der Sache aber leiderwerden vorallem die IEs doch von sehr sehr vielen Leuten verwender
fatmike182 Agnotologe Registered: Oct 2005 Location: VIE Posts: 4223	26.09.2007 - 11:12 CSS ist gut und CSS funktioniert super - aber die Browser sind schlecht. Trotz der mittlerweile dominanten Rolle von CSS gelingt es nicht in IE wenigstens die wesentlichsten Funktionen zu implementieren. Verstehe IE-User so oder so nicht. Probleme die bei Opera oder Firefox auftreten sind fast immer eigene CSS-Fehler
shadowman OC Addicted Registered: Oct 2000 Location: Feldkirchen Posts: 1612	26.09.2007 - 11:38 Na der IE7 ist bei CSS eh schon besser. Nur kannst dich dann wieder mit einer Browserweiche extra rumschlagen. @Topic IE7 kann was ich weiß ein Viereck über top,left usw. aufspannen. IE<6 leider nicht, damit musst leben. Die Lösung hast aber eh schon gesehn Maybe kannst dich auch hier Anregungen holen http://www.cssplay.co.uk/layouts/
ica hmm Registered: Jul 2002 Location: Graz Posts: 9822	26.09.2007 - 12:35 Zitat von Nightstalker Wie gut bist du mit CSS drauf? Wann wird CSS denn nun endlich so weit sein oder besser, wann sind denn endlich die Browser so weit dass man WIRKLICH auf CSS umsteigen kann, derzeit verwende ich es nachwievor nur für Textformatierungen und derartiges, ein Layout damit zu erstellen ist jedenfalls sehr mühsam da man soviele Dinge testen und beachten muss ( also ich verwende css jeden tag in der arbeit und baue layouts eigentlich nur mit css. außer hin und wieder mal ne table wenns sinn macht. auf alles nehme ich allerdings auch nicht rücksicht, getestet wird mit ie6, ie7, firefox, safarai, firefox für mac. bis auf ein paar kleinigkeiten dessen man sich bewusst sein muss (vorallem wie paddings und margins in zusammenhang mit der breite von browsern gehandelt wird) gibts eigentlich keine probleme.

HTML/CSS Div Positionierung

Forum Index > Software > Coding Stuff

Neo1010

Nico

Neo1010

Nico

Neo1010

gue

Neo1010

ica

mat

Nightstalker

ica

Nightstalker

fatmike182

shadowman

ica