nicht angemeldet
Text neben Grafik positionieren
Der erste Absatz soll mit Hilfe von CSS neben der Grafik positioniert werden. Außerdem soll dafür gesorgt werden, das unabhängig von der Länge des Textes dieser immer vertikal zentriert zur Grafik erscheint. der nächste Absatz soll wieder unter der Grafik angezeigt werden. Wie löse ich das am besten? Ist es überhaupt semantisch korrekt die Beschreibung des Bildes als Absatz auszuweisen?
<div id="inhalt">
<img id="grafik" src="images/grafik.jpg">
<p>
Text der neben der Grafik angezeigt wird. Er soll immer vertikal zentriert zur Grafik dargestellt werden, auch wenn die Länge des Textes geändert wird.
</p>
<p>
nächster Absatz der unter der Grafik weitergeht.
</p>
</div>
-
Ist es überhaupt semantisch korrekt die Beschreibung des Bildes als Absatz auszuweisen?
ja - du solltest aber das bild und die beschreibung des bildes mit einem dafür vorgesehenen element gruppieren - sonst wird dein vorhaben sehr sehr schwierig
-
Was das eigentliche CSS-Layout angeht, dass hab ich mittlerweile ganz gut verstanden. Meine Seite hat jetzt so eine ähnliche Grobstruktur:
<body> <h1 id="header">Überschrift im Header</h1> <div id="inhalt"> </div> <ul id="navigation"> <li><a href="#">Menü 1</a></li> <li><a href="#">Menü 2</a></li> <li><a href="#">Menü 3</a></li> </ul> <address id="footer">© Adresse</address> </body>Hab die verschiedenen Komponenten mit CSS entsprechend ausgerichtet. Hab sie auch grafisch hinterlegt, so das ich in den verschiedenen Browsern besser testen kann. Das passt so weit.
Der nächste Schritt wäre den DIV-Container mit Inhalt zu versorgen z.B. Absätze, Bilder, Listen usw. Was ich semantisch wie auszeichnen muß hab ich denke ich auch so halbwegs verstanden. Womit ich allerdings Probleme habe ist ist die richtige grafische Formatierung der Elemente im DIV-Container inhalt. Ich weiss nicht so wirklich wie ich da am besten systematisch vorgehe, so das meine CSS-Code übersichtlich und sauber bleibt.
Habt ihr vielleicht einen guten Link parat, der erläutert wie die Sachen "innen drin" richtig formatiert werden. Ich wüßte gerne wie ich dabei systematisch vorgehen kann?
-
Habt ihr vielleicht einen guten Link parat, der erläutert wie die Sachen "innen drin" richtig formatiert werden. Ich wüßte gerne wie ich dabei systematisch vorgehen kann?
einen ala-artikel hab ich immer im ärmel:
http://www.alistapart.com/articles/settingtypeontheweb
-
-
Du schreibst:
du solltest aber das bild und die beschreibung des bildes mit einem dafür vorgesehenen element gruppieren
Du meinst mit einem DIV-Container? Vielleicht kannst du mir ein kleines Beispiel geben?
-
Du meinst mit einem DIV-Container? Vielleicht kannst du mir ein kleines Beispiel geben?
in diesem fall meine ich ein div-element, ja - es gibt auch ansätze mittels defintionslisten - davon bin ich aber nicht so begeistert
den ala-artikel hab ich dir schon verlinkt, da ist das genau so gemacht
-
Du hast nicht zufällig auch einen guten deutschen Artikel zu diesem Thema parat? ;-)
Falls nicht, werd ich mich wohl mit Hilfe von leodict durchwühlen müssen...
-
Du hast nicht zufällig auch einen guten deutschen Artikel zu diesem Thema parat? ;-)
ala artikel gibts irgendwo auch auf deutsch übersetzt - aber im endeffekt musst du dir nur die beispiele ansehen, das sollte doch ausreichen? ;)
mit strg+f nach "example" suchen
alternative: englisch lernen ist von großem vorteil
-
Hab mir das Beispiel angeschaut:
Rechts neben der Grafik "mugshot.jpg" steht der Text, so wie ich das bei mir auch gerne machen würde. Ich verstehe allerdings nicht so wirklich warum das klappt. Die Klasse ".callout left" kann ich im CSS nirgends finden. Die id "biopic" macht nichts außer einer Größenzuweisung. Kannst du mir sagen wo genau für den Effekt gesorgt wird, dass der Text rechts neben der Grafik steht?
<div class="column left"> ... <h2>Consectetur adipisicing elit</h2> <div class="callout left" id="biopic"> <img src="images/mugshot.jpg" height="144" width="98" /> <p>Lorem ipsum dolor sit amet consectetur.</p> </div> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam. </p> ... </div> -
alternative: englisch lernen ist von großem vorteil
Einer vom Volk, aus dem Wasser rufend: Ich kann nicht schwimmen.
Bademeister, am Beckenrand stehend: Schwimmen lernen ist von großem Vorteil!
scnr
cygnus--
Die Sache mit der Angel und dem ><o(((°> ? hat immer einen Haken ...-
Einer vom Volk, aus dem Wasser rufend: Ich kann nicht schwimmen.
Bademeister, am Beckenrand stehend: Schwimmen lernen ist von großem Vorteil!es gibt ja auch rettungsringe
-
-
So hab jetzt nochmal genauer geschaut. Das Grundprinzip ist mir jetzt klar.
<head> <style type="text/css" media="screen"> .left { float: left; margin: 0 18px 18px 0; } </style> </head> <body> <div class="callout left"> <img src="example-Dateien/mugshot.jpg" width="98" height="144"> </div> <p>Text neben dem Bild.</p> </body>Trotzdem noch zwei Fragen:
1.)
Warum wird "class="callout left"" statt einfach nur "class="left"" verwendet? Was soll der Präfix "callout" bzw. warum funktioniert das Ansprechen von .left damit überhaupt?2.)
Diese Frage geht speziell an suit. Du hast eben folgendes geschrieben:"du solltest aber das bild und die beschreibung des bildes mit einem dafür vorgesehenen element gruppieren"
Nun sehe ich aber keine Gruppierung. Der Text der sich neben dem Bild befindet ist doch nicht zusammen mit dem Bild in einem DIV-Container und trotzdem funktioniert es.
-
1.)
Warum wird "class="callout left"" statt einfach nur "class="left"" verwendet? Was soll der Präfix "callout" bzw. warum funktioniert das Ansprechen von .left damit überhaupt?mehrere klassen kann man durch leerzeichen getrennt angeben - oft ist es sinnvoll, dies zu tun - callout kennzeichnet dieses freigestellte dingens - left oder right bestimmt nur noch wo das drin raushängt (links oder rechts)
in diesem fall sind die klassen "left" oder "right" sogar sinnvoll gewählt
Nun sehe ich aber keine Gruppierung. Der Text der sich neben dem Bild befindet ist doch nicht zusammen mit dem Bild in einem DIV-Container und trotzdem funktioniert es.
mit dem gruppieren meinte ich bild und zugehörige beschreibung - der fliesstext neben dem bild fliesst sowieso herum (durch float)
-
Hi,
in diesem fall sind die klassen "left" oder "right" sogar sinnvoll gewählt
Sie beziehen sich genauso auf die aktuell gewuenschte Darstellung, wie "rot" oder "fett" dies in den allermeisten Faellen tun.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Sie beziehen sich genauso auf die aktuell gewuenschte Darstellung, wie "rot" oder "fett" dies in den allermeisten Faellen tun.
richtig, diese können aber von einem cms oder redaktionssystem erstellt werden wo der benutzer im begrenzen maß bestimmen kann ob das bild links oder rechts im textfluss ist
sinnigerweise könnte man die dinger aber auch "stil1" und "stil2" nenne - imho ist aber left/right für diesen einen zweck durchaus geeignet
-
-
-
-
-
-
-
-