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

länkbar DIV

1
Skriv svar
Permalänk
Medlem
●

länkbar DIV

Hej !

Håller på och lär om och utökar mina kunskaper i HTML och CSS och har stött på ett problem som jag inte riktigt vet hur jag skall lösa då jag tror min idé inte kommer att fungera.

Men problemet jag har är att jag använder mig utav en <img> för att lägga in loggan. dock vill jag lätt kunna ändra logga och har då tänkt att använda mig av en <div> och lägga en background-image på den. men det jag nu vill är att ha bilden länkbar till startsidan. Förut hade jag ju <a> runt <img>. men fungerar ju inte med <div>.

Någon som har en idé om hur jag skall lösa detta ?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Om du inte vill använda js bör du kunna lägga in en anchor tag inuti diven och sedan via CSS för denna anchor tag sätta property "display: block" samt width/height till 100% eller till motsvarande värdet för den omgivande diven.

Visa signatur

[Intel i5 2500K][Corsair 1600 Mhz][EVGA GTX 780][Corsair TX750][WD Black 750GB][Intel 510 SSD 128GB][Lian Li PCV-1020A][ASUS PB278Q]

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
<div style="background-image: url(...); cursor: pointer; height: ..px; width: ..px;" onClick="location.href=('dinlenk.php');"></div>

Den där koden ska funka. När du väl klickar på DIV-taggen, så kommer du att bli bli förflyttad till "dinlenk.php".

Visa signatur

Citera mig om du vill att jag ska hitta till ditt svar.
airikr.me. Andra projekt: Keizai, Koroth & Serenum.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Gör som iProtocol säger, onödigt att blanda in massa onödig kod för en sådan enkel funktion!

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Bra, semantisk lösning som inte använder fula JS-hack eller inline-CSS:

<h1><a href="index.html">Din sidtitel</a></h1>
h1 {
	width: 350px; height: 75px;
	padding: 0;
}
h1 a {
	display: block;
	width: 350px; height: 75px;
	background: url("images/header-image.jpg");
	text-indent: -9999px;
}
Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●

tack för alla förslag skall under morgondagen försöka att genomföra något av dem

Men nu kanske kan hjälpa mig med en annan sak. I you's exempel står det...

h1 a { ... }

vad innebär det ???
jag "kan"...

h1 { ... }
a { .. }

men vad/hur skall man tänka när man läser "h1 a" ???

Nu blir det en tit på VM så kommer inte svara er på ett tag igen

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

men vad/hur skall man tänka när man läser "h1 a" ???

Gå till inlägget

"Ett a-element som ligger i ett h1-element"
Läs på om selektorer i CSS på Webboken och Selectutorial.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

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

Bra, semantisk lösning som inte använder fula JS-hack eller inline-CSS:

<h1><a href="index.html">Din sidtitel</a></h1>
h1 {
	width: 350px; height: 75px;
	padding: 0;
}
h1 a {
	display: block;
	width: 350px; height: 75px;
	background: url("images/header-image.jpg");
	text-indent: -9999px;
}
Gå till inlägget

Detta är det absolut bästa alternativet, sökmotoroptimerat och strular never ever.

Ett a-element som ligger i ett h-element är kort och gott:

<h1><a href="#">Jag är en rubrik som även är en länk</a></h1>

Skriver du h1 a {} så pekar du alltså på alla länkar som ligger inom taggen h1. På det viset kan du få bra kontroll över element som ligger djupt ner i en struktur, där endast det objektet ska behandlas och inte övriga på sidan.

Ett till exempel för att förtydliga:

<html>
<head>
<style>
#foo .bar p {color:red;}
#foo .bar p span {color:blue;}
</style>
</head>
<body>
<div id="foo"><div class="bar"><p>Här är en röd text. <span>Här är en blå.</span></p></div></div>
</body>
</html>
Senast redigerat
Visa signatur

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

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

Bra, semantisk lösning som inte använder fula JS-hack eller inline-CSS:

<h1><a href="index.html">Din sidtitel</a></h1>
h1 {
	width: 350px; height: 75px;
	padding: 0;
}
h1 a {
	display: block;
	width: 350px; height: 75px;
	background: url("images/header-image.jpg");
	text-indent: -9999px;
}
Gå till inlägget

Det jag inte förstår med denna "css-regel" är varför <h1> ?
Det förstör ju om jag vill ha <h1> som rubrik på sidan. borde väll gå att använda <h6> som man ändå aldrig använder ?

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

Det jag inte förstår med denna "css-regel" är varför <h1> ?
Det förstör ju om jag vill ha <h1> som rubrik på sidan. borde väll gå att använda <h6> som man ändå aldrig använder ?

Gå till inlägget

För att du vill ha en semantisk och bra struktur; <h1> är till för huvudrubriken på sidan; <h2> är underrubriker osv. – använder du <h6> här så får du en konstig struktur. I framtiden (när HTML5 tagit fart på riktigt) kommer man att kunna ha underbart fina strukturer i sina dokument. Om man vill se hur dokumentet kommer att se ut rent strukturmässigt (det är viktigt, ur t.ex. SEO-synpunkt) kan man använda en outliner.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

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

För att du vill ha en semantisk och bra struktur; <h1> är till för huvudrubriken på sidan; <h2> är underrubriker osv. – använder du <h6> här så får du en konstig struktur. I framtiden (när HTML5 tagit fart på riktigt) kommer man att kunna ha underbart fina strukturer i sina dokument. Om man vill se hur dokumentet kommer att se ut rent strukturmässigt (det är viktigt, ur t.ex. SEO-synpunkt) kan man använda en outliner.

Gå till inlägget

Så skall jag ge min rubrik <h2> då ? Skall läsa din länk lite noggrannare i kväll.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Det är det här som är det fina med CSS, du kommer bara att påverka h1 inom ett visst element, tex:

CSS:
h1 {color:#666;}
#header h1 {color:#f00;}

HTML:
<div id="header"><h1>Titel</h1></div>
<h1>Rubrik</h1>
<p>Innehåll osv..</p>

Där styr du bara h1 inom diven med id "header" till att vara röd medan övriga h1-taggar blir grå.

Visa signatur

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Redigera
Citera flera Citera
Permalänk
Medlem
●

Sen kan man ju förstås diskutera det här med att ha loggan / sidnamnet som en H1a på varje sida. Personligen skulle jag valt att bara göra a-elementet till ett block-element och lägga bakgrunden där för att skicka att ha länken i en H1a. Men detta gäller ju bara om man ärr petig med sökmotoroptimeringen

Visa signatur

/Mvh Stefan

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

Så skall jag ge min rubrik <h2> då ? Skall läsa din länk lite noggrannare i kväll.

Gå till inlägget

Ja. Om sidans rubrik är <h1> så bör dina rubriker vara <h2> och underrubrikerna <h3>, osv.

Visst kan man göra som save föreslår, men personligen tycker jag inte att det ska finnas två huvudrubriker på en sida, det blir tvetydigt (det kan t.ex. tolkas som att sidan har två olika texter eller dylikt). Det finns diskussioner om det här, och t.ex. Roger Johansson (456 Berea St.) har bra inlägg i debatten.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jo mina exempel brukar bli en aning fiktiva. Som You säger så är det bra att inte röra ihop ordningen för elementen och därmed tappa semantiken, som i sin tur är viktig för ex. sökmotoroptimering och framförallt för dig själv som utvecklar att få enkel struktur.

Visa signatur

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Redigera
Citera flera Citera
Permalänk
Medlem
●

Egentligen är det ju bäst att använda img-taggen. Alla andra lösningar går ju såklart men det är ju inte helt perfekt.
Allt innehåll tycker jag ska vara i HTML-koden, självklart med tillhörande alt-taggar och liknande. Jag brukar testa mina sidor med CSS avslaget och ser det bra ut har man troligtvis en snygg markup också. CSS får användas till färger och skit.

Att lura sökmotorerna med rubriker som inte syns osv. är ganska vidrigt och kommer i framtiden inte längre lura sökmotorerna som de gör idag.

Visa signatur

I'm Winston Wolfe. I solve problems.

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

Egentligen är det ju bäst att använda img-taggen. Alla andra lösningar går ju såklart men det är ju inte helt perfekt.
Allt innehåll tycker jag ska vara i HTML-koden, självklart med tillhörande alt-taggar och liknande. Jag brukar testa mina sidor med CSS avslaget och ser det bra ut har man troligtvis en snygg markup också. CSS får användas till färger och skit.

Att lura sökmotorerna med rubriker som inte syns osv. är ganska vidrigt och kommer i framtiden inte längre lura sökmotorerna som de gör idag.

Gå till inlägget

Sen är ju frågan om en logga är innehåll eller inte. Jag brukar tänka mig att det är en rubrik som representeras av en bild; men där bilden är dekorativ. I sådana fall är det betydligt vettigare att ha ett <h1>-element med gömd text än att ha ett <img>-element (som då måste ha en tom alt-sträng, eftersom den är dekorativ); <h1>-elementet kommer ju faktiskt att ge samma information både med och utan CSS i det fallet. Att testa med CSS avslaget är för övrigt good practice, det borde alla göra.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av You:

Sen är ju frågan om en logga är innehåll eller inte. Jag brukar tänka mig att det är en rubrik som representeras av en bild; men där bilden är dekorativ. I sådana fall är det betydligt vettigare att ha ett <h1>-element med gömd text än att ha ett <img>-element (som då måste ha en tom alt-sträng, eftersom den är dekorativ); <h1>-elementet kommer ju faktiskt att ge samma information både med och utan CSS i det fallet. Att testa med CSS avslaget är för övrigt good practice, det borde alla göra.

Gå till inlägget

Varför måste ens img ha ett tomt alt-attribut?
Jag tycker <h1><img src="mcdonalds.gif" alt="McDonald's"></h1> ger mer information än ett stylat h1-element eftersom man uttryckligen beskriver en rubrik med ett grafiskt element. En logotyp är en bild med specifikt typsnitt och komposition snarare än en beskrivande text, så det känns bra att beskriva den som en sådan. Dessutom ger alt-taggen sökmotorer något att greppa på.

W3 använder sig av något liknande. Dock döljer de img-elementet med display:none och stylar a istället, haha..

Citat:

<h1 class="logo"><a tabindex="2" accesskey="1" href="/"><img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C" /> ...

edit: hittade denna information. Jag rekommenderar alla att läsa! Hidden text and links - Webmaster Tools Help

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Intressant diskussion ni har, kan fortfarande inte säga vad som är bra och vad som är dåligt men alltid lär man sig nått

Iaf så har jag nu ännu ett litet problem. Kan man utan att använda egna klasser ha olika utseenden på..
1) <input type="text" />
och
2) <input type="submit" />

EDIT:
En liten annan sak jag har problem med är när jag inkluderar (include 'sida2.php') så blir mina åäö konstiga. Men när jag går till sida2.php så är de korrekta. någon som vet vad felet kan vara ?

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Raxox:

EDIT:
En liten annan sak jag har problem med är när jag inkluderar (include 'sida2.php') så blir mina åäö konstiga. Men när jag går till sida2.php så är de korrekta. någon som vet vad felet kan vara ?

Gå till inlägget

Har du satt <head></head> och <body></body> och en massa annan skit på "sida2"?, det skall alltså vara utan sånt skit när man inkluderar!

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

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

Iaf så har jag nu ännu ett litet problem. Kan man utan att använda egna klasser ha olika utseenden på..
1) <input type="text" />
och
2) <input type="submit" />

Gå till inlägget

I webbläsare som stödjer CSS3 fungerar följande:

input[type="text"] { color: blue; }
input[type="submit"] { color: red; }

...men i det här fallet är det mer korrekt att använda <button>.

Skrivet av Raxox:

En liten annan sak jag har problem med är när jag inkluderar (include 'sida2.php') så blir mina åäö konstiga. Men när jag går till sida2.php så är de korrekta. någon som vet vad felet kan vara ?

Gå till inlägget

Se till att du sparar allt i UTF-8. Och skickar det som UTF-8. Mer om sådant i Webbokens kapitel om teckenkodning.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●

JesperA: Nepp har tagit bort <html><head><body> från sida2

Skrivet av You:

I webbläsare som stödjer CSS3 fungerar följande:

input[type="text"] { color: blue; }
input[type="submit"] { color: red; }

...men i det här fallet är det mer korrekt att använda <button>.

Gå till inlägget

Men kan man använda formulär + <button> ? Fick det inte att fungera förrut men om det skall gå så stavade/skrev jag nog fel förut, händer mig rätt ofta faktiskt

Skrivet av You:

Se till att du sparar allt i UTF-8. Och skickar det som UTF-8. Mer om sådant i Webbokens kapitel om teckenkodning.

Gå till inlägget

Vad jag kan se så har jag sparat det just i UTF-8 överallt. Men skall kolla över det en gång till för säkerhetsskull. Nått annat som kan vara orsaken ?
Eller man över för väll enbart med dessa kodord ? eller har jag missat nått ?

<?php include sida2.php ; ?>

min sida1.php inleds

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

och css filen inleds

@charset "utf-8";
Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Raxox:

Men kan man använda formulär + <button> ? Fick det inte att fungera förrut men om det skall gå så stavade/skrev jag nog fel förut, händer mig rätt ofta faktiskt

Gå till inlägget

Ja. Det är hela poängen med <button>. Se till att den har type="submit" bara.

Skrivet av Raxox: 
<?php include sida2.php ; ?>

min sida1.php inleds

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

och css filen inleds

@charset "utf-8";
Gå till inlägget

Se till att din webbserver skickar allt som UTF-8 också. Kolla vilken teckenkodning din webbläsare tycker att det är. Använd en XML-deklaration om du nu envisas med att använda XHTML. (Och för guds skull, ange inte MIME-typen som text/html om du använder XHTML. Det är fel, och en av anledningarna till att jag personligen rekommenderar folk att använda HTML istället. Det är sällan folk har koll på alla implikationer XHTML medför.)

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

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

Ja. Det är hela poängen med <button>. Se till att den har type="submit" bara.

Gå till inlägget

Det var nog det jag missade.

Skrivet av You:

Se till att din webbserver skickar allt som UTF-8 också. Kolla vilken teckenkodning din webbläsare tycker att det är. Använd en XML-deklaration om du nu envisas med att använda XHTML. (Och för guds skull, ange inte MIME-typen som text/html om du använder XHTML. Det är fel, och en av anledningarna till att jag personligen rekommenderar folk att använda HTML istället. Det är sällan folk har koll på alla implikationer XHTML medför.)

Gå till inlägget

Hur ser jag vilken teckenkodning som servern skickar ?
Använder dreamweaver och all den koden har dreamweaver genererat. Kan du ge konkreta exempel på vad jag borde ändra i koden. Men skall ta mig en titt i min bok om jag kommer fram till nått innan du svarar

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

Hur ser jag vilken teckenkodning som servern skickar ?

Gå till inlägget

I Firefox ser man det genom att gå in på Visa ⇒ Kodning.

Skrivet av Raxox:

Använder dreamweaver och all den koden har dreamweaver genererat. Kan du ge konkreta exempel på vad jag borde ändra i koden. Men skall ta mig en titt i min bok om jag kommer fram till nått innan du svarar

Gå till inlägget

Dreamweaver genererar hemsk kod. Det är betydligt bättre att skriva allt själv (och som sagt hålla sig borta från XHTML tills man vet att man verkligen behöver det). Läs Webboken (ignorera cics dåliga svenska/copypaste-skills) och lär dig skriva HTML från grunden!

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

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

I Firefox ser man det genom att gå in på Visa ⇒ Kodning.

Dreamweaver genererar hemsk kod. Det är betydligt bättre att skriva allt själv (och som sagt hålla sig borta från XHTML tills man vet att man verkligen behöver det). Läs Webboken (ignorera cics dåliga svenska/copypaste-skills) och lär dig skriva HTML från grunden!

Gå till inlägget

Använder då Chrome men var ungefär samma där som i FF om någon skulle undra.

Kommer nog fortsätta använda dreamwaver ett tag till. Vill bara påpeka att jag skriver all kod själv förutom den kod som DW skapar när jag skapar en fil.

Men nu har jag ännu en fråga. Ursäkta om någon tycker jag är för jobbig

Iaf men mitt formulär så har jag ation="#" för att länka tillbaka till aktuell hemsida men formulären töms vilket jag inte riktigt gillar i detta fallet. Hur man man fixa till detta ?

PS! Har fortfarande php om det skulle behövas.

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

JesperA: Nepp har tagit bort <html><head><body> från sida2

Men kan man använda formulär + <button> ? Fick det inte att fungera förrut men om det skall gå så stavade/skrev jag nog fel förut, händer mig rätt ofta faktiskt

Vad jag kan se så har jag sparat det just i UTF-8 överallt. Men skall kolla över det en gång till för säkerhetsskull. Nått annat som kan vara orsaken ?
Eller man över för väll enbart med dessa kodord ? eller har jag missat nått ?

<?php include sida2.php ; ?>

min sida1.php inleds

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

och css filen inleds

@charset "utf-8";
Gå till inlägget

Hämtar du något från databaser?
Vad händer om du använder charset: ISO-8859-1?

Visa signatur

daytona 675 -08, iphone 4, samsung full hd, ps3 = svarta leksaker

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