Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Inte lika på webben som i HTML editorn.

1 2 3
Skriv svar
Permalänk
Medlem
●

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>

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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>
Visa signatur

Ryzen 5600X | MSI Tomahawk | GTX 3070

Redigera
Citera flera Citera
Permalänk
Medlem
●

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.

Redigera
Citera flera Citera
Permalänk
99:e percentilen ★
●

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

Visa signatur

Skrivet med hjälp av Better SweClockers

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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.

Gå till inlägget

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.

Visa signatur

Ryzen 5600X | MSI Tomahawk | GTX 3070

Redigera
Citera flera Citera
Permalänk
Medlem
●

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.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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.

Gå till inlägget

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

Visa signatur

Ryzen 5600X | MSI Tomahawk | GTX 3070

Redigera
Citera flera Citera
Permalänk
Medlem
●

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

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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

Visa signatur

Ryzen 5600X | MSI Tomahawk | GTX 3070

Redigera
Citera flera Citera
Permalänk
Medlem
●

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.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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å till inlägget

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å.

Visa signatur

Instagram

14700k @ Stock . 32GB @ 4000MHz . 3070 @ +100/+800MHz
240+360 rad custom loop

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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å till inlägget

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

Visa signatur

Ryzen 5600X | MSI Tomahawk | GTX 3070

Redigera
Citera flera Citera
Permalänk
Medlem
●

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.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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.

Gå till inlägget

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.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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

Visa signatur

Bara gammalt skräp...

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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>
Visa signatur

~. Citera så jag hittar tillbaka .~

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tack alla.
jag ska prova alla tips.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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.

Visa signatur

Instagram

14700k @ Stock . 32GB @ 4000MHz . 3070 @ +100/+800MHz
240+360 rad custom loop

Redigera
Citera flera Citera
Permalänk
Medlem
●
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.

Gå till inlägget

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.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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.

Gå till inlägget

Hur ser din HTML/CSS ut nu?

Visa signatur

Ryzen 5600X | MSI Tomahawk | GTX 3070

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Sonywalk:

Hur ser din HTML/CSS ut nu?

Gå till inlägget

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>

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

@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');
}

Visa signatur

Ryzen 5600X | MSI Tomahawk | GTX 3070

Redigera
Citera flera Citera
Permalänk
Medlem
●

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?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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?

Gå till inlägget

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"

Visa signatur

Ryzen 5600X | MSI Tomahawk | GTX 3070

Redigera
Citera flera Citera
Permalänk
Medlem
●
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"

Gå till inlägget

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.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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.

Gå till inlägget

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.

Visa signatur

Ryzen 5600X | MSI Tomahawk | GTX 3070

Redigera
Citera flera Citera
Permalänk
Medlem
●
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.

Gå till inlägget

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"?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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"?

Gå till inlägget

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.

Visa signatur

Ryzen 5600X | MSI Tomahawk | GTX 3070

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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>

Gå till inlägget

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>

Visa signatur

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 20.04 LTS
-Numera titulerad: "dator-hipster" då jag har en AMD GPU och dessutom kör Linux.

Redigera
Citera flera Citera
Permalänk
Medlem
●
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.

Gå till inlägget

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

Skickades från m.sweclockers.com

Redigera
Citera flera Citera
1 2 3
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara