print.css

0

0664jester

Mitglied
hallo,

ich erstelle im moment eine print.css bei einer responsive website, die noch nicht online ist.


Aufbau der HP ist so gedach, dass diese Elemente untereinander stehen.
1.Header
2.Stories
3.Footer





die figure caption ist nicht unter den bildern. ich finde sie gar nicht :S
das ist glaube ich ein credit span. anschliessend wuerde ich sie in eckige klammern setzen.

lg
 
Zuletzt bearbeitet:
HTML: 
<article class="special">
<h1 class="special-title">Subscription!</h1>
<figure>
<img src="graphics/4weeks.svg" alt="Graphic:  free trial."/>
<figcaption>
<p class="caption"> Read  weeks for free. </p>
</figcaption>
</figure>

Wie spreche ich die figcaption in css an.?
 
Zuletzt bearbeitet:
Hallo,
bitte verwende in Zukunft Codeblocks für deinen Quellcode und wir haben einen Editierbutton unter den Beiträgen. Damit kannst du deinen Beitrag nachträglich korrigieren.

So zu deiner Frage, HTML-Elemente lassen sich in CSS auch direkt ansprechen.
CSS: 
figcaption {
...
}
Besser wäre es aber eine Klasse zu verwenden da du somit eine Trennung von Darstellung und Layout bekommst. Wenn du jedoch das HTML-Element direkt ansprichst kannst du das Template/HTML-Konstrukt deriner Webseite immer nur in Kombination zur CSS ändern und das entspricht nicht so ganz aktueller Coding Paradigmen.

Grüße
 
Code: 
figcaption:before {content:"[";}
figcaption:after {content:"]";}     
figcaption{
font-size: 8pt;    
text-align:bottom;
}


ich habe jetzt mehrmals versucht, aber ohne erfolg.
der steht ganz links in der zeile und nicht unter dem bild.


die klammern passen auch nicht.
[
blabablabablalblabla so sieht es aus im moment
]


die figurecaption soll 9pt sein
und der span.credit soll 8pt haben, der mit eckige klammern eingeschlossen wird.
 
Zuletzt bearbeitet:
Hi,
als erstes, bitte verwende die Groß- und Kleinschreibung in deinen Antworten.
die figurecaption soll 9pt sein
Zum Vergrößern anklicken....
in deinem CSS steht 8pt.
In deinem HTML-Code vom Anfang sehe ich kein span.credit.
Um die eckigen Klammern in die gleiche Zeile zu bekommen musst du dein Paragraph auf
CSS: 
display:inline;
setzen.
Das p-Element ist von Hause aus ein Blockelement und erzeugt einen Zeilenumbruch.

http://jsbin.com/eJIjOMEy/2/edit

Viele Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück