Boxen ausrichten

[Cujo]

Hallo,

könnt ihr euch bitte mal meine Startseite ansehen:

Rätsel + Denksport



Ich würde gerne die unterste Box genauso breit machen wie die beiden obersten Boxen zusammen. Die beiden oberen Boxen haben beide folgenden Code:

<table style="width:250px; height:350px; background-image:url(images/neu.png); margin: 0 auto" border="0" cellspacing="0" cellpadding="0">

Die beiden Boxen haben also eine Breite von 250 Pixel. Jetzt müsste ich die Größe des Zwischenraums wissen, damit ich die unterste Box genauso breit machen kann wie die beiden obersten Boxen zusammen, also 500 Pixel + x.

Dann noch eine zweite Frage:

Wieso ist der Schriftzug der linken Box "Die 10 neuesten Rätsel" eine Zeile höher als der Schriftzug der rechten Box "Die 5 aktuellsten Foreneinträge"? Beide Boxen haben wie gesagt den gleichen Tabelleneintrag und es gibt keinen zusätzlichen Zeilenumbruch.

 

[Efchen]

Um die Box so groß zu machen, wie die zwei darüber gibst Du ihr im Zweifelsfall einfach die Summe der Größen der beiden anderen Boxen. Oder aber Du gruppierst sie mit dem Gruppierungs-Tag <div>, dann können die beiden Boxen oben je 50% der Breite einnehmen, und die Box untern 100%. Dann passts auch.

Aber für was ist die Tabelle?
Wieso zeichnest Du Überschriften als wichtige Textpassagen aus und nicht als Überschrift?
Dein Code ist ziemlich unübersichtlich, teilweise altmodisch, semantisch nicht korrekt und keine Trennung von Inhalt und Layout. Eine sauberere Arbeitsweise würde Dir die Arbeit erleichtern.

 

[Cujo]

Um die Box so groß zu machen, wie die zwei darüber gibst Du ihr im Zweifelsfall einfach die Summe der Größen der beiden anderen Boxen. Oder aber Du gruppierst sie mit dem Gruppierungs-Tag <div>, dann können die beiden Boxen oben je 50% der Breite einnehmen, und die Box untern 100%.

Die 3 Boxen haben jeweils ein Gif als Hintergrund. Die beiden obersten gifs haben eine Breite von 250 px. Das untere gif hat zur Zeit eine Breite von 550 px. Die Frage ist jetzt, wie breit muss ich das untere gif machen, damit es so breit wird wie die beiden oberen zusammen (inkl. Zwischenraum)?

Aber für was ist die Tabelle?

Wie kann ich es ohne Tabelle machen?

Wieso zeichnest Du Überschriften als wichtige Textpassagen aus und nicht als Überschrift?

Weil mit <caption> die Überschrift über der Tabelle steht. Ich hätte sie aber gerne in der Tabelle.

Dein Code ist ziemlich unübersichtlich, teilweise altmodisch, semantisch nicht korrekt und keine Trennung von Inhalt und Layout. Eine sauberere Arbeitsweise würde Dir die Arbeit erleichtern.

Der Code ist valide. Ansonsten sag mir, wie ich es besser machen kann. Ich bin für jede Anregung dankbar :-)

 

[Efchen]

Die 3 Boxen haben jeweils ein Gif als Hintergrund. Die beiden obersten gifs haben eine Breite von 250 px. Das untere gif hat zur Zeit eine Breite von 550 px. Die Frage ist jetzt, wie breit muss ich das untere gif machen, damit es so breit wird wie die beiden oberen zusammen (inkl. Zwischenraum)?

250 * 2 + Breite des Zwischenraumes.

Übrigens ist das mit Bildern als Hintergrundgrafik eher ungünstig...vergrößer mal Deine Schrift im Browser ein wenig, dann wirst Du merken, was ich meine :-)

Wie kann ich es ohne Tabelle machen?

Was meinst Du mit "wie"? Lass die Tabelle weg, damit zeichnet man tabellarische Daten aus. Such Dir Tags, die Deinen Inhalt richtig beschreiben.

Weil mit <caption> die Überschrift über der Tabelle steht. Ich hätte sie aber gerne in der Tabelle.

Du hast doch gar keine tabellarischen Daten, warum willst Du dann eine Tabelle haben? Überschriften macht man mit <h1> bis <h6>, die Ordnungen logisch verteilt über die Seite.

Der Code ist valide.

Validität ist auch was anderes als Semantik.

Ansonsten sag mir, wie ich es besser machen kann.

Mit HTML wie HTML gedacht ist. Logische Auszeichnung Deines Inhalts, das bedeutet Du sollst dem Inhalt eine Bedeutung geben. Textpassagen kriegen <p>, wichtige Abschnitte <em>, ganz wichtige <strong>, tabellarische Daten kennzeichnet man als <table>, Adressen mit <address>, Listen (we z.B. ein Menü) mit <ul> (oder <ol> oder <dl>, je nach Anwendung) und mehrere Elemente gruppieren kann man mit <div>.

Gruß,
-Efchen

 

[Cujo]

250 * 2 + Breite des Zwischenraumes.

Womit wir wieder bei der Frage wären, wegen der ich den Thread eröffnet habe:

Wie finde ich raus, wie groß der Zwischenraum ist?

Übrigens ist das mit Bildern als Hintergrundgrafik eher ungünstig...vergrößer mal Deine Schrift im Browser ein wenig, dann wirst Du merken, was ich meine :-)

Wobei es da natürlich auch auf die Browsereinstellungen ankommt. Wenn ich beim FF 3.05 die Einstellung "Nur Text zoomen" wähle, geht die Schrift über den Rand hinaus. Wenn ich das ausschalte, vergrößern sich Schrift und Box gleichmäßig.

Aber generell hast du natürlich Recht. Zumal ich ohne Hintergrundgrafik wohl auch nicht das Problem mit der Boxengröße hätte.

Ich werde mal mit der Designerin reden, die die Boxen gemacht hat. Vielleicht kriegt sie es ja auch ohne Hintergrundgrafik hin

 

[Efchen]

Das muss ich überlesen haben ;-)
Gib dem Zwischenraum einfach eine von Dir festgelegte Größe. Dann weißt Du es. Wenn Du keine Größe explizit festlegst, kann die Größe sonstwas sein. Vermutlich würde man den Abstand per JavaScript ermitteln können, aber davon würde ich abraten.

 

[Cujo]

So, ich habe jetzt bei der linken Box ein "margin 0 50 0 0" gesetzt und das "margin 0 auto" bei der rechten und bei der unteren Box rausgenommen. Damit weiß ich jetzt, dass der Zwischenraum 50 Pixel beträgt. Die Breite der unteren Box beträgt 550 Pixel. Rein rechnerisch paßt es also jetzt.

Aber wie schaffe ich es jetzt, dass die untere Box bündig zu den beiden oberen Boxen ist? Ich habe die 3 Boxen in ein <div> gesetzt, aber das hat nix gebracht.

 

[Efchen]

Ich habe die 3 Boxen in ein <div> gesetzt, aber das hat nix gebracht.

Natürlich nicht. Das Teil darf dann ja auch nur so breit sein, wie die zwei oberen Boxen inkl. Abstand. Aber wenn Du Dir Dein div anschaust, ist das viel breiter und liegt noch unterhalb Deines weiblichen Fragezeichens.
Dein div hat keine Größe, erstreckt sich also - wie alle Block-Elemente ohne Angabe einer Breite - über 100%.

 

[Cujo]

Ich habe in das div jetzt die benötigte Breite von 550 eingebaut:

<div style="width:550px">

Dann sieht es so aus:



So richtig gefällt mir das noch nicht :?

 

[Cujo]

Hat sich erledigt. Meine Designerin ist mir zu Hilfe geeilt. Jetzt sieht es perfekt aus :mrgreen:

Trotzdem vielen Dank für die Geduld, die du mit mir hattest, efchen.

 

[Efchen]

Jetzt sieht es perfekt aus

Dann hast Du ein seltsames Verständnis von "perfekt". Denn bei mir ist die untere Box breiter als die beiden oben inkl. Abstand zusammen. Daher sieht man den rechten Rahmen der unteren Box nicht.

Und das Problem mit der Schriftvergrößerung und der daraus resultierenden Wiederholung der Hintergrundgrafik bestehen weiterhin.

 

[Cujo]

Dann hast Du ein seltsames Verständnis von "perfekt". Denn bei mir ist die untere Box breiter als die beiden oben inkl. Abstand zusammen. Daher sieht man den rechten Rahmen der unteren Box nicht.

Das gleiche Problem hatten meine Designerin und ich gestern auch. Lösch mal deinen Cache, dann wird es richtig angezeigt :mrgreen:

Wir haben die Hintergrundgrafik gegen eine schmälere Version ausgetauscht. Und da du dir die Seite gestern schon mal angeschaut hast, hast du noch die alte Version im Cache.

Und das Problem mit der Schriftvergrößerung und der daraus resultierenden Wiederholung der Hintergrundgrafik bestehen weiterhin.

Das eilt nicht. Ich habe es gerade nochmal ausprobiert. In der Standardeinstellung von FF 3 und IE 7 funktioniert der Zoom einwandfrei.

 

[Efchen]

Lösch mal deinen Cache

Einverstanden :-)

Das eilt nicht. Ich habe es gerade nochmal ausprobiert. In der Standardeinstellung von FF 3 und IE 7 funktioniert der Zoom einwandfrei.

Nichts, was ich sage, wird Dich umstimmen, aber denk mal drüber nach, wie kurzsichtig diese Einstellung ist. Und wie unfair gegenüber Menschen, die mit der "Standardeinstellung" von Dir ausgewählter, spezieller Browser, nichts anfangen können.

Ich will damit jetzt eigentlich nur erreichen, dass mehr Webmaster darüber nachdenken, was sie eigentlich tun, wenn sie eine Website erstellen. Die meisten denken nämlich nicht mal annähernd weit genug. Egal ob aus böser Absicht oder Unwissen.

Und schmeiß endlich Deine Tabellen raus! ;-)

Weiterhin viel Erfolg und bis zur nächsten Frage,
-Efchen

 

[Cujo]

Nichts, was ich sage, wird Dich umstimmen

Doch, es gibt was, was mich umstimmen könnte. Schreib mir den CSS-Code für eine hellblaue Box mit dunkelblauem Rahmen, Schatten und abgerundeten Ecken (ohne Hintergrundgrafik natürlich). Dann baue ich ihn gerne ein :mrgreen:

Und wie unfair gegenüber Menschen, die mit der "Standardeinstellung" von Dir ausgewählter, spezieller Browser, nichts anfangen können.

Es ist nicht so, dass mir das Thema Barrierefreiheit völlig egal wäre. Nur ist es bei mir halt so, dass meine Seite vom Thema her schon gar nicht barrierefrei sein kann. Ein Blinder kann mit Bilder-, Streichholz- und Fotorätseln nichts anfangen, egal, wie barrierefrei ich sie darstelle. Das gleiche gilt z. B. auch für die Sudokus, die wohl auch niemand im Kopf lösen kann, ohne sie zu sehen. Eigentlich kann ein sehbehinderter Mensch nur was mit den Geräuschrätseln, Texträtseln und vielleicht dem Quiz was anfangen.

Ich will damit jetzt eigentlich nur erreichen, dass mehr Webmaster darüber nachdenken, was sie eigentlich tun, wenn sie eine Website erstellen. Die meisten denken nämlich nicht mal annähernd weit genug. Egal ob aus böser Absicht oder Unwissen.

Das Problem ist, dass ich mich mit CSS noch nicht gut genug auskenne und dass sowohl meine Designerin als auch ich das in unserer Freizeit machen. Deswegen dauern manche Sachen halt etwas länger. Du hättest die Seite mal vor einem halben Jahr sehen sollen. Im Vergleich zu heute ist das ein Unterschied wie Tag und Nacht :mrgreen:

Und schmeiß endlich Deine Tabellen raus! ;-)

Wird gemacht. Irgendwann