2 div's laten meerekken

djordyh

Hey,

Ik ben nog steeds bezig met het beoefenen van CSS & HTML, dat is iets, wat ik gek genoeg, pas na PHP heb geleerd en daarom is mijn kennis in dit gebied soms nog wat gebrekkig.

Ik stuit nu op een probleem, ik heb 2 div's, een menu aan de rechterkant en een content. Echter rekken deze niet met elkaar mee, als de content lang wordt, rekt deze wel uit maar de menu rekt niet mee. Zie de bijlage voor het probleem.

Dit is het stukje HTML:

PHP

<div class="menu">
     	<div class="menu_button">
     	<a href="#"><img src="images/home_button.png" 
                  	onmouseover="this.src='images/home_button_hover.png'" onmouseout="this.src='images/home_button.png'" 
                  	width="156" height="46" border="0" alt="Home" /></a>
     	</div>
	
     	<div class="menu_button">
     	<a href="#"><img src="images/home_button.png" 
                  	onmouseover="this.src='images/home_button_hover.png'" onmouseout="this.src='images/home_button.png'" 
                  	width="156" height="46" border="0" alt="Home" /></a>
     	</div>
 	</div>


<div class="content_houder">
	
     	<div class="content">
         	<div class="content_content">
         	
            	<div class="content_title_bg">
            	<div class="content_title_text">
            	Welkom op site!
            	</div>
            	</div>
            	
            	<p>Tekst</p> 
            	
         	</div>
     	</div>   	
	
	</div>

Meer tonen

En dit de CSS:

PHP

.content_houder {
	width:1000px;
}


.menu {
	margin:0px;
	float:left;
	width:200px;
	min-height:450px;
	background-color:#6b97cc;
}


.menu_button {
	padding-left:21px;
	padding-top:15px;
}


.content {
	float:left;
	width:800px;
	min-height:450px;
	background-color:#7FB2F0;
}


.content_content {
	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px;
}


.content_title_bg {
	margin-left:-10px;
	width:340px;
	height:37px;
	background:url(images/content_title_bg.png);
}


.content_title_text {
	padding-left:10px;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	color:#d4d2d2;
	font-weight:bold;
	font-size:24px;
}

Meer tonen

Kan iemand me helpen?
Alvast bedankt!

A.Bijlsma

Hiervoor is een ander deel nodig, om dit te kunnen oplossen.
Dit gaat enkel over het content wat wel meerekt.

Wat nodig is is het stukje wat gaat over het menu.

djordyh

Oeps

PHP

<div class="menu">
     	<div class="menu_button">
     	<a href="#"><img src="images/home_button.png" 
                  	onmouseover="this.src='images/home_button_hover.png'" onmouseout="this.src='images/home_button.png'" 
                  	width="156" height="46" border="0" alt="Home" /></a>
     	</div>
	
     	<div class="menu_button">
     	<a href="#"><img src="images/home_button.png" 
                  	onmouseover="this.src='images/home_button_hover.png'" onmouseout="this.src='images/home_button.png'" 
                  	width="156" height="46" border="0" alt="Home" /></a>
     	</div>
 	</div>

Meer tonen

Donny5300

Google even naar Faux Colums. Zo heet hetgene dat jij bedoelt

djordyh

Ik had al wat op google gezocht over dit onderwerp, kwam meerdere oplossingen tegen maar niks werkten.
Dat met Faux colums had ik ook gelezen maar snapte er geen zak van.

Donny5300

Terwijl het toch niet zo moeilijk is. Ik heb ook moeite met CSS maar als je het goed leest kom je er vanzelf achter... Spreekt voor zich

djordyh

Ik heb nu dit in me CSS:

Code

.content_houder {
	width:1000px;
	overflow: hidden;
	background:url(images/content_bg.png);
}


.menu {
	width:200px;
}


.menu_button {
	padding-left:21px;
	padding-top:15px;
}


.content {
	width:800px;
	margin-left:200px;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px;
}


.content_title_bg {
	margin-left:-10px;
	width:340px;
	height:37px;
	background:url(images/content_title_bg.png);
}


.content_title_text {
	padding-left:10px;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	color:#d4d2d2;
	font-weight:bold;
	font-size:24px;
}

Meer tonen

en dit me HTML:

Code

<div class="content_houder">
   
     <div class="menu">
         <div class="menu_button">
         <a href="#"><img src="images/home_button.png" 
                      onmouseover="this.src='images/home_button_hover.png'" onmouseout="this.src='images/home_button.png'" 
                      width="156" height="46" border="0" alt="Home" /></a>
         </div>
    
         <div class="menu_button">
         <a href="#"><img src="images/home_button.png" 
                      onmouseover="this.src='images/home_button_hover.png'" onmouseout="this.src='images/home_button.png'" 
                      width="156" height="46" border="0" alt="Home" /></a>
         </div>
     </div>
    
         <div class="content">             
                <div class="content_title_bg">
                <div class="content_title_text">
                Welkom op D&amp;J-Projects!
                </div>
                </div>
                
                <p>Tekst</p>
                               
         </div>       
    
    </div>

Meer tonen

Echter staat me content nu onder me menu?

NickGames

Ik denk dat je de pixels moet veranderen in percentages.
bijv:
width:25%;

of

width="25%"

Hoop dat hiermee je probleem is verholpen.

Mvg. Nick.

Stefan.J

Wat je zoekt heb ik volgens mij gevonden:

http://matthewjamestaylor.com/blog/equal-hei…er-css-no-hacks

Dit soort dingen zijn echt een rampenplan door Internet Explorer, vooral de oudere versies. In Internet Explorer zitten zoveel bugs en idiote implementaties van de standaard (of eigenlijk dus niet de standaard).

ICTscripters

Dé plek voor IT

Dé plek voor IT

Externe testers gezocht — Saphaxis AI Chat Organizer 0.1.59

nieuwe game

Criminolz

[Beta] Ottomaan: gratis browserspel met een echte, levende stad. Feedback gezocht!

Port Father: beta van een browsergame in Antwerpen 1931, feedback welkom

Maffia Hotel: een browsergame waarin je van lobbygast naar spil van het hotel groeit

Crime Club volledig herschreven vanaf nul

Malavita (nieuwe maffia game, van 0)

[Aanbod] Stadskaart voor je browsergame: van menu naar klikbare stad, vanaf €200

[Verkoop] G4G (Gangsters 4 Gangsters): volledige broncode, nieuw gebouwd in PHP 8.3 | € 30 per domein

[TE KOOP] Malavita.be [Maffiaspel, gebaseerd op omicidio.nl, unieke code]

2 div's laten meerekken

Registratie

PHP waarschuwt voor twee ernstige bugs die makkelijk uit te buiten lijken

Functioneel ontwerp

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

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

Gebruikers die dit topic bekijken