CSS, wie verlasse ich den Layoutstrom

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

offenbar bin ich der Einzige, der Fragen zu CSS hat, das muß mir nicht peinlich sein, oder?
Ich habe unter Win 7 (64bit) mit HTML/CSS eine waagerecht verlaufende Navigationsleiste mit mehreren Schaltknöpfen, wobei 2 davon beim Schweben mit der Maus 3 weitere Buttons nach unten hin erzeugen. Der erste Text in der HTML-Datei nach den Knöpfen steht rechts neben dem letzten Knopf entsprechend dem Layoutstrom.
Zum Testen habe ich den Text als Text 1 geschrieben und per Absatz eine neue „Zeile“ erzwungen.
Weiterer „Text 2“ steht nun direkt unter der linken Taste. Soweit ok.

Wenn ich jetzt aber über die Taste mit den 3 Untertasten gehe, springt der linke Text 2 von seiner Position nach rechts neben die 3 Untertasten, aber in der gleichen Zeilenhöhe.

Ich kann mir das nur so vorstellen, daß, wenn der Layoutstrom farbig wäre, der Raum unter der Navigationsleiste unklusive der 3 ausgefahrenen Untertasten farbig ist und erst rechts neben den 3 Untertasten endet. Daher die Position des Textes dort.

Gibt es eine Anweisung, auch ohne einen Text unter die Tasten zu bringen, der beim Rausfahren der Untertasten nicht wegspringt?

Gruß
Pauli

#2

Hallo Pauli,

du bist nicht der Einzige der hier Fragen stellt.

Aber es ist immer nett, wenn zumindest ein Link mit dabei wäre. So erspart man sich das Rätzel raten.

ich gehe mal davon aus, das diene Verschachtelungen ein Menu werden sollen ! Und das ist eine Liste von Links daher versuche mal
und - ansonsten so es am „Layoutstrom“ liegt, hat es vielleicht mit float und clear zu tun.

Ansonsten liegt es bestimmt 5000 prozentig an:

unter Win 7 (64bit) mit HTML/CSS

„bei Win 12 (256bit) kann sowas nicht passieren“ :o) es hat nichts (fast nichts, um hier die heitern Diskussionen zu unterbinden) mit dem Betriebssystem zu tun sondern mit dem Browser (Internet-Explorer der verschiedenen Versionen, Opera, Firefox, Chrom und …) interpretieren css und html nicht immer gleich. UND schon gar nicht 100% w3c konform.

Daher wenn deine Seite in IE-10 super angezeigt wird muss das noch lange nicht in einer älteren Version oder gar in einem anderen Browser der Fall sein.

Cu Stefan

#3

Hallo Stefan,

dake für Deine Antwort.

du bist nicht der Einzige der hier Fragen stellt.

das weiß ich, aber es war mir etwas unangenehm, daß ich nun schon die 3. Frage stellte, die direkt in Reihe zu den vorherigen Fragen kam.

Aber es ist immer nett, wenn zumindest ein Link mit dabei
wäre. So erspart man sich das Rätzel raten.

das hätte ich gern gemacht, wußte aber nicht, wie, denn es wäre ja nicht nur 1 Datei gewesen, sondern mehrere, die miteinander verknüpft sind. Eine Webspace steht mir im Moment dafür nicht zur Verfügung.

ich gehe mal davon aus, das diene Verschachtelungen ein Menu
werden sollen ! Und das ist eine Liste von Links daher
versuche mal
und - ansonsten so es am „Layoutstrom“ liegt, hat
es vielleicht mit float und clear zu tun.

Den Artikel habe ich mir angesehen, danke für den Link. Da muß ich in Ruhe ran, weil ich das erst mal verstehen muß.

Ansonsten liegt es bestimmt 5000 prozentig an:

unter Win 7 (64bit) mit HTML/CSS

„bei Win 12 (256bit) kann sowas nicht passieren“ :o) es hat
nichts (fast nichts, um hier die heitern Diskussionen zu
unterbinden) mit dem Betriebssystem zu tun sondern mit dem
Browser (Internet-Explorer der verschiedenen Versionen, Opera,
Firefox, Chrom und …) interpretieren css und html nicht
immer gleich. UND schon gar nicht 100% w3c konform.

Daher wenn deine Seite in IE-10 super angezeigt wird muss das
noch lange nicht in einer älteren Version oder gar in einem
anderen Browser der Fall sein.

Ich schaue mir die Ergebnisse meiner Arbeit immer mit Seamonkey bzw. Firefox, IE-10 und IE-8 an. Mehr Auswahl habe ich da nicht.

Cu Stefan

trotzdem Danke für Deine Zeilen

Gruß
Pauli

#4

Moin,

das weiß ich, aber es war mir etwas unangenehm, daß ich nun
schon die 3. Frage stellte, die direkt in Reihe zu den
vorherigen Fragen kam.

Quatsch. Dafür ist das Forum doch da!
Nur immer vor CSS die Perfektion in HTML erlangen… :wink:

Aber es ist immer nett, wenn zumindest ein Link mit dabei
wäre. So erspart man sich das Rätzel raten.

Eine Webspace steht mir im Moment
dafür nicht zur Verfügung.

Dann solltest Du das unbedingt ändern! Für solche Zwecke reicht auch kostenloser Webspace, der halt das können muss, was Du verwendest (ich ziele auf PHP an, falls Du das schon benötigst). Arcor bietet wohl kostnlosen Webspace mit serverseitigem Scripting an.

Also besorge Dir Webspace und stelle Deine Testseiten da online, wenn Du eine qualifizierte Antwort haben möchtest.

Ich schaue mir die Ergebnisse meiner Arbeit immer mit
Seamonkey bzw. Firefox, IE-10 und IE-8 an. Mehr Auswahl habe
ich da nicht.

Nicht, dass das im jetztigen Stadium nicht ausreichen würde, aber dass Du nicht mehr Auswahl hast, liegt ja wohl an Dir. Einfach mehr Browser installieren. Ganz nett wäre auch, mal Lynx zu installieren, damit man weiß, wie so ein Textbrowser funktioniert.

Liebe Grüße,
-Efchen

#5

Hallo,

danke, Efchen, für Deine Antwort. Ich habe meine bisherigen Ergebnisse unter

http://www.gesundheitsforum-wedemark.de/testhomepage…

abgelegt. Mein Ziel ist es, daß die Darstellung, egal wie breit der Bildschirm ist, stets gleich groß ist und je nach Bildschirm das seitliche Graufeld größer oder kleiner wird. Dazu habe ich die gesamte Darstellung in die Box „htpst“ gepackt. Um diese Box nicht zu verlassen, habe ich position absolut nicht verwendet.

Mein Problem ist, daß das Bild wegspringt, wenn ich die Buttons „Termine“ oder „Infos“ überfahre. Die Links der Buttons habe ich zunächst gestrichen.

Gruß
Pauli

#6

Moin,

Mein Ziel ist es, daß die Darstellung, egal wie
breit der Bildschirm ist, stets gleich groß ist und je nach
Bildschirm das seitliche Graufeld größer oder kleiner wird.

Es wäre dumm, das von der Größe des Bildschirms abhängig zu machen, denn:

  1. Die Bildschirmgröße kennt nur JavaScript (CSS hat keine Ahnung, wie groß der Bildschirm ist)
  2. Wenn das Fenster und insbesondere der Viewport des Browsers kleiner ist, als der Bildschirm, dann würden die Inhalte doch aus dem Browserfenster rausragen - wie sähe das denn aus?

Mein Ziel ist es, daß die Darstellung, egal wie
breit der Bildschirm ist, stets gleich groß ist

Warum hast Du der Seite dann eine feste Breite und feste Höhe gegeben?

Dazu habe ich die gesamte Darstellung in die Box „htpst“
gepackt. Um diese Box nicht zu verlassen, habe ich position
absolut nicht verwendet.

Besteht ja auch kein Grund dafür, hier position zu verwenden.

Mein Problem ist, daß das Bild wegspringt, wenn ich die
Buttons „Termine“ oder „Infos“ überfahre. Die Links der
Buttons habe ich zunächst gestrichen.

Auf jeden Fall sehe ich da schonmal eine Kombination von float und position. Das geht nicht - entweder oder. Also float.

Dass das Bild verrutscht, hat auf jeden Fall etwas damit zu tun, dass unter diesen beiden Menüpunkten noch weitere Menüpunkte folgen, die ausgeklappt werden.

Deine ul in zweiter Ebene ist relativ positioniert. Du musst sie absolut positionieren, damit sie aus dem Textfluss genommen wird, um das Bild nicht zu verschieben. Dann muss natürlich auch das left:0 raus, denn Du willst das ja nicht an den linken Rand, sondern an die aktuelle Position.

Das war schon alles :smile:

Übrigens solltest Du Schriftgröße nicht in px vorgeben, ältere Browser (IE6 z.B.) verbieten mit der Einheit das Skalieren des Textes. Fließtext sollte immer in der Größe 1em sein, denn das ist die Größe, die der Nutzer für sich als optimal eingestellt hat. Alle anderen Schriftgrößen kann man daran ausrichten, 1.1em für etwas größer, 0.9em für kleiner. Wobei man bei kleinerer Schrift aufpassen sollte, dass das dann u.U. für den Nutzer unlesbar wird. Weniger als 0.9em würde ich nur für das berühmte „Kleingedruckte“ nehmen - wenn überhaupt.

Liebe Grüße,
-Efchen

1 Like
#7

Hallo Efchen,

danke für Deine Hinweise, damit komme ich zunächst erst mal weiter. Bei der Sache mit den Navigationstasten habe ich mich sehr am Beispiel von Selfhtml orientiert und erst anschließend verstanden, warum das alles so geschrieben wurde. Durch Ändern des Scripts habe ich die Auswirkungen gesehen und daran den Sinn des Textes verstanden. Auf die absolute Positionierung der Buttons der 2. Ebene wäre ich ohne Deinen Hinweis nicht gekommen. Danke nochmal.

Gruß
Pauli

#8

Moin,

probiers mal damit: http://frankie-go.de/html-css.html#drop

Grüße
Egbert

#9

Moin,

probiers mal damit: http://frankie-go.de/html-css.html#drop

Ein Menü ohne Liste ist aber semantisch gesehen kein Menü mehr - davon sollte man die Finger lassen, das ist Unsinn.

Liebe Grüße,
-Efchen

P.S.: Es gibt genug funktionierende Lösungen für Dropdownmenüs mit Listen, warum sollte man das anders machen wollen?