hulp met een ontwerp

[bertveen]

Hoi,

Ik heb met pijn en moeite een website gemaakt Nu is alleen het probleem dat de afbeelding dat ik gebruik zich niet aanpast aan de resolutie van de gebruiker.

Ik heb al naar oplossingen gezocht op internet............ de info wat ik vind is alleen maar voor achtergronden van een hele pagina, en niet voor alleen een gedeelte ervan.

Ik heb hier een bijlage om het jullie duidelijker te maken.

Ik hoop dat hier iemand is dat hier verstand van heeft.

Groetjes

 

[Sevo]

Je kunt beter een afbeelding maken die met alle resoluties "om kan gaan". Zoals mooi
afwerken met Photoshop door er schaduw om heen te maken. En je gebruikt wel background-image?

 

[csshunter]

Hoi bertveen,
Mmm, het kan misschien wel met een zichzelf aanpassende afbeelding, maar het is bloedjelink.
De afbeelding moet er dan in gezet worden als voorgrond-afbeelding, die met css een breedte van 100% krijgt (in de <img>-tag geen maten opgeven). De hoogte past zich dan automatisch aan, zodat de zaak in verhouding blijft. Het img moet dan in een <div> komen.
Vervolgens moet je er een laag overheen bouwen waarin de #content komt te staan. Daarvoor zal het nodig zijn om een {position: absolute;} voor beide div's in te voeren. Absolutie posities kunnen sowieso al gevaarlijk zijn voor je layout: dat luistert heel kritisch.

• Maar... als de bezoeker zijn window versmalt, wordt de hoogte van de afbeelding ook kleiner, en dan kan de inhoud van de #content opeens uit de afbeelding gaan lopen,; of er komt een kaal stuk onder de afbeelding.
• En als de bezoeker zijn lettergrootte aanpast, kan hetzelfde gebeuren.
• Afbeeldingen in de inhoud schalen dan niet mee, tenzij je daar speciale maatregelen voor treft.

Een totale "liquid layout" zou misschien een oplossing kunnen zijn (alles maar dan ook alles in % of andere relatieve maten), maar dan nog zal het buitengewoon vreselijk ingewikkeld zijn om voor alle resoluties, alle windowformaten en alle lettergroottes een toonbaar beeld te creëren. Of: onmogelijk, hangt ook van het image af. Als het img niet in verhouding hoeft te zijn (in de hoogte mag krimpen of uitrekken), is het iets eenvoudiger, maar nog steeds ingewikkeld.

Veel makkelijker is het om een gecentreerde achtergrond-afbeelding te hebben, die voldoende extra ruimte om zich heen heeft waarin ook iets te zien is, wat niet persé noodzakelijk is. Dan wordt dat er vanzelf afgeschaafd als de resolutie dat niet toestaat.

Met vriendelijke groet,
CSShunter
___________
PS: dit geldt dan voor css2.1. Met css3 zijn er meer mogelijkheden voor schalen van achtergrondafbeeldingen, maar css3 wordt nog lang niet door alle browsers ondersteund die de bezoekers hebben.