Op mijn pagina haal ik gegevens uit Mysql en geef deze weer binnen een Div element op de pagina. Tijdens het ophalen van de data komen er drie blokjes op een rij. Daarna komen de volgende Div blokje eronder. Ik heb dat gedaan met de volgende If else. $left = 100; $left= $left + 270; if ($left > 810) {$left = $left - 810; $top = $top + 390;} else {}
Dit werkt perfect.
Maar nu wil ik de pagina responsive maken en moeten alle blokjes onder elkaar komen te staan. Ik moet dus de If Else aanpassen, op zich makkelijk, maar nu de vraag: Hoe verander ik nu de variabelen als de pagina op bv een smartphone wordt getoond? Voorheen toen de website in HTML was werd automatisch de CSS aangepast, maar dat gaat nu niet meer. Ik hoop dat het een beetje duidelijk is, heeft iemand een oplossing?
De variabelen die ik net benoem zouden bijvoorbeeld in de plaats komen van 270 en 810.
Met screen.width kun je in javascript de breedte van het scherm uitlezen (in pixels). Als je dit op je eerste pagina doet en deze waarde dan op de een of andere manier doorsluist naar de server, dan kun er in de volgende pagina's gebruik van maken.
Maar het is veel netter om dit client-side te doen dmv CSS (en je HTML dus generiek op te zetten).
Ben, maar ik overrule toch de css door $top en $left? Dan kan ik dat daarna niet meer veranderen in mijn css. Of mis ik iets? Eigenlijk zou ik de variabelen in mijn css moeten kunnen zetten. Ik heb dat geprobeerd aan aan de hand van een voorbeeld maar dat is niet gelukt.
In-line CSS..... Begin daar liever niet aan. Een groot drama bij ontwikkelen.
Een grid-framework is echt wat je nodig hebt. Die schaalt precies tussen een aantal voorgedefinieerde breakpoints aan de hand van de resolutie van je browser. Het is zonde om dit zelf te berekenen en uit te stippelen. Tenzij je graag het wiel dan opnieuw ontwikkelt, maar dan niet geheel rond omdat het niet netjes is vanwege inline-css en plaatsbepalingen van je elementen,
Arien, dat detecteren doe ik nu in css dmv bijvoorbeeld:
@media only screen and (min-width: 320px) and (max-width:530px), only screen and (min-device-width: 320px) and (max-device-width:530px){
En dat is ook mijn probleem de positie van het Div Element kan ik daar prima regelen dmv een andere cascade style sheet. Maar nu ik de posities overruled heb dmv van de twee variabelen, zie boven. Gaat dat niet meer. Ik kan mij niet voorstellen dat ik de enige ben met dit probleem.
[size=xsmall]Toevoeging op 14/08/2018 22:58:10:[/size]
Arien, kijk even naar www.feelinghomecuracao.com. Als je zoekt op huizen in een bepaalde prijsklasse zie je de blokjes met informatie. Zoals het nu is, is alles met de hand ingevoerd, dus de positie van elk blokje is in CSS geregeld. Nu wil ik met Mysql gaan werken en moet alles uit de database komen en moeten die blokjes op een andere manier op het scherm komen. Ik zie nog even niet hoe. De andere suggesties moet ik nog opzoeken en uitproberen
Het gebruik van MySQL is niet echt relevant in deze zaak. Het gaat immers om het weergeven van de data.
Of deze uit een database komt, of uit een tekstbestand, of hardcoded in je PHP-bestand staat. In je HTML-document is het toch hetzelfde.
Opsich kan je ook prima met media-queries in CSS werken, zoals je al zegt. Het kan ook prima, maar het kost wel wat tijd om alles netjes te positioneren en uit te testen. Met een grid-framework kan je dit in de HTML al netjes regelen aan de hand van classes. Het is efficiënter, eenvoudiger en makkelijker onderhoudbaar.
Ik zou wel je HTML-structuur even controleren, want ik zie halverwege opeens een doctype voorbij komen. Die hoort daar uiteraard niet. Ook zou in in-line styles toch liever vermijden. Met de trapsgewijze (cascading stylesheets) structuur met betrekking tot het inladen van de CSS door je browser, kan dit soms voor rare effecten zorgen of voor lastig te debuggen problemen.
Dank je wel tot zover Arien. Hieronder de code van die blokken waar ik het over heb, ik begrijp even zo gauw niet wat je bedoelt met het Doctype, maar ik ga daar naar zoeken.
Ik weet ook niet hoe ik ipv met de While functie (while ($row = $result->fetch(PDO::FETCH_ASSOC)) { ) op een andere manier die blokken kan positioneren, als dat met behulp van CSS kan dan graag natuurlijk.
Het is duidelijk dat ik geen Php specialist ben, ben eigenlijk net een paar weken bezig, Loop steeds weer tegen een probleem aan, maar weet het altijd (met behulp van) weer op te lossen. Dit is echter zo een lastige dat k twijfel of ik wel op de goede weg ben met Php. Terwijl er zoveel voordelen zitten aan de database voor mijn website. Ik ga kijken of ik kan vinden wat je bedoelt met grid-framwork. Nederland zal nu wel slapen, hier nog niet, morgen hoop ik verder.
