14 berichten aan het bekijken - 1 tot 14 (van in totaal 14)
  • Q:
    Bijdrager
    Otto

    Faux colums willen niet werken

    Naar het voorbeeld van alisapart met de faux columns aan de slag gegaan, maar het wil niet. De structuur van m’n pagina is als volgt:

    < div wrapper>
    < div menu >
    < /div menu >
    < div contentwrapper>
    < div sidebar >
    < /div sidebar>
    < div maincontent >
    < /div maincontent >
    < /div contentwrapper >
    < /div wrapper >

    De code valideert gewoon en de structuur heb ik honderd maal nagekeken en lijkt echt te kloppen. In de CSS geef ik de body een egale achtergrond, ik gebruik de wrapper om de pagina te centreren en een vaste breedte te geven, ik geef de sidebar en maincontent divs een background: transparent en de contentwrapper een plaatje als achtergrond. Maar ipv dat plaatje, zie ik de egale achtergrond van m’n body door de sidebar en maincontent heen.

    De url klopt 100% zeker en de css tags ook, ik heb het idee dat ik iets doe dat niks kan. Lukt die faux column trick niet met een wrapper binnen een wrapper ofzo? Indien nodig zet ik de boel even online zodat julie wat code kunnen zien, maar wellicht dat het een bekend probleem is ofzo.

    Bijdrager
    hydro

    Wrom zijn je tags zo: < div class=”naam”>?
    Het moet <div class=”naam”> zijn.

    Bijdrager
    Otto

    Omdat ik niet wist of het forum dat wel zou trekken. De code klopt wel dacht ik, hier de link:

    http://detonation.wingsofdeath.nu/beta/probeersel/

    Bijdrager
    Joop Vos

    Klopt het pad naar je plaatje wel?

    Bijdrager
    Joop Vos

    … sowieso de aanhalingstekens eruit … url(“naamvanplaatje.png”) > url(naamvanplaatje.png)

    Bijdrager
    Otto

    Je kan zelf controleren dat het pad naar het plaatje klopt: ja dus. En de aanhalingstekens moeten volgens w3schools wel degelijk, al horen het idd single quotes te zijn. Maar dat maakt niet uit, dan zou ie iig de achtergrondkleur gewoon moeten trekken.

    Ik snap er echt niks van, doe het voor m’n gevoel exact zoals hier beschreven.

    Bijdrager
    Vleer

    Omdat je “bodywrapper” layer waar je code voor dat herhaalde achtergrond plaatje in staat maar 0px hoog is zie je niks, dit kan je zien als je de layer een border geeft. Om het op te lossen moet je bodywrapper een hoogte geven (bijv. height:100px );

    Bijdrager
    Otto

    Check, dat is het inderdaad, dank! Wel vreemd, je zou verwachten dat ie wordt opgespannen door de divs erbinnen. Wat is nu een mooie manier om dit op te lossen? height 100% werkt niet en height 10000px is niet echt elegant:)

    Bijdrager
    Vleer

    je zou gewoon de code in de body kunnen zetten.
    [edit]
    volgens mij ligt het aan het ‘float’ gedeelte, als je dat weghaald rekt de wrapper wel mee uit…
    ik weet niet gelijk hoe het anders op te lossen is. (het is volgensmij mogelijk om een layer 100% height te geven ik zou alleen niet weten hoe)

    Bijdrager
    tennapel

    Haal de float van de content af, die is niet nodig.

    Met een float haal je in feite het element uit de structuur, de flow, van de pagina, waardoor #bodywrapper een leeg element wordt. Als je de content gewoon statisch laat en met een margin voldoende ruimte geeft links voor het menu, dan werkt jouw fauxcolumn wel.

    Overigens kan je de achtegrond ook gewoon op de body zetten:
    [code:1:5767454502]
    body {
    background: #ccc url(news_bar.png) repeat-y 50% 0;
    }
    [/code:1:5767454502]

    Bijdrager
    Otto

    Inderdaad, de float verziekt het. Daar was ik zelf niet zou snel opgekomen, dank voor deze tip :lol: !

    Overigens kan je de achtegrond ook gewoon op de body zetten:

    In dit geval wel ja, maar ik probeer de structuur ongeveer hetzelfde te houden als in de site die ik bouw, waarin de content en andere background heeft dan de body. Nogmaals veel dank![/quote]

    Bijdrager
    Otto

    Hmm, blijft problemen geven. Als ik de float: right niet geef, snappen sommige browsers niet dat de ‘right’ div naast de left div moet komen te staan, en niet er onder:? . Nogal irritant, moet ik toch met absolute position aan de slag dan?

    Bijdrager
    tennapel

    Is dit nog steeds de juiste link:
    http://detonation.wingsofdeath.nu/beta/probeersel/
    ?

    Ik wil graag de code kunnen zien.
    Op welke browsers gaat het niet goed?
    Als een div onder een float komt, dan gebeurt dat meestal omdat de div te breed is om er nog naast te passen, heb je al gekeken naar de afmetingen van de div en de breedte van het browserscherm? Als je wat expirementeert met de breedte van de div gaat het dan wel goed in de browsers die nu problemen geven?

    Bijdrager
    Otto

    Hey, stom, ik had nog ergens een tabel staan die te breed was en de DIV oprekte zzz , dat was niet slim. Nu werkt het!

14 berichten aan het bekijken - 1 tot 14 (van in totaal 14)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.