zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Aufbau so korrekt? Wenn ja: Wie mit CSS lösen?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.11.2012, 10:08
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.10.2009
Beiträge: 176
1chris befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.11.2012, 00:46
Benutzer
neuer user
 
Registriert seit: 24.07.2011
Beiträge: 83
lolDog befindet sich auf einem aufstrebenden Ast
Standard

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...?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.11.2012, 12:11
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.10.2009
Beiträge: 176
1chris befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #4 (permalink)  
Alt 22.11.2012, 12:32
Benutzer
neuer user
 
Registriert seit: 24.07.2011
Beiträge: 83
lolDog befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
  #5 (permalink)  
Alt 27.11.2012, 14:18
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.10.2009
Beiträge: 176
1chris befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
  #6 (permalink)  
Alt 27.11.2012, 14:33
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von 1chris Beitrag anzeigen
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.
Mit Zitat antworten
  #7 (permalink)  
Alt 27.11.2012, 15:24
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.10.2009
Beiträge: 176
1chris befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #8 (permalink)  
Alt 27.11.2012, 15:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von 1chris Beitrag anzeigen
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!
Mit Zitat antworten
  #9 (permalink)  
Alt 28.11.2012, 13:51
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.10.2009
Beiträge: 176
1chris befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 28.11.2012, 14:10
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:23 Uhr.