Gå til innhold

bilder rundt kanten layers?

perplex

Av perplex
i Programmering og webutvikling

Anbefalte innlegg

Videoannonse

Videoannonse
Annonse
834HF42F242

834HF42F242

Skrevet
Skrevet (endret)

Ikke etter boka, men et enkelt utkast for hvordan det kan løses:

 

<div class="boks">
 <div class="fyll">
 <p>Innhold</p>
  <img src="./bunn.png" alt=Grafikk" />
 </div>
</div>

 

.boks {
 width: 200px;
 background: url(./topp.png) no-repeat;
 padding: 5px;
}

.fyll {
 background: url(./fyll.png) repeat-y; /*Et bilde som er 200 px bredt, og 1 px høyt for eksempel */
}

 

PS: Bruk ren html-editor. Makroprogrammer er for pyser.

Endret av neitakk
Lenke til kommentar
qualbeen

qualbeen

Skrevet
Skrevet

bruk koden som ligger på http://www.musikksmaken.com/boks.asp som utgangspunkt. Resultatet kan f.eks bli slik:

 

Du trenger 2 filer, ei html-fil og en css-fil

css: (style.css) Skjult tekst: (Marker innholdet i feltet for å se teksten):

img {
 border: 0px,
}

h1 {
 margin-top: 0px;
}

p {
 margin-bottom: 0px;
}
.midten {
 background: url(./bilder/kolonne1-mellom.png) repeat-y;
 width: 200px;
}
.topp {
 background: url(./bilder/kolonne1-topp.png) no-repeat;
 padding: 10px;
}

html-fil: Skjult tekst: (Marker innholdet i feltet for å se teksten):

<html>
<head>
   <title>Tittel her</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
   <div class="midten">
       <div class="topp">
           <h1>Test</h1>
           <p>En setning her og der gjør vel ingenting</p>
       </div>
       <img src="http://www.musikksmaken.com/bilder/kolonne1-bunn.png" title="grafikk" />
   </div>

   <div class="midten">
       <div class="topp">
           <h1>Test2</h1>
           <p>Nok en boks med bilde rundt</p>
       </div>
       <img src="http://www.musikksmaken.com/bilder/kolonne1-bunn.png" title="grafikk" />
   </div>

</body>
</html>

så må du bare sørge for å oppdatere bilde-urlene til de du har
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
×
×
  • Opprett ny...