Webbdesign direkt » Blockquote http://www.webbdesigndirekt.se - blogg om webbdesign och programmering Sat, 12 Jun 2010 21:52:03 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Flytande citat som i veckotidningar http://www.webbdesigndirekt.se/flytande-citat-som-i-veckotidningar/ http://www.webbdesigndirekt.se/flytande-citat-som-i-veckotidningar/#comments Sat, 12 Dec 2009 13:46:18 +0000 Mattias http://www.webbdesigndirekt.se/?p=1346 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.

]]> http://www.webbdesigndirekt.se/flytande-citat-som-i-veckotidningar/feed/ 0