Just nu i M3-nätverket
Jump to content

Marginaler i knappar


Jan1

Recommended Posts

Kan man styra marginalerna inne i knappar i förhållande till texten?

När man skapar en knapp så ser det ganska fånigt ut när man har en knapp med fler än 6 tecken.

Jag vet att man kan sätta knapparna till en fast bredd men jag är intresserad av att ha en fast bredd bredvid texten.

 

Link to comment
Share on other sites

Med CSS kan man fixa många roliga saker.

 

Jag är lite osäker på om du menar padding eller margin. Här kommer i alla fall ett exempel på hur man kan få knappen lite bredare än vad som är normalt:

 

<html>
<head>
<title></title>

<style type="text/css">
.knapp {
padding-right: 50px;
padding-left: 50px;
}
</style>

</head>

<body>

<form>
<input type="button" class="knapp" value="Tryck här minsann">

</body>
</html>

Byt ut padding mot margin om du vill att det ska vara större mellanrum mellan text på hemsidan och knappen istället.

 

--

Some say I am crazy.. but the voices in my head disagree...

 

Link to comment
Share on other sites

Nja... Det funkar inte... Det som sker är att den stilmallen lägger till 50 px till befintlig marginal. Prova att sätta till 0px...

Jag vill kunna styra ALLT ;)

 

Link to comment
Share on other sites

Jag tror inte att det går att få bort mer än så. Det du kan göra är att använda <button> och dölja knappen helt. Sen kan du applicera valfri stil på innehållet i knappen:

.knapp {
padding: 0px;
border: none;
background: inherit;
}
.ruta {
border: solid 1px;
background: #bad;
}
.
.
.
<button class="knapp"><span class="ruta">Tryck                                  här</span></button>

I värsta fall kan du ju använda Javascript, dvs typ onclick="submit()".

 

 

[inlägget ändrat 2004-08-23 12:24:47 av zerblat]

Link to comment
Share on other sites

Precis som Zerblat skriver så kan du nog inte få total kontroll över knappar. Men det finns ju omvägar, sjäv brukar jag göra på detta sättet då jag vill simulera knappar för att kunna utforma de precis som jag vill:

 

<style type="text/css">
.knapp {
	margin-right: 5px;
	border-bottom: solid 1px #102354;
	border-right: solid 1px #102354;
	border-top: solid 1px #96AAE7;
	border-left: solid 1px #96AAE7;
	color: #000;
	background-color: #96AAE7;
	padding-left: 7px;
	padding-right: 7px;
	padding-top: 2px;
	padding-bottom: 2px;
	font-family: verdana, helvetica, sans-serif;
	font-size: 10pt;
	cursor: pointer;
	text-decoration: none;
}
</style>

</head>
<body>

<a class="knapp" href="javascript://">Här trycker man</a>

</body>
</html>

Nu kan du göra i princip vad du vill, sätt på en :active för att få den i nertryckt läge och :hover för att ändra färg på den då man har musen över. Margins och Paddings kan du ändra hur du vill.

 

--

Some say I am crazy.. but the voices in my head disagree...

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...