Göra knappar av a-taggar m h a CSS - hur?

Tråden skapades och har fått 11 svar. Det senaste inlägget skrevs .
1

Ciao!

Jag funderar på om det är möjligt att styla om A-taggar till knappar med fast bredd/höjd, och med en bild som bakgrund, samt få dem att fungera ungefär som bilder gör om man lägger till en IMG-tagg i en text…

Problemet jag har stött på är att jag endast genom att definiera a-taggens display till "block" lyckas få den eftersökta effekten, men problemet är att block radbryter kring sig, och jag vill inte lösa det genom att sätta float till något…

Spana in adressen nedan för att se var det står stilla…

http://tosti.dk/css%2Dbutton/

Jag vill bland annat kunna line:a upp bilderna horisontellt, eller i princip placera dem på samma sätt som en normal A-tagg placeras…

Tacksam för alla tips,

/.scooter

gör ett id där du absolut positionerar dem. men det blir kanske lite jobbigt om du har många knappar??

Jo, men det är ju det jag vill undvika.

Jag vill skapa dem genom att sätta en klass på a-taggen, och så formateras den till en knapp...

Se exempellänk ovan.

  • Medlem
  • Kalmar
  • 2005-05-20 13:53

Testa med display: inline-block;

Det är precis det jag vill, men det är CSS2.1-standard (funkar i Safari) men ej i Mozilla. Ekvivalenten -display: moz-inline-box fungerar nästan, men placerar sig vertikalt fel...

Kan man inte simulera inline-box med CSS1?

  • Medlem
  • Kalmar
  • 2005-05-20 14:35
Ursprungligen av scooterbabe:

Det är precis det jag vill, men det är CSS2.1-standard (funkar i Safari) men ej i Mozilla. Ekvivalenten -display: moz-inline-box fungerar nästan, men placerar sig vertikalt fel...

Kan man inte simulera inline-box med CSS1?

Tänkte inte på det, ska fundera lite...

Jag skulle välja att göra hela knappen i CSS utan bild i bakgrunden, blir lite fyrkantigare, men annars vet jag inte...

Ursprungligen av Adrian B:

Jag skulle välja att göra hela knappen i CSS utan bild i bakgrunden, blir lite fyrkantigare, men annars vet jag inte...

			

Fast den där knappen får väl variabel bredd beroende på textinnehållet, eller..?

Jo, självklart. Jag tänkte att det var en feature och inte en bugg

Ursprungligen av Adrian B:

Jo, självklart. Jag tänkte att det var en feature och inte en bugg

Hehe - nej, definitivt en bugg. Du vill självklart att alla dina knappar som ska vara 64px breda ska vara just 64px breda

Skulle det inte varit så hade inte problemet existerat...

Ah, well, då är det ju knepigare, iaf om du vill slippa lägga till mer html-kod.

Men *varför* ska dom vara en fast bredd om man får fråga? Om nån ändrar storleken på texten i sin webbläsare riskerar du ju att texten inte ryms på knappen...

  • Medlem
  • Karlstad
  • 2005-05-20 20:35

Scooter,

Jag tvivlar starkt på att det går att göra knappar helt med CSS av rena a-taggar och få det att funka i alla läsare. Däremot kanske man kan få till nåt om man t.ex. använder input-buttons. Om CSS fö dessa inte funkar i samtliga läsare (vilket det inte gör), så får man i alla fall läsarens default-knapp.

Du är ju mycket säkrare än vad jag är på sånt här, så du kan väl ta koden nedan och utveckla ytterligare. I vart fall ligger knapparna på samma rad.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi...">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="shortcut icon" href="..." />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<style type="text/css">

</style>
</head>
<body>
<p>through a top-down, proactive approach we can remain customer focused and goal-directed,
innovate an <a href="http://www.mysite.com"><input name="Submit" type="submit" class="buttons" value="Annuler" />
</a> <a href="http://www.mysite.com/"><input name="Submit" type="submit" class="buttonsLong" value="tilføj ny bruger" />
</a>
through a top-down, proactive approach we can remain customer focused and goal-directed
</p>
</body>
</html>

PS: Vet ej, men det kan kanske krävas <form> taggar runt input för en del läsare. Likaså får man nog lägga till BÅDE hover: pointer och hover:hand (för Mozilla), alternativt laborera hur input- och a-taggarna skall förhålla sig till varandra inbördes.

1
Bevaka tråden