Gå til innhold

Problemer med å gjenta bilde gjennom div

hlnd

Av hlnd
i Programmering og webutvikling

Anbefalte innlegg

hlnd

hlnd

Skrevet
Skrevet (endret)

Prøver å lage en slags ramme rundt der teksten skal være som skalerer etter hvor mye tekst som skal være inni, og tenkte at det kunne vært mulig ved å la et bilde gjentas vertikalt i en div som får samme lengde som en annen som inneholder hovedteksten. Hadde vært flott med hjelp, står litt fast.

 

Prøver å få det til å se sånn ut:

33tmsqv.jpg

 

HTML:

 

 

<!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>KZ0.org</title>

<link href="main.css" rel="stylesheet" type="text/css" />

</head>

 

<body>

<div id="container">

<div id="topBanner">

</div> <!-- End #topBanner -->

<div id="mainContent">

<div id="top">

</div> <!-- End #top -->

<div id="reapeatLeft">

</div> <!-- End #repeatLeft -->

<div id="centerContent">

blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla

</div> <!-- End #centerContent -->

<div id="repeatRight">

</div> <!-- End #repeatRight -->

<div id="bottom">

</div> <!-- End #bottom -->

</div> <!-- End #container -->

</body>

</html>

 

 

 

CSS:

 

 

@charset "utf-8";

/* CSS Document */

 

/* Structure */

#container{

width:735px;

margin-left:auto;

margin-right:auto;

}

 

#topBanner{

width:735px;

height:135px;

background-image:url(../_img/banner_top.jpg)

}

 

#mainContent{

width:735px;

/* Hide the following:

background-image:url(../_img/container.jpg)

background-repeat:repeat-y

End hide */

}

 

#top{

width:735px;

height:69px;

background-image:url(../_img/main_content_top.jpg);

}

 

#reapeatLeft{

width:62px;

float:left;

background-image:url(../_img/main_content_right_repeat.jpg);

background-repeat:repeat-y;

}

 

#repeatRight{

width:62px;

float:right;

background-image:url(../_img/main_content_left_repeat.jpg);

background-repeat:repeat-y;

}

 

#centerContent{

background-color:#646464;

width:649px;

margin-left:auto;

margin-right:auto;

}

 

#bottom{

width:735px;

height:58px;

background-image:url(../_img/main_content_bottom.jpg);

}

 

 

 

CSS etter fiks:

 

@charset "utf-8";

/* CSS Document */

 

/* Structure */

 

body{

background-color:#d6d6d6;

}

 

#container{

width:735px;

margin-left:auto;

margin-right:auto;

background-image:url(../_img/container.jpg)

}

 

#topBanner{

width:735px;

height:135px;

background-image:url(../_img/banner_top.jpg);

}

 

#mainContent{

width:735px;

/* Hide the following:

background-image:url(../_img/container.jpg)

background-repeat:repeat-y

End hide */

}

 

#top{

width:735px;

height:69px;

background-image:url(../_img/main_content_top.jpg);

}

 

#reapeatLeft{

width:62px;

float:left;

background-image:url(../_img/main_content_right_repeat.jpg);

background-repeat:repeat-y;

}

 

#repeatRight{

width:62px;

float:right;

background-image:url(../_img/main_content_left_repeat.jpg);

background-repeat:repeat-y;

}

 

#centerContent{

background-color:#646464;

width:649px;

margin-left:auto;

margin-right:auto;

}

 

#bottom{

width:735px;

height:58px;

background-image:url(../_img/main_content_bottom.jpg);

}

 

 

Takk på forhånd :)

 

(Ikke hovedformålet med tråden, men tar gjerne imot kritikk også :))

Endret av Bl4cKnD
Lenke til kommentar

Videoannonse

Videoannonse
Annonse

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...