Opera und FF Top, IE Flop

***Chronos*** · 16.11.2011, 19:52

auf der rechten seite oder wie?
oder einfach nur rechts neben den anderen div? hast vielleicht ne skizze?

**Kulle** · 16.11.2011, 20:02

Ne momentan nicht, kann mich ja nachher nochmal hinsetzen und euch morgen denn Code geben.

**Kulle** · 18.11.2011, 19:33

So jetzt habe ich es nochmal gemacht mit float

und doctype und opera hat immer noch ein problem damit.

mein code ist

PHP-Code:


#oben {
    top: -120px;
    left: -20px;
    right: -20px;
    height: 20px;
    background: red;
    position: float;
}

PHP-Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
     <head>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
         <div id="oben">
            <a href='?=1'>Navigation</a>
     </div>
    </body>
</html>

***Chronos*** · 18.11.2011, 21:40

ich weiß ja nicht welches problem opera hat...aber dein code ist so oder so falsch
es gibt kein position:float sondern es gibt float

: left; oder float

:right

**Kulle** · 19.11.2011, 12:10

klappt aber auch nicht ...

#oben {
top: -50px;
left: -50px;
right: -50px;
height: 20px;
background:red;
float: none;
}

da geht die leiste ja gar nicht an denn rand herran, bleibt immer konstant stehen. ich glaube ich bin zu dumm dazu :P

und zur breite die will ich über die ganze seite haben nicht nur ein stücken.

***Chronos*** · 19.11.2011, 19:31

ok. liest dir bitte nochmal ein tutorial zum thema float

durch...weil entweder hast du meinen beitrag nicht richtig gelesen oder du verarschst mich hier echt langsam.
ansonsten würd ich dir mal vorschlagen...mach mal ein screendesign von dem was du willst...dann kann man dir vielleicht etwas besser und genauer helfen.

**goto** · 19.11.2011, 22:39

Hallo,

Kulle, kauf dir ein Einsteiger HTML

/CSS Buch und fang von vorne an da dir anscheinend schon die Grundlagen nicht wirklich geläufig zu sein scheinen. Für den obigen Balken benötigst du weder float

noch sonst irgend etwas. Der CSS Source für den obigen Balken würde wie folgt aussehen.

Code:

#oben {
height: 20px;
width: 100%;
}

Damit das auch alles über die gesamte Breite funktioniert ohne dass du links, rechts und darüber ein paar Pixel Luft hast, benötigst du noch folgende CSS Deklaration.

Code:

body {
padding: 0px;
margin: 0px;
}

**Kulle** · 20.11.2011, 12:43

Hey danke goto jetzt hat es geklappt, der Rand ist weg.

Ein Problem habe ich noch (ist das letzte) und zwar habe ich ja der linken Spalte einen festen wert zugewiesen 200px. Wie kann ich es machen das auf der anderen Seite der Kasten direkt bis an Rand geht?

habe schon bei CCS4you, selfhtml und ein paar tuts geschaut und da finde ich nichts passendes dazu.

**goto** · 20.11.2011, 13:30

Hallo,

du meinst, du möchtest dass die rechte Spalte vollständig bis zum rechten Rand hinaus geht? Wichtig ist bei float

Elementen, dass du alle nachfolgenden Elemente wieder in den "Fluss des Dokumentes" mit einbeziehst (mit float

löst du ein Element aus dem normalen Textfluss eines Dokumentes heraus). Um zu erreichen was du möchtest sollte nachfolgender Quelltext der richtige sein.

HTML

:

HTML-Code:

<div id="header">header</div>
<div id="left">left</div>
<div id="right">right<br />right</div>
<div id="clearer"></div>

CSS:

HTML-Code:

body {
background-color: #000;
margin: 0px;
padding: 0px;
}

/** ids **/

#header {
    width: 100%;
    height: 20px;
    background-color: white;
}

#left {
    


	float 
	


: left;
    width: 200px;
    background-color: red;
}

#right {
    margin-left: 200px;
    background-color: blue;
}

#clearer {
    clear: both;
}

Man könnte das gewünschte Ergebnis sicherlich auch anders/eleganter lösen - Ich bin allerdings kein Designer und von daher nicht der richtige Ansprechpartner für derlei Feinheiten. Was ich dir hier jetzt als Quelltext vorgegeben habe ist jedoch simples Grundwissen und du solltest dir daher - sofern du planst etwas öfter in diese Richtung unterwegs zu sein - dringend gute Literatur bzgl. CSS basierter Layouttechnik beschaffen, denn mit gestiegenen Anforderungen wird es in keinem Fall leichter werden.

**Kulle** · 20.11.2011, 18:55

Ok Danke es klappt alles soweit, ich habe es jetzt selbst noch ein bisschen probiert mit margin-bottom und height in % .... aber es will nicht klappen das die leiste die du als clearer hast ganz unten steht und der inhalt (right,left) bis zu ihr nach unten gehen.