HTML / CSS float probleem - Softwareontwikkeling

donderdag 22 november 2012 10:45

Acties:

0 Henk 'm!

Topicstarter

Ik heb een probleem met het opmaken van de website. Ik werk met een mastertemplate (umbraco), waardoor ik de body in feite maar eenmalig kan definieren. Nu is het zo dat ik voor de homepage een andere 'kleur' gebruik dan voor textpages. Ik heb dit geprobeerd op te lossen door in de text template de content nog in een div te plaatsen en die 'outer' div een background mee te geven. Punt is dat de 2 inner div's beide een float hebben en hierdoor wordt de achtergrond van de buitenste niet meegenomen. Hoe kan ik dit oplossen. Ik las iets over overflow, maar dit blijkt bij mij niet te werken.

voorbeeld:

HTML:

<body>
  <div id='bg' style='background: white'>
     <div id='links' style='float: left;'></div>
     <div id='rechts' style='float: rechts;'></div>
  </div>
</body>

[ Voor 3% gewijzigd door rickvandermey op 22-11-2012 11:15 ]

donderdag 22 november 2012 10:47

Acties:

0 Henk 'm!

dimako_

Vogel

voorbeeld met een linkje (als het kan) zou mooier zijn, kunnen we goed kijken wat er mis is.

donderdag 22 november 2012 10:49

Acties:

0 Henk 'm!

rickvandermey

Topicstarter

Helaas 'kan' dit niet. Volgens mij komt het door de float, waardoor de div 'id=bg' geen hoogte of width gedefinieerd heeft.

donderdag 22 november 2012 10:51

Acties:

0 Henk 'm!

kaesve

ik gok dat een clearfix dit probleem zal oplossen. je vindt er genoeg over als je op die term googled

donderdag 22 november 2012 11:00

Acties:

0 Henk 'm!

MoietyMe

zij/haar

Cascading Stylesheet:

.bg:after{
content:" ";
display: block;
clear: both;
}

Al kun je dit natuurlijk ook gewoon oplossen door een class mee te geven aan de body en die een andere kleur geven. Is nog een nettere oplossing ook

donderdag 22 november 2012 11:07

Acties:

0 Henk 'm!

rickvandermey

Topicstarter

Die oplossing van de clearfix klinkt logisch, echter krijg ik het niet aan de praat, terwijl ik het op dezelfde manier heb staan.

Ik werk hier met een mastertemplate met een home_template en een text_template.
de body staat al gedefinieerd in de mastertemplate. En aangezien de templates voor meerdere websites gelden, moet ik het definieren in de css. Hier is niet goed over nagedacht toen deze template is opgezet.

donderdag 22 november 2012 11:20

Acties:

0 Henk 'm!

MoietyMe

zij/haar

Wat let je om de body uit de master template te halen en in de andere tempaltes te gooien?

donderdag 22 november 2012 11:28

Acties:

0 Henk 'm!

rickvandermey

Topicstarter

Ik wilde net mijn originele code tevoorschijn toveren, alleen ik merkte dat de server niet mijn html up wilde daten. Nu werkt de clearfix prima. Even de layout aanpassen en dan past alles netjes zoals het zou moeten.

even terugkomend op die master template. Ik denk dat de waarde van een master template verdwijnt als ik de body hier niet in terug zal laten komen. Nu kan ik de website eenvoudig dynamisch maken door gebruik te maken van umbraco.

Het zou misschien makkelijker zijn om bijvoorbeeld de body tag dynamisch te maken zodat je die per pagina kan opmaken. Maar voor nu is dit een prima oplossing

donderdag 22 november 2012 11:37

Acties:

0 Henk 'm!

MoietyMe

zij/haar

Je kan met wat simpele php of javascript makkelijk de naam van de pagina (index/text/contact/whatever) toeveogen als class aan de <body>.

donderdag 22 november 2012 11:55

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Good Fella schreef op donderdag 22 november 2012 @ 11:37:
Je kan met wat simpele php of javascript makkelijk de naam van de pagina (index/text/contact/whatever) toeveogen als class aan de <body>.

Dat is vies en werkt natuurlijk niet in een cms-omgeving waar klanten op ieder moment pagina-namen kunnen wijzigen of toevoegen. Tenzij je ook nog CSS wilt gaan genereren erbij en het nog viezer wilt maken

Wat is er mis met een simpele clearfix of overflow:hidden op de parent container?

donderdag 22 november 2012 12:12

Acties:

0 Henk 'm!

MoietyMe

zij/haar

Bosmonster schreef op donderdag 22 november 2012 @ 11:55:
[...]

Dat is vies en werkt natuurlijk niet in een cms-omgeving waar klanten op ieder moment pagina-namen kunnen wijzigen of toevoegen. Tenzij je ook nog CSS wilt gaan genereren erbij en het nog viezer wilt maken

Wat is er mis met een simpele clearfix of overflow:hidden op de parent container?

Bedoelde eerder index.php / contact.php / text.php, maar dan zonder ".php".

donderdag 22 november 2012 12:17

Acties:

0 Henk 'm!

rickvandermey

Topicstarter

Ja dat is logisch, alleen hoe doe je dat dan als er een nieuwsbericht pagina wordt aangemaakt door de gebruiker bijvoorbeeld. Deze is op jou manier nog niet gedefinieerd in de css.

donderdag 22 november 2012 13:39

Acties:

0 Henk 'm!

Flowmo

Dat is dus ook geen oplossing, maar een verplaatsing van het probleem. Wat je nodig hebt is wat Bosmonster aangeeft, een clearfix na die twee floatende divs, of overflow: hidden op de container.