Uiterlijk website enkel op 1 resolutie

Status
Niet open voor verdere reacties.
C

Cross

Gebruiker
Lid geworden
30 jul 2011
Berichten
142
Ik ben bezig met een klein projectje:
http://smfclan.nl/testsegment/stomerij/index.php

Echter werkt dit uiterlijk enkel op 1 resolutie .. ( 1280 x 1024 )

Mijn HTML en CSS zijn gevalideerd ( En ook goed gekeurd )
Maar, nu zou ik graag willen weten wat ik fout doe.

De bedoeling is dus eigenlijk dat wanneer je de content groter of kleiner maakt deze duidelijk leesbaar blijft.
Of zich eventueel aanpast oid.


Zoals altijd hoop ik weer op jullie om mij te helpen :)

Alvorens bedankt

Cross
 
Hoi Cross,
Maar, nu zou ik graag willen weten wat ik fout doe.
Klik om te vergroten...

Eigenlijk ben je verkeerd begonnen: met alleen ontwerpen voor 1280*1024px.
En heb je niet meteen stelselmatig het gedrag op bv. 1024*768px getest, maar ben je doorgegaan tot ie klaar was.
Dan is het achteraf nogal lastig om "alles er in te proppen" of "alles mooi uit te smeren" voor kleinere of grotere resoluties dan de 1280*1024px.

Zelf begin ik meestal met m'n beeldscherm op 1024*768px te zetten, de pagina-breedte op 990px fixed-width vast te stellen, en de pagina te centreren.
Bij > 1024*768px blijft de pagina dan gecentreerd, bij < 1024*768px begint de pagina gewoon aan de linkerkant (met hor. scrollbar).
In het ontwerp kan je er rekening mee houden dat het menu en de hoofd-content altijd link-rechts volledig zichtbaar is als je bij 800*600px ofwel helemaal naar links, ofwel helemaal naar rechts scrollt. Dan hoeven de kleinschermers alleen maar op en neer te scrollen om menu en tekst te lezen zonder ook nog L/R te moeten scrollen.
En zo'n 800px tekst-breedte is vaak ook meteen de limiet voor een leesbare regellengte, dus dat werkt dubbelop.
NB: de background moet wel groot genoeg zijn om ook hoge pagina's met veel tekst te kunnen opvangen.

Is alles in orde, dan kan je kijken of je met een extra of uitgebreid background-img in de html (of in de body of een wrapper) het uiterlijk links en rechts van de pagina-kolom kan veraangenamen voor de grootschermers.

Alternatief is een fluid / liquid / flexibel design, waarbij alles in verhouding L/R in- en uitschuift (behalve het letterformaat) voor kleinere of grotere beeldscherm-breedtes. Maar dat is meestal wat ingewikkelder, en lang niet altijd mooi.

Of een combi, waarbij bv. een linkerkolom of rechterkolom op een percentage zit (met een bepaalde minimum-breedte).

In jouw geval denk ik dat je o.a. het logo rechtsboven uit de achtergrond-figuur moet knippen, zodat het bij elke resolutie als float-element rechts drijvend op een bepaalde afstand van de rechterkant kan blijven.
  • Dan zou ik tegelijk de positie van het logo en de drie kaartjes omdraaien: gebruikelijk is om het logo linksboven te zetten, dat is voor de meeste bezoekers de plek waarop ze het logo verwachten.

Met vriendelijk groet,
CSShunter
 
CSSHunter,

Bedankt voor je antwoord.

Normaal gezien plaats ik het logo ook altijd links, echter wilde de persoon dat de website gelijk is aan zijn briefpapier ( Vandaar ook de simpele lay-out ).
Vandaar dus ook dat ik dat niet heb aangepast.

De afbeelding opzich heb ik al wat groter gemaakt.
Ik ga hem nog groter maken en van het logo ( Inderdaad ) een andere afbeelding maken zodat deze ten alle tijden goed staat ook als de pagina groter of kleiner wordt.

Voor nu heb ik het even anders opgelost. ( Volgens mij ook wel haalbaar )
Heb inderdaad ook minimum lengtes ingesteld ( Breed en hoog ).


Bedankt voor de tips en info :D


Groeten,

Cross
 
Snelkookpan-recept Liquid Design (1)

Hoi Cross,
Na m'n reactie "eigenlijk zou alles anders moeten" begon ik nieuwsgierig te worden of dit ontwerp zich zou lenen voor een Liquid Design: automatisch toegesneden op een "op schaal aanpassing" bij verschillende resoluties.
Hier volgt wat ik in de keuken ben tegengekomen.

=======
Fase 00.0
Eerst een knippatroon gemaakt voor de voordeligste achtergond-images die nodig zijn:

card-knippatroon.png

De ruimte onder partje 1 is één kleur (zonder verloop) en hoeft niet in het image > te regelen met css.
Hetzelfde geldt voor het tussenstukje tussen 2 en 3 en de oranje kleur in partje 3.
Partje 3 is transparant in het oranje gedeelte: dan kan het naar links over het verloop van partje 2 vallen (als nodig bij erg smalle schermen / windows).

=======
Fase 00.1
Partjes 2, 3 en 4 onder elkaar gemonteerd in één css-sprite (combi-img); dat kan omdat het niet-herhalende images zijn; het paars is transparant:

card-sprite-montage.png

De twee oude images (background1.png en card.png) waren samen 63kB; deze 3 gecombineerd: 43.5kB.

=======
Fase 01
Horizontale herhaalstrook voor de zijkanten als repeat-x background-image in de html.
Body op breedte 95% gezet, met L/R margins op auto: altijd gecentreerd, met links en rechts nog stukje oranje background voor het mooi.
In %: dan neemt zijkant-breedte af bij smallere schermen, en is meer breedte beschikbaar voor de pagina zelf dan bij een fixed width in px.
Body heeft background-color #F5F5F5. Dwz = wit met een heel klein tikkeltje grijs. Dat maakt contrast witte background / zwarte letters niet zo groot en is veel prettiger leesbaar.
Body heeft tijdelijke hoogte van 2000px om te kunnen zien wat er gebeurt bij lange pagina's.
  • Resultaat: card-nw-01.htm
  • Gaat in de breedte goed bij alle resoluties.
  • Onder de herhaalstrook aan de zijkanten zit nog wit.

=======
Fase 02
Wit onder herhaalstrook opgevuld met vaste oranje kleur.
  • Resultaat: card-nw-02.htm
  • Gaat nu ook in de hoogte goed bij alle resoluties / pagina-hoogtes.

=======
Fase 03
Om bij breedbeeld-schermen niet vreselijk veel kijkafstand te hebben tussen de linkerkant en de rechterkant van de pagina: max-width van 1200px voor de body ingesteld.
Voor de demo: schermbreedte 1600px gesimuleerd door {width:1580px} in de html (in het echt op grote schermen is de hor. scrollbar er niet).
  • Resultaat: card-nw-03.htm
  • Betere paginabreedte bij resolutie > 1280*1024px, pagina blijft dan gecentreerd.
  • Bij smallere schermen blijft het goed gaan.

=======
Fase 04
Tijdelijke grote breedte er weer uit gehaald.
Een <div id="bovenstrook"> aangemaakt, met partje 2 als no-repeat background-img en vaste kleur naar rechts.
  • Resultaat: card-nw-04.htm
  • Gaat goed bij alle resoluties.
  • Aan de rechterkant zit het witte kromme uiteinde er nog niet in.

=======
Fase 05
Binnen de bovenstrook een <div id="logo"> gezet voor het logo en het witte uiteinde. Is 100% van de bovenstrook breed, maar toch transparant, ook naast het logo. Background-img op positie rechts gezet, en 174px omhoog getrokken om partje 3 uit de sprite te krijgen.

=======
Fase 06
Het ovaal-partje 4 kan nu aan de body vastgeknoopt worden, weer niet herhalen; met de rest van de body in de tikkeltje-grijs kleur, en weer met omhoogtrekken van het background-img om het stukje met het logo kwijt te raken.
De <body> zit qua z-index vanzelf lager dan de <div id="bovenstrook">. Dus de bovenstrook overlapt automatisch wat in de body niet getoond moet worden.
  • Resultaat: card-nw-06.htm
  • Gaat goed bij alle resoluties.
  • Zonder de overlappende bovenstrook zou het er zoals deze uitzien. Dat zit er dus virtueel onder! :)

=======
Fase 07
Tijd om de tijdelijke grote hoogte er uit te halen, en te kijken wat de pagina doet bij weinig inhoud.
  • Resultaat: card-nw-07.htm
  • Dat gaat mis: onder de content houdt de <body> hoogte op, en wordt de achtergrond met ovaal-hoek en pagina-achtergrondkleur tot op de bodem niet getoond.
  • In Firefox, Chrome, Opera en Safari verspringt deze korte pagina t.o.v. een hoge pagina met meer inhoud dan op het scherm past.

=======
Fase 08
De <body> krijgt een minimum-hoogte van 100% (van de html-hoogte van ook 100%), en is dus altijd (minimaal) schermhoog. Plus 1px extra padding-bottom om springende pagina's te vermijden (zie: De Springende Pagina).

Wordt vervolgd!

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Het het helemaal doorgelezen en alle voorbeelden bekeken en gezien.
Het enigste wat me opvalt is ook de oranje balk aan de rechter zijde. ( Of is dit juist met opzet ? )

Verder als ik in de bron kijk zie ik overduidelijk dat er dus heel wat minder CSS nodig is dan dat ik dus heb gebruikt.
( Door die afbeeldingen natuurlijk )
Wat overduidelijk meer overzicht brengt in de CSS en HTML.

Heb alles ook goed doorgelezen en opgenomen
Zal nog even afwachten wat er in het vervolg aan gaat komen

Wat wel blijkt dus is wanneer het mogelijk is om met 1 afbeelding te werken dat dit ook moet en dan de balk langer maken d.m.v. een losse afbeelding omdat deze toch in hetzelfde kleur verloop is ( Danwel moet ik toegeven dat ik kleurenblind ben en voor mij het dus extra lastig is met kleuren te werken )

De uitleg is wel helemaal super :)

Alvast hartelijk dank hiervoor
 
Het enigste wat me opvalt is ook de oranje balk aan de rechter zijde. ( Of is dit juist met opzet ? )
Klik om te vergroten...
Ja, expres gedaan. :)

Reden: dit maakt een beter evenwicht op de pagina, vooral voor grote beeldschermen.
Op een 1600*1280px scherm komt er nu dit uit (het kadertje is waar de tekst zal komen):

card-zijkanten-a.png

Zou je de oranje balk aan de rechterkant weglaten, dan zou in verhouding veel te veel wit aan de rechterkant komen:

card-zijkanten-b.png

Je zou ook het doortrekken van het oranje aan de linkerkant weg kunnen halen. Dan is er wel een beter evenwicht, maar het witte gat aan de linkerkant trekt hiermee de aandacht van de kijker, en leidt af van de tekst in het midden:

card-zijkanten-c.png

Bij beeldschermen breder dan 1600px worden deze verschijnselen alleen maar erger! Vandaar.

Met vriendelijke groet,
(en wordt vervolgd)
CSShunter
 
Kleuren in websites ... ook voor kleurenblinden!

Kleuren in websites
... ook voor kleurenblinden!

... kleurenblind ... extra lastig met kleuren te werken
Klik om te vergroten...
Dat kan je ook anders bekijken.
Ik zou zeggen: "Elk nadeel hep z'n voordeel!" ;)
Als jij een site maakt, weet je zeker dat ie toegankelijk is voor kleurenblinden :), in elk geval voor jouw variant van kleurenblindheid (voor andere lezers: er zijn vrij veel vormen van kleurenblindheid; zie.bv. hier; ook voor toolbar voor omzetten kleuren.)

NB: In Nederland is ongeveer 1 op de 12 mannen en 1 op de 200 vrouwen kleurenblind (bron hier), dus het is erg belangrijk om daar bij het ontwerp van een website rekening mee te houden!
Aardige illustratie op die pagina over wat iemand met kleurenblindheid op internet kan tegenkomen:

groene-knop.png

Een paar andere sites met info en/of tools m.b.t. kleurenblindheid en contrast:

En de uitsmijter:
Ga niet van je eigen ogen uit bij het maken van een website!
  • Ruwweg genomen hebben ongeveer 40% (!) van de surfers een contrastvermogen dat maar 1/3 is van het contrastvermogen van iemand van 20 (bron hier, met veelzeggende illustratie).
  • En het ene beeldscherm is het andere niet: ga niet uit van je eigen super-de-luxe breedbeeld high-contrast beeldscherm! De noodzakelijke contrast-ratio tekst/achtergrond is er niet alleen voor mensen met minder contrastvermogen, maar ook om verschillen in monitors (en verschillen in lichtval, daglicht/kunstlicht, enz.) op te vangen.

Met vriendelijke groet,
CSShunter
 
Snelkookpan-recept Liquid Design (2)

Fase 09
Een <div id="middenblok"> aangemaakt, waar alles aan menu, content en footer in moet komen. Om mee te schalen met de schermbreedte moet deze een breedte in % krijgen. Verder kan deze div in principe gecentreerd worden met {margin: 0 auto;}.

Vanwege de kromming van de ovaalhoek ziet dit "echt middenin" er niet mooi uit; voor het oog staat het blok dan te veel naar links. Dit kan verholpen worden door er een container omheen te zetten, die 'm opduwt met een padding-left (in vaste px, omdat de breedte van de ovaalhoek ook niet fluctueert). Proefondervindelijk uitgedokterd hoeveel die padding moet zijn (om ook te voldoen aan smalle schermen).

Via-via is de maximale breedte al geregeld (nl. via de relatieve pagina-breedte). Wel moet er nog een minimale breedte bij voor hele smalle schermen, anders blijft er niets meer over.



Nu het menu: wordt vervolgd!
CSShunter
 
Laatst bewerkt:
Snelkookpan-recept Liquid Design (3)

Fase 10
Een <ul id="menu"> aangemaakt, en verticale positie geregeld.


=======
Fase 11
List-items in het menu geplaatst en horizontaal gezet.


=======
Fase 12
Menu-links knop-uiterlijk gegeven. Achtergrond iets donkerder gemaakt om goed contrast met de letters te krijgen.


=======
Fase 13
De 5 menu-links over de volle menu-breedte uitgesmeerd, via breedte list-items van 19.5% (iets minder dan 20% vanwege borders L/R in de links).


=======
Fase 14
Hover-styles voor het menu toevoegen.


=======
Fase 15
Actuele pagina krijgt ook de hover-style. Geautomatiseerd met een te wijzigen class in de <body>-tag, en gelijkblijvende id's voor de menu-links.


=======
Fase 16
Content-div aangemaakt, en vast wat content-styles.


=======
Fase 17
Tijdelijke hoogte uit het middenblok. Een <div id="footer"> toegevoegd met in hoogte rekbare achtergrond (card-bg-footer-midden.png) voor verschillende lettergroottes. Erbinnen een <div id="footercontent"> voor het stylen van de tekst. Minimale hoogte: om de hoekjes er altijd op te laten passen.


=======
Fase 18
Combinatie-img gemaakt met alle hoekjes er in (card-bg-footer-hoekjes.png).
Met absolute posities de hoekjes linksboven en linksonder geplaatst: overlappen het img van het middenstuk. Het linksonder-hoekje heeft ook de onderschaduw, en loopt door tot iets over de helft. Het rechtsonderhoekje gaat dat naar links doen, dan overlappen ze elkaar iets, en is de footer in de breedte uitrekbaar.
Hoekjes en schaduw zouden ook met css3 gemaakt kunnen worden, maar dat wordt niet door alle nu in omloop zijnde browsers / browserversies ondersteund. Daarom gekozen voor de img-oplossing.


=======
Fase 19
Ook rechtsboven- en rechtsonder-hoekjes van de footer geplaatst.
Laatste check op valid html en valid css.


Hiermee komen we dan aan ...

Wordt vervolgd!
CSShunter
 
Snelkookpan-recept Liquid Design (4)

... komen we dus aan bij:

Fase 20: het eindproduct
De #content opgevuld met je tekst van de homepage. *)
Nog wat fijnregeling in de #content-styles aangebracht.
Alles styles vanuit de head overgebracht naar een apart stylesheet card-styles.css.



De site draait nu niet alleen op 1280*1024px, maar ook op 1600*1280px en hoger.
En omlaag gaat het ook goed: op 1024*768px, en voor wie dat nog gebruikt: 800*600px.
Zelfs op 640*480px zonder horizontale scrollbar! :D
  • Snelcontrole: window verkleinen, en linker- of rechterzijkant heen en weer slepen > je ziet 'm in- en uitschuiven.

Hier de screenshots (allemaal op 1/4 van de ware grootte):

card-screen-collectie.png

Op alle resoluties gaat het ook goed als iemand bv. zijn/haar history- of favorieten-zijbalk van de browser aan heeft staan, of als de browser op een half window is gezet met ernaast een ander openstaand programma:

card-screen-history-half.png

De pagina heeft nu 2.8kB voor de html, 2.6kB voor de css en 47kB voor de images (0.2 + 43.4+ 0.2 + 3.2).
Het totale pagina-gewicht is hiermee 52.4kB: een snelle pagina!
  • Het oude pagina-gewicht was 72.9kB. Voor min 20.5kB extra heb je dus het Liquid Design: daar hoef je het niet voor te laten. ;)

Einde van het snelkookpan-recept! :)

Met vriendelijke groet,
CSShunter
__________
*) In de postcode in de footer ontbreken nog de twee letters.
 
Laatst bewerkt:
Ik sla iedere keer weer steil achterover van hoeveel tijd en moeite jij in je antwoorden steekt:thumb:
 
CSSHunter,

Onwijs bedenkt voor de tijd gestoken in de uitleg en omschrijvingen hiervan,
Deze pagina in zijn geheel ( De HELP MIJ )
Ga ik opslaan en omtoveren in een word document gewoonweg vanwege de geweldige uitleg.

Super bedankt voor alle tijd en moeite gestoken in deze uitleg !
Het is net wat Naarling zegt, ik sta er versteld van hoeveel tijd en moeite je er in wilt steken om iemand te helpen !!

@ Naarling, waarom de <FONT> tag vermijden ?

Nogmaals, Super bedankt !
The Cross


PS: Van de Postcode ben ik op de hoogte echter heb ik de gegevens gekopieerd van een ontvangen Brief papier PDF en deze staat daar ook niet vermeld
 
Laatst bewerkt:
Cross zei:
@ Naarling, waarom de <FONT> tag vermijden ?
Klik om te vergroten...
Die is tien jaar geleden al verouderd verklaard, als je hem blijft gebruiken is er dus kans dat je een keer, bij moderne browsers, tegen problemen aan gaat lopen. Helaas is he een taai beestje dat nog steeds af en toe in lesmateriaal opduikt:mad:
 
Deprecated = achterhaald en niet meer gebruiken!

Als ik even mag toelichten?

Een <FONT> of <font> of <CENTER> of <center> tag in de html-code vertelt iets over de opmaak van een element. Maar opmaak hoort niet in de html-code, die is er alleen voor de structuur & inhoud van de pagina.
De opmaak hoort strikt gescheiden te zijn van de html: in de css.
  • Zie het allereerste voorschrift van de webrichtlijnen.nl:
    R-pd.1.1 - Houd structuur en vormgeving zoveel mogelijk gescheiden: gebruik HTML of XHTML voor de structuur van de site en CSS voor de vormgeving ervan.
  • Met uitleg en voordelen.

Twee html-versies
In 1999 (vaststelling van de html-4.01 specificatie) en in 2000 (vaststelling xhtml-1.0 specificatie) werden voor html-4.01 en xhtml-1.0 twee versies vastgelegd. In het Doctype moest aangegeven worden welke van de twee op de pagina wordt gebruikt: *)
  1. Doctype Strict
  2. Doctype Transitional
  3. (Daarnaast is het nog het Frameset Doctype, alleen voor framesets; hier niet van toepassing)
Intussen is er ook html-5; zie hieronder.

Deprecated ...
In 1999/2000 was de bedoeling dat gebruik gemaakt ging worden van het Strict Doctype waarin de scheiding tussen structuur en opmaak als standaard was vastgelegd.
Zie bv. de intro van de DTD = de DocTypeDeclaration van html-4.01.
  • Een aantal tags, o.a. de <font> en de <center> tag, werden (toen al!) Deprecated (= achterhaald) verklaard, en mochten niet bij het Strict Doctype gebruikt worden.
  • Ook een aantal attributen (eigenschapskenmerken binnen een tag) werden Deprecated, bijvoorbeeld background="..." en align="..." en voor tabelcellen <td> ook een width="..." of height="...".

Het Transitional Doctype (de naam zegt het eigenlijk al: transitional= overgangsversie) was met name bedoeld voor de backwards compatibility bij de browsers: om bestaande sites niet in elkaar te laten storten.
Een aantal browsers waren toentertijd ook niet goed toegerust om alle css toe te passen (vooral Internet Explorer liep altijd achter in het volgen van de css-standaarden, resp. hield er eigen opvattingen op na), en die konden dan ook nog de Transitional variant gebruiken met de eigenlijk afgekeurde tags en eigenschappen:
  • Het Transitional Doctype was/is vergevingsgezind: de eigenlijk achterhaalde zaken mochten toch toegepast worden.

Intussen is het 12 jaar later, de css-potentie van de browsers is met rasse schreden vooruitgegaan (nou ja, bij IE wat langzaam), en je zou verwachten dat het Transitional Doctype een stille dood gestorven zou zijn: de overgangstijd zou zo langzamerhand wel voorbij moeten zijn!
Helaas. :eek:
  • Het blijkt dat nog behoorlijk veel webbouwers uit gemakzucht of onkunde het Transitional Doctype gebruiken, inclusief de achterhaalde tags en eigenschappen...
  • Het zit ook nog in lesmateriaal, cursussen, (herdrukken van) boeken, (online) tutorials, enz. zoals Naarling opmerkte.
  • Ook sommige html-editors of CMS'sen stoppen er standaard een Doctype Transitional in, als je een nieuwe pagina gaat aanmaken. Wat dat betreft zijn ook WYSIWYG-editors niet altijd te vertrouwen: die doen dat achter de schermen (en moet je in code-view controleren; als ze die hebben).
  • Verder zijn soms ook javascripts / plugins niet erg up-to-date en hebben dan het Doctype Transitional nodig om hun werk goed te kunnen doen.
Op die manier kom je er nooit van af! :shocked:

Conclusie
Help mee om Transitional naar de schroothoop te verbannen, en volg de voorschriften van de webrichtlijnen (weer met uitleg en links):
  • R-pd.2.3 - Bij het aanpassen van een bestaande website: gebruik van HTML 4.01 of XHTML 1.0 alleen de Transitional variant als het gebruik van de Strict variant onmogelijk of onwenselijk is.
  • R-pd.2.4 - Bij de bouw van een nieuwe website: gebruik van HTML 4.01 of XHTML 1.0 de Strict variant.
Oftewel: begin altijd met er een Strict Doctype boven te zetten:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
<head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <title>...</title>
of:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <title>...</title>
En: zegt het voort! :)

HTML-5: van deprecated naar obsolete!
Mocht je html-5 gebruiken, dan zijn er behalve nieuwe elementen en eigenschappen ook obsolete zaken bijgekomen. Obsolete = verouderd en buiten gebruik gesteld: "An obsolete element or attribute is one for which there is no guarantee of support by a user agent." (zie hier).
Dat betekent: browsers (en hun toekomstige versies!) hoeven met "obsolete" aangeduide elementen / attributen niet meer te ondersteunen. Dus: kan wel, hoeft niet. Vroeger of later kunnen de browser deze dingen dus uit hun rendering-machine gooien, en er totaal niet meer op reageren.
Oftewel: obsolete = nooit gebruiken!
  • Bijvoorbeeld: in html-5 zijn <font> en <center> obsolete geworden!

Wat is er precies deprecated / obsolete?
Bijna vergeten: waar kan je vinden wat er deprecated / obsolete code is?

En als je een Strict Doctype of html5 Doctype gebruikt ...
... en je onverhoopt vergeten was dat iets deprecated of obsolete was...
... dan zal de html-validator dat altijd fijntjes opmerken! :)

Met vriendelijke groet,
CSShunter
___________
*) Laat je een Doctype weg, of zet je html-code voorafgaand aan het Doctype, dan schiet Internet Explorer in de "quirksmode" (de fratsen-toestand), met de meest rare verschijnselen; dan wordt o.a. het oude css box-model van IE5 gebruikt, dat niet op de standaarden aansluit.
 
Laatst bewerkt:
@CSSHunter,

Nu doet het volgende voorval zich voor:
De persoon voor wie de website is wil de balk aan de rechter zijde weg hebben.
Het bovenblad door getrokken hebben en de onderste balk in het midden vierkant hebben.
En in plaats van de Kaartjes ( Stomerij "Card" ) ruimte voor een slogan.

Opzich geen probleem:
http://smfclan.nl/testsegment/stomerij/vernieuwd/

Echter, nu snap ik niet hoe ik die rechter balk weg krijg.
Zie daar in de CSS niet hoe ze uberhaubt aan weers zijde komen


-> De oude staat ook nog online.
Heb dit express gedaan zodat men kan zien dat deze vernieuwing tijd verspilling is. Echter willen ze het graag dus doen we dat.


Graag hoor ik hoe ik van die balken aan beide kanten 1 balk maak links. ( (images/card-bg-zijkanten.png) )


Met vriendelijke groeten,
En rekenende op de hulp.


The Cross
 
Hoi Cross,
Zie daar in de CSS niet hoe ze überhaupt aan weerszijde komen
Klik om te vergroten...
  • De card-bg-zijkanten.png zit aan de <html> vast, en staat dus altijd schermbreed op de achtergrond.
  • De <body> heeft een breedte van 95%, en staat met {margin: 0 auto;} L/R gecentreerd.
  • Er zit dus L en R van de bruikbare paginabreedte een strookje van 2.5% breed, en daar is alleen de background van de <html>.
  • Als je even het background-img card-bg-sprite.png van de <body> uitschakelt, zie je dat duidelijk: de strookjes zitten symmetrisch links en rechts.
  • Bovenin zit dan nog de bovenstrook, die over de body-bg heen geplakt is met een stukje card-bg-sprite.png in de <div id="bovenstrook">.

Laat je de 2.5% links en rechts weg en zet je de body op 100% breedte, dan gaat het mis bij bredere schermen dan 1200px. Want er is in dit model een max-width van 1200px voor de gecentreerde body = dan komt er links/rechts toch een strook met de html-background.

Laat je vervolgens ook de max-width vallen, wat op zich zou kunnen, dan worden het bij grote schermen weer super-brede pagina's met erg grote regellengte. - Want dat was de functie van de 2.5% en de max-width: bij brede schermen extra zijkanten toevoegen.

Op deze manier zie ik het dus niet lukken.
Wat wel zou kunnen: ergens een extra wrapper-div monteren, die de pagina-breedte binnen de perken houdt.
Maar vanwege de verlooptinten in de background (zowel horizontaal als verticaal!) blijft het met de huidige 100% liquid opmaak een uiterst complexe zaak om zoiets voor elkaar te krijgen. Of je zou een loeigroot html background-img moeten gaan gebruiken, maar dat lijkt me ook niet jofel.

Ik denk dat je dan het beste kunt overstappen naar een fixed-width opmaak, waarbij het gedeelte met de pagina-inhoud altijd op 990px breed staat (om er bij 1024*768px en groter mooi op te passen). Dat maakt het een stuk eenvoudiger! :)

PS: Ik vind de nieuwe stijl wel een stuk prettiger en rustiger om te zien dan de oude opmaak. > Dus ik zou inderdaad voor de fixed-width gaan, en de pagina daarmee opnieuw stylen.

PS-2: Het logo zou ik links zetten, en de slogan aan de rechterkant. Je leest van links naar rechts, en het logo is het eerste wat je moet zien: dat is voor de bezoeker het herkenningspunt van het bedrijf. Het logo staan niet voor niets bij 9 van de 10 websites links bovenaan!

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Maar de mogelijkheid om aan de rechter zijde dus gewoon simpel weg een witte balk te hebben of geen balk is dus geen optie ?
Daarvoor moet de hele lay worden herschreven ?

En in plaats van het liquid design krijgen we dan een fixed width design ...

Zal het logo is bespreken en kijken wat gewenst is.
Ook ik zelf zou het logo aan de linker zijde plaatsen echter is dit wat men gevraagd heeft.

Maar, wel weer een heel gedoe dus om 1 balk weg te krijgen. ..

Dan nog is het mij niet duidelijk hoe die afbeelding van de 2.5% breedte (images/card-bg-zijkanten.png)
Aan beide zijdes kan komen.
Deze enkel links hebben zou genoeg zijn ...

De balk is puur uiterlijk technisch storend van het nieuwe design ..

Thx voor de info !
 
Laatst bewerkt:
de mogelijkheid om aan de rechter zijde dus gewoon simpel weg een witte balk te hebben of geen balk is dus geen optie ?
Klik om te vergroten...
Een "geen balk" bestaat niet: er is altijd een achtergrond (image of kleur), en die achtergrond is de achtergrond van de html, als de paginabreedte 95% is. Een witte balk (dwz bijna-wit, de background-kleur van de body) zou kunnen, maar dan krijg je aan de linkerkant ook een strookje van 2,5% breed dat wit is ipv een vervolg van het oranje > niet zo mooi.

Daarvoor moet de hele lay worden herschreven ?
Klik om te vergroten...
Nou, ik zei "een extra wrapper-div monteren is een uiterst complexe zaak als je de verlooptinten horizontaal en verticaal wilt handhaven (en ook de liquid opzet wilt handhaven)".

Maar, wel weer een heel gedoe dus om 1 balk weg te krijgen...
Klik om te vergroten...
Yessir! ;)

Hoewel...
Ik zie nog wel een gaatje om het vrij eenvoudig te doen als je de verticale verlooptinten in het oranje laat vervallen.
Dat verloop in de card-bg-zijkanten.png is toch maar minimaal (zegt ook de Colour Contrast Analyser):
  • Het kleurverschil tussen boven en beneden is maar 7 op de 765, dwz. slechts ongeveer 1%.
  • Het helderheidsverschil tussen boven en beneden is maar 3 op de 255, dwz. ook maar ongeveer 1%.
  • Daarbij komt dat het een verloop is en geleidelijk gaat over een hoogte van 790px: je moet wel arendsogen hebben om te zien waar dan de kleur of helderheid met 1 eenheid verspringt!
Zou je de kleuren van boven en onder vlak naast elkaar zien, dan merk je (afhankelijk van het contrastvermogen en de kleurgevoeligheid van je ogen) misschien wel een kleurverschil:

oranje-verschil.png


  • In de linkerhelft zit in het midden een vierkantje met de donkerder oranje kleur; met mijn ogen kan ik al nauwelijks verschil zien.
  • In de rechterhelft heb ik een gradiënt-verloop op de twee kleuren losgelaten: dan zie ik al helemaal geen verschil.
  • Dan is dit een gradiënt die over 150px afstand loopt; over de 790px hoogte van het image gaat het nog geleidelijker = nog minder zichtbaar.
  • Conclusie: weglaten dit verloop! :) (en misschien was het ook wel niet de bedoeling, en was het kleurverschil per ongeluk in het origineel verdwaald)

Prettig gevolg
Als het verticale verloop er niet meer in hoeft te zitten, kan in de html een background-image opgenomen worden met aan de linkerkant het oranje, en aan de rechterkant het bijna-wit van de body.
Dit hoeft maar bv. 50px hoog te zijn, want kan verticaal worden herhaald met repeat-y.
Het kan 3000px breed gemaakt worden (card-bg-nw.png, kleiner dan 1kB), zodat het goed gaat tot beeldschermen van 3000px breed als je 'm horizontaal centreert (via de background-position)
Zo krijgen we aan de rechterkant van hoog tot laag een backgroundkleur die aansluit op die van de pagina.

Nu de oranje bovenstrook nog die moet doorlopen tot aan de rechter schermzijkant, want aan de rechterkant zit daar nog wit.

Bij nader inzien hoeft hier geen extra wrapper voor aangelegd te worden, het kan gewoon met een extra <div>.
Deze extra <div id="bovenstrook-bg"> krijgt de betreffende 174px hoogte, en een background-color gelijk aan die van de rechterkant van het bovenstrook-image.
De extra div komt direct na de <body>, en krijgt een absolute positie.
Als nu de <html> een {position: relative;} krijgt, kunnen met top, left en right de grenzen worden aangegeven tov de html. En ... dat wil ook zeggen ten opzichte van de windowbreedte die de bezoeker op dat moment voor zich heeft!
Zo kan deze div dus rechts over de html-background met de witte tint heen geplakt worden, wat dan bij elke resolutie goed gaat. Hij kan beginnen op de helft van het scherm vanaf links, want daar zit zeker nog de oranje backgroundkleur van de gewone bovenstrook-div (= dezelfde kleur):
Code: 
#bovenstrook-bg {
	position: absolute;
	top: 0;
	right: 0;
	left: 50%;
	height: 174px;
	background: #F2811C;
	}

Vanwege de absolute positie is nu de nieuwe strook ook over de oude heen geplakt. Maar daar valt een mouw aan te passen: de #bovenstrook-bg krijgt nog een {z-index: 0;} erbij, en de gewone #bovenstrook een {z-index: 1;} plus een {position: relative;} om die z-index van kracht te kunnen laten zijn.

Met nog hier en daar wat schoffelen in de css kom je dan bv. uit op deze;

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan