|
|||
Aufbau so korrekt? Wenn ja: Wie mit CSS lösen?
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 |
Sponsored Links |
|
|||
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...?
|
Sponsored Links |
|
|||
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) |
|
|||
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... |
|
|||
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... |
|
|||
Zitat:
jsfiddle lädt bei mir zur Zeit nicht. Poste bitte einen "richtigen" Link.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
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? |
|
|||
Zitat:
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!
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
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> |
Sponsored Links |
|
|||
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.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|
Ä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 |