ingewikkelde layout

[csshunter]

Hoi Marc,
Als een webpagina plots niet doet wat je wilt ...

In de .figure heb je eerst gedefinieerd: {margin: 0 auto;}.
Bij een opgegeven breedte wordt de div dan mooi gecentreerd.

Maar onder de border-gegevens staat nog eens een margin-opgave: {margin: 0.5em;}.
Die geldt dan voor alle 4 de margin-waarden (boven, rechts, onder, links), en wil de eerdere margin wel overrulen!
Daarmee wordt de auto ongedaan gemaakt, en de div komt op .5em vanaf links te liggen.

Als een webpagina plots niet doet wat je wilt ...
"Herdefinitie van margin-top" zegt de css-validator in z'n waarschuwingen - en herdefinities maken de zaak ondoorzichtig!

• Bedoel je soms: {margin: .5em auto;} = boven en beneden .5em margin, en links-rechts gecentreerd?

Met vriendelijke groet,
CSShunter

 

[marc 05]

Verder ondervind ik wat problemen met de pagina`s waar ik de media queries al in geplaatst heb.
Als ik in ontwikkelhukpprogramma van IE overschakel naar een eerdere versie dan IE9 dan krijg ik dus geen achtergrond meer... witte achtergrond met daarop de plaatjes.
Css valt daar dan weg ook bij een volledig schermformaat.

De volgende opbouw heb ik gemaakt:

Vieuwport:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Queries:

<link rel='stylesheet' media='screen and (min-width: 1015px) and (max-width: 2500px)' href='css/frame.css'>
<link rel='stylesheet' media='screen and (min-width: 730px) and (max-width: 1014px)' href='css/medium.css'>
<link rel='stylesheet' media='screen and (min-width: 480px) and (max-width: 729px)' href='css/small.css'>
<link rel='stylesheet' media='screen and (min-width: 320px) and (max-width: 479px)' href='css/xsmall.css'>



Voorbeeldstukje van css:

body {
width:90%;
margin: 0 auto;
padding: 0;
background: #050774;
color: white;
font-family: Arial, Helvetica, sans-serif;
}

enzv.


Moet er in de css nog wat staan zodat de query herkend wordt....als ik namelijk de css wil valideren krijg ik ook de volgende melding:


Sorry! We vonden de volgende fouten (4)

URI : http://www.digitreport.com/css/mijn frame.css



-1 onbekende media screen and (min-width: 1015px) and (max-width: 2500px)


en dan nog 3 soortgelijke regels.

 

[csshunter]

Protest css-validator:
Dat krijg ik ook te zien als ik de pagina test op css2.1
Maar met testen op css3 geeft ie groen licht.

Met vriendelijke groet,
CSShunter

 

[marc 05]

Hallo,

In IE 8 en 7 gaat het niet goed...... dan krijg je een witte achtergrond (geen css).

Weet niet of ik onderstaande goed opgelost heb:


<title>Digitreport - Vakanties</title>
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="../css/frame.css">
<![endif]-->


Zo wordt er voor de standaard css gekozen maar is de site verder niet schaalbaar in die browsers. Vanaf IE 9 werkt het wel goed.
Had ook een voorbeeld site gezien waarin het ook zonder dit werkte... maar is wel gemaakt in xhtml.

 

[marc 05]

Hallo hoe kan ik twee plaatjes naast mekaar laten schalen, zonder dat ik gebruik maar van een percentage width bij het plaatje zelf.
Als ik dit binnnen een soortgelijke <div class="figure"> plaats gaat het niet goed met de plaatjes.

<p class="middenin"><img src="25_05/IMG_2825.JPG" width="300" height="225">&nbsp;&nbsp;<img src="25_05/IMG_2827.JPG" width="300" height="225"></p>


Heb voor 1 plaatje het volgende:


css

.figure {
margin: auto;
text-align: center;
width: 65%;
max-width:550px;

}

}
img.scaled {
width: 100%;
}

Html:

<div class="figure"> <p><img src="25_05/IMG_2819.JPG" class="scaled"></p></div>

 

[csshunter]

Dan haal je de percentages weg bij de images (die hebben dan helemaal geen width en/of height meer), en zet je de percentages bij de css:

.enkelPlaatje img {
	width: 50%;
	}
.tweePlaatjes img {
	width: 24%;
	}

<p class="enkelPlaatje"><img src="images/ijssalon-googlemap162x146.gif" alt=""></p>
<p class="tweePlaatjes"><img src="images/ijssalon-googlemap162x146.gif" alt=""> <img src="images/ijssalon-googlemap162x146.gif" alt=""></p>

• Test: relatieve-img-breedtes-via-css.htm

Met vriendelijke groet,
CSShunter

 

[marc 05]

Code:
.enkelPlaatje img {
width: 50%;
}
.tweePlaatjes img {
width: 24%;
}

HTML Code:
<p class="enkelPlaatje"><img src="images/ijssalon-googlemap162x146.gif" alt=""></p>
<p class="tweePlaatjes"><img src="images/ijssalon-googlemap162x146.gif" alt=""> <img src="images/ijssalon-googlemap162x146.gif" alt=""></p>

Hoe kan ik de tekst centreren die <p class="middenin"> Deze tekst in het midden en schaalbaar met b.v. 50%</P>

Als je onderstaand link volgt zie je dat het met het schalen van de tekst niet goed gaat.

http://www.digitreport.com/vakantie/italie/2012/reisdag.php


Verder nog het volgende: vandaag bij de Mediamarkt geweest en op veschillende tablets deze pagina getest.
Vreemde dingen die gebeuren los van het schalen tekst ondanks dat deze pagina groen geeft voor de html en css.

de ipad:- laat de eerste foto niet zien
- sommige foto`s stonden horizontaal
- daarna de dubbele foto`s 90 graden gedraaid
- scrollen ging vaker niet.


de ipad 2- op hoge kant niet scrollen (geeft alleen de eerste foto weer)
- landscape ook niet scrollen (geeft alleen de eerste foto weer)

weer een andere tabled (android) gaf de foto`op een vreemde manier weer.


Weet iemand waar dit aan kan liggen?
Heeft dit te maken met de media queries - zijn deze op een verkeerde breedte ingesteld?

 

[marc 05]

hallo Csshunter,

in mijn vorige post had ik aan alle een vraag gesteld of iemand weet waarom onze site, of eerder gezegd deze pagina niet goed wordt weergegeven in een
ipad 2, geen scrollbar.

Ook in de gewone ipad wil het nog fout gaan.


Heeft iemand een enig idee hierover?

om te testen gebruik deze link: http://www.digitreport.com/vakantie/italie/2012/reisdag.php