Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] Faux columns met 100% content stretch

5 antwoorden
  • Leute, Ik zit met een CSS probleem (wat de titel al doet vermoeden :wink:). De lay out van de site: --------------header------------ | ---------------------------------- --------------menu-------------- | ---------------------------------- --------------banner------------ | | ---------------------------------- --------------content------------ |----rechts||----------links----| ---------------------------------- Om de twee kolommen helemaal te stretchen over het hele scherm heb ik gebruik gemaakt van faux columns, dit werkt zoals het moet. Nu heb ik een klein probleem, de linker div in de content heeft een background die ik wil positioneren tegen de bottom. Gezien ik gebruik maak van faux columns zijn mijn linker en rechter div in de content div eigenlijk niet tot onderaan gestretched maar rekken ze gewoon mee met de inhoud ervan. Dit zorgt ervoor dat ik mijn background die ik rechtsonderin wil positioneren daar nooit zal staan mits mijn content in mijn main div over de hele pagina gestretched wordt. Concreet: hoe krijg ik mijn content div (of de twee divs hierin) zover dat deze inderdaad de resterende ruimte invullen van de pagina? Bvd! Onderstaad de source: [code:1:e854675baa] <!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=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> * { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 11px; } html, body { height: 100%; } * html .website { height: 100%; } body { text-align: center; } .website { width: 775px; min-height: 100%; background-image: url(images/content_bg.jpg); background-repeat: repeat-y; text-align: left; border: 1px solid #000; border-top: 0; border-bottom: 0; } .topbanner { height: 50px; width: 775px; text-align: right; color: #FFF; font-size: 20px; background-color: #000; padding: 25px 5px 5px 0; voice-family: "\"}\""; voice-family: inherit; width: 770px; height: 20px; } .nix{} .menu { width: 775px; height: 30px; border-top: 5px solid #FF6600; border-bottom: 1px solid #FF6600; padding-top: 7px; background-color: #FFF; voice-family: "\"}\""; voice-family: inherit; height: 23px; } .nix{} .menu ul { display: inline; position: absolute; } .menu li { float: left; list-style: none; display: inline; font-size: 12px; font-weight: bold; color: #000; margin-left: 20px; } .menu a { text-decoration: none; font-size: 12px; font-weight: bold; color: #000; } .menu a:hover { color: #FF6600; } .banner { width: 775px; height: 195px; background-color: #FFF; } .newsteaser { float: left; margin: 10px 5px 10px 0; width: 175px; height: 175px; border: 1px solid #000; background-color: #000; color: #FFF; border-left: 0; } .picture { float: left; margin: 10px 0 10px 0; width: 593px; height: 175px; border: 1px solid #000; border-right: 0; background-image: url(images/schnauzer_header.jpg); } .pictures { float: left; width: 175px; min-height: 262px; height: 262px; margin-right: 6px; border-top: 1px solid #000; padding: 10px; voice-family: "\"}\""; voice-family: inherit; width: 155px; } .nix{} .pictures img { margin-bottom: 10px; } .contentpane { float: left; width: 594px; min-height: 262px; height: 262px; border-top: 1px solid #000; background-image: url(images/schnauzer_achtergrond.jpg); background-repeat: no-repeat; background-position: right; padding: 10px; voice-family: "\"}\""; voice-family: inherit; width: 574px; } .nix{} .contentpane h1 { font-size: 14px; font-weight: bold; color: #FF6600; } .contentpane h2 { font-size: 11px; font-weight: bold; color: #FF6600; } </style> <body> <div class="website"> <div class="topbanner"> Schnauzerkennel Van De Woeste Grond </div> <div class="menu"> <ul> <li><a href="dekennel.php">De kennel</a></li> <li><a href="schnauzernieuws.php">Schnauzer nieuws</a></li> <li><a href="fotos.php">Foto's</a></li> <li><a href="films.php">Films</a></li> <li><a href="archief.php">Archief</a></li> <li><a href="stambomen.php">Stambomen</a></li> <li><a href="handigehulpjes.php">Handige hulpjes</a></li> <li><a href="favorieten.php">Favorieten</a></li> </ul> </div> <div class="banner"> <div class="newsteaser"> </div> <div class="picture"> </div> </div> <div class="content"> <div class="pictures"> <marquee direction="down" height="100%" scrolldelay="100"> <img src="images/schnauzer1.jpg" /> <img src="images/schnauzer2.jpg" /> <img src="images/schnauzer3.jpg" /> </marquee> </div> <div class="contentpane"> <h1>De kennel</h1> </div> </div> </div> </body> </html> [/code:1:e854675baa]
  • Kan weinig bedenken dan FooterStickAlt (bezoek zoekmachine) of één van de frame-simulaties op www.cssplay.co.uk . Ander idee is tóch een tabel gebruiken.
  • Met de footer stick alt los ik het probleem niet op.. Dit houdt in dat de content div nog steeds 100% wordt gesimuleerd ipv daadwerkelijk 100%.. Ennuh tabellen doen we niet aan he... Vloeken in de kerk :wink: Ik zal eens kijken op de site die je noemt. Bedankt voor de hulp!
  • Kan je het niet oplossen volgens hetzelfde principe als de faux columns? In theorie is het heel goed mogelijk om de achtergrond met CSS toe te passen op het html-element (ofwel faux columns) en dan met wat slimme positionering de achtergrond van je andere column plaatsen in het body-element. Dit is in ieder geval hoe ik vaak achtergronden combineer als je bijvoorbeeld iets in zowel een bovenhoek als een onderhoek wil plaatsen. - Bas
  • Bas je bent goed bezig! Het is gelukt ik heb wel een beetje moeten spelen met diverse achtergrond images (die van .website moest transparant worden) en ik heb met de gewenste achtergrond de afmeting in de breedte gelijk moeten maken aan die van de site (ivm centrering van de body). Maar het werkt!! Super, bedankt!

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.