HTML/CSS Div Positionierung

Seite 1 von 2 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/html_css_div_positionierung_185622/page_1 - zur Vollversion wechseln!

Neo1010 schrieb am 25.09.2007 um 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 schrieb am 25.09.2007 um 18:22

gib eine breite an vom blauen

Neo1010 schrieb am 25.09.2007 um 18:23

nein, breite soll variabl sein.

Nico schrieb am 25.09.2007 um 18:25

ein prozentwert ergibt auch eine variable breite

Neo1010 schrieb am 25.09.2007 um 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 schrieb am 25.09.2007 um 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 schrieb am 25.09.2007 um 18:51

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

ica schrieb am 25.09.2007 um 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 schrieb am 25.09.2007 um 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 schrieb am 26.09.2007 um 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 schrieb am 26.09.2007 um 09:36

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

Nightstalker schrieb am 26.09.2007 um 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 schrieb am 26.09.2007 um 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 schrieb am 26.09.2007 um 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 schrieb am 26.09.2007 um 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.