Beste Designers,
ik zit met een probleem.
ten eerste hier link naar website: http://rbvhoogeveen.webatu.com
Zoals u kunt zien het ik links een nieuws vak staan daar rechts van heb ik een menu staan met buttens en onder het menu heb ik een main tekst vak.
Het probleem nu is als ik tekst ga typen in het nieuwsvak dan blijft de menu en main tekst vak niet op zijn plek staan maar die verschuiven mee naar beneden, dit moet natuurlijk niet.
Ik hoop dat iemand mij kan helpen
ik post ook ff mijn html en css
HTML:
PHP
<!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" lang="en" xml:lang="en">
<head>
<title>R.B.V. Hoogeveen</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="wrapper"><!--begin wrapper-->
<div class="header">
<!--logo hyperlink-->
<a href="index.php" class="logo"></a>
<!------------------>
</div>
<!----Nieuws--Vak---->
<div class="nieuws-vak-boven">
<div class="nieuwspic"></div>
</div>
<div class="main-vak-nieuws">
<div class="main-tekst-vak">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi massa
purus, dictum in aliquam et, fermentum ac urna. Donec arcu felis,
lobortis mattis vehicula sed, lacinia eu tortor. Cras ullamcorper
suscipit eros et laoreet. Morbi massa tortor, ultricies at placerat
et, dapibus sit amet quam. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Vivamus est sapien,
tincidunt vel dignissim id, rutrum vitae felis. Etiam bibendum rutrum
velit nec consequat. Nam vitae lacus et nunc cursus lacinia. Suspendisse
viverra cursus tellus, nec congue leo molestie quis. Ut aliquam
ultricies orci et facilisis. Suspendisse diam felis, imperdiet quis
volutpat ut, convallis sed urna. Donec enim lorem, congue vitae dapibus
eu, volutpat non risus. Sed augue magna, euismod ac elementum non,
egestas quis massa. Suspendisse magna nisl, condimentum vitae cursus
ac, convallis nec lectus. Aenean id varius erat. Fusce laoreet tempus
velit adipiscing aliquam. Vivamus id fermentum augue. Vivamus aliquet
nulla quis enim congue sed imperdiet turpis laoreet. Nulla elementum,
mauris ac venenatis volutpat, est ligula placerat risus, non lacinia
nisi sapien eu tellus. In nec tellus risus, quis dictum tellus.
<br>
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Phasellus ac nulla nisi, nec suscipit augue.
Nunc cursus massa nec nulla dignissim feugiat sagittis tellus tristique.
Sed a semper orci. Etiam varius lacinia arcu, vestibulum fermentum nulla
elementum vel. Cras sit amet ipsum non ante viverra egestas vitae non
diam. Pellentesque a nunc tortor. Nam eget ligula quis leo eleifend
rhoncus. Suspendisse semper pharetra placerat. Sed tempor faucibus
rhoncus. Nullam lacinia, dui non consectetur pellentesque, sem arcu
tincidunt enim, nec tincidunt turpis ante a turpis. Aliquam erat
volutpat. Nunc eros nibh, dignissim quis rhoncus sit amet, dignissim
non enim. Phasellus nec vestibulum diam.
</div>
</div>
<div class="nieuws-vak-beneden">
<p class="nieuws-vak-beneden-tekst">Datum:</p>
<p class="datum-tekst"><?php include("php/datum/datum.php"); ?></p>
</div>
<!----Einde--Nieuws--Vak---->
<div class="menu-balk"><!--DIV menu balk-->
<!--begin menu-->
<!--menu button home-->
<div class="home-knop">
<a href="index.php">
<img border="0" src="images/home-knop.png" width="100" height="35"></a></div>
<!-------------------->
<!--menu button vereniging-->
<div class="vereniging-knop">
<a href="vereniging.php">
<img border="0" src="images/vereniging-knop.png" width="100" height="35"></a></div>
<!-------------------------->
<!--menu button gallery-->
<div class="gallery-knop">
<a href="gallery.php">
<img border="0" src="images/gallery-knop.png" width="100" height="35"></a></div>
<!------------------------>
<!--menu button wedstrijden-->
<div class="wedstrijden-knop">
<a href="wedstrijden.php">
<img border="0" src="images/wedstrijden-knop.png" width="100" height="35"></a></div>
<!--------------------------->
<!--menu button gastenboek-->
<div class="gastenboek-knop">
<a href="gastenboek.php">
<img border="0" src="images/gastenboek-knop.png" width="100" height="35"></a></div>
<!-------------------------->
<!--menu button contact-->
<div class="contact-knop">
<a href="contact.php">
<img border="0" src="images/contact-knop.png" width="100" height="35"></a></div>
<!----------------------->
<!--einde menu-->
</div><!--einde DIV menu balk-->
<!------Begin Main vak----->
<!------Main curve boven----->
<div class="main-curve-boven">
</div>
<!--------------------------->
<!-----------Main----------->
<div class="main">
<!--Begin tekstvak-->
<div class="maintekstvak">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi massa
purus, dictum in aliquam et, fermentum ac urna. Donec arcu felis,
lobortis mattis vehicula sed, lacinia eu tortor. Cras ullamcorper
suscipit eros et laoreet. Morbi massa tortor, ultricies at placerat
et, dapibus sit amet quam. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Vivamus est sapien,
tincidunt vel dignissim id, rutrum vitae felis. Etiam bibendum rutrum
velit nec consequat. Nam vitae lacus et nunc cursus lacinia. Suspendisse
viverra cursus tellus, nec congue leo molestie quis. Ut aliquam
ultricies orci et facilisis. Suspendisse diam felis, imperdiet quis
volutpat ut, convallis sed urna. Donec enim lorem, congue vitae dapibus
eu, volutpat non risus. Sed augue magna, euismod ac elementum non,
egestas quis massa. Suspendisse magna nisl, condimentum vitae cursus
ac, convallis nec lectus. Aenean id varius erat. Fusce laoreet tempus
velit adipiscing aliquam. Vivamus id fermentum augue. Vivamus aliquet
nulla quis enim congue sed imperdiet turpis laoreet. Nulla elementum,
mauris ac venenatis volutpat, est ligula placerat risus, non lacinia
nisi sapien eu tellus. In nec tellus risus, quis dictum tellus.
<br>
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Phasellus ac nulla nisi, nec suscipit augue.
Nunc cursus massa nec nulla dignissim feugiat sagittis tellus tristique.
Sed a semper orci. Etiam varius lacinia arcu, vestibulum fermentum nulla
elementum vel. Cras sit amet ipsum non ante viverra egestas vitae non
diam. Pellentesque a nunc tortor. Nam eget ligula quis leo eleifend
rhoncus. Suspendisse semper pharetra placerat. Sed tempor faucibus
rhoncus. Nullam lacinia, dui non consectetur pellentesque, sem arcu
tincidunt enim, nec tincidunt turpis ante a turpis. Aliquam erat
volutpat. Nunc eros nibh, dignissim quis rhoncus sit amet, dignissim
non enim. Phasellus nec vestibulum diam.
</div><!--Einde tekstvak-->
</div><!-----Einde Main----->
<!------Main curve beneden----->
<div class="main-curve-beneden">
</div>
<!--------------------------->
<!---Einde Main vak----->
<!------footer----->
<div class="footer">
</div>
<!--------------->
</div><!--einde wrapper-->
</body>
</html>CSS:
PHP
/* index pagina website R.B.V. Hoogeveen */
/* om stippel lijn bij hyperlinks weg te halen */
a:focus {outline: 0;}
a:active {outline: 0;}
/* ------------------------------------------- */
body {
background: #c6c9cb;
margin: 0;
padding: 0
}
.wrapper {
margin: 0px auto;
width: 1024px;
height: auto;
background-color:green;
}
.header {
background: url("../images/header.png");
height: 153px;
width: 963px;
margin-left: auto;
margin-right: auto;
}
.logo {
background: url(../images/logo.png);
display:block;
position: relative;
height: 138px;
width: 123px;
left: 76px;
top: 9px;
}
/*--Nieuws--Vak--*/
.nieuws-vak-boven {
background: url(../images/nieuws-vak-boven.png);
height: 88px;
width: 199px;
position: relative;
left: 30px;
top: 8px;
}
.nieuwspic {
background: url(../images/nieuwspic.png);
height: 89px;
width: 187px;
position: relative;
left: 4px;
top: -6px;
}
.main-vak-nieuws {
background: #1d689c;
height: auto;
min-height: 400px;
display: table;
width: 195px;
position: relative;
left: 31px;
top: 8px;
border-top: 1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom: 1px solid #000;
}
.main-tekst-vak {
height: auto;
min-height: 395px;
display: table;
width: 190px;
font-family: verdana;
font-size: 8pt;
position: relative;
left: 3px;
top: -1px;
}
.nieuws-vak-beneden {
background: url(../images/nieuws-vak-beneden.png);
height: 23px;
width: 199px;
position: relative;
left: 30px;
top: -4px;
}
.nieuws-vak-beneden-tekst {
font-family: verdana;
font-size: 9pt;
position: relative;
padding-left: 4px;
padding-top: 2px;
font-weight: bold;
font-style: italic;
}
.datum-tekst {
font-family: verdana;
font-size: 8pt;
position: relative;
left: 60px;
top: -25px;
}
/*--Einde--Nieuws--Vak--*/
.menu-balk {
background: url(../images/menu-balk.png);
height: 41px;
width: 764px;
position: relative;
left: 230px;
top: -517px;
}
/* -----Main vak----- */
.main-curve-boven {
background: url(../images/main-curve-boven.png);
height: 7px;
width: 765px;
position: relative;
left: 231px;
top: -510px;
}
.main {
background: #1d689c;
height: auto;
min-height: 450px;
display: table;
width: 760px;
position: relative;
left: 231px;
top: -510px;
border-left:1px solid #000;
border-right:1px solid #000;
}
.main-curve-beneden {
background: url(../images/main-curve-beneden.png);
height: 7px;
width: 765px;
position: relative;
left: 228px;
top: -510px;
}
.maintekstvak {
height: auto;
min-height: 445px;
display: table;
width: 755px;
color: #ffffff;
font-family: verdana;
font-size: 10pt;
position: relative;
left: 3px;
top: 0px;
}
/* --Einde Main vak-- */
/* --Footer-- */
.footer {
background: url(../images/footer.png);
height: 26px;
width: 966px;
position: relative;
left: 30px;
top: -504px;
}
/* -------- */
/**begin menu buttons hover**/
* html a:hover{visibility:visible}
/**menu button home**/
.home-knop {
position:relative;
left: 80px;
top: 4px;
width: 100px;
height: 35px;
background: url(../images/homehover.png);
}
.home-knop a {display:block}
.home-knop img {width:100%; height:100%}
.home-knop a:hover img {visibility:hidden;}
/**-----------------------**/
/**menu button vereniging**/
.vereniging-knop {
position:relative;
left: 183px;
top: -31px;
width: 100px;
height: 35px;
background: url(../images/vereniginghover.png);
}
.vereniging-knop a {display:block}
.vereniging-knop img {width:100%; height:100%}
.vereniging-knop a:hover img {visibility:hidden;}
/**-----------------------**/
/**menu button gallery**/
.gallery-knop {
position:relative;
left: 286px;
top: -66px;
width: 100px;
height: 35px;
background: url(../images/galleryhover.png);
}
.gallery-knop a {display:block}
.gallery-knop img {width:100%; height:100%}
.gallery-knop a:hover img {visibility:hidden;}
/**-----------------------**/
/**menu button wedstrijden**/
.wedstrijden-knop {
position:relative;
left: 389px;
top: -101px;
width: 100px;
height: 35px;
background: url(../images/wedstrijdenhover.png);
}
.wedstrijden-knop a {display:block}
.wedstrijden-knop img {width:100%; height:100%}
.wedstrijden-knop a:hover img {visibility:hidden;}
/**-----------------------**/
/**menu button gastenboek**/
.gastenboek-knop {
position:relative;
left: 492px;
top: -136px;
width: 100px;
height: 35px;
background: url(../images/gastenboekhover.png);
}
.gastenboek-knop a {display:block}
.gastenboek-knop img {width:100%; height:100%}
.gastenboek-knop a:hover img {visibility:hidden;}
/**-----------------------**/
/**menu button contact**/
.contact-knop {
position:relative;
left: 595px;
top: -170px;
width: 100px;
height: 35px;
background: url(../images/contacthover.png);
}
.contact-knop a {display:block}
.contact-knop img {width:100%; height:100%}
.contact-knop a:hover img {visibility:hidden;}
/**-----------------------**/
/** einde menu buttons hover**/Ik hoop echt dat iemand mij hiermee kan helpen
alvast bedankt
mvg beronne