[CSS] Kan dit met divs of toch maar tables? - Softwareontwikkeling

vrijdag 30 maart 2007 14:57

Acties:

Topicstarter

Ik ben een website aan het ontwerpen waarbij het content deel bestaat uit 3 kolommen:
(Navigatie) - (content) - (quick links/ recent news etc)
Nu moeten de linker en rechter kolom een andere achtergrondkleur krijgen dan de content kolom en een achtergrond plaatje (voor de rand). Aangezien de website moet schalen kan ik hierbij niet met een vaste achtergrond werken waar ik die elementen in verwerk en zal ik dus daadwerkelijk de kolom moeten kleuren. Ik probeer in het kader van flexibiliteit te vermijden dat ik tabellen voor positioning gebruik, maar kan ik dit met divs oplossen (de linker en rechter kolom moeten ook nog tot het eind van pagina doorlopen ongeacht de content) of gaat dit alleen met een ouderwetse tabel lukken?

vrijdag 30 maart 2007 15:40

Acties:

PuntPunter

edit: verwijderd / niet echt toepasselijk

[ Voor 93% gewijzigd door PuntPunter op 30-03-2007 16:31 ]

vrijdag 30 maart 2007 15:45

Acties:

Blaise

Kan je misschien een schets of voorbeeld van het ontwerp geven zodat we kunnen zien waar welke backgrounds staan, welke moeten worden herhaald, en welke elementen fluid moeten zijn?

Het is vast mogelijk met veel CSS en een stapel geneste elementen.

vrijdag 30 maart 2007 16:05

Acties:

martdj

Topicstarter

Blaise schreef op vrijdag 30 maart 2007 @ 15:45:
Kan je misschien een schets of voorbeeld van het ontwerp geven zodat we kunnen zien waar welke backgrounds staan, welke moeten worden herhaald, en welke elementen fluid moeten zijn?

Het is vast mogelijk met veel CSS en een stapel geneste elementen.

Ik zal het pogen te schetsen. Het zou het handigste zijn als ik een klein screenshotje kon posten, maar ik zie geen mogelijkheden daarvoor

De linker kolom heeft als achtergrond een plaatje met daarin de achtergrondkleur van de div en een soort van rand aan de linkerkant. de middelste kolom heeft geen plaatje. De rechterkolom heeft hetzelfde plaatje als de linkerkolom maar dan gespiegeld.
De linker en rechterkolom zullen nooit dezelfde hoeveelheid content hebben. Normaal houdt de div op, op het moment dat de content op is. Een achtergrond plaatje loopt dus door tot de laatste content, maar ik wil de div en dus het achtergrondplaatje door laten lopen tot aan de footer ongeacht welke kolom de meeste content heeft.

vrijdag 30 maart 2007 16:24

Acties:

PuntPunter

Ik was met mijn vorige post een beetje te snel, sorry daarvoor. Kwam ook een beetje omdat ik naar huis moest (zit nu thuis, daarnet op m'n werk...)
Ik had gewoon niet moeten posten..

Wat zou kunnen:

code:

<html>
  <head>
    <style>
      #rechts {
        background-image: #ff0000 url('rechterachtergrond.jpg') repeat-y top left;
        float: right;
        width: 20%
      }
      #links {
        background-image: #00ff00 url('linkerachtergrond.jpg') repeat-y top right;
        float: left;
        width: 20%;
      }
      #content {
         background-image: #0000ff url('centerachtergrond.jpg');
      }
    </style>
  </head>
  <body>
    <div id="rechts">rechter kolom inhoud</div>
    <div id="links">linker kolom inhoud</div>
    <div id="content">centrum</div>
  </body>
</html>

Het nadeel hieraan is alleen, dat de achtergrond van het middendeel misschien niet past bij beide kolommen als het browser venster te groot of te klein wordt gemaakt.
Alleen kleurtjes zijn geen probleem.

Edit:
repeat-y zorgt ervoor dat de achtergrond afbeelding wordt herhaald op de y-as. Aangezien ik die nog wel eens verwar met de x-as, moet dat misschien veranderd worden. De achtergrond voor bijvoorbeeld de rechter kolom wordt nu zoveel mogelijk tegen de linkerrand aangeplaats, en wordt herhaald van bovenaan tot aan onderaan. (en heeft een geheel rood kleurtje)
En alweer, ik doe het vanuit mijn hoofd, er zitten waarschijnlijk nog wel een aantal foutjes in..

Ik ben net zelf bezig met een soortgelijke lay-out:
http://eve.mspijker.nl
Let niet op het pop-upje, ik ben js aan het testen..

[ Voor 22% gewijzigd door PuntPunter op 30-03-2007 16:31 ]

vrijdag 30 maart 2007 16:34

Acties:

martdj

Topicstarter

Geeft niet. Ben al blij dat je de moeite neemt om te reageren. De oplossing van het probleem is het niet, maar wel een goede manier om het probleem te demonstreren. Als ik je code als volgt aanpas:

code:

<html>
  <head>
    <style>
      #rechts {
        background: #ff0000 url('rechterachtergrond.jpg') repeat-y top left;
        float: right;
        width: 20%
      }
      #links {
        background: #00ff00 url('linkerachtergrond.jpg') repeat-y top right;
        float: left;
        width: 20%;
      }
      #content {
         background: #0000ff url('centerachtergrond.jpg');
      }
    </style>
  </head>
  <body>
    <div id="rechts">rechter kolom inhoud</div>
    <div id="links">linker kolom inhoud</div>
    <div id="content">centrum<br>Hier net even een regel meer text</div>
  </body>
</html>

Dan zul je zien dat de middenkolom, omdat die langer is dan de andere twee, de hele breedte beslaat. Wat ik dus wil is dat als de middenkolom (of enige andere kolom actually) langer is dan de andere twee de kleuren netjes doorlopen en je dus nog steeds een groene, blauwe en rode sreep krijgt. Met tables gaat dit eigenlijk automatisch, maar met divs kom ik er dus nog niet uit.

vrijdag 30 maart 2007 16:41

Acties:

PuntPunter

Aha, nu snap ik je..

Misschien dat je dan hier wat aan hebt:
http://www.positionisever...onetruelayout/equalheight

vrijdag 30 maart 2007 17:04

Acties:

orf

HTML:

<div id="wrapper_left">
  <div id="wrapper_right">
    <div id="left_column"></div>
    <div id="content"></div>
    <div id="right_column"></div>
  </div>
</div>

Cascading Stylesheet:

#wrapper_left{
  background: url('left_bg.gif') repeat-y top left;
}
#wrapper_right{
  background:url('right_bg.gif') repeat-y top right;
  overflow:hidden;
}

Positionering van de 3 kolommen kun je met floats doen; de wrappers bevatten de achtergrondafbeeldingen en rekken mee met de langste kolom.

vrijdag 30 maart 2007 17:07

Acties:

Jenk-Han

Ik gebruik hier zelf soms een javascriptje voor. Ik heb website waar dit javascript staat niet gevonden, dus ik zet 'm hier maar gewoon onder.

code:

    matchHeight=function(){
         var divs,contDivs,maxHeight,divHeight,d;
         // get all <div> elements in the document
         divs=document.getElementsByTagName('div');
         contDivs=[];
         // initialize maximum height value
         maxHeight=0;
         minHeight=700;
         // iterate over all <div> elements in the document
         for(var i=0;i<divs.length;i++){
              // make collection with <div> elements with class attribute 'container'
              if(/\bvardiv\b/.test(divs[i].className)){
              //if (divs[1].className='vardiv') {
                 d=divs[i];
                    
                    contDivs[contDivs.length]=d;
                    // determine height for <div> element
                    //alert(d.id+d.offsetHeight);
                    if(d.offsetHeight){
                         divHeight=d.offsetHeight;
                    }
                    else if(d.style.pixelHeight){
                         divHeight=d.style.pixelHeight;
                    }
                    // calculate maximum height
                    maxHeight=Math.max(maxHeight,divHeight);
                    //alert(maxHeight);
              }
         }
         // assign maximum height value to all of container <div> elements
         if (maxHeight<minHeight) maxHeight = minHeight;
         for(var i=0;i<contDivs.length;i++){
            //alert (maxHeight);
            contDivs[i].style.height=maxHeight+'px';
            //alert(contDivs[i].id+contDivs[i].style.height); 
            if (contDivs[i].offsetHeight > maxHeight) {
                contDivs[i].style.height = (maxHeight - (contDivs[i].offsetHeight - maxHeight)) + 'px';
            }
         }
         

    }
    // execute function when page loads
    window.onload=function(){
         if(document.getElementsByTagName){
              matchHeight();
         }
    }

Deze code even in een bestandje plaatsen (divsize.js bijvoorbeeld) en een verwijzing opnemen in de <head>
Pas de variabelen aan in dit script. (minHeight, maxHeight)
Geef dan aan de div-jes die je even groot wilt laten zijn de class 'divsize'.

Succes.

vrijdag 30 maart 2007 17:17

Acties:

martdj

Topicstarter

3 verschillende methodes

. Mijn werkdag zit er bijna op dus ik ga er volgende week mee aan de slag. Zeer bedankt allemaal!

vrijdag 30 maart 2007 17:17

Acties:

moozzuzz

Als (Navigatie) en (quick links/ recent news etc) fixed width zijn, dan kan je zeker ook wat met faux-collumns: margin op je body en de twee kollommen absolute links en rechts gooien...

vrijdag 30 maart 2007 17:48

Acties:

martdj

Topicstarter

moozzuzz schreef op vrijdag 30 maart 2007 @ 17:17:
Als (Navigatie) en (quick links/ recent news etc) fixed width zijn, dan kan je zeker ook wat met faux-collumns: margin op je body en de twee kollommen absolute links en rechts gooien...

Die twee kolommen zijn fixed width, maar de middelste niet (het moet meeschalen met de venstergrootte en dan gaat het mis met faux columns volgens mij.

vrijdag 30 maart 2007 18:31

Acties:

moozzuzz

martdj schreef op vrijdag 30 maart 2007 @ 17:48:
[...]

Die twee kolommen zijn fixed width, maar de middelste niet (het moet meeschalen met de venstergrootte en dan gaat het mis met faux columns volgens mij.

meeschalen zal geen prob zijn, maar ik bedenk me net dat de achtergrond niet zal oprekken met het langste element (bij mijn brouwsels is dat nooit nodig, mijn vandaar m'n foute suggestie).

Ik heb even getest en je kan je html en body element achtergrondjes meegeven:

Cascading Stylesheet:

html{ 
    position: relative; 
    padding: 0px;
    margin: 0px;
    background: url(A) repeat-y top left; 
    width: 100%; 
    height: 100%;
}

body{ 
    position: relative; 
    padding: 0px;
    margin: 0px;
    background: url(AA) repeat-y top right; 
    width: 100%; 
    height: 100%;
}

#container{
    margin: 0px 20%; 
    background-color: #aaaaaa; 
    /* width: 700px;  */
    height: 100%; 
}
#rechts {position : absolute; top: 0px; right: 0px; width: 20%;}
#links  {position : absolute; top: 0px; left: 0px;  width: 20%;}

HTML:

<body> 

    <div id="container"> 
    </div>
    
    <div id="rechts">rechter kolom inhoud</div>
    <div id="links">linker kolom inhoud</div>
</body> 
</html>

Wellicht kan de CSS beter/beperkter, heb wat gemodderd met een bestaand bestandje vandaar.

maandag 2 april 2007 10:47

Acties:

martdj

Topicstarter

Even wat feedback. Ik ben uiteindelijk voor de methode van orf gegaan met de wrappers. Die werkt goed.

Probleem van deze methode: http://www.positionisever...onetruelayout/equalheight is dat ie niet goed werkte in Firefox (in ieder geval niet in combinatie met de css die er al stond). In IE6 doet deze het wel goed.

Het Javascript zal het wel doen, maar het is mooier om het op te lossen zonder als het zonder kan.
De methode van moozzuzz lijkt erg op de methode van orf, maar is op andere momenten handig. Bij mij leverde het voor mijn layout problemen op, omdat mijn scherm niet tot aan de randen gaat, maar een breedte van 98% heeft, wat moeilijk in een plaatje is te vatten.

Overigens werkte de gewone table oplossing ook netjes, behalve dat ik dan mijn css aan moest passen om de mouse overs weer goed te krijgen die het in IE6 plots niet meer deden (in Firefox was ik daar het snelste mee klaar).
Divs met wrappers dus. Nogmaals, allemaal erg bedankt voor jullie hulp! $_/-\o_$

maandag 16 april 2007 13:45

Acties:

martdj

Topicstarter

Ik heropen deze thread even, omdat ik tegen een volgend probleem aanloop waarbij er opnieuw verschillen optreden tussen een Div en een table oplossing:

Ik heb dus de layout met 3 kolommen, waarbij de middelste kolom een content kolom is. Als nu in deze middelste kolom een plaatje of een tabel komt te staan waarvan de afmetingen groter zijn dan de breedte van die kolom (wat in het geval van van de content die erin moet passen gebeurt op het moment dat de screen size 800x600 is), de rechter kolom weggedrukt wordt. In het geval van de DIV oplossing, komt de navigatie in het content deel te floaten, terwijl de achtergrond van die navigatiekolom buiten het scherm wordt gedrukt (er verschijnt dus een scroll balk onderin). In het geval van de tables oplossing wordt die volledige kolom weggedrukt dus inclusief achtergrond (aangezien die aan de td tag hangt). Het laatste is beter dan het eerste, maar beiden zijn niet echt netjes. Het mooiste zou zijn als zo'n plaatje automatisch kleiner weergegeven zou worden, zodat ie wel binnen het scherm past en een tabel wordt samengedrukt, zodat ie ook weer past. Als dat niet kan, zou ik willen zorgen dat de DIV netjes naar het buiten beeld vallende deel verschuift ipv positioneel in het zichtbare gebied te "floaten". Iemand enig idee hoe ik dat voor elkaar kan krijgen?

Edit:
Firefox doet het overigens met tables wel goed. Plaatjes knallen wel over de zijkant heen. IE6 gaat met tables wel de mist in (en ik hoor voor IE6 te programmeren

)

Edit2:
Een ander probleem waar ik hierbij tegenaan loop is dat mijn pagina horizontaal ook uit 3 delen bestaat, namelijk een Header, Main en Footer. Als bovenstaande gebeurt wordt alleen de Main DIV opgerekt, terwijl de andere twee (die width:100% hebben) beperkt blijven tot de zichtbare schermgrootte. Dat ziet er uiteraard niet uit. Als een DIV opgerekt wordt en er een horizontale scrollbalk komt, zouden de andere twee ook mee moeten rekken. Is daar nog een makkelijke methode voor?

[ Voor 20% gewijzigd door martdj op 16-04-2007 14:19 ]