[css]probleem met "faux columns" layout - Softwareontwikkeling

donderdag 7 april 2005 14:38

Acties:

Topicstarter

Ik ben bezig met een site om de layout om te zetten naar een css gebaseerde layout. Dit gaat redelijk. Vrijwel de gehele site is gedaan. Het enige probleem vormt de linkerkolom. Die is in werkelijkheid niet zo lang. Daar zit een herhalende achtergrondafbeelding in zoals het faux-columns idee is. Dit gaat echter fout als ik het content-gedeelte geen vaste breedte geef of ik het venster verklein. Dan komt de content door de bruine balk heen.

Hoe kan ik er voor zorgen dat de content-div altijd naast de bruine balk blijft, en dus niet over die achtergrond-afbeelding komt?

De tijdelijke site is hier te vinden: http://detijd.djluc.nl
Het artikel over Faux Columns: http://www.alistapart.com/articles/fauxcolumns/

[ Voor 6% gewijzigd door djluc op 07-04-2005 14:39 ]

donderdag 7 april 2005 14:45

Acties:

Verwijderd

Ik vermoed dat je float: left gebruikt. Het is dan logisch dat de content box naar onderen schiet als er geen ruimte meer over is. Oplossing, geen float gebruiken

donderdag 7 april 2005 14:48

Acties:

Sappie

De Parasitaire Capaciteit!

Ik zie wel wat het probleem is, maar je site (de html / css) is echt niet te overzien, zonder dat het me teveel tijd kost

(je css is wel echt een oerwoud imho)

zou je misschien een simpelere test-case kunnen maken waarin jouw probleem goed tot uitdrukking komt?

edit:
misschien is hetgeen quist noemt al je oplossing idd

[ Voor 20% gewijzigd door Sappie op 07-04-2005 14:51 ]

Specs | Audioscrobbler

donderdag 7 april 2005 15:09

Acties:

djluc

Topicstarter

Verwijderd schreef op donderdag 07 april 2005 @ 14:45:
Ik vermoed dat je float: left gebruikt. Het is dan logisch dat de content box naar onderen schiet als er geen ruimte meer over is. Oplossing, geen float gebruiken

Hoe krijg ik een dergelijke layout dan wel voor elkaar? Moet ik bijvoorbeeld absoluut gaan positioneren?

Overigens is mijn CSS toch vrij overzichtelijk? Er staat overal in het commentaar precies boven wat het is? Heb je wel de juiste css gepakt? Het CMS genereerd namelijk zelf ook wat css. Mijn file staat hier:
http://detijd.djluc.nl/fi...ijd/template/res/core.css

Ik heb even het gerelateerde gedeelte hieronder gepost. Ik heb dus fonts/achtergrondkleuren e.d. verwijderd!

Cascading Stylesheet:

#layout {
    position: relative;
    width: 100%;
    height: auto;
    /*---------------------HIER ZIE JE DE LINKSE BRUINE BALK-----------------------------------*/
    background-image: url(../img/backgr_brown.jpg);
    background-repeat: repeat-y;
}

#infobar {
    position: relative;
    height: 45px;
}

#menu1 {
    position: relative;
    float: left;
    width: 200px;
}
#content {
    position: relative;
    float: left;
    
    width: 750px;
}

#bottomline {
    position: relative;
    float: left;
    width: 100%;
}

donderdag 7 april 2005 15:27

Acties:

Sappie

De Parasitaire Capaciteit!

Die css ziet er goed uit ja.. wist ik alleen veel in welke css file ik dat moest zoeken

die css die je CMS uitpoept is wel een flinke rommel imho. Tevens vind ik de html ook niet echt netjes. (bijv style tag in je body tag.. dat hoort in de head).

verder hier een klein stukje html / css dat je probleem duidelijk maakt:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
        <title>title</title>
        <style type="text/css">
            body, html {margin: 0; padding: 0; width: 100%; }
            
            #layout {
                position: relative;
                width: 100%;
                height: auto;
                /*---------------------HIER ZIE JE DE LINKSE BRUINE BALK-----------------------------------*/
                background-image: url(../img/backgr_brown.jpg);
                background-repeat: repeat-y;
            }
            
            #infobar {
                position: relative;
                height: 45px;
                height: 10px;
                background: brown;
            }
            
            #menu1 {
                position: relative;
                float: left;
                width: 200px;
                height: 300px;
                background: red;
            }
            
            #content {
                position: relative;
                float: left;
                height: 500px;
                background: blue;
                width: 750px;
            }
            
            #bottomline {
                position: relative;
                float: left;
                width: 100%;
                height: 10px;
                background: brown;
            }
            
            
        </style>
    </head>
    <body>
        <div id="layout">
            <div id="infobar"></div>
            <div id="menu1"></div>
            <div id="content"></div>
            <div id="bottomline"></div>
        </div>
    </body>
</html>

en tevens één oplossing:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
        <title>title</title>
        <style type="text/css">
            body, html {margin: 0; padding: 0; width: 100%; }
            
            #layout {
                position: relative;
                width: 100%;
                height: auto;
                /*---------------------HIER ZIE JE DE LINKSE BRUINE BALK-----------------------------------*/
                background-image: url(../img/backgr_brown.jpg);
                background-repeat: repeat-y;
            }
            
            #infobar {
                position: relative;
                height: 45px;
                height: 10px;
                background: brown;
            }
            
            #menu1 {
                position: absolute;
                top: 10px; //hoogte van je infobar
                left: 0;
                width: 200px;
                height: 300px;
                background: red;
            }
            
            #content {
                position: relative;
                top: 0;
                left: 200px;
                height: 500px;
                background: blue;
                width: 750px;
            }
            
            #bottomline {
                position: relative;
                width: 100%;
                height: 10px;
                background: brown;
            }
            
            
        </style>
    </head>
    <body>
        <div id="layout">
            <div id="infobar"></div>
            <div id="menu1"></div>
            <div id="content"></div>
            <div id="bottomline"></div>
        </div>
    </body>
</html>

Specs | Audioscrobbler

donderdag 7 april 2005 16:02

Acties:

djluc

Topicstarter

Ik heb het geimplementeerd en het werkt perfect! Ik heb vrijwel overal floats gebruikt. Dit is eigenlijk dus niet zo handig?

die css die je CMS uitpoept is wel een flinke rommel imho

Ik ben bezig om de source van het CMS aan te passen zodat deze nutteloze css niet meer verstuurd wordt maar hier kan ik helaas nog niets aan doen.

Tevens vind ik de html ook niet echt netjes. (bijv style tag in je body tag.. dat hoort in de head).

Geheel mee eens. Ik heb dit echt als een noodoplossing toegevoegd. Ik moet dit eigenlijk netjes in de template van de homepage toevoegen. Helaas was daar nog geen tijd voor. Bedankt voor je hulp!

donderdag 7 april 2005 16:17

Acties:

Sappie

De Parasitaire Capaciteit!

Floats zijn in veel gevallen erg handig. Echter hebben ze ook een aantal eigenaardigheden, ook wanneer ze gebruikt worden voor de layout van een site. Verder staat hier omschreven wat er op jouw pagina gebeurde: http://www.w3schools.com/css/pr_class_float.asp.

Een andere oplossing was geweest de #layout een vaste breedte te geven (breedte menu1 + breedte content) en de div #infobar en #bottomline buiten de div #layout te plaatsen.

Specs | Audioscrobbler

donderdag 7 april 2005 20:44

Acties:

AkaXakA

Just Kidding...

Sappie schreef op donderdag 07 april 2005 @ 16:17: Floats zijn in veel gevallen erg handig. Echter hebben ze ook een aantal eigenaardigheden

Wat de topic starter moet onhouden is dat position: en float: niet aan een element tegelijk toegewezen moeten worden.

Ook is het belangrijk om te weten dat (zoals de oplossing voorsteld) een position:absolute binnen een position:relative niet meer de viewport als referentie gebruikt maar het "wrapper" element (die position:relative heeft gekregen dus).

http://www.akaxaka.tk/ - "Knowledge is power. Power corrupts. Study hard, be evil." - 4 Jaar GoT en nog steeds niet evil: er moet een verband zijn...

donderdag 7 april 2005 21:04

Acties:

djluc

Topicstarter

Bedankt voor de tips! ik begin het nu meer te begrijpen. Als je leest over position: absolute kwam het meer op me over dat het dan altijd geheel uit de flow gehaald werd. Als ik het goed begrijp is een float dus vooral handig als je bijvoorbeeld een afbeelding in een alina rechts in de tekst wilt zetten?

donderdag 7 april 2005 21:13

Acties:

AkaXakA

Just Kidding...

Toevallig kwam een zelfde soort probleem op noscope vandaag (waarin ik het even wat handiger, maar wel in het engels uitleg):
http://www.noscope.com/jo...-for-absolute-positioning

DJ Luc: Float blijft inderdaad overzichtelijker als je binnen je content dingen links of rechts wil hebben. Position is vooral handig voor het grote werk. Dat wil natuurlijk niet zeggen dat ze allebij vice versa gebruikt kunnen worden. Zo gebruikt Eris (van http://www.erisfree.com/) floats op een fantastiche manier voor de layout (beweeg je sidebar maar heen en weer).

http://www.akaxaka.tk/ - "Knowledge is power. Power corrupts. Study hard, be evil." - 4 Jaar GoT en nog steeds niet evil: er moet een verband zijn...

donderdag 7 april 2005 21:14

Acties:

Sappie

De Parasitaire Capaciteit!

AkaXakA schreef op donderdag 07 april 2005 @ 20:44:
Ook is het belangrijk om te weten dat (zoals de oplossing voorsteld) een position:absolute binnen een position:relative niet meer de viewport als referentie gebruikt maar het "wrapper" element (die position:relative heeft gekregen dus).

een absoluut gepositioneerd element wordt gepositioneerd tov zijn relatief óf absoluut gepositioneerde parent. Wanneer je daarom iets absoluut wil positioneren tov een static gepositioneerd (volgens de normale flow) element dan moet je in dat element expliciet aangeven dat het relatief gepositioneerd is. (het verschil tussen een static en relatief gepositioneerd element is dat je voor een relatief gepositioneerd element nog een "top" en "left" op kan geven)

djluc schreef op donderdag 07 april 2005 @ 21:04:
Als ik het goed begrijp is een float dus vooral handig als je bijvoorbeeld een afbeelding in een alina rechts in de tekst wilt zetten?

Daarvoor is er iig geen andere mooie manier en zijn floats natuurlijk bij uitstek geschikt. Verder kan het ook handig zijn voor layouts die beschikken over 2 (of meer) kolommen met flexibele hoogte.
Ongetwijfeld is het nog in veel meer gevallen nuttig.

[ Voor 7% gewijzigd door Sappie op 07-04-2005 21:16 ]

Specs | Audioscrobbler