Gå til innhold

Hvordan lager jeg dette som en nettside?

Teac

Av Teac
i Programmering og webutvikling

Anbefalte innlegg

Teac

Teac

Skrevet
Skrevet (endret)

Har tenkt å lage en nettside hvor hele nettsiden ser ut som dette bilder:

 

 

De tre ordene skal linke til tre forskjellige sider.

Noen som vet hvordan jeg skal gå frem for å lage dette?

 

På forhånd takk.

Endret av Teac
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
emilkje

emilkje

Skrevet
Skrevet

Av en eller annen uforklarlig grunn har jeg aldri likt html image maps. Jeg har alltid syntes det virker så beta-aktig.

 

Personlig ville jeg ha satt bildet uten teksten som bakgrunn i html bodyen, også ville jeg lagt en <div> med lenkene oppå bildet.

 

Eks:

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Min nettside</title>
<style type="text/css">
html, body {margin:0;}
body {
background:#000 url(/link/til/bilde.jpg) top left no-repeat;
}
#meny {
position:absolute;
top:100px;
left:100px;
width:400px;
}

#meny ul {margin:0; padding:0;}
#meny ul li {
list-style:none;
display:inline;
margin-left:10px;
}
#meny ul li a {
font-family:Tahoma, Geneva, sans-serif;
color:#fff;
}
</style>
</head>

<body>
<div id="meny">
   	<ul>
       	<li><a href="#">Mail</a></li>
           <li><a href="#">Kalender</a></li>
           <li><a href="#">Filer</a></li>
       </ul>
   </div>  
</body>
</html>

 

Kanskje dette er noe mer tungvindt, men jeg har alltid foretrukket å gjøre det på denne måten.

Lenke til kommentar
chrislas

chrislas

Skrevet
Skrevet

Hehe, er vel muligens litt enig med deg, men det kommer vel an på personlige preferanser.

Image-maps har vært med i HTML-standarden så lenge jeg kan huske, og er nok kommet for å bli, så løsningen er helt legitim.

 

Problemet med din løsning er vel muligens at han ikke får fonten han har på bildet, og da faller jo designet litt ut...

Lenke til kommentar
emilkje

emilkje

Skrevet
Skrevet

jeg har sjekket kildekoden din og endret det slik at bildet blir midtstilt i tillegg til å fjerne den sorte rammen på toppen. Dette kan lett endres i css koden i div#imagecontainer -> margin verdien.

 

<!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" />
<title>You've just entered Petter's Tropical Island!</title>
<style type="text/css">
html, body {margin:0; padding:0;}
body {
background-color: #000;
}
#imagecontainer img {
}
div#imagecontainer {
width:1092px;
height:886px;
margin:0 auto;
}
</style>
</head>

<body>
<div id="imagecontainer">
<img src="http://www.petterweb.com/main.jpg" width="1092" height="886" border="0" usemap="#Map" />
 <map name="Map" id="Map">
   <area shape="rect" coords="654,200,809,262" href="http://home.petter-s.operaunite.com/file_sharing/content/" target="Filer " />
   <area shape="rect" coords="362,199,635,259" href="http://calendar.google.com" target="Petter sin kalender" />
   <area shape="rect" coords="207,194,340,257" href="http://ex.petterweb.com" target="Petter sin mail " />
 </map>
</div>
</body>
</html>

  • Liker 1
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...