vaste hoogtes veranderen naar automatisch

Status
Niet open voor verdere reacties.
L

lusinkm

Gebruiker
Lid geworden
19 sep 2007
Berichten
79
ik wil de onderstaande css aanpassen zodat als er in de div "midden" meer content bijkomt, dat deze automatisch hoger wordt. Alleen wil ik dat de linker en rechterkant dan ook automatisch hoger worden en daar stuit ik op problemen. Minimale hoogte wil ik op 500px houden.

CSS met de vaste hoogtes

Code: 
@charset "utf-8";
/* CSS Document */

* {
margin: 0;
padding: 0;
}

#container {
width: 1000px;
height: 570px;
}

#header {
width: 1000px;
height: 70px;
background-color:#666666;
}

#linkerkant {
width: 100px;
height: 500px;
float: left;
background-color:#0000FF;
}

#midden {
width: 800px;
height: 500px;
float: left;
background-color:#CCCCCC;
}

#rechterkant {
width: 100px;
height: 500px;
float: left;
background-color:#0000FF;
}

#footer {
width: 1000px;
height: 20px;
background-color:#666666;
}

De pagina

HTML: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="test.css" rel="stylesheet" type="text/css" />
<title>test</title>
</head>

<body>

<div align="center">

<div id="container">	
    
    <div id="header">header</div>
    
    	<div id="linkerkant">linkerkant</div>
        
        	<div id="midden">midden</div>
            
        <div id="rechterkant">rechterkant</div>
            
</div>

    <div id="footer">footer</div>
    
</div>

</body>

</html>

Verschillende dingen geprobeerd zoals auto-height, min-height enz. maar het wil niet echt werken. Ik test in IE7, FF2 en Netscape9, en krijg iedere keer verschillende resultaten.
Helaas niet de goede:confused:

Iemand een idee?:D
 
ik denk dat dit niet gaat. De divs aan de zijkant staan los van de div in het midden, en zullen niet automatisch meerekken. Misschien kun je de layout aanpassen, zodat het niet uitmaakt dat de kolommen aan de zijkant korter blijven. Voor ideeen kun je eens kijken op CSS Layout Gala
 
Het moet op de een of andere manier toch wel te doen zijn? Dit is toch een vrij populaire layout, die vaak gemaakt wordt met tabellen. Alleen wordt nu verwacht dat je tabellen gebruikt voor data e.d, en css voor de opmaak.

Ik wil juist deze layout gebruiken omdat ik de achtergrondkleur van de zijkanten anders wil hebben dan het midden.

Als ik bv. de container op height auto zet, en het midden op min-height 500px, dan zou die groter moeten worden als er meer als 500px content in komt. Als je dan in de linker en rechterkant van de css aangeeft dat margin-bottom 0 is, dan zouden deze toch moeten uitrekken tot de onderkant van de div "container".?
Ik heb dit op een paar manieren geprobeerd, helaas zonder succes, maar dat kan ook komen omdat m'n kennis van css niet helemaal optimaal is.
 
Er zal toch wel een html/css expert zijn die weet hoe je dit moet doen?

Wat heeft het dan voor zin om van die tabellen af te stappen als dit niet voor elkaar te krijgen is met CSS. Ik begin hier toch wel een beetje gek van te worden.:(
 
Oke, nog steeds geen reacties. Dus of dit kan idd niet, of het is teveel moeite/werk om de css te schrijven/herschrijven. Ik heb er zelf ook al te veel tijd en moeite ingestoken dus,

50 EURO VOOR DEGENE DIE DIT ALS EERSTE OPLOST!!

Dus een goede css en pagina zoals ik in het begin heb uitgelegd. Hij moet door de W3C validator kunnen zonder fouten en in FF2, IE6 en IE7 goed worden weergegeven.

Betaling kan ik doen via

Paypal - Ik heb een account maar nog nooit gebruikt.
Overschrijving via bank
Persoonlijk - bv. op de helpmij dag of in de buurt van Amersfoort

Dus wil je 50 euro verdienen, los deze puzzel dan maar op, ik doe geen moeite meer.
Als er voor 14 mei geen oplossing is geplaatst, dan neem ik aan dat het gewoonweg niet kan met css, en gebruik ik weer gewoon lekker een tabel voor deze layout.
 
Zal wellicht niet de bedoeling zijn, maar het kan met een gifje als achtergrond. Ik heb wel nu niet de minimale hoogte 500 voorzien.
 

Bijlagen

Yo,
tsja, afschaffen van tabellen is ook gewoon crap. Nooit van divjes gehouden, maargoed.

Ik vat je vraag niet helemaal, maar mischien heb je wat aan deze code. Niet valide CSS, maar werkt bij mij wel. Een echt goede oplossing weet ik zelf ook niet, maar dat komt dus gewoon omdat IE en FF samen niet gaan.
PHP: 
//css:

max-width: 650px; width:expression(this.width > 650 ?  650:true );
// dit werkt als het goed is ook met min-width of min-height of max-height.


[edit] verander alle 650-s naar het getal dat je wilt natuurlijk ;) [/edit]
 
Laatst bewerkt:
@ Keej. Dit zal niet werken in FF en Netscape, omdat de achtergrond pas zichtbaar wordt als er content in komt. Ook vliegt de footer naar rechts en staat dan onder de rechter div.

@Vegras. Linkerkant en rechterkant zijn voor bv. logo's e.d en het midden is voor tekst. Als er meer tekst in het midden komt dan moet die auto hoger worden, maar ook links en rechts, vanwege de kleur..

Ik ben wel benieuwd hoe je dit werkend heb gekregen, ondanks dat het geen geldige css is. Zet anders es een simpel opzetje neer zoals ik in het eerste bericht gedaan heb (dan hoef ik alleen te kijken of het werkt). Als dit wel in FF en IE werkt maar met 2 of 3 foutjes in de validator, dan kan ik hier mischien wel wat mee. Is in ieder geval in css dan.
 
Oh, op die manier.


Okay, check deze, bij mij werkt het op FF ie IE.
als t goed is is de CSS 100% valide.


[edit] volgens W3 IS hij valide ;) [/edit]
 

Bijlagen

Laatst bewerkt:
Oeps, ja kheb na controle gemerkt dat het enkel in ie werkt zoals het nu is, maar het moet zo mits aanpassingen zeker ook te doen zijn met zo'n achtergrondfiguurtje, sorry hoor.

@Vegras - Proficiat. Tof dat er een oplossing is, ik ga bla.zip zeker eens bekijken.
 
@keej. Toch het proberen waard toch. thx voor het proberen

@Vegras :thumb::thumb::thumb::shocked::thumb::thumb::thumb: Gefeliciteerd!!

Je hebt het nog voor elkaar gekregen ook:D echt cool. eindelijk eindelijk eindelijk dit ontwerp goed voor de validator ( toen ik de <br> aangepast had naar <br />;)).

Het enige wat me op viel is dat het midden niet auto groter wordt als de zijkanten hoger worden, maar daar had ik ook niet om gevraagd :D en maakt ook niet uit met een andere achtergrondkleur.

En wat die 50 euro betreft..Die gaat met plezier van mijn rekening naar die van jouw verhuizen. Ik stuur je effe een persoonlijk berichtje met m'n email adres, en dan kan je me laten weten hoe je het wilt regelen..

Edit: Oke, prive berichten zijn dus alleen voor donateurs en verenigingsleden kom ik net achter. Stuur het dan maar naar het emailadres wat toch al op deze site staat, en dat is lusinkm@hotmail.com. Zet er effe een code van 8 cijfers in. Als ik een mail van je krijg dan post ik de code hier, en als je die bevestigd dan weet ik 100% zeker dat het van jouw afkomt en kunnen we het afhandelen.
 
Laatst bewerkt:
Oke Vegras, code is binnen en moet

13374242

zijn. Dit klopt neem ik aan?
 
Oke dan, voor mij is de vraag is opgelost.

Eindelijk een geldige css voor deze layout, die werkt in de verschillende browsers. Het enige wat hier nog aan gedaan moet worden is de indeling van de kleurtjes:thumb:

Topic wordt gesloten als Vegras heeft gepost dat alles naar tevredenheid is afgehandeld:D
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan