login  Naam:   Wachtwoord: 
Registreer je!
 Forum

responsive jquery

Offline peterbrk57 - 16/06/2016 16:14
Avatar van peterbrk57Nieuw lid Hallo,

Ik heb de flexslider van Jquery op mijn site gezet. Deze toont een foto over de volle breedte en is responsive. De foto is 2000 * 700 px. Wanneer het scherm kleiner is wordt de breedte van de foto aangepast en automatisch ook de hoogte. Maar onder de foto staan div blokjes met teksten en foto's. En nu het probleem en de vraag, die div blokjes blijven op hun vast positie staan zodat er een ruimte ontstaat tussen de foto en de div blokjes, hoe los ik dit op? Iemand een idee?

11 antwoorden

Gesponsorde links
Offline Thomas - 16/06/2016 16:33
Avatar van Thomas Moderator
Citaat:
die div blokjes blijven op hun vast positie staan

Dit lijkt mij het probleem, en ook de plek waar je zou moeten starten met het zoeken naar een oplossing.
Offline peterbrk57 - 16/06/2016 21:12
Avatar van peterbrk57 Nieuw lid Uiteraard heb ik er al een paar uurtjes inzitten, maar ik kom niet verder, kan iemand het tipje van de sluier iets verder oplichten?
Offline Thomas - 16/06/2016 22:41
Avatar van Thomas Moderator Ergens een online voorbeeld? Dat werkt doorgaans wat makkelijker dan gissen naar wat er misgaat.
Offline peterbrk57 - 16/06/2016 23:56 (laatste wijziging 17/06/2016 00:14)
Avatar van peterbrk57 Nieuw lid Hier de CSS van de flexslider en het div-element wat niet me wil verschuiven. Daaronder de html van de pagina. Eerst de slideshow en daarna het stukje Facebook.

De pagina: http://www.feelinghomecuracao.com/1/index2.php.

Is uiteraard niet af, als je de resolutie verkleint zie je wat ik bedoel.

Alvast bedankt voor het kijken.

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .flexslider {
  2.   margin: 0 0 60px;
  3.   background: #ffffff;
  4.   border: 1px solid maroon;
  5.   position: relative;
  6.   zoom: 1;
  7.   -webkit-border-radius: 0px;
  8.   -moz-border-radius: 0px;
  9.   border-radius: 0px;
  10.   -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  11.   -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  12.   -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  13.   box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  14. }
  15.  
  16. #slider{ 
  17.  z-index: 2;
  18.  top: 160px;
  19.  position:absolute; 
  20.  width: 100%;
  21.  max-width:100%;
  22.  height:700px;
  23.  background-color:white;
  24.  border-top:0px maroon solid;
  25.  border-bottom:0px maroon solid 
  26.  }
  27.  
  28.  
  29. #sliderinside{ 
  30.  z-index: 2;
  31.  top: 10px;
  32.  position:absolute; 
  33.  width: 100%;
  34.  max-width:100%;
  35.  height:auto;
  36.  left:0%;
  37.  margin:0px -5px; 
  38.  }
  39.  
  40. #facebook{ 
  41.  z-index: 5;
  42.  position: absolute;
  43.  top: 644px;
  44.  left: 50%;
  45.  height: 47px;
  46.  background-color:white;
  47.  width: 150px;
  48.  margin: 0 -211px;
  49.  border-radius:5px;
  50.  border: 1px gray solid;
  51.   }


html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="slider">
  2. <div id="sliderinside">
  3. <div class="flexslider">
  4.   <ul class="slides">
  5.     <li>
  6.       <img src="images/1.jpg" />
  7.        </li>
  8.     <li>
  9.       <img src="images/2.jpg" />
  10.        </li>
  11.     <li>
  12.       <img src="images/3.jpg" />
  13.        </li>
  14.     <li>
  15.       <img src="images/4.jpg" />
  16.        </li>
  17.     <li>
  18.       <img src="images/5.jpg" />
  19.        </li>
  20.     <li>
  21.       <img src="images/6.jpg" />
  22.        </li>
  23.     <li>
  24.       <img src="images/7.jpg" />
  25.        </li>
  26.  
  27.  
  28.   </ul>
  29.  
  30. </div>
  31. </div>
  32. </div>
  33.  
  34. <div id="facebook"><a href="https://www.facebook.com/feelinghomecuracao/?ref=ts&amp;fref=ts" target="_blank"><img alt="" src="../fotos_basic/facebook5.png" style="margin:2px 0px 0px 5px" /></a></div>


mod edit: code blokken
Offline Thomas - 17/06/2016 00:20
Avatar van Thomas Moderator De blokjes zijn relatief gepositioneerd ten opzichte van de bovenkant van het document, elke keer 644 px. Deze afstand-tot-de-bovenkant lijkt ook niet te veranderen als je het browservenster verkleint.

Wat is er op tegen om die blokjes gewoon gecentreerd te tonen na de flexslider div? Zonder al die expliciete instellingen verschuiven de blokjes automatisch naar boven wanneer je sleept met het browservernster volgens mij.

Ik raad je wel aan de broncode van die pagina eens onder de loep te nemen. Een voorwaarde voor het correct renderen van een pagina is dat de syntax van de HTML-code klopt (conform standaarden is). Indien hier geen sprake van is kan niet gegarandeerd worden dat e.e.a. correct wordt weergegeven. Het document heeft meerdere <!DOCTYPE html>, <html>, <head> en <body> tags. Dit lijkt mij niet kloppen.
Offline peterbrk57 - 17/06/2016 00:30
Avatar van peterbrk57 Nieuw lid Absolute gepositioneerd toch? Ik heb relatief ook geprobeerd, net als het insluiten in sliderinside, maar dat werkt ook niet.

De broncode heb ik nog eens bekeken, ik zie daar niet terug wat je schrijft, of ik snap het niet.
Offline Thomas - 17/06/2016 00:47
Avatar van Thomas Moderator
Citaat:
Absolute gepositioneerd toch? Ik heb relatief ook geprobeerd

Potato, potahto. In beide gevallen stel je een vaste afstand in ten opzichte van de top van je document.

Als je de elementen simpelweg na de slider plaatst zonder extra positionele toevoegingen dan zorgt de natuurlijke flow van het document er al voor dat deze mee omhoog gaan indien je het venster verandert van grootte. Tenzij je dus de afstand tot de bovenkant van het document keihard vastspijkert zoals gebeurt met top: ...px;

Citaat:
De broncode heb ik nog eens bekeken, ik zie daar niet terug wat je schrijft, of ik snap het niet.

* clicky *
Offline peterbrk57 - 17/06/2016 00:55
Avatar van peterbrk57 Nieuw lid Ik voel mij dom. :-( Ik heb uit het CSS gedeelte positon: absolute weggelaten, nu zie ik het element helemaal niet meer....

#aboutus{
z-index: 5;
top: 300px;
left: 50%;
height: 47px;
background-color:white;
width: 150px;
margin: 0 -400px;
border-radius:5px;
border:thin silver solid;
}
Offline Thomas - 17/06/2016 12:52
Avatar van Thomas Moderator Het online voorbeeld is weg? :/
Citaat:
nu zie ik het element helemaal niet meer

Dit komt misschien omdat de slider wellicht geen dimensies heeft en dat er dan mogelijk elementen over elkaar heen worden gezet. Je zou kunnen "forceren" dat elementen na de slider echt op een "nieuwe regel" als het ware worden gezet door de slider te clearen of een apart clear-element na de slider (en voor de logo's) te zetten:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="clear: both;"><!-- clear --></div>

Dit zal mogelijk al beter werken, later kun je kijken naar elegantere oplossingen.

Als je wilt dat we mee kunnen kijken hoe de situatie nu is zou een online voorbeeld wederom een stuk makkelijker zijn.

EDIT: argh, waarom overal absolute positioneringen? dit zorgt ervoor dat elementen uit hun natuurlijke flow worden gehaald en je deze op een vaste plek vastspijkert. Dat leent zich niet echt voor een flexibel/responsive design wel?
Offline peterbrk57 - 17/06/2016 14:13 (laatste wijziging 17/06/2016 14:24)
Avatar van peterbrk57 Nieuw lid Hoewel ik dit stukje site eigenlijk niet online wil hebben vanwege indexeren door Google, staat hetgeen waar het over gaat nog steeds online. Dus meekijken kan: http://www.feelinghomecuracao.com/1/index2.php
Ik zal eens kijken of ik iets met clear kan doen, alvast bedankt weer!

Als ik een element niet vast positioneer, is het dan een kwestie van position op relative zetten of moet ik deze deze regel weg halen?
Offline Thomas - 17/06/2016 15:56
Avatar van Thomas Moderator TL;DR weghalen.

Citaat:
Hoewel ik dit stukje site eigenlijk niet online wil hebben vanwege indexeren door Google

Daarvoor zijn robots.txt en/of meta tags. Crawlbots van Google honoreren deze wel lijkt mij.

position: relative; gebruik je als je een element wilt transleren vanaf zijn oorspronkelijke, natuurlijke (static) positie. Of als een "anker" voor ondergelegen absolute gepositioneerde elementen.

In jouw geval wil je geen van beide. Je wilt gewoon div B na div A zetten. Dat is het enige wat je hoeft te doen. Al die extra rommel (position, top, left etc.) is daarvoor niet nodig - dit is al de default werking van positionering van elementen. Je zet B na A in je broncode, dan verschijnt het ook zo op je scherm. Ook als je het scherm van grootte verandert.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.172s