Avatar billede Slettet bruger
08. maj 2006 - 01:27 Der er 19 kommentarer og
4 løsninger

Hvordan med bredde her?

Hejsa

Jeg har følgende kode:

<p style="font-family: Verdana; font-size: 10pt; color: #ff0000; font-weight: bold; background-color: #c0c0c0;" onmouseover="this.style.color='#000000';" onmouseout="this.style.color='#ff0000';">
Tilbage
</p>

Hvordan kan man let og elegant gøre sådan at den IKKE er bredere end det ord som står deri?

I dette her tilfælde er ordet "Tilbage"

\Dan
Avatar billede Slettet bruger
08. maj 2006 - 01:38 #1
- og lige et tillægsspørgsmål:
Hvordan kan man i stylen gøre sådan at paragrafen er placeret i midten af siden og at teksten deri også er centreret?

\Dan
Avatar billede webstuff Nybegynder
08. maj 2006 - 08:56 #2
<p style="font-family:Verdana;font-size:10pt;color:#ff0000;font-weight:bold;background-color:#c0c0c0;width:200px;overflow:hidden;text-align:center;" onmouseover="this.style.color='#000000';" onmouseout="this.style.color='#ff0000';">
Tilbage
</p>

Sådan?

width:200px; = Bredden!
Avatar billede Slettet bruger
08. maj 2006 - 09:42 #3
Hejsa!

Ja den er der næsten!

- men der skal helst ikke defineres nogen bredde! Bredden skal bare være det som teksten fylder...

\Dan
Avatar billede Slettet bruger
08. maj 2006 - 09:50 #4
- og så skal det hele også centreres - sådan at "boksen" er på midten af siden og ikke i venstre side som nu!

\Dan
Avatar billede webstuff Nybegynder
08. maj 2006 - 12:12 #5
<div align="center">
<p style="font-family:Verdana;font-size:10pt;color:#ff0000;font-weight:bold;background-color:#c0c0c0;width:auto;text-align:center;" onmouseover="this.style.color='#000000';" onmouseout="this.style.color='#ff0000';">
Tilbage
</p>
</div>

Sådan så?;o)
Avatar billede olebole Juniormester
08. maj 2006 - 15:50 #6
<ole>

p-elementet er et block-element og fylder derfor hele bredden af det omkransende element.

Brug f.eks. et span- element i stedet. Det er et inline-element - og sådan et fylder ikke mere end indholdet

/mvh
</bole>
Avatar billede olebole Juniormester
08. maj 2006 - 15:51 #7
- til gengæld giver et inline-element ikke linjebrud før og efter elementet - det må du lave 'manuelt'  :)
Avatar billede Slettet bruger
08. maj 2006 - 19:08 #8
Hej webstuff!

Tjae sådan her, så er den faktisk som jeg vil have den:
<div align="center">
<p style="font-family:Verdana;font-size:10pt;color:#ff0000;font-weight:bold;background-color:#c0c0c0;width:1px;text-align:center;" onmouseover="this.style.color='#000000';" onmouseout="this.style.color='#ff0000';">
Tilbage
</p>
</div>

- men det er vel ikke helt etisk korrekt at angive width til bare 1px...?

For hvis man skriver auto så er bredden stadig hele skærmen!

\Dan
Avatar billede webstuff Nybegynder
09. maj 2006 - 18:59 #9
Du kan evt. skrive:
display:inline;
i stedet for.
Så skal du bare huske som Ole siger - "at lave linjeskift manuelt" :-)

Men det virker?
Avatar billede Slettet bruger
10. maj 2006 - 15:10 #10
OK! Jeg har fået det til at virke nu! Smid et svar begge to - så laver vi en "deler"...

\Dan
Avatar billede Slettet bruger
10. maj 2006 - 15:15 #11
Resultatet blev det her:
<div align="center">
<span style="font-family:Verdana;font-size:10pt;color:#ff0000;font-weight:bold;text-align:center;display:inline;" onmouseover="this.style.color='#000000';" onmouseout="this.style.color='#ff0000';" onclick="java script:history.go(-1); this.style.backgroundColor='#f0f0f0';">
Tilbage
</span>
</div>

\Dan
Avatar billede roenving Novice
10. maj 2006 - 15:31 #12
-- og den bør forbedres sådan:

<div style="text-align:center;">
<span style="font-family:verdana,sans-serif;font-size:10px;color:#f00;font-weight:bold;text-align:center;" onmouseover="this.style.color='#000';" onmouseout="this.style.color='#f00';" onclick="history.go(-1); this.style.backgroundColor='#f0f0f0';">
Tilbage
</span>
</div>

1. Sæt altid nutidige attributter, f.eks. en style text-align i stedet for align !o]
2. Du bør altid bruge en generisk font som reserve.
3. Brug en skærmstørrelse til at definere størrelser i css, visse browsere er så grimme, at de finder på at tage papirstørrelsen pt alvorligt (et typografisk punkt er ca. 0,35 mm, en pixel er typisk 0,2 - 0,28 mm !-)
4. Jeg forkortede de farve-angivelser, der kunne forkortes (#f00 = #ff0000)
5. Et spantag er et inline-tag i forvejen, så det behøver man ikke at fortælle det !o]
Avatar billede roenving Novice
10. maj 2006 - 15:31 #13
6. Du bør _aldrig_ bruge java script: pseudoprotokollen i events ...
Avatar billede roenving Novice
10. maj 2006 - 15:33 #14
Hov, jeg overså, at text-align på et inline-tag er overflødig:

<span style="font-family:verdana,sans-serif;font-size:10px;color:#f00;font-weight:bold;" onmouseover="this.style.color='#000';" onmouseout="this.style.color='#f00';" onclick="history.go(-1); this.style.backgroundColor='#f0f0f0';">
Avatar billede Slettet bruger
10. maj 2006 - 16:10 #15
Hej roenving

Jamen dit sidste forslag er jo ikke centreret! Jeg vil gerne have hele tagget i center og bredden på taggen skal IKKE være mere end det teksten fylder...

\Dan
Avatar billede roenving Novice
10. maj 2006 - 16:12 #16
Diven udenom skal selvfølgelig stadig være der !-)
Avatar billede webstuff Nybegynder
10. maj 2006 - 20:00 #17
og et svar ;o)
Avatar billede Slettet bruger
10. maj 2006 - 23:24 #18
Ja olebole og roenving vil I ikke smide et svar også?

\Dan
Avatar billede olebole Juniormester
11. maj 2006 - 00:36 #19
- gerne  :)
Avatar billede roenving Novice
11. maj 2006 - 11:07 #20
Oki '-)
Avatar billede Slettet bruger
11. maj 2006 - 15:39 #21
- tak for hjælpen allesammen!
Avatar billede webstuff Nybegynder
11. maj 2006 - 19:31 #22
Selv tak og tak for point :-)
Avatar billede roenving Novice
12. maj 2006 - 13:54 #23
-- og jeg takker også for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester