Rss Feeds
0 Flytande citat som i veckotidningar

Flytande citat som i veckotidningar

, ,

I många magasin och tidningar brukar det finnas citat som flyter inuti ett textstycke. Detta guide visar dig steg för steg hur du kan lägga in citat i din text med hjälp av CSS och HTML-taggen blockquote.

Exempel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros dui, blandit in eleifend in, feugiat ac est. Aenean aliquet neque eget urna mattis porttitor.

Ett citat som flyter till höger

Aliquam mi mauris, tincidunt nec rhoncus sit amet, euismod ut metus. Sed et lectus lacus, ut iaculis purus. Fusce pharetra sollicitudin porttitor. Aliquam hendrerit pellentesque ullamcorper. Mauris nec arcu ligula.

Gör så här:

Börja med att skriva lite text mellan två HTML blockquote taggar.

HTML

<blockquote>Lorem ipsum dolor sit amet
 consectetur adipiscing elit.</blockquote>

Lägg sedan till dessa CSS regler till din stilmall.

CSS

blockquote {
   float:right;
   font-size:130%;
   font-style:italic;
   margin:10px 15px;
   width: 30%;
}

I exemplet ovan anges att citatet ska flyta till höger och uppta 30%  av spaltens fulla bredd.Texten kommer att visas med 16 pixlars storlek och vara kursiv. Texten kommer också att ha en margin, dvs. en tomt område på alla fyra sidor på 10 pixlar.

Läs mer om hur CSS skrivs i vår CSS skola.

Dela

| Mer

Kommentarer

O kommentarer för " Flytande citat som i veckotidningar" Kommentera nu!

Lämna en kommentar!

Lämna en kommentar

Namn* Epost* Blogg / Webbsida
Liknande artiklar
2

Genomskinliga bilder med CSS

Med CSS är det möjligt att ge bilder olika grad av genomskinlighet. Det kan vara en en användbar effekt om man exempelvis vill ge fokus åt vissa bilder i ett bildgalleri. Den här guiden visar hur man ...

3

Runda hörn med css

Det finns en rad olika tekniker för att skapa runda hörn med hjälp av css. Här är ett av de enklaste sätten att skapa runda hörn på en box. Metoden använder sig av fyra div taggar, några få rader cssk...