login  Naam:   Wachtwoord: 
Registreer je!
 Forum

divs positioneren bij resizing met CSS (Opgelost)

Offline Derk123 - 04/08/2012 23:00 (laatste wijziging 05/08/2012 04:38)
Avatar van Derk123Lid Ik probeer iets met CSS te maken dat waarschijnlijk niet mogelijk is.
Ik heb 3 kolommen en op de wesbite van de PC ziet er zo uit:
A B C


HTML
<div id=”A_links”> </div>
<div id=”B_midden”> </div>
<div id=”C_rechts”> </div>

CSS
#A_links{
float:left;
//Andere code

}
#B_midden{
float:left;
//Andere code
}

#C_rechts{
float:left;
//Andere code

}

De bovenste werkt goed en wat mij niet lukt is het volgende:
Op de website van de telefoon of wanneer ik de browser klein maak, moet de layout zo uitzien.

B
C
A
De drie kolommen zijn verticaal en kolom B staat boven aan.
Is het mogelijk om dit te realiseren door de 3 divs anders te stylen? Zo ja, hoe?

Wanneer ik de browser resize moet de margin tussen A, B en C hetzelfde zijn.

4 antwoorden

Gesponsorde links
Offline larssy1 - 05/08/2012 04:44
Avatar van larssy1 MySQL beginner misschien is dit een goed voorbeeld??

Gebruikt javascript voor het onresize event, waarbij naar de totale breedte van het scherm wordt gekeken. Is het scherm (in dit geval) kleiner dan 1142 pixels, dan veranderd de margin left.

Dit is dus ook een methode om de float weg te halen.

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. window.onresize = function(event) {
  2.         if(window.innerWidth <= 1142)
  3.         {
  4.             $("#content").css("margin-left","140px");
  5.         }
  6.         else
  7.         {
  8.             $("#content").removeAttr("style");
  9.         }
  10.     };
Offline Derk123 - 05/08/2012 11:13
Avatar van Derk123 Lid Eerlijk gezegd snap ik niet hoe zorgt javascripte code hierboven dat de divs verticaal worden getoond i.p.v horizontaal. Ik weet ook niet hoe zorg ik dat div B bovenaan komt.

Bij resize gebruik ik mediaquery om divs te stylen. Maar het lukt mij niet om de div boven elkaar te plaatsen zoals in het voorbeeld hierboven.
Offline larssy1 - 05/08/2012 15:12
Avatar van larssy1 MySQL beginner awh, ik zie t nu.. waarom zou je B voor A willen hebben?

daarnaast, zorgt float left in combinatie met de width waarde ervoor dat ze naast elkaar komen.
haal je de float weg, dan zijn ze weer verticaal.
Offline Derk123 - 05/08/2012 16:38 (laatste wijziging 05/08/2012 19:48)
Avatar van Derk123 Lid Ik heb het volgende gebruikt, maar het werkt alleen met load en niet met resize

jQuery(document).ready(function(){
jQuery('#midden_column').insertBefore('#left_column');
});
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.173s