Avatar billede mrjowns Novice
06. juni 2008 - 17:23 Der er 7 kommentarer og
1 løsning

Baggrunds Grafik Mysterie - placering af baggrundsgrafik

Hej Eksperter,

Kig lige her: http://www.pixeldudes.net/eksperten/

Hvis I tager et kig på koden kan I måske gennemskue hvad jeg gerne vil.

Jeg har noget grafik øverst og nederst - og alt afhængig af indholdet (tekst) skal der repeat'es et billede (repeat y) så top og bund kommer til at hænge sammen.

Det skal gøres kun ved brug af divs - ingen tabeller...

I er for seje hvis I kan løse det - jeg har virkelig knoklet med det! ;)
Avatar billede jarret Nybegynder
06. juni 2008 - 19:07 #1
kan du ikke skære en pixel (i højden) af det øvereste billede så de får et billede der er 1 pixel x breden af billedet og så lægge det som repeated baggrundsbillede (under de andre) - det ville jeg i hvertfald gøre :-)
Avatar billede jarret Nybegynder
06. juni 2008 - 19:14 #2
vups jeg var vist lidt hurtig - sorry
Avatar billede jarret Nybegynder
06. juni 2008 - 19:40 #3
<!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>test 1</title>
</head>

<body>
<div style="height: 212px; width: 920px; background-image: url('design_bg_01.gif'); background-position: left top;">&nbsp;</div>
<div style="min-height: 424px; width: 920px; background-image: url('design_bg_02.gif');
background-position: 0 212px; background-repeat: repeat; margin-top: 0px; padding-top: -50px;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus auctor. Aliquam malesuada purus vel mi. Quisque eget augue vitae neque pellentesque sollicitudin. Aliquam egestas dui a tortor. Praesent consequat consequat sem. Duis hendrerit. Duis a urna quis arcu blandit eleifend. Vivamus tempor cursus urna. Mauris tellus. Fusce ultrices, nisl sed vestibulum consequat, lacus nulla porttitor mi, quis convallis lectus tellus sit amet ante. Sed tincidunt metus ut dolor. Sed id erat. Sed pharetra blandit augue. Phasellus blandit ornare urna. Vivamus lacinia, leo quis ultricies porta, velit ipsum pretium ipsum, eget commodo metus quam eget tellus. Curabitur interdum pede quis tellus. Donec vel nunc a sem commodo pulvinar. Suspendisse tempus adipiscing turpis. Nam scelerisque bibendum arcu. Morbi id erat eget lectus cursus aliquet.

Phasellus non odio non lacus adipiscing congue. Sed faucibus, tortor non suscipit accumsan, mi justo viverra leo, sit amet volutpat risus arcu nec tellus. Praesent pharetra enim sit amet leo. Etiam at ante. Cras arcu velit, aliquet vel, rhoncus non, suscipit vitae, odio. Praesent ligula massa, dapibus non, imperdiet a, consectetuer ut, ipsum. Vestibulum massa. Cras non magna ac orci dictum egestas. Vivamus blandit enim at dui pretium dictum. Nam eu diam ut magna consectetuer laoreet. Fusce vehicula, nulla at egestas semper, elit pede gravida risus, a interdum risus sapien et risus. Phasellus semper. Nullam dictum consectetuer libero. In hac habitasse platea dictumst.

Suspendisse elit. Phasellus adipiscing consectetuer mauris. Vivamus tincidunt, ipsum eget suscipit porttitor, nulla nunc blandit libero, non ullamcorper quam velit quis nisi. Aenean diam mauris, dictum vitae, condimentum eget, pretium quis, lectus. Morbi a velit. Sed dignissim. Morbi tempus neque et tortor. Praesent laoreet odio sed nisl. Nullam pharetra elit sed nisl. Ut suscipit consectetuer lorem. Nam quis odio sed magna rhoncus molestie. Donec id sapien. Proin ante quam, scelerisque ut, vulputate vitae, consectetuer ut, ipsum. Suspendisse diam. Morbi felis arcu, aliquet vel, porta et, accumsan a, augue. Praesent sodales mollis nisl. Cras tincidunt dui eget lectus. Suspendisse vehicula.

In adipiscing est sit amet lectus. Aliquam ultrices. Etiam elementum elit at nisl congue bibendum. Fusce vitae risus. Phasellus a felis a ante sollicitudin vestibulum. Praesent bibendum nulla eu nisl. Pellentesque fermentum nibh et nunc laoreet eleifend. Maecenas dolor purus, consectetuer quis, tristique eget, venenatis ut, nulla. Integer et justo. Aenean turpis tellus, cursus dapibus, gravida ut, aliquet ut, nibh. In nisl. Maecenas cursus lorem vitae neque. In convallis felis vitae quam aliquet convallis. Donec ante nisi, aliquam quis, dictum eleifend, semper ac, mauris.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus auctor. Aliquam malesuada purus vel mi. Quisque eget augue vitae neque pellentesque sollicitudin. Aliquam egestas dui a tortor. Praesent consequat consequat sem. Duis hendrerit. Duis a urna quis arcu blandit eleifend. Vivamus tempor cursus urna. Mauris tellus. Fusce ultrices, nisl sed vestibulum consequat, lacus nulla porttitor mi, quis convallis lectus tellus sit amet ante. Sed tincidunt metus ut dolor. Sed id erat. Sed pharetra blandit augue. Phasellus blandit ornare urna. Vivamus lacinia, leo quis ultricies porta, velit ipsum pretium ipsum, eget commodo metus quam eget tellus. Curabitur interdum pede quis tellus. Donec vel nunc a sem commodo pulvinar. Suspendisse tempus adipiscing turpis. Nam scelerisque bibendum arcu. Morbi id erat eget lectus cursus aliquet.

Phasellus non odio non lacus adipiscing congue. Sed faucibus, tortor non suscipit accumsan, mi justo viverra leo, sit amet volutpat risus arcu nec tellus. Praesent pharetra enim sit amet leo. Etiam at ante. Cras arcu velit, aliquet vel, rhoncus non, suscipit vitae, odio. Praesent ligula massa, dapibus non, imperdiet a, consectetuer ut, ipsum. Vestibulum massa. Cras non magna ac orci dictum egestas. Vivamus blandit enim at dui pretium dictum. Nam eu diam ut magna consectetuer laoreet. Fusce vehicula, nulla at egestas semper, elit pede gravida risus, a interdum risus sapien et risus. Phasellus semper. Nullam dictum consectetuer libero. In hac habitasse platea dictumst.

Suspendisse elit. Phasellus adipiscing consectetuer mauris. Vivamus tincidunt, ipsum eget suscipit porttitor, nulla nunc blandit libero, non ullamcorper quam velit quis nisi. Aenean diam mauris, dictum vitae, condimentum eget, pretium quis, lectus. Morbi a velit. Sed dignissim. Morbi tempus neque et tortor. Praesent laoreet odio sed nisl. Nullam pharetra elit sed nisl. Ut suscipit consectetuer lorem. Nam quis odio sed magna rhoncus molestie. Donec id sapien. Proin ante quam, scelerisque ut, vulputate vitae, consectetuer ut, ipsum. Suspendisse diam. Morbi felis arcu, aliquet vel, porta et, accumsan a, augue. Praesent sodales mollis nisl. Cras tincidunt dui eget lectus. Suspendisse vehicula.

In adipiscing est sit amet lectus. Aliquam ultrices. Etiam elementum elit at nisl congue bibendum. Fusce vitae risus. Phasellus a felis a ante sollicitudin vestibulum. Praesent bibendum nulla eu nisl. Pellentesque fermentum nibh et nunc laoreet eleifend. Maecenas dolor purus, consectetuer quis, tristique eget, venenatis ut, nulla. Integer et justo. Aenean turpis tellus, cursus dapibus, gravida ut, aliquet ut, nibh. In nisl. Maecenas cursus lorem vitae neque. In convallis felis vitae quam aliquet convallis. Donec ante nisi, aliquam quis, dictum eleifend, semper ac, mauris.


</div>
<div style="height: 212px; width: 920px; background-image: url('design_bg_03.gif'); background-position: left top; margin-top: -212px;">&nbsp;</div>
</body>

</html>
Avatar billede jarret Nybegynder
06. juni 2008 - 19:41 #4
det er det tætteste jeg kommer ....
Avatar billede mclemens Nybegynder
07. juni 2008 - 00:02 #5
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

</head><body>

<div style="position:relative;min-height:424px;background:url('design_bg_02.gif');width:920px;">
<div style="position:absolute;top:0;width:920px;height:212px;background:url('design_bg_01.gif');">&nbsp;</div>
<div style="position:relative;z-index:1;width:880px;padding:10px 20px;">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></div>
<div style="position:absolute;bottom:0;width:920px;height:212px;background:url('design_bg_03.gif');">&nbsp;</div>
</div>

</body></html>
Avatar billede mclemens Nybegynder
07. juni 2008 - 00:50 #6
(sidder ikke lige foran en IE6, men af hensyn til manglende
understøttelse af min-height i IE6 er denne bedre ... height
bliver ikke låst i IE6 uden overflow hidden - d.v.s. det
vil i nedenstående virke i IE6 som med min-height, og
IE7, FF m.m. får så height retur til auto og en min-height)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>
<style type="text/css">
#main {position:relative;height:424px;background:url('design_bg_02.gif');width:920px;margin:0 auto;}
body > #main {height:auto;min-height:424px;}
</style>
</head><body>

<div id="main">
<div style="position:absolute;top:0;width:920px;height:212px;background:url('design_bg_01.gif');">&nbsp;</div>
<div style="position:relative;z-index:1;width:880px;padding:10px 20px;">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></div>
<div style="position:absolute;bottom:0;width:920px;height:212px;background:url('design_bg_03.gif');">&nbsp;</div>
</div>

</body></html>
Avatar billede mrjowns Novice
07. juni 2008 - 08:50 #7
mclemens > Tusinde tak for hjælpen!!! God weekend!
Avatar billede mclemens Nybegynder
07. juni 2008 - 09:01 #8
Velbekom, tak for point samt tak og i lige måde :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester