Sidebar mee rekken met content div

Status
Niet open voor verdere reacties.
T

Tommiiee

Gebruiker
Lid geworden
6 feb 2010
Berichten
93
Hallo allemaal,

Ik heb een vrij ongewone website indeling gemaakt, en deze kun je hier vinden:

http://kam.webencoding.nl/c5

Het probleem springt meteen in het oog: de sidebar aan de linkerkant loopt niet mee met de content. Ik heb alle trucs die ik ken al uitgehaald: niets biedt oplossing.

Het probleem is dat de sidebar geen achtergrond heeft die ge-repeat kan worden. Inmiddels heb ik een achtergrond die dat wél kan, en die wil ik onder de sidebar van 700px laten repeaten. De bedoeling is dus dat ik nog een div'je onder de bestaande sidebar wil die zijn background repeat, en moet stretchen met de content-div die ernaast loopt.

Wie kan mij hiermee helpen. Ik ben er al uren / dagen mee bezig en ik krijg het gewoon niet voor elkaar.

Mvg,
Tom
 
Al geprobeerd?
  • #to-center geen hoogte geven, wel het repeatende img (met repeat-y) er in plaatsen,
  • als laatste in de #secondwrap (dus na de #contentwrap) een nieuwe <div class="clearB"> zetten met .clearB {clear:both;}.
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
csshunter zei:
Al geprobeerd?
  • #to-center geen hoogte geven, wel het repeatende img (met repeat-y) er in plaatsen,
  • als laatste in de #secondwrap (dus na de #contentwrap) een nieuwe <div class="clearB"> zetten met clearB {clear:both;}.
Met vriendelijke groet,
CSShunter
Klik om te vergroten...
Hallo, bedankt voor het meedenken!

Wat bedoel je met 'wel het repeatende img er in plaatsen' ? Als ik dat definieer in de #to-center komt het toch niet op de gewenste plaats?

Ik zal even verduidelijken wat ik bedoel.

Ik heb nu een sidebar, met deze achtergrond afbeelding: Klik

So far so good.

Echter, wanneer de pagina langer is dan die afbeelding, moet de sidebar uitgebreid worden met deze afbeelding, die onbeperkt kan repeaten: Klik

Omdat je een div niet 2 afbeeldingen als achtergrond kunt geven, heb ik dus een extra div nodig, onder de bestaande sidebar div. De nieuw div moet dan meerekken met de 'secondwrap' div..

Als extra vraag: wat doet een 'clear' div precies?

Bedankt voor de hulp tot dusver!

Mvg,
Tom
 
Niet afvragen of het wel werkt: eerst proberen! ;) Had je dat al gedaan?
Ik wel. :p
Omdat je een div niet 2 afbeeldingen als achtergrond kunt geven, heb ik dus een extra div nodig, onder de bestaande sidebar div. De nieuw div moet dan meerekken met de 'secondwrap' div..
Klik om te vergroten...
Toelichting:
Het klopt dat het repeterende background-img onder de laag van de sidebar moet komen. Maar die laag is er al: dat is de <div> waar de sidebar in zit. Want elk element dat in een ander element zit, zit (in het algemeen) in de stapeling automatisch een laagje hoger.
  • Net zoals een background-img in de <body> onder alle elementen in de <body> doorloopt. De <h1> zit bv. in de body-div, is dus hoger in laag, en de tekst van de <h1> komt boven de achtergrond-afbeelding van de <body> te staan.
  • Dit stapelen gaat op dezelfde manier met elementen die elk een background-img hebben.
  • Hier loopt in feite de herhalende background onder de hele #sidebar door - maar dat zie je niet, want de #sidebar met de kop-afbeelding zit binnen het vorige element, en wordt er dus overheen geplakt.
  • Als je het background-img even tijdelijk uit de #sidebar haalt, zie je het.
De <div> waar de sidebar in zit is de #secondwrap, en de <div> waar de #secondwrap in zit is de #to-center. Het verlengstuk kan in alle twee geplaatst worden; ik heb gekozen voor de #to-center, omdat die het eerst in de html staat en de minste risico's geeft. Maar met de #secondwrap kan het ook.

Wat je in feite doet, is een gordijntje ophangen achter de sidebar en het rechterdeel.
Dat loopt dan door tot helemaal onderaan de pagina, óók als de sidebar eerder ophoudt.
Een breed grodijn zou ook onder de hele content staan, want die zit in dezelfde <div>. Maar het gordijntje zit alleen aan de linkerkant en is net zo breed als de sidebar (de rechterhelft van de background is transparant), dus het lijkt alsof de sidebar doorloopt maar het is niet zo! Het gordijn is onafhankelijk van de hoogte sidebar.
Daarom wordt dit ook wel de "faux columns" techniek genoemd: nep-kolommen.

De "clear" <div> op het eind is ervoor bedoeld om aan de achtergronden door te geven dat daar de pagina ophoudt. Dat heeft te maken met de elementen erboven, die een "float" hebben. Wil je onder een float komen, dan moet die float gecleard (vrijgemaakt) worden.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Wauw, super! Moet eerlijk toegeven dat ik het inderdaad nog niet geprobeerd had, maar dat kwam door een compleet verkeerde redenatie van mij. Nu je het zo uitlegt denk ik van "Natuurlijk!". Laat de voorbeelden aub nog even staan, dan ga ik er morgenmiddag nog even naar kijken.

Echt super bedankt voor de geweldige uitleg!

Mvg,
Tom
 
De kop van de #sidebar er even tijdelijk uit, zodat je ziet dat 't repeterende img er echt onder zit:
Of het gordijn even naar de rechterkant van het raam geschoven:
Alles kan met CSS! :)
 
Bedankt, ik heb het geïntegreerd.

Nu rest mij nog één vraagje: als je nu naar de website zou gaan, zie je dat ik in de sidebar even belachelijk veel tekst heb geplaatst voor test doeleinden. Zoals je kunt zien loopt de tekst door buiten de div.. Nu is het dus eigenlijk de bedoeling dat de content meerekt met de sidebar.. Ik krijg dit echter niet voor elkaar..

Zou je me nog eens kunnen helpen? :)

Mvg,
Tom
 
Make over Fase 1

Hoi Tom,
Ja, dan zal er nog ergens een clearing div bij moeten komen. Maar waar?
Eerlijk gezegd kreeg ik een beetje de hik van de talloze <div>'s in de pagina, waarvan ook een ongebreideld aantal voorzien zijn van een float. Kan dat niet eenvoudiger? Want in principe is er een simpele indeling: een kop, een sidebar en het hoofdgedeelte. Vervolgens is het hoofdgedeelte opgebouwd uit een menu, een content-deel en een footer. Dat is alles:

driedeling.png

Dus ik heb maar eens de stoute schoenen aangetrokken:
  • Alles wat tussen <body> en </body> stond, er uit gesloopt. :)
  • Alles aan styles er uit gesloopt. :)
  • Alle scripts er uit gesloopt. :)
Zo, en nu eens kijken waar we op uit komen!

Fase 1: <head> en <body>
Voorafgaand maken we het Doctype even xhtml-Strict, dat de laatste standaarden volgt en de beste garantie is voor een goed cross-browser resultaat.
  • In de <head> komt als eerste de <meta> met de charset-declaratie: die bepaalt hoe de lettertekens van alle html-code geïnterpreteerd moeten worden, en dat moet dus bovenaan.
  • De css-styles zitten meteen in het document, dan horen ze bij deze versie. Zie de Golden Rule 4 en 5
  • De <html> krijgt een hoogte van 100% en een padding-bottom van 1px. Hiermee wordt voor Firefox en Chrome een verticale scrollbar (aan de rechterkant) geforceerd, zodat het midden van een gecentreerde pagina niet heen en weer gaat springen als van een korte pagina (anders zonder scrollbar) naar een lange pagina (met scrollbar) wordt gegaan.
  • De <body> krijgt meteen zelf de paginabreedte, en een {margin: 0 auto;} om altijd gecentreerd te staan. Met een breedte van 1024pc past de pagina net niet zonder horizontale scrollbar op een 1024*768px resolutie, want de scrollbar-ruimte aan de rechterkant moet daar nog van af. Een veilige breedte is 990px.
  • Als background-img kan nu meteen de doorlopende sidebar-afbeelding er in, want die kan later "overgeplakt" worden met de andere afbeeldingen in <div>'s binnen de <body>. De sidebar-afbeelding is nu altijd even hoog als wat er in de pagina (de <body>) staat.
  • Om 'n te kunnen zien, krijgt de <body> een tijdelijke minimum-hoogte.
  • Het rechterrandje is ook net zo hoog als de pagina, en kan dus ook meteen in de <body>. Voor het mooi is ook een subtiel linkerrandje net naast de sidebar-afbeelding toegevoegd.
  • De font-size is op 100.1% gezet, waarmee de lettergroottes voor alle browsers genormaliseerd worden. Later wordt daarvan afgetapt met font-sizes in em's, die van 0 tot 1 lopen (1 = 100% van de body-lettergrootte).
Direct testen met de html-validator en de css-validator! (Golden Rule 3)
(Wordt vervolgd)
 
Make over Fase 2

Fase 2: de #header
Deze bestaat uit twee delen, de afbeelding links en het logo dat gecentreerd aan de rechterkant moet komen.
  • De #header heeft een hoogte van 200px, en de linker-afbeelding van 221px breed kan er in als background-img.
  • Als nu de #header een padding-left (inwendige opvulling) van ook 221px krijgt, kan het overblijvende deel met {text-align:center;} gecentreerd worden.
  • Dan kan het logo als voorgrond-img in de html worden gezet, en via de css een bovenruimte {margin-top: 35px;} krijgen.
Om te zien waar de #header ophoudt, is er tijdelijk een onderrandje aan gezet.
 
Laatst bewerkt:
Make over Fase 3

Fase 3: de #sidebar (1)
Nu kan de #sidebar er in gehangen worden, links drijvend, zodat later het rechterblok er naast kan komen.
  • De #sidebar wordt 221px breed, dan past het kop-gedeelte van de #sidebar er precies in als background-img.
  • De #sidebar krijgt tijdelijk even een flink grote minimum-hoogte mee (900px, hoger dan de pagina!), om te zien wat er gebeurt.
 
Laatst bewerkt:
Make over Fase 4

Fase 4: de #sidebar (2)
De #sidebar loopt niet door tot onderaan de pagina! Ook het rechterrandje van de <body> eindigt voortijdig.
  • Dat kan schielijk verholpen worden door een <div> met "clear" te plaatsen vlak voor het body einde </body>.
Nu zit er dus een denkbeeldig transparant lijntje onder de #sidebar, over de volle breedte, en moet de <body> zich dus wel oprekken tot de hoogte van de #sidebar.
En we blijven systematisch checken met de validators! ;)
 
Laatst bewerkt:
Make over Fase 5

Fase 5: de #sidebar (3)
Nu kan de #sidebar gevuld worden met echte tekst.
  • De afstanden van de test tot de linker- en rechterzijkant hoeven niet gerealiseerd te worden met een "binnen-<div>", maar kunnen geregeld worden met een padding-left en een padding-right van de #sidebar zelf.
  • Paddings worden altijd opgeteld bij de breedte van een element (zie hier), dus van de breedte van 221px moet nu dus de som van de linker- en rechterpadding worden afgetrokken om weer goed uit te komen.
  • Met een padding-top wordt het begin van de tekst opgeschoven tot onder het zwaardenplaatje.
  • We maken van de gelegenheid gebruik om de <h2> en de <p> te standaardiseren op {margin: 0; padding: 0;}. Later kan dat per element zo nodig bijgesteld worden.
De tijdelijke hoogte van de #sidebar kan er nu weer uit.
 
Laatst bewerkt:
Make over Fase 6

Fase 6: de #main
Hiermee hoeft eigenlijk weinig te gebeuren.
  • Alleen een margin-left van 211px (zo breed als de #sidebar) is voldoende.
  • Dat zorgt ervoor dat de tekst niet onder de #sidebar gaat lopen als de inhoud van de #main hoger is dan de inhoud van de #sidebar.
  • De #main hoeft niet ge-float te worden, want neemt vanzelf de overblijvende ruimte naast de #sidebar in.
Verder dient de #main er alleen voor om de er in te stoppen onderdelen #menu, #content en #footer te bundelen en als één geheel te behandelen.
 
Laatst bewerkt:
Make over Fase 7

Fase 7: het #menu (1)
Nu kan de <div> voor het #menu er in gezet worden:
  • Het #menu krijgt alvast het onder- en bovenrandje.
  • Het tijdelijke onderrandje van de #header kan nu geschrapt worden.
De validators doen het nog steeds. ;)
 
Laatst bewerkt:
Make over Fase 8

Fase 8: het #menu (2)
Nu komt het binnenwerk van het #menu aan de beurt, want dat lijkt nog nergens op.
  • De bullets worden er af gehaald met ul {list-style: none;}.
  • De items worden naast elkaar gezet met li {float: left;}.
  • De <ul> krijgt nog een ul {overflow: hidden;}, dat is een trucje om na afloop onder de floats uit te komen (net zoals een clearing div, wat ook had gekund).
  • De links <a> in het menu krijgen een breedte die in em's is opgegeven, zodat ze meegroeien als de bezoeker z'n lettergrootte anders instelt.
Zie verder de broncode.
 
Laatst bewerkt:
Make over Fase 9

Fase 9: de #content
Hiermee hoeft op dit moment weinig te gebeuren.
  • Alleen een padding, die ervoor zorgt dat er wat kantlijn links er rechts is voor de onderdelen binnen de #content, en de #content niet pal onder het #menu begint.
Later kunnen voor onderdelen van de #content nog extra styles worden toegevoegd.
 
Laatst bewerkt:
Make over Fase 10

Fase 10: #content gevuld
Nu kan de echte voorlopige content er in geplaatst worden: recht voor z'n raap.
Voor het kunnen draaien van de YouTube-video is het javascript swfobject.js nodig, dat in de <head> is gezet.
 
Make over Fase 11

Fase 11: de #footer
Met de #footer is ook weinig aan de hand: een randje boven en onder, wat afstand aan de bovenkant, en wat inwendige styling.
 
Make over Fase 12

Fase 12: opschonen.
De tijdelijke hoogte van de <body> kan er uit. Er gebeuren geen rampen. ;)
 
Laatst bewerkt:
Make over Fase 13

Fase 13: hoogte-check (1)
Controle voor als er weinig in de #sidebar staat: hele inhoud van de #sidebar geleegd. Het gaat goed.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan