CSS: Background-color voor h1,h2,h3,h4 tags stretchen

[Zakkenwasser]

Nou wil ik mijn pagina's layout verbeteren door mijn <h1> tags te voorzien van een background-color.

Echter heb ik hoverbox geinplenteerd voor mijn photo pagina en dat geeft zo de raarste effecten.
De achtergrond kleurkomt zelf door mijn hoverbox heen.


Ik ben er al wel achter gekomen dat het te maken heeft met de TAG <li>....</li>.
Maar zie echter geen bugfix / propertie om de gang van zaken in orde te brengen

voorbeeld: http://misterjey.com/index3.htm (foto sectie)

CSS:

• h1, h2, h3, h4 {
• background-color: #7e90b8;
• color: #353132;
• padding: 15px;
• margin: 15px;
• font-size: x-large;
• }
• ul, li {
• background-color: none;
• color: #FFF;
• font: normal 14px Verdana, Arial, Helvetica, sans-serif;

[harrald]

dat trucje met die grote afbeelding over die kleine kan je toch ook eenvoudig zelf maken?
loop je ook niet tegen andermans problemen aan.

[Zakkenwasser]

Float clearen did the trick

Ik heb in mijn CSS

h1,h2,h3,h4 {
clear: both;
}

toegepast en het is gefixed !

[ Voor 69% gewijzigd door Zakkenwasser op 13-06-2008 08:12 ]

[Zoefff]

Float clearen is een optie, maar in mijn optiek niet de beste. Je kan beter de overflow van de ul (in dit geval dus ul.hoverbox) op "auto" zetten. Op deze manier wordt de ul gewoon opgerekt door de floatende li's. Naast het feit dat de elementen die daarna komen nu netjes onderaan de ul staan, klopt een eventuele achtergrond kleur ook gewoon, evenals een margin (!) van een volgend element. Een top-margin op de h1/h2/h3/h4 die je nu cleart wordt namelijk gerekend vanaf de onderkant van de ul. Maar die heeft een hoogte van 0 pixels, dus je margin zal ook "niet kloppen".

Oftewel: overflow: auto / hidden op de ul

Ik heb dit gedrag van floats en hun container overigens nog nooit echt duidelijk beschreven kunnen vinden in de CSS specs, maar voor zover ik weet is het wel correct gedrag.

[ Voor 14% gewijzigd door Zoefff op 14-06-2008 23:33 ]

[curry684]

Je pagina is nu iig in Firefox 3 overigens een puinzooi....

edit:
in IE7 nog erger met die margins trouwens....

[ Voor 34% gewijzigd door curry684 op 14-06-2008 23:52 ]

[Dark Blue]

Mag ik vragen waarom het lijkt alsof je de hele fotogallerij ín een H element hebt staan ... zoals ik het nu zie... itt tot er boven, of eronder? H staat voor Heading, niet voor Hoofdstuk (...om alles in te droppen).

[curry684]

Dat verklaart ook de soepzooi wel... ik had er nog niet inhoudelijk semantisch naar gekeken

[Zoefff]

Dark Blue schreef op zondag 15 juni 2008 @ 00:31:
Mag ik vragen waarom het lijkt alsof je de hele fotogallerij ín een H element hebt staan ... zoals ik het nu zie... itt tot er boven, of eronder? H staat voor Heading, niet voor Hoofdstuk (...om alles in te droppen).

Dat is dus niet zo. Kijk anders eerst eens in de broncode

Het lijkt alleen zo omdat de ul geen hoogte krijgt omdat al zijn childs floaten. De hx onder de ul begint dus direct onder de ul (van 0px hoog), en de inhoud van de hx (de titeltekst) word naar beneden gedrukt door de floats. Daardoor lijkt het misschien dat de ul ín de hx staat, maar dat is niet zo. Zie mijn post hierboven voor de oplossing

[ Voor 31% gewijzigd door Zoefff op 15-06-2008 08:16 ]