Trenger en html kode..

[zenhagen]

Kunne godt tenke meg å lage en del små bannere på forsiden til nettbutikken i stedet for utvalgte produkter som vi har nå. Har lett etter en ferdig html kode som jeg kan tilpasse selv, men finner lite...

Noen som har et ferdig oppsett?

Tenker noe likt denne forsiden
Butikken hvor bannerne skal være er her

Mvh Tommy

 

[Tonny Kluften]

Sett inn dette på forsiden.

<a href="http://blabla.no/produktside"><img src="http://blabla.no/bilde.jpg" /></a>

Slik har de andre gjort det.
<a href="/categories/sommersalg"><img src="/users/xlifeny_mystore_no/ads/1372407363.jpg" border="0" alt=""></a>

 

[spikre]

For ordens skyld:
Bruk height og width i pixler på samtlige bilder. Da lastes sidestrukturen raskere, og den besøkende får en bedre opplevelse.

 

[zenhagen]

Takker for svar.. Det å legge inn et bilde er greit nok, men når jeg skal ha 2 ved siden av hverandre med litt "ramme" mellom blir det straks verre. Også blir det jo det samme nedover men med litt forskjellige formater.

Kan det lønne seg å bruke ett stort bilde og gjøre de forskjellige delene av det klikkbart med foreksempel Image Map Tool - On-line Image Map Creator - HTML & CSS

 

[spikre]

Kan det lønne seg å bruke ett stort bilde og gjøre de forskjellige delene av det klikkbart med foreksempel Image Map Tool - On-line Image Map Creator - HTML & CSS

Det er absolutt siste utvei. Les deg opp på CSS, eller få noen til å skrive koden for deg.

 

[selbekk]

for pete's sake...

Here you go:

HTML:

<div class="wrapper">
    <div class="banner">
        <a href="some-page.html">
            <img src="some-image.png" alt="Some description" />
        </a>
    </div>
    <div class="banner">
        <a href="some-page.html">
            <img src="some-image.png" alt="Some description" />
        </a>
    </div>
    <div class="banner">
        <a href="some-page.html">
            <img src="some-image.png" alt="Some description" />
        </a>
    </div>
    <div class="clearer"></div>
</div>

CSS:

body {
    background-color: #feefef;
}

/* Denne omkranser alle bannere */
.wrapper {
    width: 600px;
    margin: 10px auto;
    background-color: white;
}

/* Dette er hver banner */
.banner {
    width: 276px;
    padding: 5px;
    margin: 5px;
    border: 1px solid #aaa;
    background: #bbb;
    float: left;
}

/* La linken fylle opp hele innsiden av boksen sin */
.banner a {
    display: block; 
    width: 100%;
}

/* litt image styles */
.banner a img {
    border: 0;
    background: #c0c0c0;
    width: 100%;
    height: 50px;
}

/* Hva skjer når du putter musen over bildet? Det spesifiserer du her */
.banner:hover,
.banner:focus {
    border: 1px solid #ccc;
    background: #eee;
}

/* Utility klasser */
.clearer {
    clear: both;
}

For live demo: Edit this Fiddle - jsFiddle

 

[Tonny Kluften]

Nydelig selbekk!

 

[zenhagen]

Flott! Den skal jeg prøve selbekk.

 

[ptomter]

Selbekk dette ser veldig ryddig og pent ut!