Floaten der Navi

glowy · 17.06.2006, 18:53

Huhu,

ich würde gerne meine Navi (#navi) floaten lassen, dachte ich mache das mit {float: left), dann wird sie ja rechts umflossen, aber wie muss ich jetzt #content, das rechts neben der Navi sein soll, deklarieren? Also ich dachte mit {float: right}, das wär doch logisch, aber wird dann der Content richtig positioniert, sodass der Text links beginnt?

Würde mich sehr über Antworten freuen.

PythOn_tp

hero-master · 17.06.2006, 19:59

Hi

such doch mal nach 2-Spalten-Layout. ODer schau dir ein paar CSS-Seiten an, die so aufegbaut sind

Z.B. hier in der TP-Lounge

glowy · 18.06.2006, 17:22

Naja, die haben ja alle irgendwelche anderen Techniken verwendet, hab da auch so schnell nichts erkannt.

Ich habe meinen Entwurf mal auf http://lab.pytalhost.com/yannicglowitz/ hochgeladen, da könnt ihr es euch anschauen.

Ich habe den Container #text (das rechts) mit float: right; und float: left; umfließen lassen, sodass die Navi eigentlich da bleiben müsste, wo sie bleiben soll.

Aber der Text spinnt total und ich komme nicht weiter mit der Frage, wie ich die Breite zuweisen soll, denn gefloatete Objekte brauchen ja eine. Ich möchte möglichst bequem Text variieren können, woher soll ich die Breite für den Text wissen? Ich möchte einfach nur, dass er rechts neben der Navi ist und Abstand zu allen Seiten hat, aber wie realisiere ich das?

Die CSS-Datei findet ihr unter http://lab.pytalhost.com/yannicglowitz/style.css

Wäre super froh, wenn ihr mir helfen könntet.

LG

PythOn_tp

hero-master · 18.06.2006, 20:00

Schau dir auch mal die Sache mit dem Boxmodell an. Da liegt dein Fehler

Wenn du dem Text eine Breite von 590px oder so

PS: Als Blindtext würde ich nicht nur eine Anreihung von Buchstaben nehmen. Schreib einen Satz hin oder nimm gleich guten Blindtext

glowy · 18.06.2006, 22:30

Ja, das war nur aus Verzweiflung, normalerweise nehme ich immer brav den "Lorem ipsum..." von www.lipsum.com. :-)

Bin jetzt eh 5 Tage nich in Berlin, mach Urlaub in Prag, aber wäre cool, wenn ich zurückkommen würde und ihr mir helfen könntet.

Soweit ich verstanden habe, muss jedes Element, dem float zugewiesen wird, eine Breite kriegen, aber wie soll ich die beim Text herausfinden, soll ich da rechnen oder kann ich nicht einfach bequem sagen, dass es links und rechts 15 px Abstand haben soll und halt so breit ist?

Vielen Dank schon mal, hero-master

PythOn_tp

Daniel FR · 19.06.2006, 08:19

Moin, Yannic:

Wenn der Text sich in einem bestimmten Bereich der umgebenden Box aufhalten soll, kannst du ihn mit margin in ihr platzieren. Du sagst zum Beispiel zur Navi float:left und width:30em und zum Text margin:2em 2em 2em 32em. Dann brauchst du den Text auch nicht zu floaten.

Das ist jetzt nur das Prinzip, wie du das im Detail umsetzt, hängt vom Gesamtlayout deiner Seite ab.

Gruß, Daniel

hero-master · 19.06.2006, 09:10

Du floatest den Inhaltcontainer rechts, somit brauchst du für links gar kein margin verwenden, sondern einfach die Breite reduzieren.
Es geht bei deinem Problem jedoch nicht um das margin, sondern um das Boxmodell. Und ja: da musst du halt zusammenrechnen, wieviel Platz noch für den Inhalt da wäre + den rechten Außenabstand

Dann solltest du dich auch gleichzeitig mit dem IE auseinandersetzen, genauer gesagt mit dem Double-float-margin-Bug

IMBild · 19.06.2006, 16:08

Für ein 2 spaltiges Layout ist kein Double-Float notwendig,...
Am einfachsten finde ich es mit % Angaben zu Arbeiten. Also z.B die Navi in einem Div-Con left gefloatet mit meinetwegen 19% und den Inhalt mit 80% einfach drunter (also in der Reihenfolge im Quellcode) platzieren.
Funktioniert wunderbar so lange die Gesamtgröße (also mit Margin, Border, Padding) nicht 100% oder darüber liegt.
siehe hierzu:http://dislabs.de/index.php?ac=labor&sub=1&id=2
und:http://www.css4you.de/wslayout1/index.html

hero-master · 19.06.2006, 18:13

Zitat:

Zitat von Josie_in_Joburg

Für ein 2 spaltiges Layout ist kein Double-Float notwendig,...

Was hat das mit der Anzahl der Spalten zu tun?
Wenn er einem Element ein float:right und ein margin-right zuweist, dann verdoppelt der IE den Außenabstand, dem ist es egal wieviel Spalten sich da befinden

Zitat:

Zitat von Josie_in_Joburg

Am einfachsten finde ich es mit % Angaben zu Arbeiten. Also z.B die Navi in einem Div-Con left gefloatet mit meinetwegen 19% und den Inhalt mit 80% einfach drunter (also in der Reihenfolge im Quellcode) platzieren.
Funktioniert wunderbar so lange die Gesamtgröße (also mit Margin, Border, Padding) nicht 100% oder darüber liegt.

Das kommt ganz auf das Layout und den Zweck a, ob man lieber mit relativen oder absoluten Angaben arbeitet. Wem es wichtig ist, dass auch User mit 640x480 oder kleiner die Seite ohne Scrollbalken sehen will, der sollte auf relative Angaben zurückgreifen. Wer ein festes Layout hat, das es nicht zulässt relativ zu arbeiten, arbeitet eben mit absoluter Angabe

Direkt zum Thema passt es nicht, denn es passt ja auch mit absoluten Angaben, wenn das Boxmodell beachtet wird

IMBild · 20.06.2006, 08:19

Ok aber warum muss ich einem rechts gefloateten element einen margin rechts zuweisen das versteh ich eben nich. Zumal wenn es eben nur 2 Spalten sind ?
Und sry für unpassende Antwort dachte mehrer Lösungswege könnten hilfreich sein.

hero-master · 20.06.2006, 10:01

Zitat:

Zitat von Josie_in_Joburg

Ok aber warum muss ich einem rechts gefloateten element einen margin rechts zuweisen das versteh ich eben nich. Zumal wenn es eben nur 2 Spalten sind ?

Wenn er dem content ein float:right zuweist, aber rechts doch noch ein wenig Platz haben will. Dann kann er das einerseits lösen, indem er dem content-div ein margin-right verpasst (oder ein padding-right) oder er gibt dem Elternelement ein padding mit

Zitat:

Zitat von Josie_in_Joburg

Und sry für unpassende Antwort dachte mehrer Lösungswege könnten hilfreich sein.

Klar, brauchst dich doch nicht entschuldigen für eine Antwort, solange sie keinen verletzt

Viele Wege führen nach Rom, du hast deine Ansicht gepostet und ich meine, das heißt aber nicht das meine Antwort mehr Wert ist als deine

Daniel FR · 20.06.2006, 11:50

Zitat:

Zitat von hero-master

das heißt aber nicht das meine Antwort mehr Wert ist als deine

Aber meine mehr* als deine, Nico.

Sie führt nämlich mit dem geringsten Aufwand zum Ziel und funktioniert in allen Browsern.

Cheers, Daniel

(* war 'n Scherz.)

hero-master · 20.06.2006, 11:58

Zitat:

Zitat von Daniel FR

Aber meine mehr* als deine, Nico.

Halt ich fürn Gerücht

Wenn er die Breite verringert, dann ist das Problem gelöst

Aber jetzt warten wir mal ab wen Phython dismissed und wer sein myOwn CSS-hero wird, denn he wanna be made

IMBild · 20.06.2006, 14:42

Soo nu weiß ich auch was du mit dem Bug meinst :-)
nachdem ich meine 7 Beta Version runtergeschmissen hab und wieder die 6er drauf gehauen hab, erfreulicherweise hat es MS tatsächlich geschaft einen Fehler in einer neuen Version zu beheben

Von da her ,....

hero-master · 20.06.2006, 20:47

Zitat:

Zitat von Josie_in_Joburg

nachdem ich meine 7 Beta Version runtergeschmissen hab und wieder die 6er drauf gehauen hab, erfreulicherweise hat es MS tatsächlich geschaft einen Fehler in einer neuen Version zu beheben

DAnn wirst du dich schwer wundern, wenn du dir den IE 5.x runterlädst