rekken en strekken
- Onderwerp starter jeel2008
- Startdatum
- Status
wacht even , even recapituleren:
als ik bij http://viewlike.us/ kijk zie ik bij
vier: geen vervormingen, maar niet (body) in het midden
vijf: vervormingen, maar wel in het midden
klopt dat, of mis ik iets?
wat ik wil is geen vervormingen, maar wel steeds overal in het midden
41/2 dus
als ik bij http://viewlike.us/ kijk zie ik bij
vier: geen vervormingen, maar niet (body) in het midden
vijf: vervormingen, maar wel in het midden
klopt dat, of mis ik iets?
wat ik wil is geen vervormingen, maar wel steeds overal in het midden
41/2 dus
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Klompenlijm...
Als je de body centreert via een automatische margin L/R,
en die body tegelijkertijd een {width:100%;} geeft ...
... dan is er geen margin L/R nodig,
... wordt er niets gecentreerd,
... en begint alles binnen de <body> vanaf links.
Als je de body centreert via een automatische margin L/R,
en die body tegelijkertijd een {width:100%;} geeft ...
... dan is er geen margin L/R nodig,
... wordt er niets gecentreerd,
... en begint alles binnen de <body> vanaf links.
ja, dat klinkt logisch
ondertussen ben ik gaan tekenen en dit is wat ik wil
de tekening moet altijd zichtbaar zijn, tenzij iemand een zo klein scherm heeft dat ie alleen wat takken verdient
zie image
dat is het idee
bij grote brede schermen komt er dan een rand links en rechts met achtergrondkleur: geen probleem.
ondertussen ben ik gaan tekenen en dit is wat ik wil
de tekening moet altijd zichtbaar zijn, tenzij iemand een zo klein scherm heeft dat ie alleen wat takken verdient
zie image
dat is het idee
bij grote brede schermen komt er dan een rand links en rechts met achtergrondkleur: geen probleem.
Bijlagen
dus ik zou tegen mn pc moeten zeggen:
de tekening die ik je geef is 1270 bij 900 ( ik noem maar wat).
die moet altijd in stand blijven
als het scherm groter is, dan rek je mee.
als het kleiner is kun je blijven liggen, dan is de viewport gewoon kleiner, pech voor die mensch.
de content + menu is toch nooit breder dan 800 of 900 , dus dat kunnen ze zien
snappez vous?
de tekening die ik je geef is 1270 bij 900 ( ik noem maar wat).
die moet altijd in stand blijven
als het scherm groter is, dan rek je mee.
als het kleiner is kun je blijven liggen, dan is de viewport gewoon kleiner, pech voor die mensch.
de content + menu is toch nooit breder dan 800 of 900 , dus dat kunnen ze zien
snappez vous?
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Maar dan vervalt de eerdere beeldvullend-eis vanwege de onmogelijkheid van vierkante cirkels (resp. cirkelvormige vierkanten).
Wel in proporties = bij kleine hoogte wordt breedte ook klein = bij breedbeeld maar een klein kolommetje in het midden.
En in proporties = bij kleine breedte ook kleine hoogte = onder de figuur komt loze ruimte.
- En dan hebben we het nog niet over de font-size en scrollen enzo.
Edit: Ho, ik had #24 en #25 gemist.
Laatst bewerkt:
dus de achtergrond rekt en strekt bij een groot scherm
en de achtergrond gaat eraan bij een klein scherm
het menu + de content echter is altijd even groot, zo'n 900 breed in totaal
het menu blijft echter altijd op kleine afstand links naast de content, dus niet op een kilometer afstand in geval van groot scherm
mijn vraag nu: is dit met css te verwezenlijken? want anders laat ik mijn rek- en strekambities gewoon varen
(ik geloof niet dat ik daar moeite mee zou hebben) en ga ik verder met 1 vaste achtergrond en 1 vaste afmeting van alles, ook al zit er 3 meter ruimte onder
en de achtergrond gaat eraan bij een klein scherm
het menu + de content echter is altijd even groot, zo'n 900 breed in totaal
het menu blijft echter altijd op kleine afstand links naast de content, dus niet op een kilometer afstand in geval van groot scherm
mijn vraag nu: is dit met css te verwezenlijken? want anders laat ik mijn rek- en strekambities gewoon varen
(ik geloof niet dat ik daar moeite mee zou hebben) en ga ik verder met 1 vaste achtergrond en 1 vaste afmeting van alles, ook al zit er 3 meter ruimte onder
Laatst bewerkt:
http://www.jeelsites.nl/poging3/p1.html
deze gaat niet gestrekt, maar staat wel in het midden en voldoet aan veel zaken
als ik er niet uit kom met rekken en strekken zou ik hier nog op kunnen terugvallen
een geruststellende gedachte
het vreemde blijft maar dat ie op kleine beeldschermen bij http://viewlike.us/?url=www.jeelsites.nl/poging3/p1.html&button.x=33&button.y=22
viewlikeus
hij links staat. nu is er wel de margin: 0 auto; maar geen breedte van 100%. erg verwarrend.
terwijl als ik zelf mn beeld op bv 50% zet, hij wel mooi in het midden blijft.
misschien is de viewlikeus gewoon niet betrouwbaar...
deze gaat niet gestrekt, maar staat wel in het midden en voldoet aan veel zaken
als ik er niet uit kom met rekken en strekken zou ik hier nog op kunnen terugvallen
een geruststellende gedachte
het vreemde blijft maar dat ie op kleine beeldschermen bij http://viewlike.us/?url=www.jeelsites.nl/poging3/p1.html&button.x=33&button.y=22
viewlikeus
hij links staat. nu is er wel de margin: 0 auto; maar geen breedte van 100%. erg verwarrend.
terwijl als ik zelf mn beeld op bv 50% zet, hij wel mooi in het midden blijft.
misschien is de viewlikeus gewoon niet betrouwbaar...
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
View like me!
Ah, nu zie ik het. De ViewLikeUs is wel betrouwbaar, maar heeft een eigenaardigheidje:
Bv. als je nameet wat er met een 800*600 scherm gebeurt, loopt die 800px vanaf de zware groene border a/d linkerkant t/m de scrollbar a/d rechterkant. Screenshot van het ViewLike.us-screenshot (verkleind):
Ook bij mijn 1280*1024 en een opvraag van 1600*1200 gaat het goed: gecentreerd en links en rechts van het groene pagina-kaderlijntje evenveel achtergrondkleur. Screenshots van ViewLike.us aan elkaar gemonteerd, omdat ik niet hoger ga dan 1280*1024
:
Dat klaart op!
Gegroet!
Ah, nu zie ik het. De ViewLikeUs is wel betrouwbaar, maar heeft een eigenaardigheidje:
- Het achtergrondgroen is niet een stukje achtergrond bij de betreffende resolutie, maar VLU heeft aan de rechterkant altijd zo'n 200px extra.
- Waarom ze dat gedaan hebben, weet ik ook niet.
- Maar het hele groene gebeuren telt dus niet mee.
Bv. als je nameet wat er met een 800*600 scherm gebeurt, loopt die 800px vanaf de zware groene border a/d linkerkant t/m de scrollbar a/d rechterkant. Screenshot van het ViewLike.us-screenshot (verkleind):
- Klopt als een bus, en als je 'm op een schermformaat van 1024*768px zet, idem dito.
- Zo ook erg raar zijn als er een groene strook uit het niets getoverd werd (want geen groen in de css te bespeuren).
- Als ik 'm op 1280*800 zet, wat de breedte van mijn huidige resolutie van 1280*1024 is, dan is de vertoning precies beeldvullend van links tot rechts: als ik met de onder-scrollbar het kleine stukje van het linker groene VLU-randje naar rechts ga, is de screenshot-scrollbar rechts precies onder mijn echte scrollbar rechts verdwenen.
Dan zit ie mooi exact gecentreerd, maar aan de rechterkant zit via de VLU-scrollbar nog wel dat verraderlijke groen!
Ook bij mijn 1280*1024 en een opvraag van 1600*1200 gaat het goed: gecentreerd en links en rechts van het groene pagina-kaderlijntje evenveel achtergrondkleur. Screenshots van ViewLike.us aan elkaar gemonteerd, omdat ik niet hoger ga dan 1280*1024
:
- Wel is dus in de laatste door het 1:1 opgegeven image (nl. als background-img dat altijd op z'n ware grootte blijft staan) de rechterscrollbar verdwenen, omdat het beeld ook in de hoogte niet verder komt dan deze ware grootte (in dit geval van je poging3/p1.html 847px hoog), en onder de 847px t/m 1200px dus ook de background-color #EBE8D9 van de pagina te zien is.
Dat klaart op!
Gegroet!
Laatst bewerkt:
de witte vlag
ik heb de witte vlag gehesen
http://www.jeelsites.nl/geenrekkengeenstrekken/index.html
er wordt niets meer gerekt en gestrekt, de css heeft mij met vlag en wimpel verslagen
ik geef het op
het werd me echter makkelijker gemaakt toen ik de beschikking kreeg over een betere achtergrond, een stuk verticaler
toen vond ik het nut al niet meer van zo'n groot belang van het rekken en strekken
bovendien kwam ik er niet uit, te veel tijd voor te weinig vooruitgang
maar wederom bedankt voor de hulp, het blijft fascinerend, maar ik ben te onkundig om snel resultaat te boeken. helaas.
jeel2008
ik heb de witte vlag gehesen
http://www.jeelsites.nl/geenrekkengeenstrekken/index.html
er wordt niets meer gerekt en gestrekt, de css heeft mij met vlag en wimpel verslagen
ik geef het op
het werd me echter makkelijker gemaakt toen ik de beschikking kreeg over een betere achtergrond, een stuk verticaler
toen vond ik het nut al niet meer van zo'n groot belang van het rekken en strekken
bovendien kwam ik er niet uit, te veel tijd voor te weinig vooruitgang
maar wederom bedankt voor de hulp, het blijft fascinerend, maar ik ben te onkundig om snel resultaat te boeken. helaas.
jeel2008
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Hoi jeel2008,
Mij hoor je niet mopperen als er niet gerekt en gestrekt hoeft te worden.
Stormvlag ?
Voordat je noodsignalen ontvangt van mensen met een scherm van minder hoog dan 1250px ...
... haal je nog wel even de body {height: 1250px; overflow: hidden;} er uit?
Anders wordt het: geen rekken, geen strekken, geen scrollbar.
Succes verder!
CSShunter
Dan is het probleem ook opgelost.
Mij hoor je niet mopperen als er niet gerekt en gestrekt hoeft te worden.
Stormvlag ?
Voordat je noodsignalen ontvangt van mensen met een scherm van minder hoog dan 1250px ...
... haal je nog wel even de body {height: 1250px; overflow: hidden;} er uit?
Anders wordt het: geen rekken, geen strekken, geen scrollbar.
Succes verder!
CSShunter
Laatst bewerkt:
vlieg
nou, de problemen kwamen weeral sneller dan verwacht, hoewel ik dit beschouw als een minor problem, desondanks vervelend
zoiets als een vervelende vlieg
het gaat om de positie van dat zwarte blokje, dat blijft maar raar doen
ik wil dat het strak tegen de achtergrondfoto aanligt, bovenaan rechts.
daarom heb ik m relatief gepositioneerd tov het menublok , want dat heeft een vaste breedte.
zo zou ie altijd op een vaste plek moeten komen.
nu zijn er een paar dingen
1. de preview van dreamweaver (blok1.jpg) geeft in firefox iets heel anders dan de Viewlikeus (blok2.jpg)
2. de viewlike us geeft geen scrollbalken weer?
anyway, misschien kun je deze vlieg het raam uithelpen ... ?
www.jeelsites.nl/geenrekkengeenstrekken/bestellen.html
nou, de problemen kwamen weeral sneller dan verwacht, hoewel ik dit beschouw als een minor problem, desondanks vervelend
zoiets als een vervelende vlieg
het gaat om de positie van dat zwarte blokje, dat blijft maar raar doen
ik wil dat het strak tegen de achtergrondfoto aanligt, bovenaan rechts.
daarom heb ik m relatief gepositioneerd tov het menublok , want dat heeft een vaste breedte.
zo zou ie altijd op een vaste plek moeten komen.
nu zijn er een paar dingen
1. de preview van dreamweaver (blok1.jpg) geeft in firefox iets heel anders dan de Viewlikeus (blok2.jpg)
2. de viewlike us geeft geen scrollbalken weer?
anyway, misschien kun je deze vlieg het raam uithelpen ... ?
www.jeelsites.nl/geenrekkengeenstrekken/bestellen.html
Bijlagen
Laatst bewerkt:
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Meer vliegen in de pap...
Hoi Jeel2008,
De pap is zo lekker, dat er nog wat meer vliegen op af gekomen zijn:
Nu ben ik altijd voor een minimalistische aanpak:
Aldus gefabriekt: no-rek-no-strek.htm.
Toelichting:
Ik geloof dat zo de meeste vliegen wel het raam uit zijn.
Misschien moet je nog even kijken of alles van de grote images nog op z'n goede plek staat, maar dat zal makkelijk te fixen zijn.
Met vriendelijke groet,
CSShunter
Hoi Jeel2008,
De pap is zo lekker, dat er nog wat meer vliegen op af gekomen zijn:
- Op een resolutie van 1024*768px komt er een L/R scrollbar, die het menu + het social-blokje (en ook de inhoud denk ik) verplaatst over het bg-img.
- In IE7 komt er een extra inwendige scrollbar bij.
- IE7 kan niet met het menu overweg: submenu-positie verkeerd, de a:before { content: " >> " } wordt niet gehonoreerd.
- Hier een uitgeklapt-menu-versie van je testpagina: papvliegen-uitgeklapt.htm, om in Netrenderer te bekijken voor de IE's.
Nu ben ik altijd voor een minimalistische aanpak:
- Wat aan <div>'s gemist kan worden: weg ermee! (bv. de <div id="centreren"> kan gemist worden als het bg-img naar de <body> verhuist)
- Ook eigenlijk overbodige id's of classes: schrappen maakt overzichtelijker!
Aldus gefabriekt: no-rek-no-strek.htm.
Toelichting:
- Doctype Strict gebruikt.
- Om nog zonder scrollbar L/R op 1024*768px resolutie te passen, en allerlei ingewikkeldheden te vermijden: het bg-img van 1.070px breedte teruggebracht naar 990px (met behoud van de L/R-stroken van 100px): achtergrondorigineel_72b-nw2.jpg.
- Menu-css aangepast voor IE7.
- Het social-blokje er in geplaatst met een simpele float (met margin-top en margin-right kan positie fijngeregeld worden).
- Automatische "actuele pagina" highlights met css (voeg de id-naam van de pagina toe als class-naam in de <body>, en het gaat voor alle pagina's vanzelf).
- Bonus: javascriptje om automatisch "Hier bent u" als title/tooltip toe te voegen aan het menu-item van de pagina waar je in zit.
- Html- en css-validator akkoord.
- ViewLike.us ziet geen problemen.
- Netrenderer.com ook niet (uitgeklapte versie).
Ik geloof dat zo de meeste vliegen wel het raam uit zijn.
Misschien moet je nog even kijken of alles van de grote images nog op z'n goede plek staat, maar dat zal makkelijk te fixen zijn.
Met vriendelijke groet,
CSShunter
bzzzzzzzzzzzzzzzz
alle vliegen het raam uit
dit ziet er weer strak uit.
wat ik niet begrijp is dat als ík een image in het menu boven leg (image in div) en m positioneer hij wat wiebelt
en als jij het doet hij mooi stabiel blijft. nu zie ik wel een float:right in jouw code. zometeen moet ik ervandoor, maar dat zou de clou wel eens kunnen wezen.
nog ff uitvogelen. eigenlijk zou ik me 3 weken moeten terugtrekken op Hawaii om alleen maar hele dagen css-positioning te oefenen.
en hartelijk dank voor de Netrenderder. die kende ik niet, maar is wel erg handig.
mvg, jeel2008
alle vliegen het raam uit
dit ziet er weer strak uit.
wat ik niet begrijp is dat als ík een image in het menu boven leg (image in div) en m positioneer hij wat wiebelt
en als jij het doet hij mooi stabiel blijft. nu zie ik wel een float:right in jouw code. zometeen moet ik ervandoor, maar dat zou de clou wel eens kunnen wezen.
nog ff uitvogelen. eigenlijk zou ik me 3 weken moeten terugtrekken op Hawaii om alleen maar hele dagen css-positioning te oefenen.
en hartelijk dank voor de Netrenderder. die kende ik niet, maar is wel erg handig.
mvg, jeel2008
Laatst bewerkt:
- Status
