Website uiterlijk

[Cross]

Beste,

Ik heb een website gemaakt en een collega van mij ook.
Beide op onze eigen manier ( Ik met de hand, de collega met een programma op de Mac )
Nu doet het volgende probleem zich voor.
Wanneer mijn website uitgerekt word ( Naar links of rechts )
Dan word de content mee verschoven maar blijft mijn achtergrond wel staan...
de achtergrond afbeelding blijft dus netjes staan ...
De verschuiven content zorgt voor een lelijke lay-out wanneer men gebruikt maakt van een resolutie anders dan de mijne ( 1280 x1024 )
Weet iemand hier de oplossing voor ?

Vervolgens,

Wanneer mijn tekst langer is dan de afbeelding stopt deze ( Komende door de volgende code: background-repeat:no-repeat; )
Echter wordt bij mijn college de afbeelding uitgerekt tot aan de pagina lengte ...
( De afbeelding word hier niet mooier op maar zorgt er wel voor dat de content altijd in de afbeelding staat en niet ineens op een zwarte achtergrond ... )

De site is te zien op: http://smfclan.nl/testsegment/

De reden dat wij mijn versie gebruiken is omdat het Mac programma er onnodige code inzet ( Javascript e.d. )


Bedankt alvast

 

[AndreazZz]

Nou, een ding kan ik je in ieder geval vertellen:
je kan het 2e probleem op 2 manieren oplossen: je definieert je achtergrond in je html: dan zet je die op stretch. Of je doet het in je css, en wel zo:

body {
  background: url(bgimage.jpg) no-repeat;
  background-size: 100%;
}

Over die grootte: volgens mij kan je dat oplossen door je hele content in een container te plaatsen en die bijvoorbeeld te zetten op left: 10%.

 

[Cross]

Beste AndreazZz,

Wanneer ik size 100% gebruik neemt de achtergrond de gehele website in beslag, ( X en Y as ... )
Terwijl hij enkel de Y in beslag zou moeten nemen ...

Bedankt in ieder geval, ( Dit werkt namelijk voor mij ook wel, wacht nu enkel op goed keuring )

 

[AndreazZz]

Hoe bedoel je? Je hebt een klein plaatje dat je alleen over de y-as wil rekken? Wordt dat dan niet een beetje lelijk? Dan kan je beter het plaatje passend maken op jouw resolutie (dus hoe groot je hem wilt hebben, dan in photoshop (of paint) de rest met een kleur vullen, en dan rekken.

 

[csshunter]

Hoi Cross,

Probleem 1: de pagina is niet resolutie-bestendig.
Oorzaak: het background-img staat gecentreerd, de rest staat op een bepaalde afstand van de linker-schermrand. Ga je naar een andere schermbreedte, dan blijft de background gecentreerd staan (bij grotere breedte dan 1280px) of begint vanaf de linkerkant (bij kleinere breedte dan 1.020px) - maar de inhoud-elementen zitten nog steeds op hun vaste positie vanaf de linkerrand.

• Oplossing: al die margins-left moeten er uit, en de inhoud van de pagina moet gecentreerd gemaakt worden.

Probleem 2: de pagina is niet hoogte-bestendig.
Oorzaak: de teksthoogte is flexibel, de afbeelding niet. De afbeelding oprekken wordt inderdaad niet zo mooi, maar er speelt meer.

• Oplossing 1: De css3-eigenschap "background-size" wordt bij Internet Explorer alleen vanaf IE9 ondersteund. Meer dan de helft van de IE-gebruikers zit momenteel echter op IE7 of IE8, en daarvoor werkt het dus niet.
• Oplossing 2: Er zou een portie javascript op los gelaten kunnen worden om de afbeelding verticaal op te rekken.
• Oplossing 3: Met een css-truc zou het ook voor IE7 en IE8 in orde gemaakt kunnen worden (zie hier en op de daar volgende pagina voor het principe). Ook hiermee blijven door het uitrekken de proporties niet gehandhaafd.
• Oplossing 4: De background opsplitsen in 3 delen. Het bovendeel blijft in verhouding, het onderste gedeelte ook. In het midden komt een rekbaar stuk net zo hoog als de pagina nodig heeft.

Probleem 3: er speelt meer!
Ook het oranje tekstvak in de linkerkolom heeft een vast formaat, waar de tekst uit gaat lopen bij meer tekst.
De pagina is verder niet lettergrootte-bestendig. Als de bezoeker in de browser een groter letterformaat instelt (zonder inzoomen op het totaal), dan valt de opmaak van de pagina in duigen. Bv. Internet Explorer (7) op resolutie 1280*1024px met letterformaat ingesteld op "Groter":

Oorzaak (o.a.): de begin-hoogtes van de elementen zijn niet flexibel genoeg om schalen van de letters op te vangen; en middenin zinnen zijn <br />'s geplaatst om naar de volgende regel te gaan. Bij een andere lettergrootte klopt dat niet meer: dan kunnen er minder woorden op een regel zodat de vaste regeluiteinden niet meer kloppen.

• Oplossing: de <br />'s laten vervallen, en de onderlinge verhouding van de <div>'s in orde maken.

Conclusie
De pagina is helaas veel te star opgemaakt om goed te kunnen draaien op verschillende resoluties en lettergroottes.
De achtergrond zal zijn, dat je gewend bent om grafische opmaak te realiseren, waarbij alles op de mm precies moet kloppen. Bij een website werkt dat niet zo: die moet veel flexibeler zijn.

• Er is een "extreme make-over" van de styling nodig: opnieuw beginnen zodat de basis goed is...

Aan bevolen leesvoer: The Graphical Designer and the CSS Zen Guru.

Met vriendelijke groet,
CSShunter
________
PS: Ik zal kijken of ik een opzetje voor de grote lijn kan maken. Gaan even een paar dagen overheen.

PS2: De pagina heeft wel een <meta> element met de utf-8 charset, maar de pagina is niet opgeslagen als utf-8. Daarom kan de html-validator er niet mee overweg. Het gaat mis op het letterteken ë van het woord "efficiënt".

 

[csshunter]

Hoi Cross,

CSShunter: Ik zal kijken of ik een opzetje voor de grote lijn kan maken. Gaan even een paar dagen overheen.

• Hier is een testpagina met het opzetje: graphic-point.htm

Toelichting veranderingen tov origineel ontwerp:

• In de kop-strook vraagt de "oude reclame"-oproep erg veel aandacht (terwijl dit niet de hoofdzaak van de site is), en het verstoort het beeld. > De "oude reclame"-oproep verplaatst naar rechts onder, en header op volle breedte gezet.
• Het logo in de header gezet om ruimte te besparen en accent te leggen op de 24uur-service (wordt nu versterkt door het nacht-plaatje).
• In de menu-balk was het erg druk aan items. Bij vergroting van letterformaat door de bezoeker liep het uit de achtergrond. > Gekozen voor een image-oplossing, waardoor de positie altijd goed blijft. Meteen hover-varianten aangemaakt via een gr-point-menu-sprite.png.
• Het item "Contact" een prominente plaats gegeven (meteen onder "Welkom"), zodat men daar niet naar hoeft te zoeken en snel contact kan opnemen.
• In het content-gedeelte was te weinig contrast tussen background-kleur en tekstkleur > background-color opgelicht maakt prettiger lezen.
• De <div>-structuur en bijbehorende css aangepast om bij meer inhoud en/of bij letter-vergroting altijd te kloppen.
• Van de content-kop "Welkom" ipv een image nu echte tekst in de html gemaakt > ook voor vervolgpagina's goed voor Google-herkenbaarheid.
• Achtergrond linkerkolom flexibel gemaakt, zodat er ook meer tekst in kan.
• Linkerkolom eigen kop gegeven > oogt beter en ook goed voor Google.
• Pagina een herhaal-background gegeven voor het middendeel > grotere pagina's straffeloos te maken zonder vertekening en zonder wisseling van aanblik bij bladeren door de pagina's.
• De footer aangepast, zodat deze altijd in de linkerkolom en de inhoud blijft staan; image-teksten omgezet in echte teksten.
• Toegankelijk en zoekmachine-vriendelijk gemaakt met verborgen teksten.
• Afbeeldingen gepimpt en geoptimaliseerd. Eén image extra, maar totale bestandsgroote images is niet toegenomen. Alle images bij elkaar zijn hier ingezipt.
• Cross-browser: Firefox, Chrome, Opera, Safari en Internet Explorer (IE7, IE8, IE9 en IE10-ConsumerPreview).
• Valid xhtml1.0.
• Valid css2.1.
• Zo ongeveer.

Met vriendelijke groet,
CSShunter

 

[Cross]

Beste CSS Hunter,


Zoals gewoonlijk bouw je weer een mooiere site dan ik.
Inmiddels had ik zelf het volgende gemaakt:
http://smfclan.nl/testsegment/

Wat er ook wel aardig uit ziet ( Enkel op IPADS ziet deze er niet uit )
Toch houdt ik die van jouw aan !
Ziet er netter uit dan wat ik had ( Die van mij is momenteel ook niet meer goed gekeurd bij W3C ).

Heel hartelijk bedankt voor alle moeite!

( Daarbij moet ik wel zeggen dat ik nog niet voor 100% klaar was met optimaliseren )

Met vriendelijke Groeten,

Cross

 

[Beetsma]

Mischien ook handig om
alle divjes in een | container div| te zetten dat werkt wat overzichtelijker en makkelijker, en de kans is veel kleiner dat dingen gaan verschuiven.

 

[csshunter]

@ Beetsma:

Kan inderdaad wel eens handig zijn, maar in mijn voorbeeld is de <body> meteen al de container voor de rest. Spaart weer een <div> en zo kan er ook niets verschuiven! *) **)

Met vriendelijke groet,
CSShunter
_________
*) Zo lang je maar niet onvoorzichtig met {position: absolute;} in de weer gaat; maar dat geldt voor container-div's net zo goed.

**) Ik zie hier regelmatig <body><div id="container">... hele rest...</div></body> voorbijkomen, waarbij de container niets anders doet dan centreren. Sinds Internet Explorer 6 (misschien IE5.5 ook al, daar wil ik af zijn) kunnen alle browsers hetzelfde doen door meteen de body een width te geven, en met {margin: 0 auto;} te centreren.

 

[Beetsma]

Hoi css hunter,

Was ook meer een tip(je) voor ts, ik weet dat jij er wel veel verstand van hebt dus jou hoef ik niets er over te vertellen hehe :d

groet
Beetsma