Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

Content(div) automatisch aanpassen aan andere div (Opgelost)

html_user - 23/05/2011 21:52
Lid		Mijn probleem is als volgt: Op mijn site die ik aan het proberen te maken ben, heb ik een div waar geen tekst in staat(content). In de content staan wel 2 afbeeldingen en een menu maar het belangrijkste een werkblad(ook een div). Hierin staat de tekst die ik wil meedelen aan de bezoekers van mijn site. Het werkblad plaats ik op height:auto. Dan heeft deze div de juiste hoogte naar gelang de tekst. Maar nu wil ik ook de content een hoogte geven die zich automatisch aanpast aan de hoogt van het werkblad. Als ik de content op height: autozet. Dan is deze niet meer zichtbaar. Ze wordt gewoon een lijn. Even samenvatten: De content moet zich automatisch aanpassen aan de hoogt van het werkblad. Misschien nog interessant ze hebben beide een vaste width. Hopelijk begrijp je een beetje mijn probleem. En alvast bedankt, html_user

4 antwoorden

Gesponsorde links

WouterJ - 23/05/2011 22:01

HTML gevorderde

Je zou eens kunnen kijken naar fixed columns, maar ik denk dat deze code het ook wel goed maakt:

css code - Bekijk de code zonder highlighting - Klap code in

                div#content:after
{ /* Plaats een div achter de content div */
  content: ''; /* Geef een lege tekst mee */
  display: block; /* Maak het element erachter als een div element */
  clear: both; /* Hier gaat het om, je floats clearen */
}
            
div#content:after
{ /* Plaats een div achter de content div */
  content: ''; /* Geef een lege tekst mee */
  display: block; /* Maak het element erachter als een div element */
  clear: both; /* Hier gaat het om, je floats clearen */
}
 

Of wat ook kan:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<div id="content">
  <p>Hier wat tekst</p>
  <div id="sidebar">
    <p>Tekst</p>
  </div>
  <div class="clear"></div>
</div>

<div id="content">
  <p>Hier wat tekst</p>
  <div id="sidebar">
    <p>Tekst</p>
  </div>
  <div class="clear"></div>
</div>

css code - Bekijk de code zonder highlighting - Klap code in

                .clear { clear: both; }
            
.clear { clear: both; }

html_user - 23/05/2011 22:15
Lid		Ik zou je al willen bedanken voor je reactie. Maar mijn probleem is nog niet opgelost. Ik heb de eerst optie die u mij gegeven hebt uitgeprobeerd maar zonder resultaat. De 2e optie is denk ik niet echt wat ik zoek want het is niet de bedoeling dat er tekst in de content komt. Als het zou helpen dat ik mijn voorlopige codes upload meld dit dan maar en dan doe ik dat zeker. Nogmaal bedankt, html_user

WouterJ - 24/05/2011 08:09
HTML gevorderde		Het is inderdaad makkelijk om te kijken wat je precies bedoelt en hoe je dat in jou geval kan oplossen. Zou je het script online willen zetten en een link geven? Of als dat niet kan, wil je dan de code op plaatscode.be zetten en een link hier op het forum?

html_user - 24/05/2011 18:21 (laatste wijziging 24/05/2011 20:03)

Lid

Ik heb ook eens 2 afbeeldingen online gezet om mijn probleem duidelijker te maken. De eerste afbeelding is waar ik naar toe wil en de afbeelding er onder is wat ik nu krijg als ik in mijn code "height: auto" zet.
Op de inhoud moet je zeker niet letten het is gewoon een voorbeeldje.
De link is:http://socializz.co.cc/test.html.

Mijn code is als volgt:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Sociaiz-Home</title>
<link rel="stylesheet" href="Css sz.css" type="text/css" />
</head>
<body>
<div id="content">
<div id="page"> 
<img src="Blauwe header.png" id="bheader" />
<!-----menu-------->
<?php include('Menu.php') ?>
<ul id='menu'>
<li><a href='index.html'>Home</a>     </li>
<li><a href='Nieuws.html'>Nieuws</a>  </li>  
<li><a href='Leden.html'>Leden</a>    </li>
<li><a href='Media.html'>Rubrieken</a></li>
<li><a href'profiel.html'>Profiel</a> </li>
</ul>
<!-- end menu -->
<!--2mene-->
<ul id="menu2">
	<li><a href="#">Wedstrijden</a></li><br />
    <li><a href="#">Logboek</a></li><br />
    <li><a href="#">Over ons</a></li>
</ul>
<!--end 2menu-->
<!------------------------Werkblad------------------>
<div id="werkblad">
<h2>Algemeen</h2>
<p class="blauwe">
Deze site wordt gemaakt door 2 jongeren die juist zijn begonnen<br />
met het leren van de oneindige mogelijkheden van de html en dergelijke<br />
(de techniek dat je gebruikt om een site op punt te krijgen).<br />
De site is momenteel nog vrij nieuw waardoor er nog veel veranderingen<br />
zullen volgen. Een aantal van die veranderingen kan je terugvinden onder 'to do'.<br />
Verder hopen we dat de site je al een beetje bevalt en we staan natuurlijk<br />
altijd open voor alle suggesties.<br />
<u>socializ.sz@gmail.com</u></p>
<!------------------- Deel 2 --Hier komt nog meer info-->
</div>
<br /><br />
<img src="groene footer.png" id="bfooter" />
</div>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Sociaiz-Home</title>
<link rel="stylesheet" href="Css sz.css" type="text/css" />
</head>
<body>
<div id="content">
<div id="page"> 
<img src="Blauwe header.png" id="bheader" />
<!-----menu-------->
<?php include('Menu.php') ?>
<ul id='menu'>
<li><a href='index.html'>Home</a>     </li>
<li><a href='Nieuws.html'>Nieuws</a>  </li>  
<li><a href='Leden.html'>Leden</a>    </li>
<li><a href='Media.html'>Rubrieken</a></li>
<li><a href'profiel.html'>Profiel</a> </li>
</ul>
<!-- end menu -->
<!--2mene-->
<ul id="menu2">
	<li><a href="#">Wedstrijden</a></li><br />
    <li><a href="#">Logboek</a></li><br />
    <li><a href="#">Over ons</a></li>
</ul>
<!--end 2menu-->
<!------------------------Werkblad------------------>
<div id="werkblad">
<h2>Algemeen</h2>
<p class="blauwe">
Deze site wordt gemaakt door 2 jongeren die juist zijn begonnen<br />
met het leren van de oneindige mogelijkheden van de html en dergelijke<br />
(de techniek dat je gebruikt om een site op punt te krijgen).<br />
De site is momenteel nog vrij nieuw waardoor er nog veel veranderingen<br />
zullen volgen. Een aantal van die veranderingen kan je terugvinden onder 'to do'.<br />
Verder hopen we dat de site je al een beetje bevalt en we staan natuurlijk<br />
altijd open voor alle suggesties.<br />
<u>socializ.sz@gmail.com</u></p>
<!------------------- Deel 2 --Hier komt nog meer info-->
</div>
<br /><br />
<img src="groene footer.png" id="bfooter" />
</div>
</div>
</body>
</html>

css code - Bekijk de code zonder highlighting - Klap code in

                #page{
	z-index: ;
	background-color: #eeeefc;
	width: 900px;
	left:50%;
    margin-left:-450px;
	position: absolute;
	border: 2px solid #000;
	height: auto;
}

#werkblad{
	z-index: 1;
	background-color: #f0f0f0;
	width: 652px;
	border-bottom: 12px;
	padding-bottom: 6px;
	padding: 8px;
	padding-top: 6px;
	position: absolute;
	z-index: 1;
	margin-left: 210px;
	margin-right: 40px;
	margin-top: 100px;
	margin-bottom: 75px;
	height: auto;
	border: 1px solid #999;
	
}
            
#page{
	z-index: ;
	background-color: #eeeefc;
	width: 900px;
	left:50%;
    margin-left:-450px;
	position: absolute;
	border: 2px solid #000;
	height: auto;
}
 
#werkblad{
	z-index: 1;
	background-color: #f0f0f0;
	width: 652px;
	border-bottom: 12px;
	padding-bottom: 6px;
	padding: 8px;
	padding-top: 6px;
	position: absolute;
	z-index: 1;
	margin-left: 210px;
	margin-right: 40px;
	margin-top: 100px;
	margin-bottom: 75px;
	height: auto;
	border: 1px solid #999;
 
}
 

Page is dus de content en werkblad is dus de div waar ik de info in typ.

Er staan ook nog een paar dwaze dingen in mijn code die ik nog moet aanpassen,
bv er staat 2 keer z-index. Ook staat er z-index en dan niet ingevuld. Op die kleine foutjes moet je niet letten want die moet ik er nog uithalen.

Hopelijk heb ik zo mijn probleem iets duidelijker kunnen uitleggen.

greetz,
html_user

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten