Ubuntu Sverige

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

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

Ä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>

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!

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

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

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!).

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

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>

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

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.

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!

Hej!

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

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

DOM inspector lär också hjälpa

... och Firebug.

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