login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Responsive css werkt niet

Offline peterbrk57 - 31/01/2016 23:34 (laatste wijziging 01/02/2016 00:15)
Avatar van peterbrk57Nieuw lid Hallo,

Ik probeer mijn website responsive te maken. Om te beginnen simpel. Met een css file waarin de volgende regel staat.

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-device-width : 700px) {
/* Hieronder komt je opmaak te staan */

Het CSS eronder zou het over moeten nemen van de originele CSS file, dat doet het ook, alleen achtergronden en borders neemt hij niet over, die blijven dus als het origineel.

Ik heb om te testen de achtergrond fel geel gemaakt, en nu zie ik dat hij bij een resolutie onder de 700 heel even geel wordt en daarna direct het oude plaatje weer geeft.

<link rel="stylesheet" type="text/css" href="style/stylebasic.css" />
<link rel="stylesheet" type="text/css" href="style/styleindex.css" />
<link rel="stylesheet" type="text/css" href="style/test.css" />

Test is het bestandje waarin het responsive gedeelte staat. Iemand een oplossing?

Weer wat verder, ik dacht het "in plaats van" is, maar het Div element wordt niet overschreven maar er wordt overheen geplaatst, is dit normaal? Ik dacht dat de laatste CSS code bepalend was.

5 antwoorden

Gesponsorde links
Offline Thomas - 01/02/2016 14:22
Avatar van Thomas Moderator Zonder (werkend) voorbeeld is dit echt koffiedik kijken.

Daarbij: zijn je HTML document en CSS regels alle syntactisch correct? Heb je deze bijvoorbeeld gevalideerd of heeft je browser een plugin voor validatie? Zolang je document niet volledig valide is heeft het geen enkele zin om te bestuderen wat er mis gaat omdat je uitgangspunt niet goed is.

Het klinkt alsof er vreemde dingen aan de hand zijn. Idealiter plaats je ergens in een of andere vorm online wat je op dit moment hebt.
Offline peterbrk57 - 01/02/2016 17:34 (laatste wijziging 01/02/2016 17:46)
Avatar van peterbrk57 Nieuw lid Hij staat momenteel online, Thomas. Alleen de eerste pagina is responsive zoals boven omschreven, ik heb wel wat dingen moeten doen die niet nodig zouden moeten zijn om het leesbaar te krijgen.

Kan je kijken op www.feelinghomecuracao.com? Alleen de eerste pagina dus.

Het probleem zit in bijvoorbeeld in het blauwe rechthoekige blok met kopen, verkopen, vakantieverhuur. Dat is bij hoge resolutie met ovale blokken, bij een lage resolutie mogen die ovale blokken eruit. Dan gewoon een blauw blok met alle tekstjes onder elkaar, dat lukt mij dus niet.
Offline Thomas - 01/02/2016 23:46 (laatste wijziging 01/02/2016 23:47)
Avatar van Thomas Moderator Ok, een aantal dingen:

* allereerst, ik ben niet bepaald een CSS expert, maar het volgende viel mij op:

* een heleboel elementen hebben position: fixed - hiermee haal je elementen uit de "flow" van de pagina en metsel je ze op een vaste plek op het scherm, ik weet niet helemaal of dat lekker botert met een "responsive" design

* de extra regels die bij media queries in werking treden (style/stylesmall_400_index.css) komen bij de reeds bestaande regels die al van kracht zijn (style/stylebasic.css, style/styleindex.css) - deze zijn dus cumulatief; als je vervolgens de waarde van een reeds opgegeven property wilt veranderen in stylesmall_400_index.css die al voorkwam in een ander stylesheet zul je deze expliciet moeten overschrijven (het simpelweg weglaten van deze property in deze stylesheet gaat sowieso niet werken dus), dus met border-radius: 0; als dit niks uithaalt dan wil dat zeggen dat je media query niet klopte

* misschien is het ook verstandiger om max-width te gebruiken in plaats van max-device-width (meer) en misschien is dit ook de reden dat je media-query-stylesheet niet in werking treedt (waar is trouwens de sluitende accolade van het media-query blok?)

* je gebruikt heel vaak id's, en declareert dan telkens opnieuw elementen die nagenoeg eenzelfde opmaak hebben (knop, info, informatie et cetera); je zou elk van deze stijlen kunnen vervangen door één class waarbij je het element kan laten floaten (mits van toepassing), dit lijkt mij ook beter in lijn met een "vloeibaar" (responsive) ontwerp, mogelijk kan een standaard CSS library zoals bootstrap in jouw geval uitkomst bieden? daarin zitten sjablonen voor knoppen en tabelletjes met X-cellen-per-rij

* je HTML document klopt niet, deze heeft meerdere <!DOCTYPE>, <head> en <body> declaraties

Het is dus eigenlijk een beetje een zootje op dit moment .
Offline peterbrk57 - 02/02/2016 20:40
Avatar van peterbrk57 Nieuw lid Hoi,

Dank je wel voor je eerlijke opmerking aan het einde van het stukje. :-) Maar ik kan wel weer vooruit. Ik ga hiermee aan de slag!

Groetjes, Peter
Offline Devimo - 03/02/2016 11:19
Avatar van Devimo Nieuw lid Fijn te horen dat je er mee aan de slag kan.

Nog een klein puntje, gebruik je om een reden de max-screen-width en @media only screen?

Ook ben ik het met Thomas eens over zijn aangerijkte punten.

Je kan bijvoorbeeld 1 class element maken met veel van de overeenkomende elementen die je nu apart verwerkt en dan kleinere class elementen maken die alleen voor bepaalde punten bedoeld zijn.

Dan nou je bijvoorbeeld dit kunnen doen:
css:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. .demo {
  2.    color: #000000;
  3.    background-color: #FFFFFF;
  4. }
  5. .floatLeft {
  6.    float: left;
  7. }


HTML:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="demo">
  2.   deze div heeft dezelfde overeenkomst als onderstaande
  3. </div>
  4.  
  5. <div class="demo floatLeft">
  6. Deze heeft dus dezelfde overeenkomsten, maar heeft daarnaast ook een float left gekregen.
  7. </div>


Je kan dus aan classes en id's meerdere stijl elementen toevoegen, zoals ik nu heb gedaan bij de 2e div.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.421s