ilj@flowsim.se
Stylesheets på svenska 9
Stylesheets - placera text och bilder

STYLESHEETS



 
position:absolute
left:10px
top:10px

 
Följande stylesheet, som är placerat någonstans mellan
HEAD -taggarna, bestämmer hur de åtta bilderna av röda cirklar och texten "STYLESHEETS" placerats.
OBS! Glöm inte att sätta ut enhet (px i exemplet nedan) när du placerar text och bilder med stilmallar! (Det fungerar i vissa webbläsare men skapar rent kaos i andra.)
 

<STYLE TYPE="
text/css ">
<!--

DIV.bild1 {position:absolute;left:30px;top:120px}
DIV.bild2 {position:absolute;left:100px;top:120px}
DIV.bild3 {position:absolute;left:160px;top:120px}
DIV.bild4 {position:absolute;left:210px;top:120px}
DIV.bild5 {position:absolute;left:260px;top:120px}
DIV.bild6 {position:absolute;left:300px;top:110px}
DIV.bild7 {position:absolute;left:330px;top:90px}
DIV.bild8 {position:absolute;left:355px;top:65px}
DIV.text1 {position:absolute;left:30px;top:127px}

-->
</STYLE>
 
Om det här stylesheetet finns på HTML-sidan och man placerar något mellan DIV-taggar av exempelvis klassen bild5 ...
 

<DIV CLASS="
bild5 ">
det som ska placeras
</DIV>

 
... så kommer det att hamna 260 pixel från vänsterkanten och 120 pixel från sidans övre kant enligt definitionen på stylesheetets rad 5.
 

 
Om man vill placera en bild på den plats som definierats på första raden, dvs 30 pixel (px) från vänsterkanten och 120 pixel från sidans övre kant, placerar man den mellan DIV -taggar av klassen bild1 , så här:
 

<DIV CLASS="
bild1 ">
<IMG SRC="
bildfil "
WIDTH="
pixel "
HEIGHT="
pixel ">
</DIV>

 

 
z-index
 
Texten "STYLESHEETS" ligger i det här exemplet delvis ovanpå bilderna eftersom texten placerats på sidan efter alla bilder. Det här kan man annars reglera med hjälp av
z-index . Följande stylesheet skulle till exempel placera bilden (rad 1) över texten (rad 2).
 
DIV.bild1 {position:absolute;left:30px;top:120px;z-index:1} DIV.text1 {position:absolute;left:30px;top:127px;z-index:0}
 
överst hamnar alltså den bild eller den text som placeras mellan DIV-taggar av den klass som fått högst
z-index .
 

 
Man kan ge en klass vilket namn man vill; så här kan första raden i exemplets stylesheet också se ut:
 
DIV.minbild {position:absolute;left:30px;top:120px}
 

 

 
Man kan också ange ett klassnamn utan att knyta det till någon särskild tagg. T ex
 
.hej {position:absolute;left:20px;top:25px}
 
Den här klassen kan man sedan använda från vilken tagg som helst.
 
<P CLASS=" hej "> placerar paragrafen på den definierade platsen.
 
<H1 CLASS=" hej "> RUBRIK </H1> placerar rubriken på den definierade platsen.
 

 
OBS!
I webbläsare där stylesheets inte fungerar ligger de 8 röda cirklarna och texten "STYLESHEETS" under varandra i en lodrät rad.
 
Mer om stilmallar under rubriken STYLESHEETSwww.flowsim.se

 

Sidan gjordes av
 
ilj@flowsim.se
 

 
Senast ändrad 13 mars 2004
 
Den här sidan hör hemma i ett ramsystem hos:
www.flowsim.se
 
Stilmallar på svenska