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

lengte verticale menubalk

axelneve - 31/03/2010 16:59 (laatste wijziging 31/03/2010 19:18)

Nieuw lid

Voor mijn site gebruik ik een verticaal menu, wat bestaat uit 3 onderdelen, een gedeelte #balk, want de positie van de andere 2 onderdelen aangeeft.
en #menu, want het eigenlijke menu bevat, wat bovenaan staat in #balk, en verder nog #funct. hierin staan enkele functies.

nu is de hoogte van de pagina's verschillend, en moet de lente van het menu hierop worden aangepast, maar het menu 'groeit' niet mee.
Verder moet de DIV #funct. onderaan in #balk worden uitgelijnd.

kan iemand me hierbij helpen?

CSS:

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

                #balk 	{float:left;
		 width: 150px;
		 min-height: 580px;
		 background: #C0C0FF;
		 background-repeat: repeat}								

#menu 	{min-height: 430px; 
		 width: 150px;
		 background: #C0C0FF}

#funct 	{height: 150px; 
		 width: 180px;
		 padding-left: 5px;
		 position: absolute;
 		 background: #C0C0FF}

            
#balk 	{float:left;
		 width: 150px;
		 min-height: 580px;
		 background: #C0C0FF;
		 background-repeat: repeat}								
 
#menu 	{min-height: 430px; 
		 width: 150px;
		 background: #C0C0FF}
 
#funct 	{height: 150px; 
		 width: 180px;
		 padding-left: 5px;
		 position: absolute;
 		 background: #C0C0FF}
 

HTML:

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

	<div id="content">
		<div id="header"><?php require('header.php') ?></div id="header">
		<div id="balk">	
			<div id="menu"><?php require('menu.php') ?></div id="menu">
			<div id="fuct"><?php include('functions.php') ?></div id="funct">
		</div id="balk">
		<div id="tekst">
                     ...
		</div id="tekst">
		<div id="footer">
			<?php require ('footer.php')?>
		</div id="footer">
	</div id="content">

<div id="content">
		<div id="header"><?php require('header.php') ?></div id="header">
		<div id="balk">	
			<div id="menu"><?php require('menu.php') ?></div id="menu">
			<div id="fuct"><?php include('functions.php') ?></div id="funct">
		</div id="balk">
		<div id="tekst">
                     ...
		</div id="tekst">
		<div id="footer">
			<?php require ('footer.php')?>
		</div id="footer">
	</div id="content">

6 antwoorden

Gesponsorde links

lemoinet - 31/03/2010 17:14
PHP gevorderde		kan je je html-code ook eens geven

axelneve - 31/03/2010 17:39 (laatste wijziging 31/03/2010 19:17)

Nieuw lid

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

	<div id="content">
		<div id="header"><?php require('header.php') ?></div id="header">
		<div id="balk">	
			<div id="menu"><?php require('menu.php') ?></div id="menu">
			<div id="fuct"><?php include('functions.php') ?></div id="funct">
		</div id="balk">
		<div id="tekst">
                     ...
		</div id="tekst">
		<div id="footer">
			<?php require ('footer.php')?>
		</div id="footer">
	</div id="content">

<div id="content">
		<div id="header"><?php require('header.php') ?></div id="header">
		<div id="balk">	
			<div id="menu"><?php require('menu.php') ?></div id="menu">
			<div id="fuct"><?php include('functions.php') ?></div id="funct">
		</div id="balk">
		<div id="tekst">
                     ...
		</div id="tekst">
		<div id="footer">
			<?php require ('footer.php')?>
		</div id="footer">
	</div id="content">

nick5556 - 01/04/2010 11:13

PHP beginner

Als een tag sluit, hoef je hem niet de atributen te geven dus dit is genoeg:

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

    <div id="content">
        <div id="header"><?php require('header.php') ?></div>
        <div id="balk">    
            <div id="menu"><?php require('menu.php') ?></div>
            <div id="fuct"><?php include('functions.php') ?></div>
        </div>
        <div id="tekst">
                     ...
        </div>
        <div id="footer">
            <?php require ('footer.php')?>
        </div>
    </div>

<div id="content">
        <div id="header"><?php require('header.php') ?></div>
        <div id="balk">    
            <div id="menu"><?php require('menu.php') ?></div>
            <div id="fuct"><?php include('functions.php') ?></div>
        </div>
        <div id="tekst">
                     ...
        </div>
        <div id="footer">
            <?php require ('footer.php')?>
        </div>
    </div>

Als ik jou verhaal goed begrepen hebt, wil je je kollommen even hoog, gebruik hiervoor:
KLIK Voor een aantal verschillende manieren van equal height columns with CSS.

meerweten - 01/04/2010 17:14

Lid

wat ik uitmaak uit je uitleg is dat #balk even hoog moet zijn als #text?

dit is makkelijk te doen door nog een extra divje aan te maken en dan:

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

                #
#balk {float:left;
width: 150px;
min-height: 580px;
height:100%; /*Mogelijk niet in elke browser bruikbaar*/
background: #C0C0FF;
background-repeat: repeat}
 
            
#
#balk {float:left;
width: 150px;
min-height: 580px;
height:100%; /*Mogelijk niet in elke browser bruikbaar*/
background: #C0C0FF;
background-repeat: repeat}
 

axelneve - 01/04/2010 17:16
Nieuw lid		ja dat klopt, #balk moet evenhoog zijn als #tekst. en verder moet #fucnt onderaan #balk komen, waarvan de lengte kan verschillen per pagina.

meerweten - 03/04/2010 09:31 (laatste wijziging 03/04/2010 09:31)

Lid

als #funct in #balk moet komen waarom is die dan 30px breeder? lool
afhangkelijk of dat de menubalk op iedere pagina verschillend is zou ik deze een hoogte geven ipv een min hoogte

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

                #balk     {float: left;
         width: 150px;
         min-height:100%;
         background: #C0C0FF;
         background-repeat: repeat}                                

#menu     {min-height: 430px; 
         width: 150px;
         background: #C0C0FF}

#funct     {min-height: 150px; 
         width: 150px;
         margin-top: 5px;
         padding-left: 5px;
         position: absolute;
          background: #C0C0FF}
            
#balk     {float: left;
         width: 150px;
         min-height:100%;
         background: #C0C0FF;
         background-repeat: repeat}                                
 
#menu     {min-height: 430px; 
         width: 150px;
         background: #C0C0FF}
 
#funct     {min-height: 150px; 
         width: 150px;
         margin-top: 5px;
         padding-left: 5px;
         position: absolute;
          background: #C0C0FF}
 

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten