DIV / CSS probleem met floating & kolommen

Status
Niet open voor verdere reacties.
L

Laura21

Gebruiker
Lid geworden
19 aug 2007
Berichten
27
Hallo,

Ik ben bezig met het realiseren van een website voor een kennis, het meeste is af, maar nu loop ik tegen een, volgens mij, vrij makkelijk probleem aan, wat ik met geen mogelijkheid opgelost krijg. Ik heb een vriendin er al naar laten kijken, maar ook zonder succes.

Ik heb een website, opgebouwd in DIVS met een container waarin zit: header, menu, submenu (linkerkolom), content, image (rechterkolom) en een footer.

Echter rekt de achtergrondkleur van de linker- en rechterkolommen niet mee met de lengte van de contentkolom.
Ik wil dus gewoon dat de inhoud van alle kolommen even lang is en dus aansluiten op de footer.

Ik heb voor de verschillende CSS elementen al height: 100% gezet en Google afgestruind, maar niets werkt..
Dus ik heb het idee dat er iets anders is dat roet in het eten gooit, maar ik zie het niet meer.
Iemand een idee? (Ik heb mijn CSS & HTML van mijn index.html toegevoegd)
Alvast superbedankt!

Laura

Bekijk bijlage html.txt

Bekijk bijlage css.txt
 
Hoi Laura,
Ja, met achtergrond-kleuren in de twee kolommen lukt het niet, want de kleur loopt dan niet door onder de kortste kolom.
Voor het laten doorlopen van de kleur moet je één niveau hoger zitten in de html: de laag "onder" de twee kolommen.
Hier in dit topic staan twee mogelijke oplossingen:


  • de gebruikelijke "faux columns" methode met een image (uitleg zie bv. hier),
  • en een manier om het zonder image te doen, met een hele brede border(-kleur) en een negatieve margin-left.

Met de "faux columns" methode kan je in één of twee kolommen ook een verlooptint voor de achtergrond zetten, op de andere manier kan dat niet.

Met vriendelijke groet,
CSShunter
 
Ik ben weer vanaf 0 begonnen met de CSS opbouwen en met behulp van de links is het gelukt :) Bedankt!
 
Hooi Laura,
Mooi! :thumb:
Ik heb nog 2 tips:
  1. De breedte van de site stond in je voorlopige versie op 800px. Ik denk dat je die gerust op 990px kunt zetten, dan is de site zonder L/R-scrollbar te bezichtigen op een resolutie van 1024*768px. En bezoekers met bredere schermen hoeven dan niet zo'n grote hoeveelheid onbenutte ruimte te zien. - Zo langzamerhand zal niemand meer op 800*600px werken, denk ik.
  2. Als alles toch overnieuw gaat, kan je er dan niet meteen een xhtml-Strict Doctype van maken? Dat is de modernste versie (nou ja, ook al weer 12 jaar oud): die volgt de standaarden, en geeft de beste cross-browser resultaten. Ik zou daarmee beginnen; als een pagina onverhoopt toch Transitional nodig mocht hebben, kan je dat altijd naderhand omzetten, maar dan is de rest al zoveel mogelijk standaard-conform. *)

Met vriendelijke groet,
CSShunter
____________
*)
Omzetting van xhtml-Strict naar het toegeeflijker xhtml-Transitorial (waar achterhaalde codering is toegestaan) geeft geen pijn. Omgekeerd wel!
Zie verder ook de Richtlijn "R-pd.2.4" van de Webrichtlijnen voor kwaliteitswebsites.
 
Dank, dank voor de tips! :) Ik heb beide meteen aangepast, daar had je inderdaad wel gelijk in. Het Doctype let ik eigenlijk nooit zo op, dus vandaar.
Gelukkig veranderde er qua (foutieve) opmaak (bijna) niets na die handeling, dus dat scheelt. Alleen heb ik nu tussen mijn header-image en de menubalk een witte rand van 3 pixels hoog die nergens naar te herleiden is.. Enig idee waar dat vandaan zou kunnen komen?
 
Hoi Laura,
Als het img in een <p> staat, heeft het img dan {vertical-align:top;} ?
Resp.: heb je de menu-<ul> en de menu-<li>'s gereset op {margin: 0; padding: 0;} ? Of in elk geval een {margin-top:0} ?
 
IMG staat niet in een <p>, maar los tussen de DIV. En voor de gehele stylesheet geldt margin & padding 0, tenzij anders aangegeven. Daarom snap ik ook niet waar ze opeens vandaan komen..
 
O zo...
Heb je dan de verse html en css; of nog beter: een link naar een online testpagina?
 
Ha, 't is toch een missende {vertical-align: top;} voor het img.
Ik was even kwijt dat die ook voor een <div> werkt.
Toelichting:
Images houden als inline-element rekening met wat er verder in een regel staat (of: kan staan). Daarbij moet rekening gehouden worden met tekst ernaast. Tekst kan neerhaaltjes bij de letters hebben, bv. de p of q. Die neerhaaltjes-ruimte wordt in html-Strict toegevoegd onder het img, zit niet in de margins of paddings, en is nergens te traceren!

PS:
Voor een snelle diagnose van dit soort dingen, als nog niet aan boord: Firebug !
 
Super! :) Dat het in die kleine dingetjes kan zitten! En Firebug had ik toevallig van de week geïnstalleerd, maar ben er nog niet helemaal in thuis, had hem namelijk wel geopend om te kijken..
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan