Hejsan har ett litet problem som säkert går att lösa.
Jag har skapat en sidan och mitten delen ska växa beroende på hur mycket sidan innehåller. Allt det funkar problemet är nu att mitten delen och den nedersta delen är två bilder som är jätte fina tillsammans så länge båda bilderna är hela. Den understa biten som bara hänger med neråt är alltid lika stor. Men mitten bilden repeterar sig och den sista biten blir olika stor beroende på hur mycket innehåll det finns. Så ibland kan mitten bilden repetera sig tex 2,5 gång och då passar ju inte den nedre bilden med den sista delen av mitten efter som det bara är halva bilden. Hoppas ni häånger med på vad jag menar med min flummiga förklaring. Grejen är den att kan man få bilden att alltid repetera sig helt. tex om den ändå ska repetera sig så att den repeterar sig helt och inte bara så mycket som innehållet kräver.
hoppas allt är klart med vad jag menar. Jag skickar även med css koden och html koden.
body
{
background-color:#000000;
margin-bottom:0;
margin-top:0;
}
p
{
margin-top:0;
margin-bottom:0;
}
#main_content
{
position:relative;
width:712px;
margin:0px auto;
margin-bottom:0px;
vertical-align:top;
}
#top
{
background-image:url(bilder/top.jpg);
height:682px;
background-repeat:no-repeat;
}
#bottom
{
background-image:url(bilder/bottom.jpg);
height:523px;
background-repeat:no-repeat;
vertical-align:bottom;
}
#dekoration1
{
z-index:2;
position:absolute;
top:223px;
left:-68px;
background-image:url(bilder/decorationTop1.jpg);
background-repeat:no-repeat;
height:261px;
width:68px;
}
#dekoration2
{
z-index:2;
position:absolute;
top:221px;
left:712px;
background-image:url(bilder/decorationTop2.jpg);
background-repeat:no-repeat;
height:263px;
width:66px;
}
#dekoration3
{
z-index:2;
position:relative;
top:209px;
left:-785px;
background-image:url(bilder/decoration_paper.jpg);
background-repeat:no-repeat;
height:221px;
width:75px;
}
#dekoration4
{
z-index:2;
position:relative;
top:-86px;
left:711px;
background-image:url(bilder/decoration_pen.jpg);
background-repeat:no-repeat;
height:443px;
width:138px;
}
#middle
{
z-index:1;
position:relative;
background-image:url(bilder/middle.jpg);
background-repeat:repeat-y;
padding-left:30px;
}
<!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" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<title>TKINGDOM</title>
</head>
<body>
<div id="main_content">
<div id="top"></div>
<div id="dekoration1"></div>
<div id="dekoration2"></div>
<div id="middle">
<p>sdsdfsdf</p>
<p>sdf</p>
<p>sdsdfsdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdfsdlkjsdlfjsd</p>
<p>sdfjksdäkjfsds</p>
<p>dfsdlfjsdölfjsdäfjsdf</p>
<p>fsd</p>
<p>sfsd</p>
<p>sdf</p>
<p>sdff</p>
<p>f</p>
<p>f</p>
<p>f</p>
<p>f</p>
<p>ff</p>
<p>dfg</p>
<p>g</p>
<p>g</p>
<p>fgf</p>
<p>gfggfg</p>
<p>SDLKFJSDFJSD</p>
<p>SDFÖLLJSDFLÖKJSDF</p>
<p>SD</p>
<p>FSDF</p>
<p>DSFSD</p>
<p>FSD</p>
<p>F</p>
<p>SD</p>
<p>FSDSDFSDFSDSDFS</p>
<p>FSDDFSD</p>
<p>FSDF</p>
<p>SDF</p>
<p>SDF</p>
<p>sdfsdfsdfsdfsd</p>
<p> </p>
<p> </p>
</div>
<div id="bottom"> <div id="dekoration4"><div id="dekoration3"></div>
</div></div>
</div>
</body>
</html>