afbeelding verspringt

[willem008]

Goede dag

Ik heb het volgende in mijn content staan.

Ik wil de tekst in de subkop h2 weg hebben ,maar als ik nu de tekst verwijder dus zo
<h2 id="subkop"></h2>

dan verspringt gelijk het zwarte vak onder de foto(schaduw)

van deze


<p><img class="fotofloat" src="image/S7300527.JPG" alt="hijsverwarming" height="125" width="175" /></p> <div id="schaduw"></div>



html

<div id="content">







<div id="fotoproef"><img id="fotoeen" src="image/screening4.jpg" alt="verduistering" width="160" height="150" /><img id="fototwee" src="image/SNC01010.jpg" alt="montage deuren" width="160" height="150" /><img id="fotodrie" src="image/kasje.jpg" alt="hobby kasjes" width="160" height="150" /></div>





<h1 id="paginakop" class="cushycms">WL.v.d.meer-montage</h1>





<div id="info" class="cushycms">

<h2 id="subkop">wlvdmeer-montage</h2>

<br />

<p><img class="fotofloat" src="image/S7300527.JPG" alt="hijsverwarming" height="125" width="175" /></p> <div id="schaduw"></div> Welkom op deze website.
<br />

<br />

Wlvdmeer is een montagebedri


css

@charset "utf-8";
body{
background-color: #000;
}

img.fotofloat{
float:left;
margin:0 14px 6px 0;
position:relative;
z-index:2;
}/* foto links gefloat in tekst in infovak*/

#schaduw{
position:absolute;
height:120px;
width:175px;
background-color: #000;
top:69px;
left:12px;
z-index:1;
}

#hoofdcontainer{
max-width: 1000px;
margin:0 auto;
background-color: #14285f;
height: 1800px;
width: 958px;
}

#header {
height: 120px;
width: 950px;
text-align:center;
color: #fff;
background-repeat: no-repeat;
background-color: #000;
position: relative
}
#menu {
background-color: #14285f;
height: 558px;
float:left;
width:139px;
font-family: Arial, Helvetica, sans-serif;
line-height: 30px;
font-size: 17px;
margin-top: 0
}
#content {
float:left;
position:relative;
height: 1600px;
width: 794px;
background-color: #14285f;
color:#99ccff;
padding: 45px 0 0 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px
}


img#fotoboven {
float:right;
margin-right:1px;
margin: 0px 30px 0 0;
background-color: #ccc;
border: thin solid #000
}
img#fotoonder {
clear:right;
float:right;
margin: 45px 30px 0 0;
background-color:#ccc;
border:thin solid #000;
}

#fotoproef{
height:500px;
width:220px;
float:right;
margin:-30px 10px 0 0;
background-color: #14285f;
border: thin solid #14285f;

}
#fotoeen{
margin-left:5px;
margin-top:25px;
border:thin solid #669933;
position:relative;
z-index:3;
}

#fototwee{
margin-left:45px;
margin-top:-20px;
border:thin solid #669933;
position:relative;
z-index:1;
}

#fotodrie{
margin-top:-20px;
margin-left:5px;
border: thin solid #669933;
position:relative;
z-index:2;
}


#logo {
background-color: #FFF;
background:url(image/logo.jpg);
position: absolute;
left: 0;
top: 0;
height: 121px;
}
#sublogo1{
background-color: #FFF;
position: absolute;
left: 141px;
top: 0
}
#sublogo2{
background-color:#FFF;
position:absolute;
left:342px;
top:0
}
#sublogo3{
background-color:#FFF;
position:absolute;
left:543px;
top:0
}
#sublogo4{
background-color:#FFF;
position:absolute;
left:758px;
top:0
}
ul.navbar {
background:#14285f;
padding: 0;
height: 450px;
width: 130px;
border-right: 1px solid #fff;
list-style-type: none;
margin-left: 3px;
margin-top:70px
}
li:hover {background-color: #000; color:#000; text-decoration:none;
}
a:link {color:#fff; text-decoration:none;
}
a:visited {color:#fff; text-decoration:none;
}
a:hover {color:#fff; text-decoration:none;
}
a:active {color:#fff; text-decoration:none;
}
#paginakop{
background-color: #14285f;
width:300px;
height:30px;
color:#99ccff;
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
margin: 70px 0 0 200px;
padding: 3px 0 0 2px
}
#subkop{
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
}
#paginakopsitemap{
background-color: #14285f;
width:350px;
height:30px;
color:#99ccff;
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
margin: 55px 0 0 15px;
padding: 3px 0 0 5px
}
#info{
width: 520px;
height:450px;
position:absolute;
background-color:#14285f;
border: solid thin #14285f;
color:#99ccff;
padding: 5px 0 0 5px;
margin: 25px 0 0 20px
}
ul#menu-hor {padding: 0; margin: 0; list-style: none;
}

 

[csshunter]

Door de absolute positie van de schaduw (met een top-waarde) gaan er dingen veranderen als je erboven iets doet.
Probeer eens in plaats van de:

#schaduw {
   ...
   top: 69px;
}

met:

#schaduw {
   ...
   margin-top: 12px;
}

Als het goed is, blijft nu de schaduw aan de foto plakken.

Met vriendelijke groet,
CSShunter

 

[willem008]

ja heb het veranderd en wat je zegt nu blijft hij wel goed

alleen ik wil dit begrijpen .alles veranderen wat een ander zegt daar leer je niet van.


Dus css hunter als je een kleine uitleg heb graag

alvast bedankt.