Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
ject
Threadersteller
Dabei seit: 03.04.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 06.12.2007 21:39
Titel IE float problem? |
|
|
Hi,
ich hab hier ein Problem, wo ich grad nicht durchblick...
Ich habe folgendes CSS-Grundgerüst, das in Firefox und Opera auch wie gewünscht dargestellt wird, nur
in IE ist das ganze weit nach unten langgezogen. Ich nehme an, es dürfte ein Problem mit dem float sein,
nur hab ich nicht rausgekriegt welches....
Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body,td,th {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 10px;
color: #FFFFFF;
margin:0;
}
body {
background-color: #000000;
background-image:url(../Back_grad.jpg);
background-repeat:repeat-x;
}
#container {
width:780px;
height:750px;
margin:auto;
}
#head {
width:250px;
height:250px;
}
#headR {
width:530px;
height:250px;
float:right;
}
#main {
width:780px;
}
#mainL {
width:250px;
height:350px;
}
#mainR {
width:530px;
height:350px;
float:right;
overflow:auto;
}
#footer {
width:780px;
height:100px;
}
-->
</style></head>
<body>
<div id="container">
<div id="headR">
</div>
<div id="head">
</div>
<div id="main">
<hr />
<div id="mainR">
</div>
<div id="mainL">
</div>
<hr />
</div>
<div id="foot">
</div>
</div>
</body>
</html>
|
Weil ich grad dabei bin gleich noch eine Frage
Warum eigentlich muss das gefloatete Element im <body> vor dem nichtgefloateten stehen?
z.B "mainR"(rechts) vor "mainL"(links)
(Wenn ich es umgekehrt mache, rutscht "mainR" in Dreamweaver nach unten...)
Vielen Dank für Antworten,
ject
|
|
|
|
|
ject
Threadersteller
Dabei seit: 03.04.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 09.12.2007 16:07
Titel
|
|
|
Kommt schon, hat niemand eine Ahnung?
|
|
|
|
|
Anzeige
|
|
|
foorious
Dabei seit: 15.10.2007
Ort: Frankfurt
Alter: -
Geschlecht:
|
Verfasst Mo 10.12.2007 10:05
Titel
|
|
|
Hi,
hab mir mal die Zeit genommen, den Code ein bisschen umzuschreiben
Ein bisschen geordnet und ergänzt, damits vielleicht übersichtlicher ist.
Die Farben dienen nur zur Veranschaulichung.
Du hattest die falsche id im html-code beim footer stehen.
Und falls irgendwas nicht klar ist, fragen.
Hab das "float: left" auf alle Boxen angewendet, die nebeneinander stehen sollen.
Im Footer musste man "clear: both" verwenden, um den anzuzeigen.
Ich hab leider vergessen wofür das genau gebraucht wird, hat irgendwas mit dem float zu tun.
Vielleicht erklärt sich manches auch von selbst. Bei mir klappts auf jeden Fall im IE und Firefox.
Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body,td,th {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 10px;
color: #fff;
}
* {
margin: 0;
paddin: 0;
}
body {
background-color: #fff;
}
#container {
width: 780px;
margin: 0 auto;
}
#head {
width: 250px;
height: 250px;
float: left;
background: #993300;
}
#headR {
width: 530px;
height: 250px;
float: left;
background: #CC00FF;
}
#main {
width: 780px;
height: 350px;
}
#mainR {
width: 250px;
height: 350px;
float: left;
background: #c0c0c0;
}
#mainL {
width: 530px;
height: 350px;
float: left;
background: #000;
}
#footer {
width: 780px;
height: 100px;
clear: both;
background: #ff6600;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="headR">
</div>
<div id="head">
</div>
<div id="main">
<div id="mainL">
</div>
<div id="mainR">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
|
|
|
|
|
|
ject
Threadersteller
Dabei seit: 03.04.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 10.12.2007 11:38
Titel
|
|
|
Cool, funktioniert auch bei mir.
Danke!
|
|
|
|
|
|
|
|
Ähnliche Themen |
img ul float problem
Float-Problem?
float Problem
float problem
Problem mit Float
Div Float Left Problem
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|