Hulp nodig bij slicen van template.

[gekkethunder]

Hallo allemaal,

Ben sinds kort beetje gaan verdiepen in HTML & CSS en heb vlug een test template gemaakt in Photoshop om het slicen onder de knie te krijgen. Het lastigste is toch het menu waarvan ik totaal geen idee heb hoe deze moet gesneden moet worden.

hier mijn 1ste poging de site te slicen

En dit is de template: ( heb natuurlijk ook nog de PSD )

Alvast bedankt!​

 

[csshunter]

Hoi gekkethunder,
Hij is helemaal zo gek nog niet als begin! :thumb:
Opmerkingen:

• Ik zou de totale breedte van wat op het scherm moet komen niet breder maken dan 990px (is nu: ca. 1200px). Dan is de pagina zonder links-rechts te hoeven scrollen ook nog goed op een resolutie van 1024x768px, die nog vrij veel gebruikt wordt. (er moet ook breedte-ruimte af voor de rechter scrollbar)
• Het lego-manneke rechtsonder kan bv. wat kleiner, en een stukje naar links, dat scheelt al twee keer wat ie naar links gaat (bij een mooi gecentreerde pagina), en dan kan zoveel mogelijk van de breedte van de content-kolommen gehandhaafd worden.
• De menu-items kunnen gewoon in de achtergrond-afbeelding met menu en logo komen, ze hoeven niet apart. In de html/css maak je de links van de items tot transparante rechthoekjes, er hoeft geen apart img in.
• Ook het losse logo kan gemist worden: kan eveneens een transparant link-vierkantje worden.
• Voor het hoveren over de menu-items kan je een "css-hover" gaan gebruiken. Zie voor principe, theorie en praktijk: deze draad op het forum. De hover-plaatjes kunnen ook hier onder de logo/menu-afbeelding komen.
• Ik mis nog het middenstukje met het onder&boven taps toelopende scheidingsstreepje. Dat kan een heel smal kolommetje worden tussen de linker- en rechterkolom van de inhoud.
• Verder zou ik véél meer contrast in de menu-onderwerpen gebruiken: het valt nauwelijks op dat er wat in de menu-strook staat, laat staan dat je het een beetje vlot kunt lezen.

Dat was 'm!
Met vriendelijke groet,
CSShunter

 

[gekkethunder]

Hoi gekkethunder,
Hij is helemaal zo gek nog niet als begin! :thumb:
Opmerkingen:

• Ik zou de totale breedte van wat op het scherm moet komen niet breder maken dan 990px (is nu: ca. 1200px). Dan is de pagina zonder links-rechts te hoeven scrollen ook nog goed op een resolutie van 1024x768px, die nog vrij veel gebruikt wordt. (er moet ook breedte-ruimte af voor de rechter scrollbar)
• Het lego-manneke rechtsonder kan bv. wat kleiner, en een stukje naar links, dat scheelt al twee keer wat ie naar links gaat (bij een mooi gecentreerde pagina), en dan kan zoveel mogelijk van de breedte van de content-kolommen gehandhaafd worden.
• De menu-items kunnen gewoon in de achtergrond-afbeelding met menu en logo komen, ze hoeven niet apart. In de html/css maak je de links van de items tot transparante rechthoekjes, er hoeft geen apart img in.
• Ook het losse logo kan gemist worden: kan eveneens een transparant link-vierkantje worden.
• Voor het hoveren over de menu-items kan je een "css-hover" gaan gebruiken. Zie voor principe, theorie en praktijk: deze draad op het forum. De hover-plaatjes kunnen ook hier onder de logo/menu-afbeelding komen.
• Ik mis nog het middenstukje met het onder&boven taps toelopende scheidingsstreepje. Dat kan een heel smal kolommetje worden tussen de linker- en rechterkolom van de inhoud.
• Verder zou ik véél meer contrast in de menu-onderwerpen gebruiken: het valt nauwelijks op dat er wat in de menu-strook staat, laat staan dat je het een beetje vlot kunt lezen.

Dat was 'm!
Met vriendelijke groet,
CSShunter

Beste CSShunter,

Echt hartstikke bedankt voor je reply, ik zal gaan uitzoeken hoe deze transparante links moet invoegen. ik dacht zelf dat het niet kon omdat het logo en menu items verschillende Grootes zijn.

Ook bedankt voor je tip voor de MAX breedte van de website, hier heb ik helemaal niet bij stilgestaan.

Het enigste stukje wat ik niet helemaal snap is:

Ik mis nog het middenstukje met het onder&boven taps toelopende scheidingsstreepje. Dat kan een heel smal kolommetje worden tussen de linker- en rechterkolom van de inhoud.

Hartstikke bedankt voor het beantwoorden van mijn vraag zo vroeg nog

 

[csshunter]

ik zal gaan uitzoeken hoe je deze transparante links moet invoegen. Ik dacht zelf dat het niet kon omdat het logo en menu items verschillende Groottes zijn.

Bijvoorbeeld een <ul> van maken en alle list-items behalve het logo een margin-top geven.

Het enige stukje wat ik niet helemaal snap is: / Ik mis nog het middenstukje ... /

Ik bedoel dit:

De achtergrond van alles is het zich verticaal repeterende horizontale strookje, met het breedste deel van het tapse lijntje:

Omdat het middenlijntje taps toeloopt, en je ook nog niet weet hoe hoog de kolommen gaan worden (afhankelijk van de hoeveelheid tekst op een pagina), maak je een linkerkolom (float:left; zonder achtergrond), een smalle middenkolom (float:left; met het bovenste deel van het tapse lijntje eroverheen geplakt), en dan als laatste de rechterkolom (float:left; weer zonder background).

Tenslotte zet je onder het geheel een verse <div> (met een clear:left; om altijd onder de hoogste kolom te komen), waarin het onderste deel van het tapse lijntje geplakt zit.
De truc: deze <div> trek je omhoog met een negatieve margin-top, die precies zo hoog is als het tapse onderstukje.

Nu kan inhoud van de pagina groeien, en blijven de tapse stukjes mooi boven- en onderaan. Het middelste deel van het tapse lijntje groeit mooi mee (via de algemene background).
Zie je het voor je? Plakken, knippen en schuiven!

Met vriendelijke groet,
CSShunter