Kjapp og trygg hosting for Wordpress

Bilde som nettside

H

hurricane

Medlem
skal lage en nettside. Nettsiden skal bestå av et heldekkende bilde og 3 linker som også er bilder.

Her er skisse over nettsiden:

Det sorte er bildet som går over hele nettsiden. de 3 firkantene er bilder som skal være linker.


er helt klar over at dette ikke vil funke særlig bra mtp seo, er også helt klar over at dette ikke er optimalt mtp alle oppløsningene man har.

Så til spørsmålet: hvordan kan jeg få dette til med best mulig resultat? bildet som skal være bagrunn er: 5000x5000px og er jo 5mb. Så vet så pass at filstørrelsen må reduseres heftig.

Trenger litt hjelp til å komme i gang.

Har forøvrig dwcs6
 
adeneo

adeneo

Medlem
Dette er vel ikke akkurat rakettforskning ?

HTML: 
<!DOCTYPE html>
    <head>
        <title>Min nettside</title>
        <style type="text/css">
            body {height: 100%; width: 100%; margin:0; padding:0;}
            #bg {position: fixed; top:0; left:0; height: 100%; width: 100%;}
            #lenke1, #lenke2, #lenke3 {
                  width: 100px; height: 100px; position: absolute; top: 100px;
            }
            #lenke1 {left: 100px;}
            #lenke2 {left: 300px;}
            #lenke3 {left: 500px;}
            #lenke1 img, #lenke2 img, #lenke3 img {width: 100%; height: 100%;}
        </style>
    </head>
    <body>
        <img id="bg" src="lenke/til/bakgrunnsbildet.png" alt="bakgrunn" />
        <a href="http://lenke1.html" id="lenke1">
             <img src="lenke/til/bilde_1_lenke.png" alt="lenke 1" />
        </a>
        <a href="http://lenke2.html" id="lenke2">
             <img src="lenke/til/bilde_2_lenke.png" alt="lenke 2" />
        </a>
        <a href="http://lenke3.html" id="lenke3">
             <img src="lenke/til/bilde_3_lenke.png" alt="lenke 3" />
        </a>
    </body>
</html>

Du kan forøvrig også sette bakgrunnsbilder til å dekke hele skjermen med CSS3:

HTML: 
html { 
  background: url(lenke/til/bakgrunnsbildet.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

DEMONSTRASJON
 
Sist redigert:
H

hurricane

Medlem
adeneo skrev:
Dette er vel ikke akkurat rakettforskning ?

HTML: 
<!DOCTYPE html>
    <head>
        <title>Min nettside</title>
        <style type="text/css">
            body {height: 100%; width: 100%; margin:0; padding:0;}
            #bg {position: fixed; top:0; left:0; height: 100%; width: 100%;}
            #lenke1, #lenke2, #lenke3 {
                  width: 100px; height: 100px; position: absolute; top: 100px;
            }
            #lenke1 {left: 100px;}
            #lenke2 {left: 300px;}
            #lenke3 {left: 500px;}
            #lenke1 img, #lenke2 img, #lenke3 img {width: 100%; height: 100%;}
        </style>
    </head>
    <body>
        <img id="bg" src="lenke/til/bakgrunnsbildet.png" alt="bakgrunn" />
        <a href="http://lenke1.html" id="lenke1">
             <img src="lenke/til/bilde_1_lenke.png" alt="lenke 1" />
        </a>
        <a href="http://lenke2.html" id="lenke2">
             <img src="lenke/til/bilde_2_lenke.png" alt="lenke 2" />
        </a>
        <a href="http://lenke3.html" id="lenke3">
             <img src="lenke/til/bilde_3_lenke.png" alt="lenke 3" />
        </a>
    </body>
</html>

Du kan forøvrig også sette bakgrunnsbilder til å dekke hele skjermen med CSS3:

HTML: 
html { 
  background: url(lenke/til/bakgrunnsbildet.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

DEMONSTRASJON
Klikk for å utvide...

Fantastisk, dette var jo utrolig enkelt.
En ting til:
hva om jeg ønsker å ha linkene her på siden:

alltid ved siden av stjernen? dersom jeg setter f.eks: top: 500px og left 900px, så vil jo dette være feil i forhold til andre oppløsninger enn det jeg bruker?
 
H

hurricane

Medlem
TAkker for gode svar!
LA oss si at jeg vil plassere linkene litt lengre nede og helt til siden. F.eks: top: 600px og left: 900px (ved siden av et element i bakgrunnsbildet). Hvordan får jeg dette til å bli rett i alle oppløsninger ? Poenget mitt er: bakgrunnen vil tilpasse seg oppløsnig, ikke linkene...
 
Sist redigert:
J

jigge

Medlem
Du vil at linkene skal tilpasse seg siden?

Hvis ikke:
Bildelinkene kommer til å forandre størrelse hvis du ønsker at de skal tilpasse seg på den samme måten som bakgrunnen. (På 800x600 så vil bildelinkene være nærmest uleselige)
 
Sist redigert:
H

hurricane

Medlem
Hei, jeg ønsker ikke at størrelsen på linkene skal endres. For å illustrere:
https://dl.dropbox.com/u/39838620/bilde.jpg
jeg ønsker at linkene hele tiden skal være ved siden av stjernen.
Hvis jeg setter linkene til å være 600px x 1000px +++ vil jeg måtte scrolle for å komme til dem dersom jeg går inn på nettsiden med en skjerm som har mindre oppløsning enn skjermene jeg satt opp nettsiden med.

Sliten i hodet og har litt vanskelig for å forklare hva jeg ønsker, håper dog du/dere forstår.


EDIT:
Herregud,
er det ikke bare å sette % i stedet for px?
 
Sist redigert:
J

jigge

Medlem
HTML: 
<!DOCTYPE html>
<html>
<head>
<style>

       html { 
  background: url(http://i.telegraph.co.uk/multimedia/archive/02371/karen-ann-jones_2371086k.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
div.ex
{
margin-left:10%;
margin-top:10%;

}
 #lenke1, #lenke2, #lenke3 {
                  width: 100px; height: 100px;
     }
    #lenke1 img, #lenke2 img, #lenke3 img {width: 100px; height: 100px; margin-right: 10px;}
</style>
</head>

<body>


<div class="ex"> 
<a href="http://lenke1.html" id="lenke1">
             <img src="http://i.telegraph.co.uk/multimedia/archive/02371/elliott-gresswell_2371087k.jpg"/></a>
<a href="http://lenke1.html" id="lenke2">
             <img src="http://i.telegraph.co.uk/multimedia/archive/02371/elliott-gresswell_2371087k.jpg" /></a>
<a href="http://lenke1.html" id="lenke3">
             <img src="http://i.telegraph.co.uk/multimedia/archive/02371/elliott-gresswell_2371087k.jpg" /></a>


</div>

</body>
</html>

Noe sånt noe? Eller er jeg helt på jordet

Edit: Fortsatte på adeneo sitt mesterverk, håper det går bra :)
 
Sist redigert:
H

hurricane

Medlem
Takker for input.
Gikk for det adeneo viste til. Syntes det var enkelt å greit.

Opplever dog et problem.
bildelinkene legger seg over et element på bildet som ikke er ønskelig i enkelte oppløsniger. For å illustrere: la oss ta for oss følgende bilde: https://dl.dropbox.com/u/39838620/bilde.jpg

under noen oppløsninger plasseres bildelinkene (firkantene) ser over streken på bilde. Tingen er at jeg ønsker llink-bildene ALLTID under streken og rett til høyre for stjernen.

css for lenke: #lenke1 {position: absolute; top: 85%; left: 63%; }
 
Du må logge inn eller registrere deg for å svare her.
Topp