Aufbau so korrekt? Wenn ja: Wie mit CSS lösen?

1chris · #1 (**permalink**) 21.11.2012, 10:08

Hey ho Forum

scheinbar bin ich etwas eingerostet. Ich bastel gerade an einer Webseite mit HTML5 und CSS3. Ich bin der Meinung, dass mein HTML ansich richtig ist. Allerdings scheitere ich momentan an der Formatierung - ich musste das erste mal seit Jahren eine Table einsetzen wo sie nichts zu suchen hat

Deshalb habe ich 2 Fragen an euch:
- Ist mein HTML Aufbau so richtig?
- Wie kann ich es ohne Table so stylen, wie es momentan aussieht.

Ziel ist es, dass ich 2 Elemente mit unbekannter Breite und Höhe (Störer-Bild und 1 Headline bzw optional 2 Headlines) nebeneinander anzeigen kann. Dabei ist nur die Breite des Elternelements fest, dass Bild darf so breit werden wie es möchte und entsprechend schmall und hoch wird der Headlineplatz.

Sieht man am besten im Testcase

Edit this Fiddle - jsFiddle

Vermutlich stehe ich gerade nur voll auf dem Schlauch...

Danke und Gruß
Chris

lolDog · #2 (**permalink**) 22.11.2012, 00:46

Du hast 1 div dem gibst du die breit x. in dieses div packst du 2 weitere divs rein. die inneren divs haben jeweils float: left;. sollte das erste innere div nicht breiter werden als das eltern div hast du doch genau den effekt, den du haben willst. oder irre ich mich gerade...?

1chris · #3 (**permalink**) 22.11.2012, 12:11

Aber nur solange, wie das rechte Div mit den Headlines nicht mehr als eine Zeile benötigt. Ein theoretisch Gefrickeles mit min und max width wollte ich vermeiden - falls am Ende mal 90% Bild und nur 10% (extem hoher) Text dabei rauskommen, dann ist es halt so.

So wäre es sogar noch möglich den Text ganz wegzulassen und nur ein Bild zu verwenden. (Ob eine Headline in Bildform nun sinnvoll ist oder nicht, mal ausen vor gelassen)

lolDog · #4 (**permalink**) 22.11.2012, 12:32

Ja die einfachen Sachen sind doch ab und an so kompliziert

Ich habe nun hier aufgegeben, wobei das auch wieder sehr dahin gefummelt wäre hätte es denn funktionniert

Edit this Fiddle - jsFiddle
Eine andere Möglichkeit wäre, sollte man es mit css wirklich nicht hinbekommen, dass du ausliest wie breit das Bild ist, das kannst du ja, solltest du php benutzten, mit der Methode PHP: getimagesize - Manual machen und dann in deinem Template ausrechnest wie breit der Text sein darf und mit "style="width: xxx px;" die Breite setzt.

Und ja, das sollte nur der weg sein, sollte es mit css nicht gehen, aber da fällt mir auch gerade nichts zu ein. Der herbeigerufene Kollege eben meinte zu dem Problem nur nach dem er 1 Minute gedacht hat: "Wer macht denn so ein Layout mit variablen Bildern." und ist wieder gegangen...

1chris · #5 (**permalink**) 27.11.2012, 14:18

Hmm niemand mehr eine Idee, es kann doch eigentlich nicht sein, dass ich heutzutage noch für Design wirklich auf eine Table zurückgreifen muss

Stehe selbst noch auf dem Schlauch, dass kommende Flow Box Model mag vlt Abhilfe schaffen aber bis dahin vergeht sicherlich noch etwas Zeit...

fricca · #6 (**permalink**) 27.11.2012, 14:33

Zitat:

Zitat von 1chris

Hmm niemand mehr eine Idee, es kann doch eigentlich nicht sein, dass ich heutzutage noch für Design wirklich auf eine Table zurückgreifen muss

Nein, muss man nicht. Man kann die Darstellungseigenschaften von Tabellenelementen auf semantisch sinnvolles HTML anwenden. Informier dich über die entsprechenden Werte der display-Eigenschaft.

jsfiddle lädt bei mir zur Zeit nicht. Poste bitte einen "richtigen" Link.

1chris · #7 (**permalink**) 27.11.2012, 15:24

Das macht das HTML ansich ja auch nicht sinnvoller, wenn ich halt für jedes Tabellenelement einfach ein div mache. Und solche unnötigen Designelemente machen den Code sematisch ja auch nicht besser

Aus meiner Sicht wäre das beides gleich falsch oder gibt es in der Praxis schon Fälle, wo es einen Unterschied macht?

fricca · #8 (**permalink**) 27.11.2012, 15:26

Zitat:

Zitat von 1chris

Das macht das HTML ansich ja auch nicht sinnvoller, wenn ich halt für jedes Tabellenelement einfach ein div mache.

Davon hat niemand etwas gesagt.
Du sollst die gewünschten Darstellungseigenschaften auf die Elemente anwenden, die du brauchst, um deinen Inhalt semantisch sinnvoll auszuzeichnen.

Ich habe keine Ahnung, was du machen willst -- denn ich sehe das Fiddle nicht!

1chris · #9 (**permalink**) 28.11.2012, 13:51

Dann hier der Code + inline css:

Breite von .titleArea ist immer gleich.
Der Headlinestörer ist optional und kann beliebig hoch und breit sein.
Auch der Text beider Headlines kann beliebig lang sein.

HTML-Code:

<div class="titleArea" style="width:350px;">
                            <table>
                                <tr>
                                    <td>
                                        <img src="" alt="Headline-Störer" style="background:#CCC;width:100px;height:50px;text-align:center;line-height:50px;display:block;" />
                                    </td>
                                    <td>
                                        <hgroup>
                                            <h3>
                                                Sehr lange Headline die über mehrere Zeilen geht. (jaa sehr lang....)
                                            </h3>
                                            <h4>
                                                Subheadline...
                                            </h4>
                                        </hgroup>
                                    </td>
                                </tr>
                            </table>
                        </div>

fricca · #10 (**permalink**) 28.11.2012, 14:10

Das ist kein semantisch sinnvolles Markup, sondern ein Codefragment mit Tabellenmissbrauch.
Nochmal: Wende die Darstellungeigenschaften von Tabellenelementen auf die Elemente an, die du sinnvollerweise brauchst, um deinen Inhalt auszuzeichnen.
Sehr wahrscheinlich musst du dafür das img-Element mit einem weiteren Element umgeben.

Ob auch andere Lösungen möglich sind lässt sich an solchen Fragmenten nicht besprechen. Man muss den Gesamtzusammenhang kennen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Aufbau meines CSS Codes...	Dima	CSS	13	07.01.2012 14:01
DIV lässt sich nicht zentrieren.	densi	CSS	10	09.07.2011 18:18
IE und Firefox - CSS nicht korrekt	wolf1985	CSS	5	29.04.2008 12:07
CSS Buchtipp Eric A. Meyer	vistahr	Ressourcen	2	01.11.2006 18:53
Cellpadding & Cellspacing in CSS - korrekt oder nicht?	Boris	CSS	6	26.04.2005 15:25