Span problem

12 svar · 539 visningar · startad av Tulork 9 feb. 2006

TulorkMedlem sedan aug. 2004903 inlägg

Trådstart9 feb. 2006 12:56#1

Hur använder jag span om jag vill ha den första bokstaven av ett ord i en dubbelt så stor och i orange färg? Jag har kommit såhär långt

Detta är xhtml koden

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body class="page">
<h2 class="head">Span Usage</h2>
<span class="span"><p>hej på dig</p></span>
</html>

Detta är css:en

body.page{
	     background-color:#123456;
		 font-family:Verdana, Arial, Helvetica, sans-serif;
		 color:#FFFFFF;
		 font-size:12px
		 }

h2.head  {
         color:#FF0000;
		 font-style: italic;
	     font-size:200%;
		 text-decoration:underline;
		 }

span.span{
          text-transform:Uppercase;"
         }

Har försökt leta i tutorials osv, men hittar inte det jag söker. (Detta är skolgrejj....)

zcorpanMedlem sedan dec. 20042 245 inlägg

9 feb. 2006 12:58#2

Du får inte lägga en P inuti en SPAN.

Du behöver inte ens SPAN.

<p>hej på dig</p>

p::first-letter { font-size:200%; color:orange; }

TulorkMedlem sedan aug. 2004903 inlägg

9 feb. 2006 13:04#3

ne jag vet, hade kunnat göra detta på Många olika sätt som jag också kan, men det fick man inte för läraren, man skulle använda span...Men tack ska du ha

silfverMedlem sedan apr. 200312 679 inlägg

9 feb. 2006 13:07#4

Tulork skrev:

ne jag vet, hade kunnat göra detta på Många olika sätt som jag också kan, men det fick man inte för läraren, man skulle använda span...Men tack ska du ha

Skön lärare.

Men i så fall så får du ju göra som zcorpan skrev, placera span-elementet rätt. Dvs. så här:

<p><span class="span">hej på dig</span></p>

Och ta bort citationstecknet du har efter "uppercase" i din css.
Och glöm inte avsluta </body>

TulorkMedlem sedan aug. 2004903 inlägg

9 feb. 2006 13:13#5

hmm, jag får inte deet att funka med att använda span överhuvudtaget. utan span går det fin fint. Men hur ska det se ut i css filen? jag har skrivit såhär nu

<p><span class="span">hej på dig</span></p

och

span.span{
         first-letterfont-size:200%; 
		 color:orange; 
         }

tantenMedlem sedan nov. 20051 596 inlägg

9 feb. 2006 13:34#6

Så har kanske:
En helt annan variant...som går att flytta ut till css-filen. Är inte så säker på att firstletter stöds av alla webbläsare...

<p><span style="float:left;color:orange;font-size:24px;line-height:48px;padding-top:-48px;padding-right:1px;font-family: verdana;">H</span><br />ej på dej</p>

Lite fuskigt kanske... Men kul om man vill ha stor bokstav bredvid ett helt textstycke...

Silfver...Det är svårt att lära gamla tanter sitta :birp

silfverMedlem sedan apr. 200312 679 inlägg

9 feb. 2006 14:00#7

tanten, när du ska du lära dig att använda kod-taggarna? Det går ju knappt läsa ditt kodexempel!

tantenMedlem sedan nov. 20051 596 inlägg

9 feb. 2006 14:26#8

silfver skrev:

tanten, när du ska du lära dig att använda kod-taggarna? Det går ju knappt läsa ditt kodexempel!

Fixat

zcorpanMedlem sedan dec. 20042 245 inlägg

9 feb. 2006 17:15#9

Hmm, ok.

<p><span>hej på dig</span></p>

p::first-letter { font-size:200%; color:orange; }

Faktum kvarstår att du inte behöver SPAN.

InsiderMedlem sedan jan. 2000978 inlägg

9 feb. 2006 18:09#10

Jag tror att er lärare vill att ni ska göra så här:

<p><span>H</span>ej på dig</p>

p span {font-size:200%; color:orange;}

Det är inte rätt... men han kanske tycker att det är ett pedagogiskt sätt att visa hur man selekterar enbart elementet. Dumt.

zcorpanMedlem sedan dec. 20042 245 inlägg

9 feb. 2006 18:21#11

Insider skrev:

Jag tror att er lärare vill att ni ska göra så här:
Hej på dig
p span {font-size:200%; color:orange;}

Om man gör så kanske skärmläsare inte läser "hej" utan "hå, ej". Sökmotorer kanske inte indexerar "hej" som ett ord utan "h" och "ej" som två separata.

::first-letter borde användas för att ändra utseendet på första bokstaven; det är det den är till för. Säg det till din lärare Tulork.

nummersjuMedlem sedan aug. 2005198 inlägg

9 feb. 2006 23:12#12

"p::first-letter { font-size:200%; color:orange; }"

varför ska man ha två stycken kolon (::)?

jarvkloMedlem sedan juli 20013 378 inlägg

9 feb. 2006 23:30#13

Hmm...
Använder man CSS2 "ska" man det inte alls - där heter det helt enkelt t.ex. p:first-letter, men i CSS3 (som f.ö. inte har fastställts av W3C ännu även om en och annan webbläsare numera stödjer olika delar av ändå) används "::" för att skilja ut "pseudo-element" (::first-letter m.fl) på ett sätt som gör att de inte ska kunna misstolkas som "Pseudo-klasser" (:visited och :active m.fl)

Läs mer i http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#pseudo-elements och http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#pseudo-classes

. :birp