beeld verspringt

[rakodi]

Hallo allemaal,

Ik ben nieuw op het forum, dus een beetje geduld..... Thanks

Ik heb een website gebouwd, maar heb 2 problemen, voor nu hou ik het bij de eerste. Ik werk op een 15" laptop en de website werkt super. Maar, als ik nu op een 17" pc ga werken verspringt mijn tekst.

Aangezien het een kleine site is heb ik bewust niet via css gewerkt, is ook wel een gedoe moet ik zeggen (als beginner).

Heeft iemand een makkelijke oplossing hiervoor?

[Frederik]

Juist door wel met css te werken had je vermoedelijk dit probleem niet gehad, en dat dat css een gedoe is als beginner: helemaal waar!
Heb je de website online staan? kunnen we kijken waar het wringt.

[rakodi]

Yep: komtie

http://members.upc.nl/t.diesveld/

[rakodi]

dank trouwens voor je moeite

[Frederik]

Het probleem wordt veroorzaakt door de tabellen. Die worden niet mooi gecentreerd over de volle breedte. Op de een of andere manier(?) heb je er een blok van gemaakt die niet mooi wordt uitgelijnd. 't is dat je er zelf over begon: ik zou een op CSS gebaseerde template uitzoeken en die aanpassen aan je wensen. Dat is voor jouw website en de omvang vrij eenvoudig.

[rakodi]

Dank voor je antwoord. Tja, en dat het door de blokken/tabellen kwam daar was ik al wel achter. Ik had gehoopt dat iemand een manier wist om die tabellen vast te zetten t.o.v. de achtergrond. De reden dat ik met tabellen heb gewerkt is dat me verteld was dat dit de meest steady manier was..... blijkbaar niet dus.

[nirwana]

De reden dat ik met tabellen heb gewerkt is dat me verteld was dat dit de meest steady manier was..... blijkbaar niet dus.

Je kunt beide methodes zo stabiel maken als je zelf wilt. Maar als je nu een website op zou zetten, dan zou ik voor div's gaan in plaats van tabellen. Dat is richting de toekomst een betere manier om vanuit te gaan. Aan de tabel-methode zal namelijk niets meer worden toegevoegd, maar div's en CSS zijn voortdurend in ontwikkeling.

Op http://www.mozbrowser.nl/web/haarsalon/index3.html heb ik een aangepaste versie van de website geplaatst. Daarin heb ik de structuur van de website zoveel mogelijk intact gelaten, zodat je zo snel mogelijk resultaat hebt.

Je geeft aan dat je geen CSS gebruikt, maar ik zie toch aardig wat CSS-code in de pagina staan
Echter staat er ook dubbele CSS-code in, want het staat zowel in de head als ook in de body-tag.
Daarom heb ik dit eerst opgeschoond, zodat ik in elk geval weet welke regels er gebruikt worden.

Vervolgens heb ik om de website een container-div geplaatst (met de breedte van de achtergrond-afbeelding en een margin-left + margin-right op auto). De tabel heb ik minder breed gemaakt, zodat het geheel begint vanaf het gecentreerde middendeel.

De overige aanpassingen:
- de webpagina een pakkende titel meegeven (dit is van belang voor zoekmachines, het maken van bladwijzers (favorieten), etc)
- de tekst aan de rechterkant uitgevuld (justify) in plaats van gecentreerd
- wat meer witruimte tussen de tekst geplaatst
- een tikfout uit de tekst gehaald (weken -> werken)

Overigens denk ik wel dat de tekst op de voorpagina nog wat herschreven moet worden. Nu gooi je direct op de voorpagina zo ongeveer alles wat je te melden hebt al voor de voeten. Zo gaat het direct al over een samenwerking, terwijl ik dat eerder op een verdere pagina zou willen lezen. Maar ik ga niet over de inhoud van de website, want van het kappersvak heb ik geen kaas gegeten.

Op http://www.mozbrowser.nl/web/haarsalon/index1.html heb ik aangegeven hoe de tabel op jullie website in elkaar steekt.
Op http://www.mozbrowser.nl/web/haarsalon/index2.html heb ik aangegeven hoe mijn aanpassingen in grote lijnen in elkaar steken. Daar heb ik de tabel een rand meegegeven, zodat je ziet hoe dit in elkaar zit. De container-div heb ik een gestippelde rode rand gegeven, zodat je ook ziet waar die div precies zit.

Ter info: als ik met div's een website in elkaar zet, dan geef ik meestal een div die ik ergens wil plaatsen een gekleurde rand mee (zoals nu de rode rand). Daaraan kan ik zien hoe de div's ten opzichte van elkaar geplaatst worden en zie ik ook of ze goed geplaatst worden. Als dit is geworden zoals ik het in gedachten heb, dan kan ik eenvoudig die rand(en) weer uitschakelen.

[nirwana]

Inmiddels heb ik mijn voorbeeld nog iets verder uitgewerkt:
www.mozbrowser.nl/web/haarsalon/

Dit zijn nu de aanpassingen: de tabel wordt nu alleen nog maar voor de knoppen gebruikt.
Het onderste gedeelte is nu ook een div geworden. Ik wilde namelijk eens zien hoe het onderste gedeelte er met jQuery Rounded Corners uit zou zien. Dan loop ik toch echt tegen de beperkingen van een tabel-cel aan en daarom heb ik het onderste deel maar naar div's omgezet.

Nu het grootste deel van de pagina naar een div-structuur is omgezet is het wat mij betreft slechts een kwestie van tijd om ook het menu naar div's om te zetten (en de pagina qua code wat verder op te schonen, zodat de voordelen van CSS behaald worden).

Overigens heb ik ditmaal ook de achtergrondafbeelding wat bewerkt. Deze is nu kleiner qua formaat en ook qua bestandsgrootte (van 160 KB naar 52 KB). Wel viel het me daarbij op dat die afbeelding geen erg hoge kwaliteit heeft. Het lijkt alsof deze afbeelding is ingescand of op zijn minst eens in JPG-formaat is opgeslagen. Als je deze afbeelding ook nog ergens in hogere kwaliteit hebt, dan lijkt dat mij beter om hier te gebruiken. Deze afbeelding is namelijk wel het eerste wat je ziet als je de website bekijkt. Dan is het toch prettig als die erg kwalitatief goed uitziet.

Maar ik hoor graag wat je van de aanpassingen vind en of dit is wat je ongeveer in gedachten had.

[rakodi]

wauw, wat goed van je. Ben je heel dankbaar.... ja, die css heb ik ingebouwd, maar dat was peanuts, ik bedoelde met lastige css met name de tabellen. Had inmiddels ook al een programma gevonden die html omzet in css.

Maar: het probleem van het verspringende beeld is er nog steeds...... Dus als ik bijv. mijn scherm verklein, is de site weer vernaggeld. Kan ik hieruit concluderen dat css toch niet de oplossing is? Of weet jij misschien een andere oplossing?

[rakodi]

Heb inmiddels alles in divjes middels css gebouwd. Maar het probleem blijft....grrrrr. als ik mijn browser verklein is nog steeds de opmaak vernaggeld. nog maar even zoeken dan....

[Frederik]

De oorspronkelijke link naar je website meldt dat er geen website meer is

[nirwana]

Rakodi,

Als je bekijkt wat ik van de website gemaakt heb, raakt daar dan ook het uiterlijk van de website "vernaggeld" bij het verkleinen ?

Dat is namelijk niet wat ik zie. Ik heb dit net geprobeerd in Firefox 8 en in IE9, maar in beide browsers blijft het uiterlijk netjes gecentreerd (voor zover ik het kan beoordelen) en ook staat alles gewoon op z'n plaats.

Ik zie dat je op jouw eigen webstek ook met CSS aan het experimenteren bent.
Wel moet je daar een klein beetje mee uitkijken, want als je even niet oplet dan heb je ergens een regel opgenomen die de hele website een ander uiterlijk geeft.

Zo stond er in jouw body bijvoorbeeld het volgende: font-size: 0em;
Dan kun je daarna nog wel tekst opnemen in je div's, maar dat heeft niet erg veel zin. Dankzij een lettergrootte van 0 pixels krijg je die niet te zien.

Verder probeer je iets met een margin-left voor de knoppen. Waarschijnlijk denk je dat je daarmee bepaalt waar de knoppen precies op de pagina komen te staan (vanaf de linkerkant gemeten). Maar doordat je de margin gebruikt heeft dit het effect dat deze div's steeds een stukje verder van elkaar af komen te staan. De eerste div krijgt aan de linkerkant een ruimte van 150 pixels. De tweede div krijgt een ruimte van 170 pixels ten opzichte van het vorige element, etc.
Wat je probeert te bereiken is meer wat je met de left-eigenschap bereikt. Maar dan ben je haast bezig met absolute positioning, terwijl ik denk dat je dat helemaal niet zou moeten doen. Je hoeft niet te bepalen dat die knop precies op die positie komt te staan op de webpagina. De ene persoon komt namelijk met een resolutie van 800 bij 600 pixels, een ander heeft een grotere resolutie en weer iemand anders surft met breedbeed-afmetingen langs. Kortom, daar moet je je helemaal niet mee bezig willen houden. Je kunt net als ik een div bepalen (in mijn geval heet die container) en die vervolgens laten centreren.

Doorgaans zou ik deze knoppen met z'n allen in een div plaatsen en vervolgens kun je van die div bepalen waar die komt te staan. De knoppen zelf zou ik dan een float: left geven. Daarmee komen ze allemaal netjes naast elkaar te staan (tenminste als je de div groot genoeg maakt om de knoppen te bevatten, want anders vallen ze er van af).

Nog een tip: bij een div is het van belang dat je een breedte en een hoogte opgeeft. Dan krijg je tenminste iets op het scherm te zien. Vervolgens kun je bepalen waar die geplaatst moet worden.

Overigens staat in jouw pagina nog een verdwaald stukje HTML-code:

Code: Selecteer alles

style="border:
100px solid ; height: 45px; left: 527px; width: 110px;"
alt="welkom" src="welkomd.png">

Dat deel zou ik verwijderen, want het wordt nu als gewone tekst gezien. Dat kun je zien aan de >-codering van het > teken.

[rakodi]

Hoi Martijn,

Bedankt maar weer voor je uitgebreide reactie. Het beeld versprong idd nog steeds in de zin dat als ik de browser verklein de opmaak verkeerd op het beeld kwam. Uiteindelijk heb ik die ene div van je als uitgangspunt genomen en er verschillende divjes van gemaakt. Ook dat werkte niet. Toen ben ik vanuit een vaststaande div gaan werken met 3 lagen en dat werkte wel. Dus een hoofddiv een subdiv en allemaal divjes voor de links. Was een hoop gezoek en veel werk maar dat is wel gelukt. De site heb ik offline gehaald omdat er een logo was aangeleverd die auteursrechtelijk beschermd bleek te zijn. Aan jou dan ook het verzoek om die link die je had gemaakt te verwijderen.
Ik ga hem opnieuw bouwen met misschien wel (als die bestaat) een template. Ik weet 1 ding zeker en dat is als ik weer tegen iets oploop het hier plaats, want er komen in ieder geval reacties een ook nog waar je wat aan hebt! super.....

[nirwana]

Ik heb de afbeelding van de server verwijderd, dus die is niet meer te zien.

We zijn benieuwd wat je uiteindelijk van de website gaat maken, dus houd ons op de hoogte als je weer iets verder hebt.