hyperlink

Status
Niet open voor verdere reacties.
OK
Dat firelFTP is ook super , ik had toch al wat problemen met ie7 dus ik heb nu gelijk firefox als staandaard browser gemaakt.

Dan nog heel even over die breedte van een container

Als ik toch iets zou maken met een flexible breedte( waarvan ik nu nog heel weinig weet)
is dat heel anders wat betreft het positineren of moet ik met hele andere dingen rekening houden.
 
Je bent niet de eerste. Vrijwel iedereen die iets met sites maken doet, gebruikt Firefox. Hoewel inmiddels alle browsers hulpmiddelen hebben, is Firefox de enige met zoveel extensies. Google Chrome begint dat trouwens wel in te lopen. Maar het aardige van Firefox is, vind ik, ook nog dat het van 'n non-profit organisatie is en volledig open source.
Met 'n flexibele breedte werkt alles in principe hetzelfde. Maar dan anders :D
Als je 'n site maakt voor bijvoorbeeld 'n vaste breedte van 1024, staat alles goed. Bij 'n vaste breedte blijft alles goed staan, ongeacht de grootte van het scherm. Alleen krijg je bij 800 'n scrollbalk en bij 1280 lege ruimte.
Met 'n flexibele breedte wordt 't smaller bij 800 (en andere kleinere breedtes natuurljk). Prima, als je daar rekening mee houdt. 'n Menu bijvoorbeeld mag nooit zo smal worden, dat de knoppen gedeeltelijk gaan wegvallen. Dus dat is echt 'n kwestie van eindeloos testen.
Op bredere schermen kun je veel te lange regels krijgen, waardoor lezen heel erg lastig kan worden. Daarom wordt vaak ook 'n max-width toegevoegd, in combinatie met centreren:
Code: 
div#wrapper {max-width: 1050px; margin: 0 auto;}
Maar als er alleen maar thumbnails op je pagina staan, bijvoorbeeld, kun je wel breder gaan.
't Belangrijkste is eigenlijk dat je voortdurend op verschillende groottes test. Bij 'n klein scherm mag je lay-out niet helemaal kapot gaan, bij 'n groot scherm moet 't niet 'n soort Sahara worden met hier en daar 'n oase.

edit: 'n breder scherm dan je zelf hebt, kun je niet testen. Maar 'n kleiner heel makkelijk met Web Developer onder resize.
 
Laatst bewerkt:
goede dag

even een klein vraagje over die firefox

Als ik nu mijn site update dan blijft de oude versie in de browser staan,
kan ik dat zo instellen dat ik niet telkens de browser moet leggen om de nieuwe site te bekijken.

ik heb al lopen zoeken kan wel de browser legggen maar dan moet ik het bij elke update doen.

ging bij ie wel goed
 
Hé, da's grappig, bij mij gaat 't bij Firefox vrijwel altijd goed en in IE vaak niet. Opera vind ik trouwens op dit gebied de ergste, die moet ik soms legen en dan opnieuw opstarten.
Met control+shift+R dwing je Firefox de pagina's opnieuw van internet te halen en niet uit de cache.
Mocht dat niet werken (heel, heel soms), dan zit er onder Web Developer -> Miscellaneous -> Clear Private Data -> Cache 'n redelijk snelle ingang.
En dan is er nog 'n extensie die 'n knop ergens neerzet:
https://addons.mozilla.org/en-US/firefox/addon/1801
 
Even nog bij deze:
edit: 'n breder scherm dan je zelf hebt, kun je niet testen.
Klik om te vergroten...
Dat klopt, tenmiste: dan kan je 'n niet live testen.
Wat wel kan (als je een schermbreedte hebt van kleiner dan 1600px): via Browsershots.org een screenshot laten maken in een browser naar keuze. Je kan de gewenste schermbreedte opgeven; die gaat tot 1600px breed.
Dan krijg je enigszins een idee wat een site doet op hogere resolutie.

Hé, ho, stop de persen! Wat natuurlijk ook altijd kan: toch de layout testen op een hogere resolutie dan je zelf hebt! :D
  • Stel je hebt een gecentreerde vloeibare layout van 90% breed, met dus links en rechts 5% marge: body {width: 90%; margin: 0 auto;}.
  • Stel je scherm is maar 1280px breed.
  • Dan zet je tijdelijk de body-breedte vast op het aantal pixels van de resolutie die je wilt testen.
  • Dus bij 90% op een resolutie van 1600px wordt dat: 1440px, of: body {width: 1440px; margin: 0;}.
  • Je kan zo breedbeeldig gaan als je zelf wilt. Resolutie van 2048px breed? 90% is 1843px, dus 1843px ingesteld en hoppa: daar gaat de banaan!
  • Nu zie je wel niet het hele beeld tegelijk, en nu zit er onderaan wel een scrollbar links-rechts, maar het is toch maar voor de test.
  • Je kan dan in elk geval zien of de layout niet per ongeluk uit elkaar valt, of de regels niet te lang worden (en hoe groot een max-width moet worden), enz.
Na afloop weer terugzetten op je percentage. ;)

Met vriendelijke groet,
CSShunter

PS:
Mijn Firefox heb ik ingesteld op een stevige wasbeurt na elke surfbeurt. Via het menu: Extra > Opties > Privacy: "Altijd mijn privégegevens opruimen als ik Firefox afsluit" zit er in elk geval niets in de cache enz. als ik FF de volgende keer opstart: een prettige schone lei. Het scheelt bovendien lekker in de harde schijfruimte. Via de "Instellingen..."-knop kan je regelen hoe streng FF moet zijn bij het opruimen.
 
Laatst bewerkt:
browsershots was ik vergeten, is 'n goeie mogelijkheid. Alleen moet je daar vaak wel (heel erg) lang wachten tot je shot klaar is. Maar goed, 't is gratis, dus 't is al mooi dat mensen zoiets maken.
Ik heb vroeger ook geprobeerd de resolutie te 'verhogen', maar het is mij nooit gelukt. Wat natuurlijk absoluut niet wil zeggen dat 'n ander geen gouden idee kan hebben.
Ik heb 'n tijdje zitten spelen met die bredere body, maar dat werkt ook niet altijd helemaal goed, helaas. Position: fixed wordt genegeerd, lijkt het, Ik ben vooral op m'n eigen site aan 't spelen geweest, dus daar geef ik wat links naar. (Niet vanwege de reclame, maar die pagina's ken ik nou eenmaal het best :) )
Op http://css-voorbeelden.nl/tekst/ankers/tekst-029.html verschuift de tekst ónder de linkerkolom, die position:fixed heeft. Dat is niet de bedoeling.
Bij de uitleg-pagina's, zoals http://css-voorbeelden.nl/tekst/ankers/tekst-029-uitleg.html
blijven de blokjes bovenin staan (ook position: fixed), terwijl de tekst wel correct in het midden van de bredere body wordt gezet.
Position: fixed werkt op meer plaatsen niet goed.
http://css-voorbeelden.nl/positioneren/horizontaal/positioneren-068.html centreert niet bij 'n bredere body. Terwijl ik daar geen position: fixed gebruik.
't Idee is leuk, maar ik heb toch wat vraagtekens bij de betrouwbaarheid van deze methode.

Edit: op 'n scherm dat fysiek 1440px breed is, werken bovenstaande dingen dus allemaal wel als bedoeld. Breder heb ik niet.
 
Laatst bewerkt:
't Idee [van een fixed body-width voor grotere resolutie dan beschikbaar] is leuk, maar ik heb toch wat vraagtekens bij de betrouwbaarheid van deze methode.
Klik om te vergroten...
Ja, er kriebelde bij mij ook al wat. De pessimist in mij fluisterde tegen mijn vrolijk optimistische kant dat ik wel eens gevoelig op mijn vingers getikt zou kunnen worden. Maar vriend optimist woof dat vriendelijk weg: "Dat horen we dan wel, zeker als Goeroeboeroe in het draadje zit". :D

En inderdaad, hier staan wat bewijzen: het gaat niet altijd op. Het kan soms, net als een wat te alerte virusbeschermer, een "false positive" afgeven.
Dan zou de tip moeten zijn (los van de Browsershots-optie):
  1. Check met een fixed body-width een hogere resolutie dan beschikbaar.
  2. Gaat het fout, dan wil die buurman-met-een-super-breedbeeldscherm (buurvrouw/verre neef/stille liefde/enz.) vast wel voor een bosje bloemen even laten zien hoe de pagina daar (niet) werkt.
  3. Gaat het daar goed, niets aan de hand. Gaat het fout, knutselen geblazen. - En vast een volgend bosje bloemen in het water zetten. ;)
Is dat beter?
Met vriendelijke groet,
CSShunter

PS: De voorbeelden wil ik nog op m'n gemak uit elkaar schroeven (om de positivist op te voeden), maar nu even geen tijd. - Tijd kom je regelmatig tekort, als je er twee of meer ikken op na houdt. :D
 
Laatst bewerkt:
Nou, ik vind het eigenlijk niet zo erg als het misgaat. Zeg maar 'n false positive (mooi gevonden). Dan kun je inderdaad naar het buurmens (hmmm, dat is wel sekse-neutraal, maar klinkt ook niet erg mensvriendelijk), naar het buurschepsel (is 't ook niet helemaal), naar de buren (eureka!) rennen.
Maar hoe weet je zeker dat 't er niet goed uitziet op 'n kleiner scherm met 'n gesimuleerde grotere breedte, en dat 't niet de mist in gaat op 'n werkelijk breed scherm? Hoe voorkom je dat je denkt dat 't er goed uitziet, en dat 't in werkelijkheid niet goed werkt? Oftewel: ik ben bang voor 'n false negative.
Kennelijk is 'n aantal dingen gerelateerd aan vensterbreedte, en 'n aantal dingen aan bodybreedte. Normaal is dat natuurlijk geen probleem, maar 't kan wel 'n probleem zijn als de body breder is dan het venster.
Ik heb nog 'ns rondgewandeld op internet, dingen kunnen veranderen en de techniek staat niet stil en zo, maar geen enkele werkende oplossing gevonden.
Ik denk dat fabrikanten er ook geen belang bij hebben om drivers te maken die dit mogelijk maken, want dan zouden mensen met goede ogen kunnen volstaan met 'n kleiner scherm. Of misschien heeft mijn weerzin tegen de vrije markt m'n grijze cellen aangetast en raaskal ik nu.
 
Wat jullie allemaal zeggen gaat me nog iets te ver.

ik ben toch even begonnen om iets te maken met een flexible lay out.

Ik heb even wat gemaakt voor mijn eigen lay out dus een container(wrap) met boven een header ,links een menu en daar naast een content en in dat content een div info

heb het even zo gemaakt .is dit een beetje de gangbare manier of begin ik al hellemaal
verkeert.


html
<div id="wrap">
<div id="header"><img src="image/Beeld_W[1].L._vd_Meer.jpg" width="15%" height="120px" alt="wl" /><img src="image/S7300277.JPG" width="15%" height="120px" alt="hek" /><img src="image/screening1.jpg" width="15%" height="120px" alt="sf" /></div>


<div id="menu"></div>


<div id="content"><div id="info">info vak wl vdmee-montage voor diversen montagewerzaamheden<br />Zoals scherming beluchting hijsverwarming en andere montage werkzaamheden.</div></div>




</div>

css

@charset "utf-8";

body{
background-color:#003300;
}

#wrap{
width:98%;
height:600px;
margin:0 auto;
background-color:#00FF66;
}

#header{
position:relative;
width:100%;
margin:0 auto;
height:120px;
background-color:#3333CC;
}

#menu{
float:left;
width:15%;
height:400px;
background-color:#FF00CC;
}

#content{
float:left;
position:relative;
width:85%;
height:400px;
background-color: #33CCFF;
}

#info{
position:absolute;
height:100px;
width:50%;
margin:20px 0 0 20px;
padding:2 0 0 5px;
background-color:#FFFFFF;
color: #000000;
}
 
Laatst bewerkt:
't basisdee is niet slecht, maar er zitten wel wat ongerechtigheden in.
Als er tekst in komt te staan, is het 'n goed idee om bij #wrap 'n max-width op te geven, om al te lange regels te voorkomen.

'n div krijgt, als je niets anders opgeeft (net zoals elk blok-element) de breedte van z'n ouder. De width: 100% bij #header heeft dus geen nut, dat is standaard al zo.
'n Combinatie van width 100% en margin : 0 auto, heeft geen nut, want hoe wil je iets dat de volle breedte vult centreren :D ?

Bij #menu moet je wel goed uitproberen of 't op 'n kleiner scherm ook nog wel past met die 15%. Of de inhoud van #menu ook flexibel maken, maar dat is niet altijd 'n goed idee.

In #header staan afbeeldingen. Die heb je 'n breedte in procenten gegeven en 'n vaste hoogte. Als #header dus smaller wordt, worden de afbeeldingen smaller, maar blijven even hoog. Dat leidt tot 'n lachspiegel-effect.
Afbeeldingen kun je eigenlijk het best altijd 'n vaste afmeting geven. Dat betekent dat #header ook niet onder 'n bepaalde breedte kan komen.
Als je al 'n breedte in % op wilt geven, dan moet je de hoogte niet invullen. Dan blijven de verhoudingen hetzelfde en krijg je geen lachspiegel. Maar dit is vrijwel nooit 'n goed idee.

Maar alles bij elkaar: als ik het scherm verklein, blijft alles netjes in verhouding staan en zo, dus de grote lijn is goed.

Edit:
#info heeft 'n vaste hoogte, en er staat tekst in. Als ik de letters vergroot, komt dat buiten #info te staan. Soms kan dat, als eronder toch lege ruimte is. Maar anders is het misschien beter om geen hoogte op te geven. Dus dat je ook 'n zekere flexibiliteit in de hoogte inbouwt; Maar dat moet je wel heel goed testen, ook met zoomen en andere lettergroottes, want 'n flexibele #info moet natuurlijk niet je #footer ruïneren of zo.
 
Laatst bewerkt:
Ok ga het eens rustig proberen.

Ik heb even in een aparte map op mijn server iets gemaakt dan kan ik ergens anders
op een groter scherm kijken wat er gebeurt,
Ik zag als ik hem kleiner maak op mijn computer dat op een gegeven moment het menu
te klein werd voor de inhoud,daar kom ik nog niet uit.

Ik heb hem hier gezet wlvdmeer-montage.nl/test/index.html

dus mocht je een keer zin hebben om te kijken en een paar kleine aanwijzingen geven
heel graag

Ik vindt als je gelijk al hellemaal verkeert begint ook zonde

heb al het een en ander op internet gelezen ,het is toch weer een heel ander verhaal
maar het zal ook wel weer zo zijn dat je het even door moet hebben
 
Ja, dat menu dat te klein wordt, dat is 'n bekend probleem. Wat vaak wordt gedaan, en dan voorkom je meestal ook gelijk het probleem van onleesbare lange regels:
geef de linker- en rechterkolom 'n breedte in px. Bijvoorbeeld (ik roep maar even wat) 200px. Of in em, dat groeit mee met de lettergrootte.

Dan maak je de middelste kolom gewoon de volle breedte van de wrapper. En je geeft links 'n padding die even groot is als de linkerkolom. Rechts idem, maar dan even groot als de rechterkolom. Dan kan 't menu niet te klein worden, maar je gebruikt toch 't hele scherm.
En die afbeeldingen van 15% breed en 100% hoog, dat worden dus nog steeds lachspiegels...
 
ok ik ga me er even in bijten.

om eerlijk te zijn snap er nog niets van wat je zojuist schreef


Als je soms een goede site weet waar het een en ander hierover goed beschreven wordt, graag
 
Laatst bewerkt:
Altijd goed als iemand dat even meldt :D
Ik snap 't zelf ook niet meer, want er zit 'n fout in. Ik keek even snel en dacht dat je drie kolommen had, maar 't zijn er maar twee.

#menu en #content zijn nu allebei naar links gefloat.
Als je nu #menu 'n vaste breedte geeft van bijvoorbeeld 200 px, dan kan #menu nooit smaller worden. Oftewel: de inhoud past altijd. (Misschien moet 't 220px zijn, of 250px, moet je even uitproberen).
(In plaats van px kun je ook bijvoorbeeld 20 em nemen, dan groeit de breedte mee met 'n andere lettergrootte, maar 't principe blijft 't zelfde).

Nu moet je #content niet meer floaten. En je haalt de breedte van 85% weg.
Nu komt #content dus gedeeltelijk over #menu te staan. Maar als je nu aan #content 'n margin-left (en geen padding-left zoals ik schreef, ik ga me even drie minuten schamen, reageerde te snel) van 200 px geeft, dan komt #menu weer netjes vrij.
Die 200 px moet dus even breed zijn als #menu. Als je bij #menu 20 em neemt, moet je de margin-left 20em maken. Enz.

Nu blijft 't menu áltijd even breed, en #content vult de rest van 't scherm.
 
ok hellemaal duidelijk werkt zo wel goed,
alleen nu heb je wel dat de header in elkaar schuift en het menu vast blijft staan,

ik bedoel hier meer te zeggen dat dan het geheel weg is (ik bedoel de foto boven het menu is nu even breed als het menu .bij verkleinen blijft het menu hetzelfde en de foto wordt kleiner.
 
Ja, leuk, hè? Houd je echt van de straat, zo'n site maken :D
Dat komt omdat je de maat van de afbeelding in procenten hebt opgegeven. Dat is een van de redenen dat het echt geen goed idee is (meestal) om maten van afbeeldingen in procenten op te geven.
De afbeelding is 15% breed. Van de ouder, dat is hier de header. Maak de header smaller, en de afbeelding wordt ook smaller.
Beter is om de afbeelding gewoon z'n eigen maat in px te geven. En dan te zorgen dat 't altijd past, ook op 'n smaller scherm. Dus niet de hele header vol zetten met afbeeldingen op 'n 1280 breed scherm. Bij jou staan er maar drie, dat past altijd.

Je kunt ook, als 't op 'm 800 breed scherm helemaal gaat vervormen, 'n minimumbreedte (min-width) opgeven aan de wrapper. Dan krijgen mensen met 'n klein scherm wel 'n scrollbalk, maar dat is nauwelijks te voorkomen.

Edit: 'n andere reden om niet de browser afbeeldingen te laten vergroten of verkleinen is, dat de kwaliteit heel snel heel slecht wordt. 'n Browser is geen gespecialiseerd grafisch programma.
 
Ik was er net naar aan het kijken. Mag ik aannemen dat 't is opgelost? Of heb je uit pure wanhoop alles gewist :D

Ik had je bericht daarvoor niet gezien, was ook gewijzigd. Dus hier 't antwoord daarop.
't Kan wel met die margin, maar is het niet veel makkelijker die info en info2 naar links te floaten, dus zonder position, en dan goed te zetten met margins?
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan