26 svar · 1 772 visningar · startad av Guldstrand
Har följande kod i en CSS-mall:
#center h2{
width: 540px;
height: 30px;
background:#181818 url(h2_back.png) repeat-x;
color:#c4c4c4;
font-size:12px;
text-transform:uppercase;
text-align:left;
margin: 0px;
}
Just nu finns texten (rubriken) precis i överkant till vänster, och jag vill gärna köra en padding med typ "5px".
Så fort jag lägger till "padding: 5px", ändras även höjden på hela h2-taggen.
Hur undviker jag detta? :r
Har följande kod i en CSS-mall:
#center h2{ width: 540px; height: 30px; background:#181818 url(h2_back.png) repeat-x; color:#c4c4c4; font-size:12px; text-transform:uppercase; text-align:left; margin: 0px; }Just nu finns texten (rubriken) precis i överkant till vänster, och jag vill gärna köra en padding med typ "5px".
Så fort jag lägger till "padding: 5px", ändras även höjden på hela h2-taggen.
Hur undviker jag detta? :r
Vad är det du vill åstadkomma? Ska hela h2-elementet ner 5px från toppen och ut 5px från vänstersidan? Isf. använder du margin istället för padding.
Padding "ingår" i höjden, så vill du att den ska ha 5px padding och vara 30px hög får du ange 5px padding + 25px height = 30px totalt.
Vad är det du vill åstadkomma? Ska hela h2-elementet ner 5px från toppen och ut 5px från vänstersidan? Isf. använder du margin istället för padding.
Well.. jag vill kunna placera texten "bättre" UTAN att bredden/höjden på själva h2-taggen ändras.
(Se bifogad screen ang. hur dets er ut just nu.)
Testade att ändra lite fram och tillbaka, och lyckades till slut få till det.
Koden jag har nu, är följande:
#center h2{
width: 524px;
height: 14px;
background:#181818 url(h2_back.png) repeat-x;
color:#c4c4c4;
font-size:12px;
text-transform:uppercase;
text-align:left;
margin: 0px;
padding: 8px;
}
Alltså, istället för en höjd på 30px, var jag tvungen att ändra till 14px, för att få till det.
Någon som vet hur det kan bli så? :x
Padding "ingår" i höjden, så vill du att den ska ha 5px padding och vara 30px hög får du ange 5px padding + 25px height = 30px totalt.
Du har 8px padding, alltså 8px uppe och 8px nere. Sen har du satt height till 14px. Det blir alltså 8+14+8=30px. Som jag sa ;)
Du har 8px padding, alltså 8px uppe och 8px nere. Sen har du satt height till 14px. Det blir alltså 8+14+8=30px. Som jag sa ;)
Aha! :stud
Tack för hjälpen.
En sak till:
Jag körde en SPAN i h2-taggen för att högerställa en annan text, men i FF så hamnar den texten under rubriken. (se screen)
CSS:
#center h2{
width: 524px;
height: 14px;
background:#181818 url(pic/h2_back.png) repeat-x;
color:#c4c4c4;
font-size:12px;
text-transform:uppercase;
text-align:left;
margin: 0px;
padding: 8px;
}
#center h2 span{
float:right;
font-size: 10px;
}
#center h2 span a{
color: #c4c4c4;
border-bottom: 1px dotted;
}
#center h2 span a:hover{
color: #535353;
border-bottom: 1px dotted;
}
*bump*
Den snabbaste lösningen bör vara att du flyttar din span så att den hamnar först i din h2:a - alltså innan själva rubriktexten.
Om du inte kommer att länka själva rubriken (så att du vet att bara länken till gamla nyheter kommer att finnas i h2:an) kan du dessutom skippa din span-tagg och lägga float: right direkt på a-taggen, så slipper du en extra tagg.
Sen kan jag tycka att länken till gamla nyheter inte hör hemma i rubriken över huvud taget - det går att presentera det som du vill ha det men ändå lägga länken utanför (efter) rubriken. Men du gör som du vill :)
Den snabbaste lösningen bör vara att du flyttar din span så att den hamnar först i din h2:a - alltså innan själva rubriktexten.
Tack.. det gjorde susen.
Nu har jag bara ETT sista "problem" kvar. :e
Jag får inte "rätt" på topp-menyn, (vill att texten ska vara mer centrerad).
CSS:
#meny{
float:left;
width:550px;
height: 35px;
background:#0f0f0f url(pic/meny_back.png) repeat-x;
font-size: 11px;
text-transform:uppercase;
text-align:left;
margin-top: 2px;
}
#meny a{
color: #535353;
font-weight:bold;
text-decoration:none;
display:block;
padding:8px;
margin:0px;
}
#meny a:hover{
background: #dedede url(pic/meny_hover.jpg) repeat-x;
color: #000000;
}
#meny ul {
list-style:none;
}
#meny li {
height:20px;
float:left;
position:relative;
}
*bump* :r
Hej Guldstrand,
Inte direkt riktat till dig, utan till folk som vill ha hjälp med html och css i största allmänhet: Det är OERHÖRT mycket enklare att hjälpa till om frågeställaren tar sig tid att - förutom att posta kod här - lägga upp sidan med ALL kod på en server och ge en länk eftersom man med en klick DIREKT kan SE hur sidan ser ut och vad frågan handlar om.
Då kommer folk att svara avsevärt snabbare och kunna ge bättre info eftersom det helt enkelt blir jäkligt mycket enklare att hjälpa till.
(Gäller förstås inte om frågan gäller skriptspråk som exekveras på serversidan)
Nu kan man inte se om ditt problem beror på att du har
text-align:left;
i #meny och helt enkelt ska ändra det till
text-align:center;
eller på något annat.
Alltså: Kan du ladda upp sidan och ge en länk?
Jag postade css-koden OCH två screens.
Det räckte inte med att centrera texten. (Texten är fortfarande för långt ner.)
P.s. Jag kan tyvärr inte lägga upp någon länk till sidan i dagsläget.
Jag postade css-koden OCH två screens.
Det räckte inte med att centrera texten. (Texten är fortfarande för långt ner.)P.s. Jag kan tyvärr inte lägga upp någon länk till sidan i dagsläget.
Åkej, men grejen är att frågeställaren OFTA postar kod som han/hon tycker är relevant - men som faktiskt inte är det! Istället är det kod eller bilder på andra ställen som skapar problemet. Får man inte se ALL KOD så minskar därför chanserna att kunna hjälpa till drastiskt.
Faktum är att ingen kan ge dig rätt svar direkt om man inte kan se koden. Det enda du kan få är en massa gissningar, och det är en plåga både för dig och för folk som (t.ex. undertecknad) tänkt försöka hjälpa. Alltså struntar man hellre i det....
Vill du ha snabb, korrekt hjälp: Lägg upp sidan och ge oss en länk. Har du uppgifter som du inte vill ska komma ut? Radera då den texten och eventuella bilder.
Jag postade den css-kod som ÄR relevant för problemet.
P.s. Ja, det finns uppgifter (text m.m.) som jag inte vill ska "komma ut" på detta sätt. :r
Jag postade den css-kod som ÄR relevant för problemet.
Suck... Visst. Den koden är OCKSÅ relevant.
Men du har ju problem för att du inte vet hur man löser ett problem, eller hur? Om nu någon som kanske vet lite mer och kan lösa problemet åt dig säger att problemet KAN orsakas av kod som DU inte anser relevant, men som faktiskt kan vara det, är det inte en bra idé att liksom lyssna på tipset då tycker du?
P.s. Ja, det finns uppgifter (text m.m.) som jag inte vill ska "komma ut" på detta sätt. :r
Jamen radera skiten som du inte vill ska synas då, och lägg upp sidan! Eller bry dig inte. Upp till dig.
Lycka till! :bire
Kod som kanske gör det du vill, men jag är å andra sidan inte helt säker på vad du vill göra :)
#meny {
width: 550px;
background: #0f0f0f url(pic/meny_back.png) repeat-x;
font-size: 11px;
text-transform: uppercase;
margin-top: 2px;
overflow: hidden;
}
#meny ul {
list-style: none;
margin: 0 0 0 50px;
padding: 0;
}
#meny li {
float: left;
}
#meny a {
color: #535353;
font-weight: bold;
text-decoration: none;
display: block;
padding: 8px;
line-height: 14px;
}
#meny a:hover {
background: #dedede url(pic/meny_hover.jpg) repeat-x;
color: #000;
}
Kod som kanske gör det du vill, men jag är å andra sidan inte helt säker på vad du vill göra :)
#meny { width: 550px; background: #0f0f0f url(pic/meny_back.png) repeat-x; font-size: 11px; text-transform: uppercase; margin-top: 2px; overflow: hidden; } #meny ul { list-style: none; margin: 0 0 0 50px; padding: 0; } #meny li { float: left; } #meny a { color: #535353; font-weight: bold; text-decoration: none; display: block; padding: 8px; line-height: 14px; } #meny a:hover { background: #dedede url(pic/meny_hover.jpg) repeat-x; color: #000; }
YEEEEEEEEEES!
Precis så ville jag ha det. Tack!
Gött. Varsågod!