Fråga ang. CSS [LÖST]

SlamsornasKung · Inlägg av **SlamsornasKung** » 15 dec 2009, 17:02

Hallå!

Nu är jag helt vilse i pannkakan! Om jag skriver:

div.katliten > p {text-align: center; padding: 0; margin: 0; font-size: 10px;}

så blir min design helt felaktig. Det vill säga <p> elementet blir inte alls som det ska. Om jag däremot skriver:

Kod: Markera allt

div#katliten > p {text-align: center; padding: 0; margin: 0; font-size: 10px;}

så blir det korrekt. Nu vore ju inte det hela världen om det inte vore för att jag använder <katliten> upprepade ggr i samma <body>, enligt standard skall jag alltså använda en class, inte en id tag. Så varför i hela friden blir det fel med div.katliten > p och inte med div#katliten > p

Jag förstår det inte, och vore tacksam för hjälp.

Tack,

SK

Ulsak · Inlägg av **Ulsak** » 15 dec 2009, 20:38

hoppas att jag ej läst slarvigt, men är utdraget från en extern style sheet ? eller inbäddat i headern ?

Katt · Inlägg av **Katt** » 15 dec 2009, 21:34

Är inte säker på vad du försöker göra eller vad du har för kodning där.
Placera din css kod i en separat fil där den skall vara av stilen:

Kod: Markera allt

.kvaliteten {text-align: center; padding: 0; margin: 0; font-size: 10px;}

Kodbiten i din html-fil bör se ut något liknande:

Kod: Markera allt

<div class="katliten">text</div>

SlamsornasKung · Inlägg av **SlamsornasKung** » 15 dec 2009, 21:56

Ulsak skrev:hoppas att jag ej läst slarvigt, men är utdraget från en extern style sheet ? eller inbäddat i headern ?

Inbäddat, det har sin förklaring!

SlamsornasKung · Inlägg av **SlamsornasKung** » 15 dec 2009, 22:01

Katt skrev:Är inte säker på vad du försöker göra eller vad du har för kodning där.
Placera din css kod i en separat fil där den skall vara av stilen:
Kod: Markera allt
.kvaliteten {text-align: center; padding: 0; margin: 0; font-size: 10px;}
Kodbiten i din html-fil bör se ut något liknande:
Kod: Markera allt
<div class="katliten">text</div> 

Det är just det jag inte får att funka, av någon anledning! Om jag gör som ovan så blir lik förbenat texten vänsterjusterad, och helt tokig i största allmänhet. Fattar inte vad som ställer till det, fattar ännu mindre varför det FUNGERAR med <id> men inte med <class>.

Jag PM:ar gärna hela kodbiten om det är någon som orkar bena ut det hela.

Tack för input i frågan.

SK

Ulsak · Inlägg av **Ulsak** » 15 dec 2009, 22:01

SlamsornasKung skrev:
Ulsak skrev:hoppas att jag ej läst slarvigt, men är utdraget från en extern style sheet ? eller inbäddat i headern ?
Inbäddat, det har sin förklaring!

Du kung av slamsor! Kan man få förklaringen..jag har alltid kört med separat style sheet

SlamsornasKung · Inlägg av **SlamsornasKung** » 15 dec 2009, 22:04

Ulsak skrev:
SlamsornasKung skrev:
Ulsak skrev:hoppas att jag ej läst slarvigt, men är utdraget från en extern style sheet ? eller inbäddat i headern ?
Inbäddat, det har sin förklaring!
Du kung av slamsor! Kan man få förklaringen..jag har alltid kört med separat style sheet

Du store Ulsak

Externa är bättre, såklart. Men i det här fallet vill jag bena ut varför det blir fel innan jag bäddar in det i mitt externa sheet, jag tycker det är enklare att gegga fram och tillbaka i headern tills jag fått det rätt (om jag nu får det!).

Katt · Inlägg av **Katt** » 15 dec 2009, 22:56

Ange bredd på din div, dvs width:400px eller liknande så att texten har något att hamna i mitten på.

Lars · Inlägg av **Lars** » 15 dec 2009, 23:19

Jag testade med följande enkla exempel och det fungerar som man kan förvänta sig. Du kanske kan lägga upp koden någonstans så att vi kan kolla den. Eller skapa ett minimalt exempel som visar problemet.

Kod: Markera allt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Test</title>
    <style type="text/css">
      div.katliten > p {text-align: center; padding: 0; margin: 0; font-size: 10px;}
      div#katliten > p {text-align: center; padding: 0; margin: 0; font-size: 10px;}
    </style>
  </head>
  <body>

    <div class="katliten">
      <p>Test med class</p>
    </div>

    <div id="katliten">
      <p>Test med id</p>
    </div>

  </body>
</html>

SlamsornasKung · Inlägg av **SlamsornasKung** » 17 dec 2009, 12:18

Tack för svar, har haft häcken full de senaste dagarna och inte hunnit gräva i det. Såhär ser min CSS ut:

Kod: Markera allt

div.katliten {margin-top: 20px; margin-right: 6px; margin-left: 25px; margin-bottom: 10px;
width: 150px; height: 185px; font-family: arial, helvetica, sans-serif;
font-size: 12px; float: left;}

div.katliten img {border: 1px solid}

div#katliten > p {text-align: center; padding: 0; margin: 0; font-size: 10px;}

Och så här ser det ut i min <body>:

Kod: Markera allt

<div class="katliten" id="katliten"><img src="images/kat/k25liten.jpg" alt="Katalogbild"/><p><a href="katalog25.html">text <br/>text</a>
<br/>

Kör jag som ovan så ser det ut som det ska. MEN! Det innebär att jag inte följer vedertagen standrad. Om jag då istället följer standard och skriver:

Kod: Markera allt

div.katliten > p {text-align: center; padding: 0; margin: 0; font-size: 10px;}

i min CSS. Och:

Kod: Markera allt

<div class="katliten"><img src="images/kat/k25liten.jpg" alt="Katalogbild"/><p><a href="katalog25.html">text <br/>text</a>
<br/>

i bodyn så blir det fel. Texten blir vänsterjusterad och marginalerna hamnar helt åt fanders. Jag gör bergis något enkelt fel (är nybörjare inom CSS), men jag kan inte komma på vad det är på egen hand.

Tack för era inlägg!

SK

AlexF · Inlägg av **AlexF** » 17 dec 2009, 13:58

Hej!

Jag skulle rekommendera att du börjar skilja på klassnamn och id-taggar. så döp unika grejer till #container eller liknande. Sen mer "allmänna" saker som du vill använda mer än en gång, kan du lägga in i klasser.

I detta fall skulle jag gissa på att denna spökar.

div#katliten > p {text-align: center; padding: 0; margin: 0; font-size: 10px;}

Om du vill centrera alla paragrafer inom #katliten ska du nog inte skriva sådär. Det du försöker få fram där är att centrera paragrafens innehåll i sig, vilket blir lite svårt.
Testa att centrera texten utifrån moderelementet. Dvs

#katliten { text-align: center }

Det är åtminstone en början.

SlamsornasKung · Inlägg av **SlamsornasKung** » 17 dec 2009, 15:45

AlexF skrev:Hej!

Jag skulle rekommendera att du börjar skilja på klassnamn och id-taggar. så döp unika grejer till #container eller liknande. Sen mer "allmänna" saker som du vill använda mer än en gång, kan du lägga in i klasser.

I detta fall skulle jag gissa på att denna spökar.

div#katliten > p {text-align: center; padding: 0; margin: 0; font-size: 10px;}

Om du vill centrera alla paragrafer inom #katliten ska du nog inte skriva sådär. Det du försöker få fram där är att centrera paragrafens innehåll i sig, vilket blir lite svårt.
Testa att centrera texten utifrån moderelementet. Dvs

#katliten { text-align: center }

Det är åtminstone en början.

Hej Alex!

Du har helt rätt angående klasser, jag har helt enkelt tänkt fel. Nu vill jag alltså göra rätt, men när jag gör det, d.v.s. använder en klass istället för id så blir det fel. Det är det som är pudelns kärna.

Med andra ord: #katliten {text-align: center} fungerar, .katliten {text-align: center} fungerar inte! Mysko!

Tack för svar!

AlexF · Inlägg av **AlexF** » 17 dec 2009, 16:43

Hej!

Posta all din kod här, så som den ser ut nu. Vad är det du vill åstadkomma?

BadOmen · Inlägg av **BadOmen** » 17 dec 2009, 18:44

Hej,
jag vill bara tipsa om det här tilläget till Firefox Web Developer Det kan underlätta en hel del när man håller på med css. Om jag inte mins alldeles fel så håll ett öga på html filen ifall du testar att ändra den också med tilleget. Om man använder sig av en extern css så får html redigeraren ibland för sig att spara in det externa in i själva html filen och så hjälper det inte att göra ändringar

Det är ju inte nåt svar på din fråga men det kanske kan underlätta felsökningen lite

TweekiE · Inlägg av **TweekiE** » 17 dec 2009, 19:20

DOM inspector lär också hjälpa

Lars · Inlägg av **Lars** » 17 dec 2009, 19:25

... och Firebug.

SlamsornasKung · Inlägg av **SlamsornasKung** » 20 dec 2009, 15:29

Först och främst, tack alla för er värdefulla hjälp, det uppskattas verkligen. Nu har jag löst problemet. Det visade sig att jag totalt hade missat (nybörjare, som sagt!) att det hela är inbäddat i en "moderdiv" som jag kallar #text. Ergo, om jag skriver:

Kod: Markera allt

div#text > div.katliten > p {text-align: center; padding: 0; margin: 0; font-size: 10px;}

Så är Robert min farbor!

Tack alla, än en gång!

SK

Ubuntu Sverige

Fråga ang. CSS [LÖST]

Fråga ang. CSS [LÖST]

Re: Fråga ang. CSS

Re: Fråga ang. CSS

Re: Fråga ang. CSS

Re: Fråga ang. CSS

Re: Fråga ang. CSS

Re: Fråga ang. CSS

Re: Fråga ang. CSS

Re: Fråga ang. CSS

Re: Fråga ang. CSS

Re: Fråga ang. CSS

Re: Fråga ang. CSS

Re: Fråga ang. CSS

Re: Fråga ang. CSS

Re: Fråga ang. CSS

Re: Fråga ang. CSS

Re: Fråga ang. CSS