Inte lika på webben som i HTML editorn.

Trädvy Permalänk
Medlem
Plats
Västerås
Registrerad
Sep 2017

Inte lika på webben som i HTML editorn.

Hej.

nybörjare på det här, men jag försöker göra en hemsida och lägga dit knappar. Har fått det att funka bra i HTML editorn, men när jag testar på webben funkar det inte.

Här är min "test" sida på nätet: http://hem.bredband.net/gunmun/knapp.html

I HTML editorn ligger knapparna på varandra när man hovrar, men på nätet "ramlar" den ner.

Någon som vet vad som är fel?

Så här ser kodningen ut:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>knapp</title>
</head>
<style type="text/css">
.knapp {
width: 200px;
height: 50px;
position: relative;
display: inline;
margin: 0px;

}
.knapp .img-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.knapp:hover .img-top {
display: inline;
}

</style>
<body>

<div class="knapp">
<A HREF="http://hem.bredband.net/gunmun">
<img src="button1.jpg">
<img src="button2.jpg" class="img-top">
</A>
</div>

</body>
</html>

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Jan 2010

Du kan t.ex sätta display:block på a-taggen.

Jag hade väl annars gjort så här, om du bara ska ha en länk med en bakgrundsbild på:

.knapp{ width: 200px; height: 50px; position: relative; display: block; margin: 0; background:transparent url('button1.jpg') center top no-repeat; } .knapp:hover{ background-image: url('button2.jpg'); } <a href="http://hem.bredband.net/gunmun" class="knapp"></a>

Bärbar: Macbook Pro 13" Retina Mid-2014

Trädvy Permalänk
Medlem
Plats
Västerås
Registrerad
Sep 2017

Tackar för ett snabbt svar.

Ska prova det.
Grejen är att det funkar i HTML editorn, men inte på webben, då "ramlar" knappen ner vid hovring.

Det jag är ute efter att göra är det ska vara en knapp, som är byggd av 3 bilder. Först "button1" som är synlig i "viloläget", "button2" som syns precis över "button1" när man hovrar. Och slutligen en "button3" som syns på samma ställe när man klickar.

I HTML editorn funkar knapp i "viloläge" och hover och ligger precis på varandra.

Jag behöver en kod för knapp i "viloläge", hover och klick.

Trädvy Permalänk
Entusiast
Testpilot
Plats
Chalmers
Registrerad
Aug 2011

Oj. Använd background-image istället för <img> om du absolut ska ha bilder som grafik till knappen.

5930K • Corsair DP 32 GiB • EVGA GTX 980 • 2x Swift PG278Q
Better SweClockersDisplayPort över USB-C

Köp processor för framtiden™, men inte grafikkort.

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Jan 2010
Skrivet av Astroman:

Tackar för ett snabbt svar.

Ska prova det.
Grejen är att det funkar i HTML editorn, men inte på webben, då "ramlar" knappen ner vid hovring.

Det jag är ute efter att göra är det ska vara en knapp, som är byggd av 3 bilder. Först "button1" som är synlig i "viloläget", "button2" som syns precis över "button1" när man hovrar. Och slutligen en "button3" som syns på samma ställe när man klickar.

I HTML editorn funkar knapp i "viloläge" och hover och ligger precis på varandra.

Jag behöver en kod för knapp i "viloläge", hover och klick.

Som ovanstående sa. Använd background-image istället. Utgå ifrån den jag skrev, tror den funkar i alla fall. Du behöver bara lägga till ditt tredje "state"(klick)

HTML editorn förresten? Är det en "det du ser får du"-redigerare? Tycker aldrig dom fungerar bra, och går inte att lita på.
Ha sidan uppe i webbläsaren, gör dina ändringar, refresha hemsidan i webbläsaren - repetera.

Bärbar: Macbook Pro 13" Retina Mid-2014

Trädvy Permalänk
Medlem
Plats
Västerås
Registrerad
Sep 2017

Jo det är ju så att min HTML editor är AceExpert3 från 1999. Kanske inte är så bra.

Och som jag sa är jag ny på det här, så hur skulle min kodning se ut med era förslag inlagda?
Jag vet inte vart jag ska lägga in dem.

Tackar så mycket.

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Jan 2010
Skrivet av Astroman:

Jo det är ju så att min HTML editor är AceExpert3 från 1999. Kanske inte är så bra.

Och som jag sa är jag ny på det här, så hur skulle min kodning se ut med era förslag inlagda?
Jag vet inte vart jag ska lägga in dem.

Tackar så mycket.

Från 1999? Avinstallera skiten. Använd någon vanlig bra textredigerare; atom, sublime, Visual studio code.

Du ska bokstavligen bara byta ut din CSS mot motsvarande det jag skrev, likadant med HTMLen.

Skickades från m.sweclockers.com

Bärbar: Macbook Pro 13" Retina Mid-2014

Trädvy Permalänk
Medlem
Plats
Västerås
Registrerad
Sep 2017

Det ska jag göra.
Tack så mycket för hjälpen.

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Jan 2010

Hjälper gärna till mer om du inte lyckas, men ge det ett försök först 🙂

Skickades från m.sweclockers.com

Bärbar: Macbook Pro 13" Retina Mid-2014

Trädvy Permalänk
Medlem
Plats
Västerås
Registrerad
Sep 2017

Tack så mycket. Vad glad jag blir.

Har installerat Visual studio code, men inte hunnit kolla på det än.

Grejen är att jag är 58 år, så jag kanske inte skulle hålla på med det här.
Men jag tycker det är jäkligt kul.

Trädvy Permalänk
Medlem
Plats
192.168.0.1
Registrerad
Jul 2007
Skrivet av Astroman:

Tack så mycket. Vad glad jag blir.

Har installerat Visual studio code, men inte hunnit kolla på det än.

Grejen är att jag är 58 år, så jag kanske inte skulle hålla på med det här.
Men jag tycker det är jäkligt kul.

Aldrig för sent för att börja med något nytt! Lättast är att du, som sagt, byter mjukvara du kodar i. Jag använde själv Sublime 2 när jag höll på. Sen det fina med HTML/CSS är att du kan se skillnaden direkt när du uppdaterar i webbläsaren, alltså behöver du bara redigera koden i mjukvaran och sedan trycka F5 i webbläsaren(genom din index.html alltså) för att se skillnaden.

HTML5 och CSS3 är väl vad du ska fokusera på.

6700k @ 4.8GHz . 16GB @ 2666MHz . 1070 @ 2100/4500
360+240 rad custom loop
Flickr 500px

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Jan 2010
Skrivet av Astroman:

Tack så mycket. Vad glad jag blir.

Har installerat Visual studio code, men inte hunnit kolla på det än.

Grejen är att jag är 58 år, så jag kanske inte skulle hålla på med det här.
Men jag tycker det är jäkligt kul.

Gött! Visual Studio Code är vad jag fastnat för också(efter kört både Atom och Sublime), inte bara för HTML/CSS utan även C# och .NET. Bra redigerare tycker jag, med bra plugins

"så jag kanske inte skulle hålla på med det här" och "Men jag tycker det är jäkligt kul" är två meningar som inte går ihop.
Det absolut viktigaste är ju att du tycker det är roligt, så skit i om du är 12 år, 58 år, eller 80 år. Fortsätt knacka kod!

När du börjar få koll på grunderna i CSS(3) och HTML(5) kan du börja kika över på Javascript tycker jag

Bärbar: Macbook Pro 13" Retina Mid-2014

Trädvy Permalänk
Medlem
Plats
Västerås
Registrerad
Sep 2017

Cool program Visual Studio Code (Tack Sonywalk för tipset), det talade om vad jag skrivit fel. Jag tog bort det som var fel och nu "ramlar" knappen inte ner längre på webben.

Nu fattas bara koden för att få den tredje bilden att synas på de första.

Och, jag fattade inte, trycker man F5 för att se den i webbläsaren? Jag klickade F5 men då hände det grejer med VSC.
Det jag gör nu ,är att spara koden, lägga ut den på min webb plats med CuteFTP. Sen gå till sidan på webben och uppgradera den.

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Jun 2007
Skrivet av Astroman:

Och, jag fattade inte, trycker man F5 för att se den i webbläsaren? Jag klickade F5 men då hände det grejer med VSC.
Det jag gör nu ,är att spara koden, lägga ut den på min webb plats med CuteFTP. Sen gå till sidan på webben och uppgradera den.

F5 laddar om den öppna sidan i de flesta webbläsare, d.v.s. samma tillvägagångssätt som du redan verkar ha. Den enda skillnaden mot vad salomon beskrev är att du har ett extra steg: att ladda upp koden på din webbplats. Det behöver du egentligen inte göra, det går utmärkt att peka din webbläsare till en lokal html-fil på din dator istället om du vill kunna testa sidan snabbare.

Trädvy Permalänk
Medlem
Plats
/home
Registrerad
Dec 2005

Gör en mapp lokalt på datorn istället(vilket jag antar att du redan har då du programmerar I en fil). I den mappen har du ju index.html(antar att den heter så), dubbelklicka på den så bör din webläsare öppna filen. Då kan du ha kvar det fönstret, koda lite sen gå tillbaka till webläsaren och köra F5.
Då slipper du krångla med att ladda upp filen hela tiden och sparer således lite tid

Bara gammalt skräp...

Trädvy Permalänk
Medlem
Plats
Bålsta
Registrerad
Nov 2010

Som många redan nämnt så kan du öppna .html filer direkt i webbläsaren och på så sätt kan du jobba lokalt. Oftast räcker det med att bara dubbelklicka på .html-filerna så öppnas de i din default webbläsare.

Tips är att bara ändra background-image vid hover istället för att skyffla runt massa markup.
https://codepen.io/anon/pen/GvaVJR

<html> <head> <style> a.btn { background: url('http://hem.bredband.net/gunmun/button1.jpg'); width: 200px; height: 50px; display: inline-block; line-height: 50px; text-align: center; color: #000; text-decoration: none; font-weight: bold; font-family: sans-serif; } a.btn:hover { background: url('http://hem.bredband.net/gunmun/button2.jpg'); } </style> </head> <body> <a href="#" class="btn">Hello World</a> </body> </html>

~. Citera så jag hittar tillbaka .~

Trädvy Permalänk
Medlem
Plats
Västerås
Registrerad
Sep 2017

Tack alla.
jag ska prova alla tips.

Trädvy Permalänk
Medlem
Plats
192.168.0.1
Registrerad
Jul 2007

Jag skulle nog gjort något sådant här för att fixa det du eftersöker: (OBS Har inte kodat på väldigt länge så något kan ha blivit fel, men tror iaf inte det)

HTML, Meny-koden

<ul id="meny"> <li><a href="#" id="current">Knapp 1</a></li> <li><a href="#">Knapp 2</a></li> </ul>

id="current" betyder alltså att det är Nuvarande sida man befinner sig på, alltså måste du flytta just detta när individen är på en annan del av hemsidan.

CSS

ul { margin: 30px; padding: 0; } #meny li { list-style: none; margin: 5px 0 10px 0; } #meny li a { margin: 0; background: transparent url("DIN KNAPP.JPG") left center no-repeat; } #meny a:hover { background: transparent url("DIN HOVER-KNAPP.JPG") left center no-repeat; } #meny a#current { background: transparent url("DIN AKTIV-KNAPP.JPG") left center no-repeat; }

Lättast är att du gör en bakgrund bara som du sedan skriver meny-texten i.

6700k @ 4.8GHz . 16GB @ 2666MHz . 1070 @ 2100/4500
360+240 rad custom loop
Flickr 500px

Trädvy Permalänk
Medlem
Plats
Västerås
Registrerad
Sep 2017
Skrivet av solomon:

Jag skulle nog gjort något sådant här för att fixa det du eftersöker: (OBS Har inte kodat på väldigt länge så något kan ha blivit fel, men tror iaf inte det)

HTML, Meny-koden

<ul id="meny"> <li><a href="#" id="current">Knapp 1</a></li> <li><a href="#">Knapp 2</a></li> </ul>

id="current" betyder alltså att det är Nuvarande sida man befinner sig på, alltså måste du flytta just detta när individen är på en annan del av hemsidan.

CSS

ul { margin: 30px; padding: 0; } #meny li { list-style: none; margin: 5px 0 10px 0; } #meny li a { margin: 0; background: transparent url("DIN KNAPP.JPG") left center no-repeat; } #meny a:hover { background: transparent url("DIN HOVER-KNAPP.JPG") left center no-repeat; } #meny a#current { background: transparent url("DIN AKTIV-KNAPP.JPG") left center no-repeat; }

Lättast är att du gör en bakgrund bara som du sedan skriver meny-texten i.

Har provat denna nu efter mycket om och men, men det berodde på att jag inte visste vart jag skulle lägga in den.
Det som hände var att "knappen" blev typ 20 x 5 pixlar, bild bytet vid hovring funkar, men det som händer när jag klickar är att texten (Knapp1 och Knapp2) blir röd.
Bild 3 kommer inte fram när jag klickar.

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Jan 2010
Skrivet av Astroman:

Har provat denna nu efter mycket om och men, men det berodde på att jag inte visste vart jag skulle lägga in den.
Det som hände var att "knappen" blev typ 20 x 5 pixlar, bild bytet vid hovring funkar, men det som händer när jag klickar är att texten (Knapp1 och Knapp2) blir röd.
Bild 3 kommer inte fram när jag klickar.

Hur ser din HTML/CSS ut nu?

Bärbar: Macbook Pro 13" Retina Mid-2014

Trädvy Permalänk
Medlem
Plats
Västerås
Registrerad
Sep 2017
Skrivet av Sonywalk:

Hur ser din HTML/CSS ut nu?

Jag har provat alla tips, vissa funkar andra inte. Men jag tror det beror på mitt okunnande, att veta vart koderna ska ligga, om jag ska lägga till nått typ <style> eller nått.
Ditt tips har jag inte fått till, och jag tror av den anledningen.

Men också att alla tips, (jag tackar så mycket för dem) har inte med nån kod för att skiftet till tredje bilden.

Den HTML/CSS jag håller på med nu, den åttonde i ordningen ser ut så här
och en länk till hur den ser ut på webben:

http://hem.bredband.net/gunmun/indextest.html

<!doctype html>
<html>
<meta charset="utf-8">
<title>Munken</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<head>

<style type="text/css">
body {
background-image: url(bilder/HD.jpg);
background-repeat: repeat;
background-attachment: fixed;
background-size: cover;
}
a.btn {
background: url('bilder/knapp6.png');
width: 205px;
height: 55px;
display: inline-block;
line-height: 50px;
text-align: center;
color: #00ffef;
text-decoration: none;
font-weight: regular;
font-family: Verdana;
}

a.btn:hover {
background: url('bilder/knapp7.png');
}

a.btn:a#current {
background: url('http://hem.bredband.net/gunmun/button3.jpg');
}

</style>
</head>
<body>

<div align="center">
<img src="bilder/0026.png" width="1920" height="1161" alt=""/>
<a href="http://www.sweclockers.com/" class="btn">Sweclockers</a>
<a href="http://www.astrosafari.com/" class="btn">Astro Safari</a>
<a href="http://www.facebook.com" class="btn">Face Book</a>
<a href="http://www.houseofkolor.com" class="btn">House of Kolor</a>
<a href="http://www.google.com" class="btn">Google</a>
<a href="http://www.ebay.com/" class="btn">Ebay</a>
<a href="https://www.nasa.gov/" class="btn">NASA</a>
<a href="https://www.youtube.com/" class="btn">YouTube</a>

<BR>
<BR>
<img src="Bilder/001.JPG" border="6" width="800" height="536" alt=""/>
<br>
<br>
<br>
<img src="bilder/002.JPG" border="6" width="800" height="536" alt=""/><br>
<br>
<br>
<img src="bilder/003.jpg" border="6" width="800" height="451" alt=""/><br>
<br>
<br>
<img src="bilder/004.jpg" border="6" width="800" height="451" alt=""/><br>
<br>
<br>
<img src="bilder/005.jpg" border="6" width="800" height="600" alt=""/><br>
<br>
<br>
<img src="bilder/006.jpg" border="6" width="800" height="533" alt=""/><br>
<br>
<br>
<img src="bilder/007.jpg" border="6" width="800" height="440" alt=""/><br>
<br>
<br>
<img src="bilder/008.JPG" border="6" width="800" height="600" alt=""/><br>
<br>
<br>
<img src="bilder/009.JPG" border="6" width="800" height="600" alt=""/><br>
<br>
<br>
<img src="bilder/010.JPG" border="6" width="800" height="600" alt=""/><br>
<br>
<br>
<img src="bilder/012.jpg" border="6" width="800" height="1100" alt=""/><br>
<br>
<img src="bilder/tatoo.jpg" border="6" width="800" height="83" alt=""/><br>
<br>
<br>
<img src="bilder/013.JPG" border="6" width="800" height="600" alt=""/><br>
<br>
<br>
<img src="bilder/014.jpeg" border="6" width="800" height="1422" alt=""/><br>
<br>
<br>
<img src="bilder/015.jpeg" border="6" width="800" height="1422" alt=""/><br>
<br>
<br>
<img src="bilder/016.jpeg" border="6" width="800" height="1422" alt=""/><br>
<br>
<br>
<img src="bilder/tshirt.jpg" border="6" width="800" height="800" alt=""/>
<br>
<br>
<img src="bilder/tshirtt.jpg" border="6" width="800" height="83">
<br>
<br>
<br>
<img src="bilder/woody.jpg" border="6" width="800" height="451" alt=""/>
<br>
<br>
<br>
<img src="bilder/munk2.png" width="1600" height="423" alt=""/><br>
<img src="bilder/adress.png" width="300" height="100" alt=""/></div>
<div align="right">
<font face="arial" size="1" color="#ffffff">Copyright © Munken 2017</font>
</div>

</body>
</html>

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Jan 2010

@Astroman:
Angående alla <br>-taggar, vill du bara ha mellanrum mellan element så använd t.ex margin i CSS.

För övrigt så du fått tips om tredje knappen(#active), DOCK, när jag kollar din länk, så är det inte en implementation som kommer fungera rakt av.

Är tanken att den tredje bakgrundsbilden bara ska visas under tiden klicket sker, eller ska den även ligga kvar efter jag släpper vänsterknappen på musen?

Ska den bara visas på själva klicken, borde du kunna byta ut

a.btn:a#current {
background: url('http://hem.bredband.net/gunmun/button3.jpg');
}

till

a.btn:active {
background: url('http://hem.bredband.net/gunmun/button3.jpg');
}

Bärbar: Macbook Pro 13" Retina Mid-2014

Trädvy Permalänk
Medlem
Plats
Västerås
Registrerad
Sep 2017

Har ändrat till "active", och det ser ut att funka.

Om man använder margin i CSS, skriver man in mellanrummet en gång, och så får man det mellan alla bilder?

Nu är det så där igen........ Vad är en implementation?

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Jan 2010
Skrivet av Astroman:

Har ändrat till "active", och det ser ut att funka.

Om man använder margin i CSS, skriver man in mellanrummet en gång, och så får man det mellan alla bilder?

Nu är det så där igen........ Vad är en implementation?

CSS kan du sätta på klasser, IDn, typ av taggar mm.
Så vill du t.ex ha margin på varenda img-tagg så kan du bara skriva
img{
margin : 0;
}

Byt ut 0 med passande värde.

"implementation" i fallet i mitt inlägg va mer generell användning av ordet. Jag menade praktiskt taget "använd".
"Går inte att implementera rakt av" - "Går inte att använda rakt av"

Bärbar: Macbook Pro 13" Retina Mid-2014

Trädvy Permalänk
Medlem
Plats
Västerås
Registrerad
Sep 2017
Skrivet av Sonywalk:

CSS kan du sätta på klasser, IDn, typ av taggar mm.
Så vill du t.ex ha margin på varenda img-tagg så kan du bara skriva
img{
margin : 0;
}

Byt ut 0 med passande värde.

"implementation" i fallet i mitt inlägg va mer generell användning av ordet. Jag menade praktiskt taget "använd".
"Går inte att implementera rakt av" - "Går inte att använda rakt av"

Det är mycket att lära märker jag.
Så som jag gjort sidan, är den gjord så den är trög att ladda upp? Alltså att man kan göra den enklare?

Den verkar ju funka ganska bra.

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Jan 2010
Skrivet av Astroman:

Det är mycket att lära märker jag.
Så som jag gjort sidan, är den gjord så den är trög att ladda upp? Alltså att man kan göra den enklare?

Den verkar ju funka ganska bra.

Jag har hobbyutvecklat i typ... 10 år. Jobbat med det 3 år(inräknat några månaders praktik) och jag har mycket kvar o lära mig
Det är ju det som är det roliga

Det är egentligen första laddningen som tar "tid", sidan är på nästan 10MB, vilket egentligen inte är nått problem om man inte sitter på ADSL-kanske. Efter första laddningen så har ju webbläsaren cache på bilderna så då hinner man knappt blinka nästa gång man laddar sidan

Bilder kan du ju testa att komprimera.

Bärbar: Macbook Pro 13" Retina Mid-2014

Trädvy Permalänk
Medlem
Plats
Västerås
Registrerad
Sep 2017
Skrivet av Sonywalk:

Jag har hobbyutvecklat i typ... 10 år. Jobbat med det 3 år(inräknat några månaders praktik) och jag har mycket kvar o lära mig
Det är ju det som är det roliga

Det är egentligen första laddningen som tar "tid", sidan är på nästan 10MB, vilket egentligen inte är nått problem om man inte sitter på ADSL-kanske. Efter första laddningen så har ju webbläsaren cache på bilderna så då hinner man knappt blinka nästa gång man laddar sidan

Bilder kan du ju testa att komprimera.

Jo,jag förstår dig. Jag har lackat bilar och MC i ca 40år, det blir att man vill testa "nya" saker när allt bara går på rutin och inte är kul längre.

Jag har tänkt på det att komprimera bilder, men jag vill inte förlora kvaliteten. Och jag har 250Mbps fiber uppkoppling, så det går väl bara trögt när man har en seg dator.

Vad menar du med att man inte kan "använda rakt av"?

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Jan 2010
Skrivet av Astroman:

Jo,jag förstår dig. Jag har lackat bilar och MC i ca 40år, det blir att man vill testa "nya" saker när allt bara går på rutin och inte är kul längre.

Jag har tänkt på det att komprimera bilder, men jag vill inte förlora kvaliteten. Och jag har 250Mbps fiber uppkoppling, så det går väl bara trögt när man har en seg dator.

Vad menar du med att man inte kan "använda rakt av"?

Ofta kan man göra bilder rätt mycket mindre, och många skulle inte märka skillnaden. Kan försöka sig fram

Tredje bilden(klick);
CSSen va som följade :
a#active{
background-image: url(...);
}

a#active betyder att CSSen(tredje bilden) skulle sättas på a-taggen med id "active"(# = id).

Alltså skulle tredje bilden komma på länken som såg ut som följande: <a href="urltillnågonsida" id="active" />länk</a>

Alltså blir CSSen i sig värdelös om du inte hårdkodar id="active" på någon länk, eller lägger till den på länken du klickar på med javascript.

Så att det inte "fungerar rakt av" betyder helt enkelt i detta fall att det inte bara fungerade att kopiera i ovanstående CSS, eftersom du inte har en länk med id active, och inte ändrar vilken länk som har id active vid klick.

Bärbar: Macbook Pro 13" Retina Mid-2014

Trädvy Permalänk
Medlem
Plats
gbg
Registrerad
Nov 2007
Skrivet av Astroman:

Hej.

nybörjare på det här, men jag försöker göra en hemsida och lägga dit knappar. Har fått det att funka bra i HTML editorn, men när jag testar på webben funkar det inte.

Här är min "test" sida på nätet: http://hem.bredband.net/gunmun/knapp.html

I HTML editorn ligger knapparna på varandra när man hovrar, men på nätet "ramlar" den ner.

Någon som vet vad som är fel?

Så här ser kodningen ut:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>knapp</title>
</head>
<style type="text/css">
.knapp {
width: 200px;
height: 50px;
position: relative;
display: inline;
margin: 0px;

}
.knapp .img-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.knapp:hover .img-top {
display: inline;
}

</style>
<body>

<div class="knapp">
<A HREF="http://hem.bredband.net/gunmun">
<img src="button1.jpg">
<img src="button2.jpg" class="img-top">
</A>
</div>

</body>
</html>

Nu har du säkert fått en hel del hjälp på vägen redan, vill bara tipsa om https://webdesignskolan.se/
-Det var nog den mest värdefulla siten då jag började med webbdesign i början av 2000-talet, och den håller fortfarande måttet.

Ett par tumregler:
*Undvik WYSIWYG-editorer linkande Frontpage som slänger in tonvis med skräpkod, gammal men värdefull regel.
*Använd aldrig stora bokstäver för HTML-kod eller i filnamn som du ämnar nyttja på webben. Normalt sett idag borde det inte vara någon ko på isen men förr var det så och tyvärr finns sådant kvar, versaler på fel ställen kan ställa till med rejäla problem i programmeringssammanhang. (Undantaget för versaler i webbkod är mer avancerade kodspråk ex. Java och PHP.)

Alltså, istället för: <A HREF Använd: <a href

*Taggen för <style> bör befinna sig inom <head></head> taggarna.

Alltså: <head><style></style></head>

Tower: ace Battle IV | CPU AMD Phenom II X2 BE unlocked 4cores@3,2GHz | RAM 8GB DDR2@800MHz | MB ASUS M4A785-M | GFK AMD Radeon HD 6850 1GB | HDD Kingston SSD Now 60GB (/) Seagate 2TB(/home) | OS Ubuntu 16.04 LTS

Trädvy Permalänk
Medlem
Plats
Västerås
Registrerad
Sep 2017
Skrivet av Sonywalk:

Ofta kan man göra bilder rätt mycket mindre, och många skulle inte märka skillnaden. Kan försöka sig fram

Tredje bilden(klick);
CSSen va som följade :
a#active{
background-image: url(...);
}

a#active betyder att CSSen(tredje bilden) skulle sättas på a-taggen med id "active"(# = id).

Alltså skulle tredje bilden komma på länken som såg ut som följande: <a href="urltillnågonsida" id="active" />länk</a>

Alltså blir CSSen i sig värdelös om du inte hårdkodar id="active" på någon länk, eller lägger till den på länken du klickar på med javascript.

Så att det inte "fungerar rakt av" betyder helt enkelt i detta fall att det inte bara fungerade att kopiera i ovanstående CSS, eftersom du inte har en länk med id active, och inte ändrar vilken länk som har id active vid klick.

Ska kolla på det. Nu har jag nått att göra i kväll.

Skickades från m.sweclockers.com