Website ontwerp met brede balk boven en onder

Status
Niet open voor verdere reacties.
damnsharp

damnsharp

Terugkerende gebruiker
Lid geworden
6 jan 2012
Berichten
1.414
Goedenavond mede helpmij bezoekers!
Ik weet niet wat de slimste manier is om onderstaand ontwerp aan te pakken.
website_bars.jpg
En dan vooral de structuur en hoe ik de donkergrijze balk boven over het gehele breedte van de browser en groene balk beneden zet.
Wat ik dacht. Ik zou een body kunnen maken met background (de donkergrijze balk boven).
Dan in die body een container (sidebar left, content top, content midden, content bottom)
Dan een footer met in die footer de groene balk.

body:
height: 200px;
background: none repeat scroll 0 0 #58585a;

footer:
height: 100px;
background: none repeat scroll 0 0 #88ba2a;

Volgens mij kom ik dan wel in de knoop met midden gedeelte wat grijs is. Waar definieer ik dat.
En er is een lijn links en rechts die vind ik het ook wat lastig maken.

Of is het slimmer een andere structuur aan te houden? Tips zijn welkom. Na html/css geprogrammeerd te hebben ga ik hem omzetten naar WordPress website.
 
Op de body toepassen zal niet handig zijn, helemaal niet als je daar een height van 200px aan mee gaat geven ;)

Ik zou een aparte div aanmaken

HTML: 
<body>
<div class="top-background"></div>

<footer>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</footer>
</body>
Code: 
.top-background { position: absolute; top: 0px; width: 100%; height: 200px; background: #58585a; }

footer { height: 100px; width: 100% background: #88ba2a;  }

.container { width: 960px; margin: 0px auto; }
 
Laatst bewerkt:
Het stortkoker-model (1)

Mmm, probleem wordt dan waarschijnlijk de 100% breedte: als de pagina een breedte heeft van 990px (of iets anders), dan komt er een horizontale scrollbar bij kleinere schermbreedtes, maar dan houdt de 100% brede grijze strook & het footer-groen op als je met die scrollbar naar rechts gaat.
  • Zie onderaan (bij resolutie 800x600px) in deze post.

Ik zit te denken aan zoiets:
HTML: 
<body>
<div class="middenkolom">
	[navigatie en inhoud]
</div>

<div id="footer">
	<div class="middenkolom">
		[footer-text]
	</div>
</div>
</body>
met:
  • html: lichtgrijze background
  • body: donkergrijze strook van 200px hoog als background-img bovenaan (repeat-x).
  • .middenkolom: {width: 990px; margin: 0 auto; border-left: 1px solid black; border-right: 1px solid black;} plus óók de donkergrijze strook background-img bovenaan (repeat-x). *)
  • #footer: groene kleur (gaat weer over volle breedte).
  • #footer .middenkolom { background-image: none;} (of eigen bg).

Met vriendelijke groet,
CSShunter
___________
*) Toch nog nodig voor smalle schermen.
 
Laatst bewerkt:
@Tha Devil dank je voor snelle reactie! Ja dat op de body had ik eens gezien bij een site maar was wel met plaatje. Inderdaad een height is dan niet slim :o
Hey, zie nét CSShunter met wel dat body als plaatje en dan een oplossing voor midden kolom. Grappig. Ik ga ze morgenvroeg meteen allebei uitproberen want vind dat wel leuk. Ja, hier kan ik wat mee.
Kei tof, dank voor de hulp. Ik laat mijn vorderingen zien :)

Oh Tha Devil, zal nu meteen een like bij HelpMij FB geven ;)
 
Laatst bewerkt:
Nou, werkt als een speer. Snap dit nu eindelijk ook. Vond het wat lastig en vooral met ook die lijnen met die middenkolom class. En dan div die dan precies na de body begint en stopt voor de footer en dan weer na die footer de middenkolom class start. Maar ik begrijp het nu. Omdat de body een plaatje (1px breed) over de gehele breedte krijgt dat je dan daarna de middenkolom lijntjes links en rechts geeft en dan even moet stoppen anders zitten de lijntjes bij de footer helemaal links en rechts en niet in het midden links en rechts, geen mens die het ziet ;)
 
Het stortkoker-model (2)

Ja, je begint met alles aan achtergronden altijd beeldvullend op scherm te zetten.
De middenkolom-class is als het ware de stortkoker waar alles van de middenkolom in zit (de pagina-breedte, de zijkant-bordertjes en het centreren van de pagina).
Vervolgens komt de footer, die een eigen beeldvullende L/R-background moet krijgen (wordt over de lichtgrijze pagina-bg heen geplakt) en daarom opnieuw begint zonder de middenkolom-class.
Maar de inhoud van de footer moet weer wel in het verlengde van de stortkoker komen, dus de stortkoker wordt dan binnen de footer nog een keer opgevraagd.

stortkoker.png


  • Je kan het ook doen met een eigen id voor de stortkoker tot aan de footer en een eigen id voor de footer-inhoud, maar dan kan je niet tegelijkertijd van beiden bv. de breedte veranderen zodat ze blijven aansluiten op elkaar. Met de middenkolom-class gaat het in één moeite door.
  • En verder kan je natuurlijk ook nog een id aan ze meegeven voor de andere dingen die er in moeten komen en kunnen verschillen (paddings, font-eigenschappen, enz.). In het inhoud-gedeelte zullen vanzelf nieuwe div's komen voor het menu, de kolommen, enz. enz.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Kijk, met dat stortkoker verhaal wordt het nóg duidelijker. Dank je CSShunter. :cool:
 
Hoi damnsharp,
Nog eentje, die ik vergeten was. Je zegt:
... een plaatje (1px breed) over de gehele breedte ...
Klik om te vergroten...
Bij een schermbreedte van 1280px zet je dus de browser en de processor aan het werk om 1280 keer dat plaatje naast elkaar te plaatsen.
Maar!
Maak je het plaatje 100px breed, dan zal dat nauwelijks extra kB's aan download vragen, maar hoeft de browser/processor maar 12,8 keer het plaatje naast elkaar te zetten.
Gaat waarschijnlijk iets sneller!
  • Ook voor de vervolgpagina's, als het plaatje al binnen is.
  • Als het een eenkleurig img betreft dat ook in de hoogte herhaald kan worden, dan geldt hetzelfde voor de hoogte; en het effect is kwadratisch.
  • Ga maar na: een 100*100px afbeelding bv. hoeft op 1280*1024px resolutie maar 12,5 x 10,2 keer gerenderd te worden (= ca. 130 keer), tegen een 1*1px image: 1280 x 1024 = ca. 1,3 miljoen keer. :shocked:

Met vriendelijke groet,
CSShunter
___________
Bestandsgrootte van een 1*1px lichtgrijze background-kleur ...: 0,15kB (deze: lichtgrijs1x1.png).
Bestandsgrootte van een 100*100px lichtgrijze background-kleur: 0,17kB (deze: lichtgrijs100x100.png).


  • Het verschil in download-tijd is dan ook nihil. Verklaring: bij dit soort mini-images zit een erg groot deel van de download-tijd in de overhead (naam, bestandstype, aanmaakdatum, e.d.) van het datapakketje, en zijn de benodigde data voor de pixel-beschijving naar verhouding erg klein. En de overhead is voor een 1*1 en een 100*100 image net zo groot (nou ja, er hoeven vier nullen minder in te staan; dat zet geen zoden aan de dijk), terwijl met PNG-compressie de data-grootte van het 100x100 image aanzienlijk wordt beperkt zonder op de kwaliteit in te leveren.
 
Jeetje... wonderlijk! En ik maar denken dat ik het slim aanpak, ha ha! Maar goed, ik ga de plaatjes voortaan 1280x breed maken dan hoeft de processor maar 1x nadenken... nee grapje. Ik snap je punt.
Conclusie lijkt mij dan: voor snelheid is groter beter maar wel afhankelijk van de bestandsgrootte dan weer.
 
Ja, als het heel erg omvangrijke images zijn (bv. schermhoog en met gradiënten e.d. er in) kan de bestandsgrootte weer een rol gaan spelen: die kan dan het downloaden van andere ingrediënten van de pagina ophouden omdat er maar een aantal downloads tegelijk kunnen plaatsvinden.

En ook nog op een andere manier: data-pakketjes hebben altijd een standaard-omvang. Als er geen data genoeg zijn voor een pakketje, is de rest lege ruimte. Afhankelijk van de grootte van het img en het aantal ervoor nodige pakketjes kan dan de loze ruimte in het laatste pakketje toenemen: totdat de grootte zo groot is dat er weer een heel pakketje gevuld kan worden en de loze ruimte van het laatste pakketje weer klein is.
Ideaal is uiteraard als een img precies in (een veelvoud van) de pakketgrootte past.

Maar dit soort splinterwerk zal met onze snelle verbindingen alleen iets uitmaken als er heel veel images zijn (en dat moet je toch al niet doen). En qua dataverkeer zal het alleen substantiële winst opleveren bij loeigrote websites met tig simultane bezoekers,
  • Voor ambities in de richting van loeigrote sites met tig simultane bezoekers kan je je dus in dergelijke technieken verdiepen. :)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Herstel: het blijkt nog nodig om de middenkolom bovenaan toch ook het bovenste background-img mee te geven om aan de rechterkant geen gat te krijgen als je 'm naar rechts scrollend bekijkt op een smaller scherm dan de paginabreedte!
Is aangevuld in post #3 hierboven.

Verder staat intussen in een ander topic een praktijkvoorbeeld (hier te vinden), waarbij binnen de stortkoker ook nog wat andere dingen worden uitgehaald om er een mooie doorlopende diagonale streep in te krijgen die resolutie- en hoogte-bestendig is (en browser-bestendig).

Toevallig een verwante vraag, en prettig om te kunnen kruisverwijzen! :)

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

Nieuwste berichten

Terug
Bovenaan Onderaan