[martine]

Ursprungligen postat av jimmie

jag skulle skriva

img {
border: 0px;
}

Frågan/Problem från ovan var ju hur man slipper att få en border-bottom på länken inte på bilden. (Den oönskade ramen/understykningen sitter ju på länken <a> och inte på <img>)

Ursprungligen postat av jimmie

Hur ofta vill man liksom ha en border på en bild man länkar?

Ganska ofta vill man ha en snygg och enhetlig ram på sina bilder på hela siten, men inte en länk-ram.
Typ: img { padding: 3px; background-color: white; border: 2px solid #456; }

[jimmie]

Ursprungligen postat av martine

Frågan/Problem från ovan var ju hur man slipper att få en border-bottom på länken inte på bilden. (Den oönskade ramen/understykningen sitter ju på länken <a> och inte på <img>)

Ganska ofta vill man ha en snygg och enhetlig ram på sina bilder på hela siten, men inte en länk-ram.
Typ: img { padding: 3px; background-color: white; border: 2px solid #456; }

Om du har en bild innanför en länk-tag så blir det en ram runt hela bilden. På den gamla (goda?) tiden så skrev man ofta
[img]...[/img] för att få bort ramen som skapades vid länkning. Det är exakt vad min lösning ovan gör också fast med css.

Men vill man ha en ram på bilder ändå så får man väl göra det så om man vill. Dock fungerar min lösning fint och jag använder det själv på flera sidor. Om jag nu skulle vilja ha en ram på bilder på sidan så har jag förmodligen de bilderna inom ett eget lager och ger då lageregenskaper som då renderar i en ram på bilderna. Men generellt är jag inte intresserad av att ha en ram på bilderna i t.ex. menyer, rubriker etc.

[martine]

Ursprungligen postat av jimmie

Om du har en bild innanför en länk-tag så blir det en ram runt hela bilden. På den gamla (goda?) tiden så skrev man ofta
[img]...[/img] för att få bort ramen som skapades vid länkning. Det är exakt vad min lösning ovan gör också fast med css.

Ja, det är vad ditt förslag gör. Med du kanske skulle läsa frågan och svara på den istället för att föreslå en lösning på ett gammalt problem. Läs första inlägget så ser du vad det handlar om.

Originally posted by -jimmie@Jul 9 2006, 19:57
Men vill man ha en ram på bilder ändå så får man väl göra det så om man vill. Dock fungerar min lösning fint och jag använder det själv på flera sidor.

Det tvivlar jag inte på. (Men man kan ju fråga sig varför du anger px när du anger 0, 0px är väl samma sak som 0em... Om man inte vill ha någon ram är det väl mest logisk att använda ram: ingen; dvs. border: none; )

Originally posted by -jimmie@Jul 9 2006, 19:57
Om jag nu skulle vilja ha en ram på bilder på sidan så har jag förmodligen de bilderna inom ett eget lager och ger då lageregenskaper som då renderar i en ram på bilderna.

Vad menar du för lager? Pratar vi Netscape 4 <layer> här eller vad menar du? Det finns ingen anledning att sno in <img>-element i extra <div>-element eller liknande. Det leder bara bara till tyngre html-kod och bör undvikas om det går.

Ursprungligen postat av jimmie

Men generellt är jag inte intresserad av att ha en ram på bilderna i t.ex. menyer, rubriker etc.

Varför skulle du vilja ha bilder i rubriker eller menyer??? Och om du skulle vilja ha det så är ju en enkel lösning att använda:
h2 img { bla: bla; }

Jag tror du missförstått den egentliga frågan, skilj bild-elementet från ankar-elementet i ditt tänkande. Frågan var hur man slipper att få en border-bottom på ett <a> som följs av <img>.

Det kan hända att vi har olika tankesätt om hur css bör användas men din lösning med ett img {border:0px} verkar ju inte särkilt avancerad, mer än en motsvarighet till gamla border="0" (Det finns, för den som är intresserad, ett logiskt glapp här: border="0" i html innebär att länken inte ger någon ram runt bilden fastän ramen är orsakad av länken och inte av bilden. Man sätter alltså ram-storleken på bilden trots att den uppstår genom länkningen)

Edit: koala och Blackex, några kommentarer?

[jimmie]

Ursprungligen postat av martine

Ja, det är vad ditt förslag gör. Med du kanske skulle läsa frågan och svara på den istället för att föreslå en lösning på ett gammalt problem. Läs första inlägget så ser du vad det handlar om.

Det tvivlar jag inte på. (Men man kan ju fråga sig varför du anger px när du anger 0, 0px är väl samma sak som 0em... Om man inte vill ha någon ram är det väl mest logisk att använda ram: ingen; dvs. border: none; )

Vad menar du för lager? Pratar vi Netscape 4 <layer> här eller vad menar du? Det finns ingen anledning att sno in <img>-element i extra <div>-element eller liknande. Det leder bara bara till tyngre html-kod och bör undvikas om det går.

Varför skulle du vilja ha bilder i rubriker eller menyer??? Och om du skulle vilja ha det så är ju en enkel lösning att använda:
h2 img { bla: bla; }

Jag tror du missförstått den egentliga frågan, skilj bild-elementet från ankar-elementet i ditt tänkande. Frågan var hur man slipper att få en border-bottom på ett <a> som följs av <img>.

Det kan hända att vi har olika tankesätt om hur css bör användas men din lösning med ett img {border:0px} verkar ju inte särkilt avancerad, mer än en motsvarighet till gamla border="0" (Det finns, för den som är intresserad, ett logiskt glapp här: border="0" i html innebär att länken inte ger någon ram runt bilden fastän ramen är orsakad av länken och inte av bilden. Man sätter alltså ram-storleken på bilden trots att den uppstår genom länkningen)

Edit: koala och Blackex, några kommentarer?

Jag gav ett sätt att lösa det på, ett sätt som fungerar fint för mig.

När jag pratar om lager så pratar jag om div. Normalt sett när man använder css för att styra en sidas innehåll använder man lager, dvs div:ar för specifika delar av sidan. Detta för att slippa använda class-taggen överallt utan man kan istället ha <div id="lager1">innehåll som formateras</div> och sedan bara skriva #lager1 a {... } . Du får mindre kod än om du ska skriva .... på alla taggar. Dvs. sidan laddas snabbare samt att det är enklare att ändra(Färre ställen att ändra på).

men din lösning med ett img {border:0px} verkar ju inte särkilt avancerad,

Vem har sagt att lösningar måste vara avancerade? Fungerar det så är jag nöjd. Visst skriv border:none; om du vill det, det är mer logiskt korrekt.

Men alla som arbetar med css vet att bara följa vad som är semantiskt korrekt räcker inte för att sidan ska visas rätt i alla webbläsare då dom har tolkat och implementerat det olika. Mitt sätt fungerar fint för mig i alla webbläsare och därför använder jag det. Jag säger inget om att ditt sätt är fel men alla sätt är väl bra utom dom dåliga(Dom som inte funkar)?

[martine]

Ursprungligen postat av jimmie

Jag gav ett sätt att lösa det på, ett sätt som fungerar fint för mig.

Vad jag försöker göra dig uppmärksam på är att ditt förslag inte löser frågan som ställdes i den här tråden. I något annat sammanhang är jag säker på att din lösning tillfredsställande löser ett annat problem. Eftersom du inte verkar ha läst de tidigare inläggen ordentligt så upprepar jag den egentliga frågan:

Om man har:
a { border-bottom: 2px solid red; }
och vill slippa "understrykningen" på länkade bilder:
[img][/img]
men behålla den om det är en textlänk:
bla
Hur gör man då?

Din föreslagna lösning:
img {border:0px}
löser inte problemet eftersom ramen inte sitter på bilden utan på länken. Istället behövs som guran och elofsson konstaterat t ex (om man inte vill använda none)
a {border:0px}
(och förstås sätta det i sin kontext t ex: div#content a.bild {border:none} med länkade bilder [img][/img])

Det verkar som du (och tidigare Blackex och koala) missat denna "finastilta" detalj. (Vilket antagligen beror på att i gammal html så satte man border="0" på img även fast ramen uppstod på grund av a-elementet)

Slutsats: Din lösning löser inte det här problemet utan något annat (eftersom du menar att den fungerar bra).

Originally posted by -jimmie@Jul 10 2006, 09:20
När jag pratar om lager så pratar jag om div. Normalt sett när man använder css för att styra en sidas innehåll använder man lager, dvs div:ar för specifika delar av sidan. Detta för att slippa använda class-taggen överallt utan man kan istället ha <div id="lager1">innehåll som formateras</div> och sedan bara skriva #lager1 a {... } . Du får mindre kod än om du ska skriva .... på alla taggar. Dvs. sidan laddas snabbare samt att det är enklare att ändra(Färre ställen att ändra på).

Håller helt med. Jag är bara lite skeptisk till att använda termen lager eftersom man får intrycket att det alltid handlar om lägga lager på lager (jfr t ex Photoshop), till förvirring kommer ju också att det (en gång i tiden) även fanns ett layer-element för att just lägga lager på lager. Det känns mer rätt att prata om lager om man t ex lägger två positionerade div-element ovanpå varandra. Om man menar div-element så är det, enligt min åsikt, bättre att vara tydlig och säga div-element eller divvar så att man inte behöver gissa vad som menas beroende på vem som skriver.

Dessvärre kan i alla fall inte jag komma på någon lösning där man löser just det här problemet utan en class (i alla fall inte utan att fläska på med mer html...). (Om det hade funnits en "parent selector" (t ex p<a) och inte bara en "child selector" (p>a) i css så hade man kunnat gå bakåt med t ex a<img skulle ha varit praktiskt, som jag redan påpekat, i detta fall...)

I övrigt ser man rätt ofta hur sidor fylls med onödiga divvar som omsluter bilder, listor och andra element. Ofta går det att lösa utan divven, t ex med <ul id="lager1a"> (om man nu vill kalla det för lager) och på så sätt ha en "måltavla" för sin css. I synnerhet att lägga en <img> direkt i en <div> utan någon annan anledning än att sätta en ram på bilden är ganska överflödigt. (Men det är ju förstås inte det du menar ovan, så detta är ingen känga till dig...)

Ursprungligen postat av jimmie

Men alla som arbetar med css vet att bara följa vad som är semantiskt korrekt räcker inte för att sidan ska visas rätt i alla webbläsare då dom har tolkat och implementerat det olika. Mitt sätt fungerar fint för mig i alla webbläsare och därför använder jag det. Jag säger inget om att ditt sätt är fel men alla sätt är väl bra utom dom dåliga(Dom som inte funkar)?

Visst, det är klart. Det där med none var bara ett påpekande i en parantes. Jag har inte haft något problem med att det inte skulle fungera.

[Carina Malmgren]

ponera att bakgrunden är vit, länkramen är röd

a { border-bottom:1px solid #c00; }
a img, a img:hover { border:1px solid #fff; }

det borde funka...

[guran]

Har ni blivit helt galena i denna tråd?

Från början var text-decoration: none, vilket ju innebär att länken inte har ett streck under sig.

Sedan har det lagts ett streck under länken via border-bottom.

När länken är en bild ska det inte vara något streck med hjälp av border-bottom.

Det är problemet och inte om bilden har en ram eller inte!

[martine]

Originally posted by guran@Jul 10 2006, 21:19
Har ni blivit helt galena i denna tråd?

Från början var text-decoration: none, vilket ju innebär att länken inte har ett streck under sig.

Sedan har det lagts ett streck under länken via border-bottom.

När länken är en bild ska det inte vara något streck med hjälp av border-bottom.

Det är problemet och inte om bilden har en ram eller inte!

Tack för att man äntligen får lite stöd för vad man menar, jag började nästan tro att jag själv blivit galen i mitt korståg mot förvirrade inlägg...

[Carina Malmgren]

alldeles sant guran, men eftersom det lagts till ett border-bottom så funkar inte a img { border:none} , därav den bakgrundsfärgade ramen på a img.

[guran]

Originally posted by Carina Malmgren@Jul 10 2006, 20:58
alldeles sant guran, men eftersom det lagts till ett border-bottom så funkar inte a img { border:none} , därav den bakgrundsfärgade ramen på a img.

Kan följande lilla kod göra det bättre då:

#content a.bild, #content a.bild:hover {border: none;}
#content img {border: none;}