2 DIVs nebeneinander mit Hilfe von float -> aber wie?

[Arx]

Hallo Selfer,

jetzt habe ich auch mal eine Frage, die mich in der Zeit, in der das Forum geschlossen war, fast in den Wahnsinn getrieben hat:

Ich arbeite gerade an einem neuen Layout, das ich zunächst mit "blinden" Tabellen realisiert habe:

http://cojobo.bonn.de/~s_rheind/homepage/neu/index.html
http://cojobo.bonn.de/~s_rheind/homepage/neu/styles.css

Da ich das aber nun auf schönes CSS umstellen möchte, stehe ich vor dem Problem, oben auf der Seite Text einmal linksbündig (-> "arx site") und einmal rechtsbündig (-> die beiden Links) ausrichten zu müssen.

Dieses Problem wollte ich eigentlich mit zwei DIVs lösen, die ich mit width und float in eine Zeile setzen wollte. Letzteres funktioniert aber mit keinem Browser (Firefox 0.8, Opera 7.50, MSIE 6).

Was mache ich verkehrt:

http://cojobo.bonn.de/~s_rheind/homepage/neu/div_index.html
http://cojobo.bonn.de/~s_rheind/homepage/neu/div_styles.css

?

Gruß & Danke im Voraus
Arx

[MudGuard]

Hi,

http://cojobo.bonn.de/~s_rheind/homepage/neu/div_index.html
http://cojobo.bonn.de/~s_rheind/homepage/neu/div_styles.css

Es geht um Seitenkopf_a und ..._b?

Hier mal das CSS (jeweils aufs wesentliche reduziert):

div.seitenkopf_a {width: 50%;
                  float: left;
                  padding: 20px;

div.seitenkopf_b {width: 50%;
                  padding: 20px;

Die beiden Teile sind also jeweils 40 Pixel breiter als die Hälfte des verfügbaren Platzes (padding wird zu width addiert, um die Gesamtgröße zu bekommen).

Das erste Teil ist also schon wesentlich breiter als 50% (nämlich 40px).
Wie soll da ein weiteres Teil daneben passen, das selbst auch wesentlich breiter als 50% ist?

cu,
Andreas

[Arx]

Hallo,

http://cojobo.bonn.de/~s_rheind/homepage/neu/div_index.html
http://cojobo.bonn.de/~s_rheind/homepage/neu/div_styles.css

Es geht um Seitenkopf_a und ..._b?

Ja.

Hier mal das CSS (jeweils aufs wesentliche reduziert):

div.seitenkopf_a {width: 50%;
                  float: left;
                  padding: 20px;

div.seitenkopf_b {width: 50%;
                  padding: 20px;

Die beiden Teile sind also jeweils 40 Pixel breiter als die Hälfte des verfügbaren Platzes (padding wird zu width addiert, um die Gesamtgröße zu bekommen).

Das erste Teil ist also schon wesentlich breiter als 50% (nämlich 40px).
Wie soll da ein weiteres Teil daneben passen, das selbst auch wesentlich breiter als 50% ist?

Habe width in beiden DIVs jetzt auf 25% reduziert. Das Resultat siehst du auf der Seite :-(

Gruß
Arx

[MudGuard]

Hi,

div.seitenkopf_b {width: 50%;
                  padding: 20px;

hier noch ein float:right; und es funktioniert.
Frag mich aber nicht, warum das float:right nötig ist...

cu,
Andreas

[Arx]

Hallo,

div.seitenkopf_b {width: 50%;
                  padding: 20px;

hier noch ein float:right; und es funktioniert.
Frag mich aber nicht, warum das float:right nötig ist...

In der Tat, das funktioniert (,wenn ich den nächsten Bereich (_noch_ eine Tabelle) mit clear: both formatiere...).

Aber:

Die Linie unter dem Kopf der Seite ist plötzlich nach oben gewandert (hat sich quasi selbst von border-boottom in border-top verwandelt). Woran liegt das jetzt schon wieder?

Gruß
Arx

[MudGuard]

Hi,

Die Linie unter dem Kopf der Seite ist plötzlich nach oben gewandert (hat sich quasi selbst von border-boottom in border-top verwandelt). Woran liegt das jetzt schon wieder?

Nein, ist border-bottom. Aber da floatende Elemente die Höhe des Elternelements nciht beeinflussen, sonst aber nix drin ist im Elternelement, hat dieses die Höhe 0...

cu,
Andreas

[Arx]

Hallo,

Die Linie unter dem Kopf der Seite ist plötzlich nach oben gewandert (hat sich quasi selbst von border-boottom in border-top verwandelt). Woran liegt das jetzt schon wieder?

Nein, ist border-bottom. Aber da floatende Elemente die Höhe des Elternelements nciht beeinflussen, sonst aber nix drin ist im Elternelement, hat dieses die Höhe 0...

OK, dann muss ich die Linie wohl als border-top im nachfolgenden Element einfügen, wenn ich das auch auf DIVs umstelle.

Danke soweit!

Gruß
Arx

[Arx]

Hallo,

Aber:

Die Linie unter dem Kopf der Seite ist plötzlich nach oben gewandert (hat sich quasi selbst von border-boottom in border-top verwandelt). Woran liegt das jetzt schon wieder?

Nachtrag: Dieses Problem tritt ausschließlich im Firefox auf, Opera und IE zeigen die Seite einwandfrei an.

Gruß
Arx

[Arx]

Hallo,

Hallo Selfer,

[...]

http://cojobo.bonn.de/~s_rheind/homepage/neu/index.html
BTW: Was haltet ihr von dem Design? Soll einfach aber funktional sein...

Gruß
Arx

[Ingo Turski]

Hi,

BTW: Was haltet ihr von dem Design? Soll einfach aber funktional sein...

ist mir zu schmucklos und der Farbverlauf der Headergrafik von Blau in mein Rosa sieht übelst aus..;-)
Dem Menü würde ich übrigens eine feste Weite in em geben; was soll die Abhängigkeit von der Fenstergröße?

freundliche Grüße
Ingo

[Arx]

Hallo,

BTW: Was haltet ihr von dem Design? Soll einfach aber funktional sein...
ist mir zu schmucklos und der Farbverlauf der Headergrafik von Blau in mein Rosa sieht übelst aus..;-)

Rosa!?!?!?
Weiß!!!

Dem Menü würde ich übrigens eine feste Weite in em geben; was soll die Abhängigkeit von der Fenstergröße?

Das ist eine Idee. Die Realisierung derselben kommt in den nächsten Tagen...bis dahin...*gähn*...

Gruß & guts Nächtle
Arx

[Ingo Turski]

Hi,

Rosa!?!?!?
Weiß!!!

wenn das so sein soll, warum definierst Du es nicht? Mein Browser wird sich nicht dagegen sträuben.

freundliche Grüße
Ingo

[Arx]

Hallo,

Rosa!?!?!?
Weiß!!!
wenn das so sein soll, warum definierst Du es nicht? Mein Browser wird sich nicht dagegen sträuben.

Kann es sein, dass du eine alte Version der Seite noch im Cache hast? Hatte die vorhin nämlich mal zu Testzwecken ("Wo hört dieses verd... Element auf?") gefärbt.

Hier nochmal die Adresse: http://cojobo.bonn.de/~s_rheind/homepage/neu/index.html.

Gruß &guts Nächtle
Arx

[Ingo Turski]

Hi,

Kann es sein, dass du eine alte Version der Seite noch im Cache hast? Hatte die vorhin nämlich mal zu Testzwecken

nö. Gerade mal mit Mozilla aufgerufen. Hier habe ich dunkelblau - passt allerdings ein wenig besser..;-)

freundliche Grüße
Ingo

[MudGuard]

Hi,

ist mir zu schmucklos und der Farbverlauf der Headergrafik von Blau in mein Rosa sieht übelst aus..;-)
Rosa!?!?!?
Weiß!!!

Hellblau.

Wieso sollte da ein weißer Hintergrund sein?
Wo hast Du weiß als Hintergrundfarbe definiert? Nirgends.
Also ist bei mir (wie bei Ingo) die Voreinstellung des Browsers für die Hintergrundfarbe gültig.
Ich hab meinen Browser auf ein helles Blau eingestellt.

Und das hat nichts mit dem Cache zu tun, sondern damit, daß Du keine Angabe zur Hintergrundfarbe machst.

cu,
Andreas

[Arx]

Hallo,

Rosa!?!?!?
Weiß!!!

Hellblau.

Wieso sollte da ein weißer Hintergrund sein?
Wo hast Du weiß als Hintergrundfarbe definiert? Nirgends.
Also ist bei mir (wie bei Ingo) die Voreinstellung des Browsers für die Hintergrundfarbe gültig.
Ich hab meinen Browser auf ein helles Blau eingestellt.

Und das hat nichts mit dem Cache zu tun, sondern damit, daß Du keine Angabe zur Hintergrundfarbe machst.

OK, wieder was dazu gelernt: Immer background angeben!

Habe ich sofort gemacht, sollte jetzt anders sein. Bitte hier posten, wenn das nicht der Fall ist!

Gruß & Danke für die Hinweise
Arx

[Ingo Turski]

Hi,

OK, wieder was dazu gelernt: Immer background angeben!

Habe ich sofort gemacht, sollte jetzt anders sein. Bitte hier posten, wenn das nicht der Fall ist!

Ok, nächste Lernphase: immer wenn Du einen Hintergrund angibst, ist zwingend auch eine Schriftfarbe zu definieren. Der Header paßt zwar jetzt gut, nur leider habe ich im Mozilla ganz hellgraue Schriftfarbe eingestellt...

freundliche Grüße
Ingo

[Arx]

Hallo,

OK, wieder was dazu gelernt: Immer background angeben!

Ok, nächste Lernphase: immer wenn Du einen Hintergrund angibst, ist zwingend auch eine Schriftfarbe zu definieren. Der Header paßt zwar jetzt gut, nur leider habe ich im Mozilla ganz hellgraue Schriftfarbe eingestellt...

OK, auch das ist sofort erledigt. Was muss ich sonst noch ändern/angeben, damit die Seite bei dir "richtig" dargestellt wird?

BTW:
Im IE gibt es auf der Seite zwei Bugs:
1.Wenn man mit der Maus über die Links in der Navigationsleiste links fährt, tritt a:hover erst in Aktion, wenn sich der Mauszeiger über dem Text der Links befindet, obwohl die Links dort mit display: block formatiert sind, was im Firefox und im Opera zum gewünschten Effekt führt.
2. Tritt a:hover dann in Aktion, so verschiebt sich der DIV am unteren Seitenrand nach unten.
Beide Bugs kann ich mir nicht erklären. Gibt es da Abhilfe?

Gruß
Arx

[wahsaga]

hi,

1.Wenn man mit der Maus über die Links in der Navigationsleiste links fährt, tritt a:hover erst in Aktion, wenn sich der Mauszeiger über dem Text der Links befindet, obwohl die Links dort mit display: block formatiert sind, was im Firefox und im Opera zum gewünschten Effekt führt.

der IE will hier noch width:100% für die links haben, dann macht er es auch wie's sein soll. (auch wenn's unlogisch ist, da display:block die ausstreckung über die gesamte breite ja schon implizieren sollte.)

2. Tritt a:hover dann in Aktion, so verschiebt sich der DIV am unteren Seitenrand nach unten.

hab ich mir jetzt nicht genauer angeschaut; prüfe halt mal, ob du irgendwo border oder margins/paddings beim hovern änderst; irgendwas, das zu einer vergrößerung des platzbedarfs der links führen könnte.

gruß,
wahsaga

[Arx]

Hallo,

1.Wenn man mit der Maus über die Links in der Navigationsleiste links fährt, ...

der IE will hier noch width:100% für die links haben, dann macht er es auch wie's sein soll. (auch wenn's unlogisch ist, da display:block die ausstreckung über die gesamte breite ja schon implizieren sollte.)

Habe ich getestet, sah schauderhaftest aus. Sieht bei der jetzt gefundenen Lösung noch schauderhaftester aus. Deshalb lasse ich diesen Bug jetzt drin. _So_ gravierend ist der ja nicht.

2. Tritt a:hover dann in Aktion, so verschiebt sich der DIV am unteren Seitenrand nach unten.

hab ich mir jetzt nicht genauer angeschaut; prüfe halt mal, ob du irgendwo border oder margins/paddings beim hovern änderst; irgendwas, das zu einer vergrößerung des platzbedarfs der links führen könnte.

Habe ich nichts gefunden. Das Problem hat sich aber jetzt von selbst gelöst.

Gruß
Arx

[Ingo Turski]

Hi,

der IE will hier noch width:100% für die links haben, dann macht er es auch wie's sein soll. (auch wenn's unlogisch ist, da display:block die ausstreckung über die gesamte breite ja schon implizieren sollte.)

Habe ich getestet, sah schauderhaftest aus. Sieht bei der jetzt gefundenen Lösung noch schauderhaftester aus. Deshalb lasse ich diesen Bug jetzt drin. _So_ gravierend ist der ja nicht.

warum? Ich finde das schon gravierend, wenn Du schon den ganzen Bereich mit einer Hintergrundfarbe bzw. einem Rahmen hinterlegst.

selektor {width:12em;}
html>body selektor {width:auto;}
und alle sind zufrieden..;-)

freundliche Grüße
Ingo

[Arx]

Hallo,

Habe ich getestet, sah schauderhaftest aus. Sieht bei der jetzt gefundenen Lösung noch schauderhaftester aus. Deshalb lasse ich diesen Bug jetzt drin. _So_ gravierend ist der ja nicht.

warum? Ich finde das schon gravierend, wenn Du schon den ganzen Bereich mit einer Hintergrundfarbe bzw. einem Rahmen hinterlegst.

OK.

selektor {width:12em;}
html>body selektor {width:auto;}

Was meinst du damit?

Gruß
Arx

[Ingo Turski]

Hi,

selektor {width:12em;}
html>body selektor {width:auto;}

Was meinst du damit?

einen Hack für den IE, da Du border und padding verwendest.
Allerdings muß ich mich korrigieren, da ich gesehen habe, daß Du den IE6 nicht in den quirks-mode schickst:

.navileiste a {
  width:12em; /* oder was halt für den IE5.x passend ist */
}
.navileiste a {
  voice-family: ""}"";
  voice-family: inherit;
  width:auto;
}

wie Du siehst, kannst Du auch den Selektor navilink einsparen.
<div class="naviblock"> und <div class="titel">&#160;</div> dürften übrigens auch ersetzbar sein...

freundliche Grüße
Ingo

[Arx]

Hallo,

selektor {width:12em;}
html>body selektor {width:auto;}

Was meinst du damit?

einen Hack für den IE, da Du border und padding verwendest.
Allerdings muß ich mich korrigieren, da ich gesehen habe, daß Du den IE6 nicht in den quirks-mode schickst:

quirks-mode??? --> Bahnhof!

.navileiste a {
  width:12em; /* oder was halt für den IE5.x passend ist */
}
.navileiste a {
  voice-family: ""}"";
  voice-family: inherit;
  width:auto;
}

wie Du siehst, kannst Du auch den Selektor navilink einsparen.

Ist das nicht egal, ob ich das über Verschachtelung oder Klasse mache? Und wie soll ich vor allem in dieser Notation die verschiedenen Pseudo-Klassen für <a> festlegen? So:

div.navileiste a:link {...}

?

<div class="naviblock"> und <div class="titel">&#160;</div> dürften übrigens auch ersetzbar sein...

Beides ist eine Notlösung, weil die Navigation auf der gleichen Höhe wie der Text beginnen soll. Mir ist dazu bisher noch keine bessere Lösung eingefallen.

Gruß
Arx

[Ingo Turski]

Hi,

quirks-mode??? --> Bahnhof!

das Gegenteil vom, standards-compliant mode, in dem der IE einige Fehler (wie das falsche Boxmodell) nicht mehr hat. Und da Du einen korrekten Doctype angegeben hast, rendert zumindest der IE6 etwas standardkonformer.

wie Du siehst, kannst Du auch den Selektor navilink einsparen.

Ist das nicht egal, ob ich das über Verschachtelung oder Klasse mache?

nunja... wenn Du Dir einige Angaben im Quelltext sparen kannst, warum nicht?

div.navileiste a:link {...}

genau so. oder ohne div davor.

Beides ist eine Notlösung, weil die Navigation auf der gleichen Höhe wie der Text beginnen soll. Mir ist dazu bisher noch keine bessere Lösung eingefallen.

Abstände definiere ich immer über margin und/oder padding.

freundliche Grüße
Ingo

[Arx]

Hallo,

wie Du siehst, kannst Du auch den Selektor navilink einsparen.

Ist das nicht egal, ob ich das über Verschachtelung oder Klasse mache?
nunja... wenn Du Dir einige Angaben im Quelltext sparen kannst, warum nicht?

Stimmt eigentlich...

div.navileiste a:link {...}
genau so. oder ohne div davor.

Ist das DIV davor verboten? Ich schreibe es zur besseren Übersicht, welches Element ich mit einer Klasse versehe, immer hin.

Abstände definiere ich immer über margin und/oder padding.

Ja? Und was muss ich da angeben, wenn ich einen Abstand der Größe

10px + 155% Schriftgröße

brauche?

freundliche Grüße
Ingo

Gruß
Arx

[Ingo Turski]

Hi,

genau so. oder ohne div davor.
Ist das DIV davor verboten? Ich schreibe es zur besseren Übersicht, welches Element ich mit einer Klasse versehe, immer hin.

nö, natürlich nicht. Obwohl die Angabe des Elementes die Nutzung der Klasse natürlich einschränkt (auf eben dieses Element), ein wenig mehr Code ist und vermutlich auch vom NN4 nicht verstanden wird.

10px + 155% Schriftgröße

geht imo tatsächlich nur mit einem zusätzlichen Element. Allerdings frage ich mich, ob es so schlimm ist, den gewünschten extra-Abstand als Aufschlag des em-Wertes anzugeben.

freundliche Grüße
Ingo

[Arx]

Hallo,

10px + 155% Schriftgröße
geht imo tatsächlich nur mit einem zusätzlichen Element. Allerdings frage ich mich, ob es so schlimm ist, den gewünschten extra-Abstand als Aufschlag des em-Wertes anzugeben.

Aufschlag welchen em-Wertes?

Gruß
Arx

[Ingo Turski]

Hi,

Aufschlag welchen em-Wertes?

1.55em + ~ 0.65em

freundliche Grüße
Ingo

[Arx]

Hallo,

http://cojobo.net/~s_rheind/homepage/neu/neuindex.html
http://cojobo.net/~s_rheind/homepage/neu/neustyles.css

Aufschlag welchen em-Wertes?
1.55em + ~ 0.65em

Hat mit etwas Rumexperimentieren mit dem Wert funktioniert.

Habe jetzt auch alle Linkformatierungen für die Navileiste neu geschrieben.

Habe aber neues Problem: (Geh mal auf die Seite - Link oben!)
Der Text in <div class="textblock"><div class="text"> wird am unteren Ende der Navileiste umgebrochen und geht dann unterhalb dieser weiter. Wie verhindere ich das?

Gruß
Arx

[Detlef G.]

Hallo Arx

Der Text in <div class="textblock"><div class="text"> wird am unteren Ende der Navileiste umgebrochen und geht dann unterhalb dieser weiter. Wie verhindere ich das?

Spiele mal auf http://d-graff.de/demos/selfhtml/float_left_test.html mit der Fensterbreite, dann kommst du selbst drauf.

uf Wiederlesen
Detlef

[Arx]

Hallo,

Der Text in <div class="textblock"><div class="text"> wird am unteren Ende der Navileiste umgebrochen und geht dann unterhalb dieser weiter. Wie verhindere ich das?

Spiele mal auf http://d-graff.de/demos/selfhtml/float_left_test.html mit der Fensterbreite, dann kommst du selbst drauf.

Lernziel erreicht. habe es mit margin gemacht. Ergebnis:
http://cojobo.bonn.de/~s_rheind/homepage/neu/neuindex2.html
http://cojobo.bonn.de/~s_rheind/homepage/neu/neustyles2.css

Gruß & Danke für die Hilfe
Arx

[Ingo Turski]

Hi,

Der Text in <div class="textblock"><div class="text"> wird am unteren Ende der Navileiste umgebrochen und geht dann unterhalb dieser weiter.

ist doch eigentlich garnicht verkehrt, oder?

Wie verhindere ich das?

Du suchst (mal wieder) nach einer Abstandsdefinition. Nur daß Du dabei berücksichtigen mußt, daß floatende Elemente aus dem Textfluß genommen sind.

freundliche Grüße
Ingo

[Arx]

Hallo,

Der Text in <div class="textblock"><div class="text"> wird am unteren Ende der Navileiste umgebrochen und geht dann unterhalb dieser weiter.
ist doch eigentlich garnicht verkehrt, oder?

Möchte ich aber nicht.

Wie verhindere ich das?
Du suchst (mal wieder) nach einer Abstandsdefinition. Nur daß Du dabei berücksichtigen mußt, daß floatende Elemente aus dem Textfluß genommen sind.

Habe gefunden. Siehe [pref:t=82500&m=482798].

Ergebnis:
http://cojobo.bonn.de/~s_rheind/homepage/neu/neuindex2.html
http://cojobo.bonn.de/~s_rheind/homepage/neu/neustyles2.css

Gruß & Vielen Dank für die Hilfe
Arx

[Ingo Turski]

Hi,

Was muss ich sonst noch ändern/angeben, damit die Seite bei dir "richtig" dargestellt wird?

Das Menü benötigt eine Weitenangabe in EM. Zum einen macht eine Breite in Abhängigkeit der Fensterbreite wenig Sinn und zum anderen verläßt der Text (jedenfalls im Mozilla) bei Vergrößerung die Box.

2. Tritt a:hover dann in Aktion, so verschiebt sich der DIV am unteren Seitenrand nach unten.

spiel mit margin für Dein div.seitenfuss und das Inhaltsdiv, wenn Dich das stört. Es könnte hierbei auch gut sein, daß der IE andere Werte als standardkonforme Browser benötigt.

freundliche Grüße
Ingo

[Arx]

Hallo,

Das Menü benötigt eine Weitenangabe in EM. Zum einen macht eine Breite in Abhängigkeit der Fensterbreite wenig Sinn und zum anderen verläßt der Text (jedenfalls im Mozilla) bei Vergrößerung die Box.

Stimmt. Breite in EM ist allerdings nicht schön, weil ich da mit festen Werten rumexperimentieren müsste...habe jedenfalls jetzt keine Breitenangabe mehr drin und es funktioniert wunderbar.

2. Tritt a:hover dann in Aktion, so verschiebt sich der DIV am unteren Seitenrand nach unten.
   spiel mit margin für Dein div.seitenfuss und das Inhaltsdiv, wenn Dich das stört. Es könnte hierbei auch gut sein, daß der IE andere Werte als standardkonforme Browser benötigt.

Hat sich irgendwie von selbst gelöst...

Gruß
Arx

[Ingo Turski]

Hi,

Stimmt. Breite in EM ist allerdings nicht schön, weil ich da mit festen Werten rumexperimentieren müsste...habe jedenfalls jetzt keine Breitenangabe mehr drin und es funktioniert wunderbar.

wie? float ohne width? Würde ich nur machen, wenn es anders nicht lösbar wäre; und das ist es doch. Du mußt nur etwas experimentieren und findest bestimmt eine passende Breite für Dein Menü - passend in allen Browsern und in den angegebenen Schriftarten. Dein Vorteil ist die Kenntnis des Inhalts.
Und wenn Du die Breite wie gesagt in EM angibst, paßt sie automatisch auch für alle Schriftgrößen.

freundliche Grüße
Ingo

[Arx]

Hallo,

Stimmt. Breite in EM ist allerdings nicht schön, weil ich da mit festen Werten rumexperimentieren müsste...habe jedenfalls jetzt keine Breitenangabe mehr drin und es funktioniert wunderbar.
wie? float ohne width? ...

Uuups...

Gruß
Arx