Divs Verschuiven bij div rekken

beronne · 24 Juli 2010

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>

Toon Meer

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**/

Toon Meer

Ik hoop echt dat iemand mij hiermee kan helpen
alvast bedankt
mvg beronne

Shahiem · 24 Juli 2010

Het is beter als u 2 divs aanmaakt met bijvoorbeeld:

Links en rechts, de dingen die links horen zet je links en de andere rechts.

Je geeft ze dan een breedte: width. En ook een float: left.

Hopen dat je met dit iets verder geholpen bent.

beronne · 24 Juli 2010

maar dan moet ik echt alles omgooien er moet een manier zijn dat ik alles hoef om te gooien ik heb net alles gevalideerd en fouten eruit gehaald. dus nu kijken wat ik er nog verder aan kan doen

Nieuwe reactie samengevoegd met originele reactie op 25.07.10 14:22:30:
dit topic kan gesloten worden alles is opgelost bedankt voor iedereen die mij heeft geholpen

Partner Gezocht om meerdere NFT Collecties op Open Sea te Plaatsen

Plesk installer

cpanel / whm themes

PHP Point of Sale

Probleem omtrent Tinymce

Kunnen jullie mij helpen met deze enquete

een eigen cloud sever

Probleem C++ en CL

193 Nieuwe domeinnamen April 2025

228 Nieuwe domeinnamen Maart 2025

285 Nieuwe domeinnamen Februari 2025

Divs Verschuiven bij div rekken

Participate now!

Fijne feestdagen

Kritieke update voor Really Simple Security-plug-in

ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

Functioneel ontwerp

Access Control List implementatie in PHP/MySQL - deel 1/2

Access Control List implementatie in PHP/MySQL - deel 2/2

Delen