Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

andere weergave op breedbeeldmonitor

None
14 antwoorden
  • Ik heb een probleem dat ik nergens op internet terug kan vinden. Misschien maak ik een beginnersfout die verder niemand maakt? Ik heb een pagina die prima lijkt te werken op niet-breedbeeldmonitoren. Daar was ik als beginner erg blij mee, maar toen ik de pagina bekeek op een notebook met een scherm van 1440 x 900 pixels zag ik dat de kolommen (relatief) smaller waren. In Firefox is dit alleen hinderlijk bij het menu, maar in IE7 lopen alle kolommen in elkaar over.
    Heb ik iets niet goed gedaan in mijn CSS, of is hier niets aan te doen en hoort het zo dat kolommen op een breedbeeldmonitor relatief smaller worden?

    De site staat op: http://home.hccnet.nl/j.wandelen/geschiedenis/index.htm
  • Wat bedoel je met "relatief veel smaller"? Ze zijn smaller tov de schermbreedte? Dan lijkt het me niet een onverwacht probleem… Helaas beschik ik zelf niet over een breedbeeldscherm en kan ik het dus niet repliceren.

    - Bas
  • Ik zal vanmiddag eens kijken bij 1680x1050, maar ik zag al in je css breedte in % staan…

    Het is handiger om je css in een apparte file te zetten als het zo lang is.
  • Bedankt voor de reacties. De kolommen zijn smaller in de zin dat ze dichter op elkaar staan. Omdat ik een paginabreedte heb opgegeven in pixels verwacht ik dat de pagina op elke monitor even breed is, maar dat is dus niet zo. Als test had ik drie regels toegevoegd die op mijn gewone monitor keurig onder elkaar staan, maar bij een 16:9-monitor niet. Dan schuiven i en % naar links, of cm naar rechts:

    CSS: .pixels {margin-left: 100px;}
    .percentages{margin-left: 28%;}
    .centimeters{margin-left: 2.5cm;}


    HTML: <div class = "pixels">i</div>
    <div class = "percentages">%</div>
    <div class = "centimeters">cm</div>


    Het CSS-bestand was inderdaad een apart bestand, maar had ik voor dit bericht toegevoegd aan de html om het bekijken wat makkelijker te maken.

    Jan
  • Op mijn monitor (1680x1050) zie ik geen verandering tussen de pagina op volledige breedte en wanneer ik de pagina een stuk smaller maak. De 'i', '%' en 'cm' blijven onder elkaar en schuiven naar links noch naar rechts.

    Ik moet wel zeggen dat je een behoorlijk ingewikkelde constructie heb bedacht voor een relatief eenvoudige pagina, dat wordt ook weerspiegeld in een grote hoeveelheid css… Dat wil natuurlijk niet zeggen dat er iets mis mee is.
  • Drewster dank voor het kijken. Het ligt dus niet aan de schermverhoudingen. Goed om te weten dat ik css nog niet voldoende begrijp. Heb je misschien een suggestie voor hoe ik deze eenvoudiger kan maken of zijn er teveel punten? Wat ik bijvoorbeeld moeilijk vond was de roodgele achtergrond, met een afbeelding in het rode vlak en een menu in het geel. Ik dacht dat als ik dit ontwerp 'liquid' wilde maken alleen met faux columns kon werken.
  • Je gebruikt veel gepositioneerde elementen, ook je container, hierbij gebruik je ook positionering en een negatieve margin om je pagina te centreren. Dat is op zich niet fout maar het probleem hierbij is dat als het browser venster kleiner is dan de breedte van de pagina dan kan je niet naar het negatieve margin deel scollen, probeer maar eens uit. Daarnaast gebruik je veel width in % terwijl je de container gewoon een vaste width heb gegeven. Het heeft dan weinig zin om Width in procenten in te geven omdat deze toch niet gaat veranderen.
    Daarnaast is het handiger en vaak ook eenvoudiger om elementen op de juiste plaats te krijgen door gebruik te maken van margin en padding.
    Als laatste heb je eigenlijk alleen faux kolommen nodig als je zit met een afwijkende achtergrond kleur van 1 of beiden kolommen. Bij jouw is de achtergrond nu overal wit dus zijn faux kolommen overbodig.

    Ik kijk vannavond nog wel ff hoe ik de pagina zou opbouwen. Heb nu niet veel tijd.
  • Ik zou binnen de wrapper of container (hoe je het ook wilt noemen)(centreren via "margin: 0 auto;" en voor IE "text-aligh: center;";) twee colums maken met een vast breedte, de linker (breed) voor de inhoud en je header met menu en de rechter met je plaatje (smal) (locatie van het plaatje regelen met de margin van de column div). Dan binnen de linker column zou ik bovenin een div maken waarin je header en je menu kan komen (even breed als column maken, via px niet %, en positie weer regelen via padding), en dan daar onder een 'container' div waarbinnen de inhoud van de pagina komt. Hierin weer twee columns voor je bullets en je textuele inhoud.
    Iets in die richting. maar ik kan me goed voorstellen dat iemand anders weer met een ander idee komt… weinig layouts zijn per definitie fout…
  • [quote:252b83276d="Drewster"]Ik zou binnen de wrapper of container […] centreren via "margin: 0 auto;" en voor IE "text-aligh: center;"[/quote:252b83276d]
    Is er een speciale reden dat je voor IE een andere methode gebruikt dan voor alle andere browsers? Zou ik niet doen, het is namelijk niet nodig (mits je een goede doctype hebt -> IE gaat dan in standards mode) en scheelt je dus alle "problemen" met hacks, conditional comments en verschillende versies van IE. Toegegeven, IE5.x zal de pagina niet centreren, maar ik denk niet dat dat een probleem zal zijn, al moet de TS dat zelf maar aangeven.

    Persoonlijk ben ik een groot voorstander van één CSS-pakket voor álle browsers. Het houdt je scherp, en slechts heel zelden kan je er niet mee doen wat je graag zou willen. Hacks moet je sowieso vermijden, conditional comments ook wanneer mogelijk. Houd het simpel, daar heb je het meest aan.

    - Bas
  • Nou, het lukt me alleen met de meest simpele sites om niet speciaal voor IE geschreven css toe te voegen (en soms een appart IE6 en IE7 file). Vooral met wat minder standaard menu's (met geneste ul binnen ul) of layout wil het niet, IE verzind soms totaal (voor mij) onvoorspelbare margins of afwijkende posities.
    Het is maar een beetje beter geworden met IE7 (ik hou geen rekening meer met IE5), soms is het zelfs minder leuk omdat je dan apparte css moet schrijven voor 3 browsers ipv voor 2 omdat IE7 wat beter dan IE6 de regels volgt maar nog steeds een pagina anders dan Fx of Opera weergeeft.

    Ik zou [i:8d3d73ddcd]heel[/i:8d3d73ddcd] graag maar 1 css versie willen hoeven schrijven, maar dat is niet altijd even realistisch

    (btw; ik schrijf bijna alles met xhtml transitional DOCTYPE, niet strick vooral omdat ik de "target" attribute soms nog wel wil kunnen gebruiken.)
  • Het lukt inderdaad niet om te scrollen naar het deel met de negatieve margin, en de width in percentages onder een container met een width in pixels heeft inderdaad geen zin. Het is het een of het ander. Ik ga nu verder met door door jouw voorgestelde columns. Bedankt.

    Jan
  • Hou er rekening mee dat je in CSS altijd eenheden mee moet geven!

    dus:

    [code:1:18c1fdc458]margin: 0px auto;[/code:1:18c1fdc458]

    Klinkt misschien een beetje muggenzifterig, maar het kan net een FF vs. IE probleem opleveren…
  • Juist bij 0 hoeft het niet. Nul px, nul procent, nul ems, het is allemaal nul.
  • Wat hij zegt.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.