Website resolutie nog niet goed.

Status
Niet open voor verdere reacties.
M

MiguelHagenaars

Nieuwe gebruiker
Lid geworden
11 feb 2013
Berichten
4
Beste mensen van Helpmij.nl.

Deze website: http://mijnmuziek.webatu.com/light-landing-page.html. De website heeft aan de linkerkant en aan de rechterkant witte vlakken. en bij de footer ook. Op mijn tablet geeft de website zich goed weer. In CSS is de header en de footer gewoon 100%. Dus waarschijnlijk ligt het aan de resolutie van het beeldscherm. Hoe pas ik dit aan? Het moet voor elk beeldscherm geschikt zijn.

Met vriendelijke groeten,
Miguel Hagenaars
 
als ik zo kijk zie ik aan de alle bij de kanten (links en rechts) witte vlaken heb je zelf de pagina gemaakt?

Ps. ik vind het ook wel mooi uit zien past goed bij de lay-out van de pagina
 
Hallo,

Fijn om te horen dat jullie hem zo ook mooi vinden! :thumb: Het is ook wel mooi zo maar het hoort officieel niet. De header en de footer etc hoort in de breedte over je hele
beeld te komen. Ik zou toch graag willen weten hoe ik dit kan veranderen! Want als ik voor iemand een PSD converteert naar HTML en ik zeg dat ik hem zo met de witte vlakken mooier vind (omdat ik stiekem niet weet hoe ik het moet veranderen), dat kan natuurlijk niet :d

Groetjes!
 
worldgameplayer zei:
als ik zo kijk zie ik aan de alle bij de kanten (links en rechts) witte vlaken heb je zelf de pagina gemaakt?

Ps. ik vind het ook wel mooi uit zien past goed bij de lay-out van de pagina
Klik om te vergroten...

Ik had hem van het internet gedownload om een beetje te leren hoe ik het kan converteren naar HTML ;)
 
Hoi Miguel,
... van het internet gedownload
Klik om te vergroten...
Maar met welke software heb je de PSD geconverteerd?
Ik ben bang dat dat programma z'n beloftes niet waar kan maken... :confused: :mad:

De verschijnselen zijn:
  • Het is een zg. fixed width opmaak geworden, met een vaste paginabreedte van 1200px: #page {width: 1200px}.
  • De achtergrondkleuren zijn geen css, maar images met ook een breedte van 1200px.
  • "In CSS is de header en de footer gewoon 100%." > Dat klopt, maar dat is dan 100% van die 1200px, een nooit breder als de resolutie hoger is dan 1200px breed.
  • Werkelijk alle afzonderlijke pagina-onderdelen hebben een aparte absolute positie gekregen, en hebben daardoor geen enkele flexibiliteit ten opzichte van elkaar. Bv. ga je meer tekst in een tekstblok zetten, dan valt de hele opmaak in duigen. Hetzelfde gebeurt als een bezoeker in zijn/haar browser de lettergrootte aanpast.
  • De css leent zich daardoor ook niet voor gebruik op meerdere pagina's.
  • In het stylesheet is er zo ongeveer voor elke regel afzonderlijke css aangemaakt:
Code: 
#focusingonuniquedesignand p,
#phone4522526333emailinfoc li,
#sitemap li,
#phone4522526333emailinfoc p,
#i2012companynameasdesignb p,
#i1822loremipsumdolorsitametcon li,
#h1 li,
#showcases p,
#takemetothetop p,
#learnmore li,
#learnmore p,
#i1819loremipsumdolorsitametcon p,
#takemetothetop li,
#navigations li,
#i1817meetourteam p,
#i1817meetourteam li,
#companynameasroadname9980 li,
#wearededicateddesignconsu li,
#curabiturmollissapiennonl li,
#i1819loremipsumdolorsitametcon li,
#focusingonuniquedesignand li,
#searchengineoptimizingana p,
#landingpagedesignconverti li,
#searchengineoptimizingana li,
#sitemap p,
#h1 p,
#showcases li,
#i2012companynameasdesignb li,
#wearededicateddesignconsu p,
#navigations p,
#curabiturmollissapiennonl p,
#companynameasroadname9980 p,
#i1822loremipsumdolorsitametcon p,
#landingpagedesignconverti p  {
   margin: 0px;
   color: #999999;
   text-decoration: none;
   font-variant: normal;
   letter-spacing: 0px;
   font-style: normal;
   font-weight: normal;
   font-family: MyriadPro-Regular, "Myriad Pro", sans-serif;
   padding-bottom: 0px;
   padding-top: 0px;
   padding-right: 0px;
   padding-left: 0px;
   text-indent: 0px;
}
...
enz.
  • En dat gaat zo nog een tijdje door. Een tijdje? 17 pagina-hoogtes scrollen aan css-code, want voor deze toch niet heel grote en heel ingewikkelde pagina heeft het stylesheet maar liefst ... 835 regels (!) css-code nodig. :rolleyes:
  • Daarnaast wordt er nog naar twee andere stylesheets verwezen, die niet bestaan en uitkomen op een error-pagina van de webhost > dat werkt dus niet.
  • De voorkeursinstelling: "MyriadPro-Regular" en de "Myriad Pro" zijn lettertypes die niet op elke computer staan (bij mij niet in elk geval).
  • Een {text-align: justify} kan er bij andere teksten resp. verschillende lettergroottes, resp. verschillende lettertypes heel anders uitzien, en vrij grote witte gaten in de tekst opleveren.

Samengevat:
Het is heel jammer, maar op deze manier krijg je nooit een goede webpagina die er cross-browser en voor alle resoluties goed uit ziet.
Het is een ontzettend starre pagina gewonden, want er is net gedaan alsof de PSD een papieren A4'tje is dat even op scherm gezet moet worden. Maar een A4 is altijd 21,1 x 29,7 cm, en een beeldscherm heeft geen vast formaat!
=======
Hoe pas ik dit aan?
Klik om te vergroten...
Door met css een eigen opmaak voor de verschillende pagina onderdelen te maken (= uithuilen en opnieuw beginnen):
  • Een header die 100% van de schermbreedte mag zijn.
  • Eénkleurige achtergrondvlakken niet als images nemen (die vragen ook nog veel downloadtijd) maar als background-colors: dan kunnen ze waar nodig mee-rekken en mee-krimpen met de inhoudvakken.
  • De content-breedte zou best een vaste breedte van 1200px kunnen zijn, maar daarbinnen kunnen containers gemaakt worden die als kolommen naast elkaar staan maar een flexibele hoogte hebben.
  • Daaronder kan een footer komen die weer over de volle beschikbare breedte komt.
Dus eigenlijk: wat meer in css verdiepen. Maar dat loont wel de moeite! :)

Met vriendelijke groet,
CSShunter

PS:
Hé poppelepee!
Daar vind ik me toch hier het origineel: rustymarnell.com/spectrum/index.html :d
Dat heeft wel een (simpele) css-opmaak zonder het arsenaal aan absolute posities: een pasklaar veel en veel kleiner stylesheet, keurig flexibel, en doet het prima op alle resoluties.
Er zit een middendeel in met een vaste breedte van ca. 980px: meer heb je voor deze site niet nodig; en dan past ie zonder L/R heen en weer te hoeven scrollen ook nog mooi op een resolutie van 1024*768px. Bij hogere resoluties staat ie netjes gecentreerd. En: kop- en footer-background altijd over de volle breedte.
Wat wil een mens nog meer? (behalve toestemming van de ontwerper om dit ontwerp te mogen gebruiken?)
 
Laatst bewerkt:
Hey csshunter,

Bedankt voor wat je allemaal hebt uitgezocht!
Ik zal hier nog even in verdiepen. Vanmiddag ga
Ik kijken of er überhaupt nog een andere converteren bestaat dan Sitegrinder 3.
Dan ga ik ook je teksten even goed doorlezen.

Groetjes
Miguel
 
Ah, Sitegrinder 3.
Ik heb even een paar van hun voorbeeld-sites bekeken, en ja hoor: kassa! :rolleyes:
Allemaal hetzelfde euvel: waanzinnig veel css-regels, veel absolute posities, en per pagina nog afzonderlijke css om dat allemaal weer goed te maken.

Hun reclame is: "SitGrinder 3 doesn't restrict you to rigid template layouts, page organization, or require you to know even the basics of HTML and CSS. Whatever you design, SiteGrinder 3 can convert your Photoshop web designs, without limitation, into fully functioning websites."
Ja-ja, nee-nee. ;)
Met de paar voorgebakken templates van Sitegrinder lijkt het heel wat, maar zodra je iets afwijkends zou willen doen, ben je zonder enige html- of css-kennis aan het toeval overgeleverd. Wat doorgaans geen garantie is voor een mooie goedwerkende site.
En dat voor maar vier betalingen van $ 100,- of $ 347,- ineens...
- Of je moet alsnog via html- en css-studie je deskundigheid opkrikken. Ik heb hun tutorials niet gelezen, maar het lijkt me stug dat daarmee alles zou kunnen. En de css-bende en per-pagina-code zal blijven bestaan, want zo zit hun systeem in elkaar.

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

Nieuwste berichten

Terug
Bovenaan Onderaan