Antworten zum Thema „Umflußproblem“

BraCay · 07.03.2009

Ich habe ein Problem, ich möchte eine komplexere Homepage machen, und nun habe ich ein problem mit float

die buchstaben stellen die klassen dar, wo muss ich genau float setzen, damit bei firefox ein ordentliches ergebnis angezeigt wird (ie is net wichtig erstmal)?

Ich sitze nämlich schon zwei stunden dran ohne ein richtiges ergebnis

Code:

.a{

}

.a{

}

.b{
    float: left;
}

.c{

}

.d{

}

.e{
    float: left;
}

.f{
    float: left;
}

.g{

}

Bitte um Hilfe

bigpaul · 07.03.2009

AW: Umflußproblem

Hast du das online?
Würde gerne mal bischen rumprobiern.

BraCay · 07.03.2009

AW: Umflußproblem

da findest du alle datein die du brauchst^^

kaltmacher · 07.03.2009

AW: Umflußproblem

Ich schätze, du wirst nicht drumherumkommen, deine Grafiken in den Bereichen manuell zu positionieren.

Das geht sicherlich am schnellsten.

Machst du dir einen Haupt-div (wird dein Eltern-div) und schreibst deine ganzen Layout-divs dort hinein, vergibst ihnen feste IDs und anschließens positionierst du diese mittels CSS.

gruß fC

BraCay · 07.03.2009

AW: Umflußproblem

du meinst a bis g in einem hauptdiv rein oder wie?

kaltmacher · 07.03.2009

AW: Umflußproblem

richtig.
Ich bastel gerade dran rum.

Kannst du mal definieren, was a-g von den Dateien ist??

bigpaul · 07.03.2009

AW: Umflußproblem

Also ich denke es müsste gehen, b und d in ein übergeordnetes div zu packen und c,e,f,g in ein div. Dann tust du dich schonmal leichter. Dann noch ein bischen mit float rumspielen, fertig..
Probier mal bischen..
Oder du machst es wie kaltmacher gesagt hat. einfach alles in ein div und dann mit position: absolute;
und
top: x px
und
left: y px
positionieren. Das ist aber irgendwie nich so sauber..

BraCay · 07.03.2009

AW: Umflußproblem

jo

a = header
b = navi
c = leer1
d = leer3
e = inhalt
f = leer 2
g = leer4

glaub so müsste es richtig sein^^

kaltmacher · 07.03.2009

AW: Umflußproblem

Vielen Dank, hat mir sehr geholfen deine Liste.
Hier hast du dein zusammengebasteltes Layout.

Passt im IE und im FF.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
          
<html>
<head>
<style type="text/css">

#wrapper{
position: relative;
width: 900px;
margin: 0 auto;
}

#header {
    position: absolute;
    left: 0px;
    top: 0px;
    background-image:url(thrilla_header.png);
    width: 899px;
    height: 139px;
}

#navi {
    position: absolute;
    left: 0px;
    top: 139px;
    background-image:url(navi.png);
    width: 298px;
    height: 273px;
}

#leer1 {
    position: absolute;
    left: 298px;
    top: 139px;
    background-image:url(leer1.png);
    width: 601px;
    height: 181px;

}

#inhalt {
    position: absolute;
    left: 298px;
    top: 320px;
    background-image:url(inhalt.png);
    width: 342px;
    height: 348px;
}

#leer2 {
    position: absolute;
    left: 640px;
    top: 320px;
    background-image:url(leer2.png);
    width: 259px;
    height: 348px;
}

#leer3 {
    position: absolute;
    left: 0px;
    top: 410px;
    background-image:url(leer3.png);
    width: 298px;
    height: 517px;
}

#leer4 {
    position: absolute;
    left: 298px;
    top: 668px;
    background-image:url(leer4.png);
    width: 602px;
    height: 259px;
}

</style>
</head>

<body>
<div id="wrapper">
        <div id="header"></div>
        <div id="navi"></div>
        <div id="leer1"></div>
        <div id="inhalt"> DIES IST EIN TESTTEXT  </div>
        <div id="leer2"></div>
        <div id="leer3"></div>
        <div id="leer4"></div>
</div>

</body>

</html>

Viele Grüße,
kaltmacher

BraCay · 07.03.2009

AW: Umflußproblem

danke dir, du hast das also mit position: absolute gelöst,

jetzt kommen natürlich paar Fragen:

1. Kann man das eigentlich auch so lösen, das es mit float funktioniert, also wie meine version?

2. Geht das, das er trotzdem auf dem IE und dem FF alles gleich anzeigt, wenn ich position: absolute; nicht verwende, weil wenn ich das nicht benutze kommt es zu anderen darstellungen im ie^^

cebito · 07.03.2009

AW: Umflußproblem

Einfach nur so mit float glaub ich nicht, aber wenn du um (b;d) und um (c,e,f,g) jeweils ein div drumlegst kannst die zwei floaten und e-f dann auch nochmal im zweiten...

BraCay · 07.03.2009

AW: Umflußproblem

ach jetzt wird mir erst bewusst, was ihr gemeint habt mit ein div darum setzen, danke nun habsch 100% verstanden

kaltmacher · 07.03.2009

AW: Umflußproblem

cebito schrieb:
Einfach nur so mit float glaub ich nicht, aber wenn du um (b;d) und um (c,e,f,g) jeweils ein div drumlegst kannst die zwei floaten und e-f dann auch nochmal im zweiten...

Also meinst du um den jetzigen div von c,e,f und g noch einen div?

BraCay · 07.03.2009

AW: Umflußproblem

er meint es so^^

Code:

|       a       |
-----------------
| b |     c      |
|    |  e     f  |
| d |     g     |
-----------------

cebito · 07.03.2009

AW: Umflußproblem

BraCay schrieb:
er meint es so^^

Code:

| a | ----------------- | b | c | | | e f | | d | g | -----------------

Genau, und jetzt kannst e und f floaten ohne dass es irgendwelche Probleme mit b,d gibt. Die extra-Container mußt natürlich auch floaten...

BraCay · 07.03.2009

AW: Umflußproblem

cebito schrieb:
Genau, und jetzt kannst e und f floaten ohne dass es irgendwelche Probleme mit b,d gibt. Die extra-Container mußt natürlich auch floaten...

logisch oder

jetzt wenn man Hilfe von Außen bekommt, erscheint es doch leicht, aber wie gesagt, keiner ist perfekt

tomtom · 08.03.2009

AW: Umflußproblem

hallo jungs,
danke erstmal für eure tipps, muss trotzdem als newbie fragen, was "float" ist. bitte nicht lästern, da anfänger. vielleicht hat jemand einen link für mich, wo das grafisch als bild nochmals erklärt wird. danke für die hilfe. nice weekend.

knispel · 08.03.2009

AW: Umflußproblem

tomtom schrieb:
hallo jungs,
danke erstmal für eure tipps, muss trotzdem als newbie fragen, was "float" ist. bitte nicht lästern, da anfänger. vielleicht hat jemand einen link für mich, wo das grafisch als bild nochmals erklärt wird. danke für die hilfe. nice weekend.

Es gibt hier eine .

Ansonsten ist Erklärung recht brauchbar.