CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

jdjensen Juniormester

21. februar 2012 - 15:07 Der er 18 kommentarer og
1 løsning

Egen submit-knap

Hej,

Jeg har lavet en pæn submitknap og vil gerne have den stylet på en smart måde så den ikke er låst til en fast størrelse men udvider sig til teksten ovenpå knappen. Jeg har derfor slicet knappen op i 3 forskellige billeder:

[image1.png] [image2.png] [image3.png]

Image1 = knappens venstre finish.
Image2 = Der hvor teksten skal stå ovenpå. (her skal der nok sættes en repeat-x i CSS'en)
Image3 = knappens højre finish.

Er lidt i tvivl om hvordan det bedst styles i min CSS og markup?

Synes godt om

jdjensen Juniormester

21. februar 2012 - 15:08 #1

Såvidt muligt uden at bruge <img> tagget i min markup. :-)

Synes godt om

olebole Juniormester

21. februar 2012 - 15:27 #2

<ole>

Lav i stedet et bredet venstrebillede, bestående af dit nuværende Image1 og Image2 - f.eks. 250px bredt. Lav så et højrebillede, bestående af dit nuværende Image3 - her forudsættes det, at dette billede er 6px bredt:

/mvh
</bole>

Synes godt om

olebole Juniormester

21. februar 2012 - 15:28 #3

Hvorfor i øvrigt undgå <img>?

Synes godt om

jdjensen Juniormester

21. februar 2012 - 16:07 #4

Tak Ole,
Jeg får dog ikke knappen vist rigtigt hvis jeg kun har dette i min markup, hvilket jeg ikke helt kan forstå:
<span class="button">Send</span> :/

Vil gerne undlade selve onclick spannen.

Synes godt om

jdjensen Juniormester

21. februar 2012 - 16:10 #5

Men det virker self. også hvis jeg bare laver en <span>...</span> inde i <span class="button">. :-)

Synes godt om

jdjensen Juniormester

21. februar 2012 - 16:20 #6

Endnu engang tak for hjælpen olebole. :-)

Så kan jeg jo bygge videre på din kode så billederne evt. skifter ved a:hover.

Synes godt om

jdjensen Juniormester

21. februar 2012 - 17:16 #7

Ok måske mere krytisk også at lave hover effekt på knappen. Den vil godt lave mouse over på det venstre billede men ikke højrebilledet med nedenstående css tilføjelse. Jeg prøver mig lidt frem. :-)

.button :link {text-decoration: none; color: #fff;}
.button :visited {text-decoration: none; color: #fff;}
.button :hover {text-decoration: none; color: #fff; background: url(../images/button_left_hover.png) top left no-repeat;}
.button :active {text-decoration: none; color: #fff; background: url(../images/button_left_hover.png) top left no-repeat;}

.button span :link {text-decoration: none; color: #fff;}
.button span :visited {text-decoration: none; color: #fff;}
.button span :hover {text-decoration: none; color: #fff; background: url(../images/button_right_hover.png) top right no-repeat;}
.button span :active {text-decoration: none; color: #fff; background: url(../images/button_right_hover.png) top right no-repeat;}

Synes godt om

olebole Juniormester

21. februar 2012 - 20:38 #8

Jeg foretrækker en lidt mere 'funky' løsning. Lav begge dine billeder i dobbelt højde og anbring dit off billede øverst og dit hover nederst:

|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
|    Off pic      |
|_________________|
|                 |
|   Over pic      |
|_________________|

Brug så følgende CSS:

.button {
display: inline-block;
background: url(bg_btn_left.png) no-repeat left top;
}
.button a {
height: 24px;
padding: 0 16px;
padding-top: 6px;
margin-right: -6px;
text-decoration: none;
color: #ffeded;
background: url(bg_btn_right.png) no-repeat right top;
display: block;
text-align: center;
}
.button:hover {
background: background-position: left -24px;
}
.button:hover a {
height: 25px;
padding-top: 5px;
background-position: right -24px;
}

Så flytter du simpelthen baggrundsbilledet op, så hover billedet vises i stedet. Samtidig bliver teksten løftet en enkel pixel opad, hvilket yderligere bidrager til at skabe illutionen af, at knappen 'hopper' ud af skærmen. Prøv det *o)

Fordelen er, at når knappen ses i browseren, er hover billedet allerede loaded - og skal altså ikke først hentes fra serveren eller preloades, når cursoren føres ind over knappen.

Synes godt om

olebole Juniormester

21. februar 2012 - 20:41 #9

Jeg har kopieret koden fra en menu, hvor jeg bruger et A element i et LI element. Derfor skal du lige rette .button a og .button:hover a til .button span og .button:hover span =)

Synes godt om

olebole Juniormester

21. februar 2012 - 20:48 #10

En anden fordel ved denne fremgangsmåde er, at du har færre billeder at glide i, når du løber gennem din billedmappe. Du kunne for den sags skyld også tilføje et tredie billede, som viser den nedtrykkede knap. Den ville du så skulle lægge på :active i stedet for :hover =)

Det lille trick med at flytte et baggrundsbillede kan også udnyttes til at lave PNG-24 animationer, som blander blødt mod baggrunden - i modsætning til GIF-animationer. I den forbindelse kan jeg anbefale min guide om emnet.

Synes godt om

jdjensen Juniormester

21. februar 2012 - 20:58 #11

Hvor genialt olebole.. det er helt sikkert måden at gøre det på! Det er vel det man kalder Sprites at have flere billeder i samme fil?

- Men SRC til background image under ".button span" og ".button:hover span" skal vel være til den samme PNG så? :-)

- Skal Linien i min Markup ændres lidt for synes den opfører sig lidt sjovt i forhold til css'en og der er ingen hover effekt når musen kører over:
<span class="button"><a href="#"><span>Klik!</span></a></span>

Synes godt om

olebole Juniormester

21. februar 2012 - 21:04 #12

Tak, men det er nu ikke mig, der er kilden til idéen =)

Ja, det er det, man kalder sprites. Og ja, det er samme background-image, men det sørger min CSS-kode automatisk for. Den retter kun background-position ved :hover - billedets 'sovs' forbliver urørt.

Nej, HTML'en er den samme som i mit første indlæg

Synes godt om

olebole Juniormester

21. februar 2012 - 21:10 #13

Når du er færdig med projektet, skulle du tage at prøve at kikke på den guide, jeg linkede til. Den kan du bruge på mange sjove måder.

Jeg blev for nylig i anden anledning peget mod Toplisterne, og der så jeg til min overraskelse, at den er rated som E's mest populære guide =)

Synes godt om

jdjensen Juniormester

21. februar 2012 - 21:23 #14

Ok vil jeg gøre. :-)

Inden jeg kører musen over knappen så skærer den lige nu lidt af venstre side af. Og når jeg kører musen over så skærer den lidt af højre side af.

.button {
display: inline-block;
background: url(../images/button.png) no-repeat left top;
}
.button span {
height: 45px;
padding: 18px 25px 0 25px;
margin-right: -8px;
background: url(../images/button.png) no-repeat right top;
display: block;
}
.button:hover span {
background-position: left -63px;
}

Synes godt om

jdjensen Juniormester

21. februar 2012 - 21:58 #15

Jeg kan self. fjerne margin-right: -8px og bare lave en fast width på knappen men så tilpasser knappen sig ikke indholdet længere. Men det kan måske heller ikke lade sig gøre hvis man vælge at bruge sprites? Så er knappen altid en fixed størrelse? :-)

.button {
display: inline-block;
background: url(../images/button.png) no-repeat left top;
}

.button span {
height: 45px;
width: 317px;
padding: 18px 25px 0 25px;
background: url(../images/button.png) no-repeat right top;
display: block;
}

.button:hover span {
background-position: left -63px;
}

Synes godt om

olebole Juniormester

21. februar 2012 - 21:59 #16

Denne kode er testet og virker - NB: Billederne ligger i mappen img og er 60px høje (2x30px):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.button {
height: 30px;
margin-right: 6px;
display: inline-block;
font: bold 14px verdana, sans-serif;
background: url(img/bg_btn_left.png) no-repeat left top;
cursor: pointer;
}
.button span {
height: 24px;
padding: 0 16px;
padding-top: 6px;
margin-right: -6px;
color: #ffeded;
background: url(img/bg_btn_right.png) no-repeat right top;
display: block;
text-align: center;
}
.button:hover {
background-position: left -30px;
}
.button span:hover {
height: 25px;
padding-top: 5px;
background-position: right -30px;
}
</style>
</head>
<body>

<form id="myForm" action="">
<p>
<input name="foo" type="text">
</p>
<p>
<span class="button" onclick="document.getElementById('myForm').reset()"><span>Reset</span></span>
<span class="button" onclick="document.getElementById('myForm').submit()"><span>Send</span></span>
</p>
</form>

</body>
</html>

Synes godt om

jdjensen Juniormester

21. februar 2012 - 22:51 #17

Hold da op så lykkedes det sq og tak for hjælpen! Var da ved at få en gevaldig hovedpine. :-P

Men uden tvivl fordi jeg ikke har arbejdet meget med sprites før og bøvlede med at forstå hvordan de 2 PNG filer skulle sættes op med knapperne under hinanden osv og så self. opbygningen i CSS'en.

Nu udvider knappen sig også i forhold til teksten - men kun op til den maksimale bredde af grafikken i min PNG. Det er meget fint! Tak. :-)

Synes godt om

olebole Juniormester

21. februar 2012 - 23:21 #18

Selvtak - og du lægger bare selv et svar og accepterer det *o)

Synes godt om

jdjensen Juniormester

22. februar 2012 - 00:05 #19

Jep :-)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS