Hej!
Jeg har rodet med en opsætning af en hjemmeside i et stykke tid
og er nu stødt på et problem der virker uløseligt. Jeg håber dog
nogle af jer kan hjælpe.
Jeg har en div hvor jeg sætter en min-height, men dette gør at
der kommer et lille mellemrum under det billede jeg har indeni
min div og dermed fylder billedet ikke hele div'en. Men hvis jeg
sætter en fast højde på div'en så forsvinder det lille mellemrum.
Problemet er imidlertid at jeg har behov for at have en
min-height da der skal kunne fyldes flere elementer ind i det
pågældende div runtime.
Nedenfor ses hele sourcekoden med en kommentar hvor problemet er:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>Testskabelon</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
</style>
</head>
<body class="be_layout_content"
style="background-color:#5F8000;background-image:url(img/bg.gif);
background-repeat:repeat-y;background-position:top
center;color:#333;font-style:normal;font-size:7pt;font-family:Ver
dana;">
<div class="be_layout_wrapper">
<div class="be_layout_content"
style="width:703px;background-color:transparent;background-image:
url(img/bgcontainer.gif);background-repeat:repeat-y;background-at
tachment:scroll;background-position-x:0;background-position-y:0;m
argin-top:0;margin-right:auto;margin-bottom:0;margin-left:auto;">
<div class="be_layout_wrapper">
<div class="be_layout_content"
style="width:630px;min-height:60px;margin-top:0;margin-right:auto
;margin-bottom:auto;margin-left:auto;background-color:#567300;bac
kground-repeat:repeat;background-attachment:scroll;background-pos
ition-x:0;background-position-y:0;">
<p class="be_paragraph" style="line-height:60px;">
<span class="be_element" style="margin-left:24px;">
Din overskrift
</span>
</p>
</div>
</div>
<div class="be_layout_wrapper"
style="min-height:180px;height:auto !important;height:180px;">
-----------------------------------------------------------
HER UNDER ER PROBLEMET!!!
----------------------------------------------------------
<div class="be_layout_content"
style="width:630px;margin-top:0;margin-right:auto;margin-bottom:0
;margin-left:auto;">
<p class="be_paragraph">
<img src="img/header.jpg" class="be_element" alt="lala"/>
</p>
</div>
-----------------------------------------------------------
HER OVER ER PROBLEMET
------------------------------------------------------------
</div>
<div class="be_layout_wrapper">
<div class="be_layout_content" style="float:left;">
<div class="be_layout_wrapper" style="float:left;">
<div class="be_layout_content"
style="width:36px;min-height:40px;float:left;background-color:tra
nsparent;background-image:url(img/bgdate.gif);">
<p class="be_paragraph">
<span class="be_element">123</span>
</p>
</div>
</div>
<div class="be_layout_wrapper" style="float:left;">
<div class="be_layout_content" style="width:420px;float:left;">
<div class="be_layout_wrapper">
<div class="be_layout_content"
style="float:left;background-color:#567300;background-image:none;
background-repeat:repeat;background-attachment:scroll;background-
position-x:0;background-position-y:0;width:420px;">
<h1 class="be_paragraph" style="line-height:40px;">
<span class="be_element">
En underoverskrift
</span>
</h1>
</div>
</div>
<div class="be_layout_wrapper">
<div class="be_layout_content"
style="float:left;padding-top:12px;padding-right:18px;padding-bot
tom:12px;padding-left:18px;">
<p class="be_paragraph">
<span class="be_element">
In hac habitasse platea dictumst. Duis porttitor. Sed vulputate
elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam
posuere tristique tortor. In bibendum. Aenean ornare, nunc eget
pretium porttitor, sem est pretium leo, non euismod nulla dui non
diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed
in est.
Sed sodales nisl sit amet augue. Donec ultrices, augue
ullamcorper posuere laoreet, turpis massa tristique justo, sed
egestas metus magna sed purus.
Aliquam risus justo, mollis in, laoreet a, consectetuer nec,
risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu
diam.
Fusce porta pede nec eros. Maecenas ipsum sem, interdum non,
aliquam vitae, interdum nec, metus. Maecenas ornare lobortis
risus. Etiam placerat varius mauris. Maecenas viverra. Sed
feugiat. Donec mattis quam aliquam risus. Nulla non felis
sollicitudin urna blandit egestas. Integer et libero varius pede
tristique ultricies. Cras nisl. Proin quis massa semper felis
euismod ultricies.
In hac habitasse platea dictumst. Duis porttitor. Sed vulputate
elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam
posuere tristique tortor. In bibendum. Aenean ornare, nunc eget
pretium porttitor, sem est pretium leo, non euismod nulla dui non
diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed
in est.
Sed sodales nisl sit amet augue. Donec ultrices, augue
ullamcorper posuere laoreet, turpis massa tristique justo, sed
egestas metus magna sed purus.
Aliquam risus justo, mollis in, laoreet a, consectetuer nec,
risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu
diam.
Fusce porta pede nec eros. Maecenas ipsum sem, interdum non,
aliquam vitae, interdum nec, metus. Maecenas ornare lobortis
risus. Etiam placerat varius mauris. Maecenas viverra. Sed
feugiat. Donec mattis quam aliquam risus. Nulla non felis
sollicitudin urna blandit egestas. Integer et libero varius pede
tristique ultricies. Cras nisl. Proin quis massa semper felis
euismod ultricies.In hac habitasse platea dictumst. Duis
porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu
mattis iaculis. Nullam posuere tristique tortor. In bibendum.
Aenean ornare, nunc eget pretium porttitor, sem est pretium leo,
non euismod nulla dui non diam. Pellentesque dictum faucibus leo.
Vestibulum ac ante. Sed in est.
Sed sodales nisl sit amet augue. Donec ultrices, augue
ullamcorper posuere laoreet, turpis massa tristique justo, sed
egestas metus magna sed purus.
Aliquam risus justo, mollis in, laoreet a, consectetuer nec,
risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu
diam.
Fusce porta pede nec eros. Maecenas ipsum sem, interdum non,
aliquam vitae, interdum nec, metus. Maecenas ornare lobortis
risus. Etiam placerat varius mauris. Maecenas viverra. Sed
feugiat. Donec mattis quam aliquam risus. Nulla non felis
sollicitudin urna blandit egestas. Integer et libero varius pede
tristique ultricies. Cras nisl. Proin quis massa semper felis
euismod ultricies.
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="be_layout_wrapper">
<div class="be_layout_content"
style="width:208px;float:left;margin-top:1px;margin-right:1px;mar
gin-bottom:1px;margin-left:1px;">
<p class="be_paragraph">
<span class="be_element">
hej hej
</span>
</p>
</div>
</div>
<div class="be_layout_wrapper" style="width:702px;float:left;">
<div class="be_layout_content"
style="background-color:transparent;background-image:url(img/bgfo
oter.gif);margin-top:0;margin-right:auto;margin-bottom:0;margin-l
eft:auto;width:631px;">
<p class="be_paragraph"
style="line-height:40px;text-align:center;">
<span class="be_element">
Noget copyright halløj
</span>
</p>
</div>
</div>
</div>
</div>
<!-- Thanks to
http://arcsin.se-->
</body>
</html>
Hvis jeg indsætter tekst i stedet for et billede er der intet
problem.
På forhånd tak
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! =>
http://www.html.dk/tutorials