[CSS/Joomla] Website 100height geven.

[MrVegeta]

Ik ben nu al een poosje bezig met het overzetten van een Joomla template naar mijn eigen layout. Ik heb hier al veel van geleerd en heb bijna alles zelf opgelost maar nu heb ik toch één probleem waar ik niet uit kom.

De footer en content krijg ik maar niet tegen de bodem aan. Nu komt het tot het einde van de content. Nu dacht ik dat ik het bijna het opgelost maar nog steeds niet helemaal.

Met de FF addon Firebug heb ik dus uitgezocht in welke DIV de content staan, dat is dus.

Cascading Stylesheet:

#area {
    padding: 0;
    height: 300px;
}

Die 300px heb ik er ingezet om te kijken wat het doet, nu komt dus de achtergrond van de content tot 300px. Nu moet ik alleen nog weten hoe ik die dus tot onder aan de pagina krijg.

Het gaat om deze pagina trouwens,
http://www.no-illusions.nl/dda

[ Voor 4% gewijzigd door MrVegeta op 15-12-2008 12:34 ]

[BtM909]

En je height gewoon op auto zetten

[Noork]

Kun je geen fixed footer gebruiken. Zoiets: http://limpid.nl/lab/css/fixed/header-and-footer

[mcDavid]

Je wilt dus dat de footer gefixeerd wordt aan de onderkant van het browservenster, ongeacht de lengte van je content?

Daarvoor bestaat position:fixed;. Dat zou moeten werken. Alleen IE6 snapt dat niet dus daarvoor zou je dan een javascript-hack moeten gebruiken.

[MrVegeta]

BtM909 schreef op maandag 15 december 2008 @ 13:00:
En je height gewoon op auto zetten

Dat heb ik natuurlijk al geprobeerd, dan komt ie gewoon nog steeds tot de content en niet tot de bodem van de pagina.

mcDavid schreef op maandag 15 december 2008 @ 13:25:
Je wilt dus dat de footer gefixeerd wordt aan de onderkant van het browservenster, ongeacht de lengte van je content?

Daarvoor bestaat position:fixed;. Dat zou moeten werken. Alleen IE6 snapt dat niet dus daarvoor zou je dan een javascript-hack moeten gebruiken.

Ik wil dat de footer aan de onderkant van de content blijft en dat de content dus altijd 100% is. Hoe het nu is is dat de footer altijd aan de onderkant van de browser zit maar daardoor dus over de content valt.

Het gaat volgens mij gewoon om de div "area". Als ik hier in zet, height:300px; dan wordt de content achtergrond tot 300px getrokken, maar deze wil ik dus tot de onderkant van de browser hebben.

[ Voor 76% gewijzigd door MrVegeta op 15-12-2008 14:13 ]

[Alfredo]

Ik volg even niet. Wil je dat je footer altijd getoond wordt, aan de onderkant van je browser? Of wil je dat hij eenmalig getoond wordt, onderaan de content?

[MrVegeta]

Hm excuses voor de misschien wat wazige uitleg maar ik word er een beetje simpel van.

Het gaat erom dat ook al staat er geen content in de pagina dat de footer toch tegen de onderkant van de pagina is geplaatst. Maar ook dat de div waar de content in staat tegen de bovenkant van de footer zit. Die content div moet dus de ruimte tussen de "top menu" en de "footer" div's opvullen.

http://matthewjamestaylor...at-the-bottom-of-the-page dit is een mooie uitleg maar in combinatie met een Joomla template is het voor mij gewoon te lastig om te weten welke div's ik moet edditen.

[ Voor 22% gewijzigd door MrVegeta op 15-12-2008 14:39 ]

[Verwijderd]

code:

 clear:both;

Toevoegen aan je footer div?

[Mei]

mcDavid schreef op maandag 15 december 2008 @ 13:25:
Daarvoor bestaat position:fixed;. Dat zou moeten werken. Alleen IE6 snapt dat niet dus daarvoor zou je dan een javascript-hack moeten gebruiken.

Je moet de TS geen verkeerde technieken aanleren ;-) JS is voor extra functionaliteit, niet om CSS-problemen te fiksen.

[Alfredo]

MrVegeta schreef op maandag 15 december 2008 @ 14:38:
Hm excuses voor de misschien wat wazige uitleg maar ik word er een beetje simpel van.

Het gaat erom dat ook al staat er geen content in de pagina dat de footer toch tegen de onderkant van de pagina is geplaatst. Maar ook dat de div waar de content in staat tegen de bovenkant van de footer zit. Die content div moet dus de ruimte tussen de "top menu" en de "footer" div's opvullen.

http://matthewjamestaylor...at-the-bottom-of-the-page dit is een mooie uitleg maar in combinatie met een Joomla template is het voor mij gewoon te lastig om te weten welke div's ik moet edditen.

Volgens die methode:

code:

body {
height: 100%;
}

.center {
position: relative;
min-height: 100%;
}

#footer {
position: absolute;
bottom: 0;
}

[Verwijderd]

Ik gebruik bijna altijd deze opbouw:

HTML:

<div id="container">
    <div id="top-menu"><jdoc:include type="modules" name="top-menu" style="xhtml" /></div>
    <div id="content"><jdoc:include type="component" style="xhtml" /></div>
    <br clear="all" /> <-- nodig als je van plan bent voor de footer floating divs te gaan gebruiken..
    <div id="footer">
          Tekst
    </div>
</div>

Cascading Stylesheet:

* {
    padding: 0;
    margin: 0;
}

html,body {
    height: 100%;
}

#container {
    position: relative;
    margin: 0 auto;
    width: ???px; /* Breedte Container */
    
    height: auto !important;
    height: 100%;

    min-height: 100%;
}

#content {
    height: 100%;
}

#footer {
    position: absolute;
    height: ??px; /* hoogte */
    bottom: 0;
    width: ???px; /* Zelfde breedte als container */
}

Heeft een footer die mee gaat met de content.

EDIT: Extra uitleg

[ Voor 6% gewijzigd door Verwijderd op 15-12-2008 15:45 ]

[MrVegeta]

Als ik zelf de website qua layout kon opbouwen had ik het al lang voor elkaar, het probleem is juist dat ik het met een Joomla template moet doen waardoor ik niet weet welke div's ik moet editten om dat dus te bereiken.

//edit. Ik denk dat ik maar wat in de index.php pagina ga snoeien en wat div's er uit haal die geen nut meer hebben.

[ Voor 21% gewijzigd door MrVegeta op 15-12-2008 16:26 ]

[Alfredo]

Je moet helemaal niets doen aan die divs, enkel de CSS moet aangepast worden.

[MrVegeta]

Er staan in de index.php zoveel div's die niet worden gebruikt en dat geld ook voor de css, dus voor een beetje nette code moeten ze er sowieso uit.

Dus ik moet nog steeds weten welke div ik moet hebben, ik post hier even een lange html code. Misschien dat jullie het dan kunnen zien welke div ik moet editten in de CSS.

HTML:

<div class="center" align="center">
    
    <div id="wrapper">
    
        <div id="wrapper_r">
        
            <div id="header">
                    <div id="header_r">
                        <div id="logo"></div>
                        <jdoc:include type="modules" name="top" />
                    </div>
            </div>
            
            <div id="tabmenu">
                        <table cellpadding="0" cellspacing="0" class="pill">
                            <tr>
                                <td class="pill_m">
                                <div id="pillmenu">
                                    <jdoc:include type="modules" name="user3" />
                                </div>
                                </td>
                            </tr>
                            </table>
                        </div>

            <div id="search">
                <jdoc:include type="modules" name="user4" />
            </div>

            <div class="clr"></div>

            <div id="whitebox">
            
                <div id="whitebox_m">
                
                    <div id="area">
                                    <jdoc:include type="message" />

                        <div id="leftcolumn">
                        <?php if($this->countModules('left')) : ?>
                            <jdoc:include type="modules" name="left" style="rounded" />
                        <?php endif; ?>
                        </div>

                        <?php if($this->countModules('left')) : ?>
                        <div id="maincolumn">
                        <?php else: ?>
                        <div id="maincolumn_full">
                        <?php endif; ?>
                            <?php if($this->countModules('user1 or user2')) : ?>
                            
                                <table class="nopad user1user2">
                                    <tr valign="top">
                                        <?php if($this->countModules('user1')) : ?>
                                            <td>
                                                <jdoc:include type="modules" name="user1" style="xhtml" />
                                            </td>
                                        <?php endif; ?>
                                        <?php if($this->countModules('user1 and user2')) : ?>
                                            <td class="greyline">&nbsp;</td>
                                        <?php endif; ?>
                                        <?php if($this->countModules('user2')) : ?>
                                            <td>
                                                <jdoc:include type="modules" name="user2" style="xhtml" />
                                            </td>
                                        <?php endif; ?>
                                    </tr>
                                </table>

                                <div id="maindivider"></div>
                                
                            <?php endif; ?>

                            <table class="nopad">
                                <tr valign="top">
                                    <td>
                                        <jdoc:include type="component" />
                                        <jdoc:include type="modules" name="footer" style="xhtml"/>
                                    </td>
                                    <?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
                                        <td class="greyline">&nbsp;</td>
                                        <td width="170">
                                            <jdoc:include type="modules" name="right" style="xhtml"/>
                                        </td>
                                    <?php endif; ?>
                                </tr>
                            </table>
                        
                        <div class="clr"></div>
                        
                    </div>
                    
                    <div class="clr"></div>
                    
                </div>
                
            </div>
            
        </div>

        <div id="footer">
        
                <div id="footer_r">
                    <p id="syndicate">
                        <jdoc:include type="modules" name="syndicate" />
                    </p>
                    <p id="power_by">
                        <?php echo JText::_('Powered by') ?> <a href="http://www.joomla.org">Joomla!</a>.
                        <?php echo JText::_('Valid') ?> <a href="http://validator.w3.org/check/referer">XHTML</a> <?php echo JText::_('and') ?> <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>.
                    </p>
                </div>
        </div>
        
    </div>
    
</div>

[ Voor 92% gewijzigd door MrVegeta op 15-12-2008 17:20 ]

[mcDavid]

Mei schreef op maandag 15 december 2008 @ 15:29:
[...]

Je moet de TS geen verkeerde technieken aanleren ;-) JS is voor extra functionaliteit, niet om CSS-problemen te fiksen.

Ik zie inmiddels dat dit niet is wat TS in gedachten heeft, maar als je een betere manier weet om objecten fixed te positioneren in IE6, zonder javascript en zonder frames, dan wil ik het graag horen!

[mad_max234]

Je moet volgens mijn de -content div hebben, #ja-content in mijn geval, maar dat ligt aan je template, welke template gebruik je?

Geef even link naar je template instal file, dan zal ik je even zeggen welke div je moet aanpassen.

Edit/
Ja het is inderdaad de #.....-content div (puntjes zullen andere letters bevatten, of je moet ook JA_Purity template gebruiken ), je kan dan je content elke hoogte meegeven die je wilt, heb het net even getest met firefox, ie niet getest overigens.

[ Voor 35% gewijzigd door mad_max234 op 15-12-2008 23:47 ]

[MrVegeta]

Hey Max, ik gebruik de "rhuk_milkyway" template.

Die content div's waar je het over hebt, waar zitten die in of wat is daar de inhoud van? Ik heb ze (volgens mij) niet.

[ Voor 55% gewijzigd door MrVegeta op 15-12-2008 23:55 ]

[mad_max234]

Vergeet maar wat ik net zij, klopt niet, jou template heeft hele andere div, dacht dat -content standaard was en dat alleen het eerste stuk anders was, maar ik ga even voor je kijken.

[mad_max234]

Heb net even geprobeerd en als ik #area aanpas en de height op 3000px zet dan zakt de footer gewoon netjes mee naar beneden.

Is dat niet wat je wilde?

Edit

300px zal niet gaan want je content is veel groter dan 300px, dus dat kan vreemde problemen geven denk ik, maar als je een groter getal neemt dan je contant hoog is dan moet het gewoon goed gaan.

[ Voor 40% gewijzigd door mad_max234 op 16-12-2008 00:14 ]

[MrVegeta]

Ja dat komt inderdaad behoorlijk in de buurt van wat ik wil, maar ik kan aan die div geen absolute waarde geven omdat de content dus altijd verandert. Wat ik wil is dat ook al is er geen content in de pagina dat de footer tegen de bodem aan zit omdat de "area" div tot de bodem zit.

Ik kan de "area" div wel op height:3000px zetten maar dan zit er natuurlijk altijd een scrollbar in de pagina etc.

[ Voor 17% gewijzigd door MrVegeta op 16-12-2008 00:26 ]

[mad_max234]

Maar dan is auto toch goed, dan gaat hij toch gewoon mee met de content, ik snap niet helemaal wat je anders zou willen.

En zodra je een groter menu heb aan de linker of rechterkant dan zal pagina sowieso altijd minimaal die lengte hebben, je kan daar ook mee spelen dus onder het menu wat meer vrij ruimte maken, zodat de hele pagina zich schaalt naar die grote en sowieso niet kleiner word al heb je er geen content staat.

Maar wat wil je nu bereiken, dat footer altijd een minimale hoogte heeft ongeacht de contente, en zodra de content groter word dat de footer mee gaat?

Edit/

Doe dit eens, is dat wat je zoekt?

template.css (regel (189)

Cascading Stylesheet:

#leftcolumn {
float:left;
height:2000px;
margin:0;
padding:0;
width:20%;
}

Nu zal je footer gewoon meegaan met je content als deze groter word.

[ Voor 18% gewijzigd door mad_max234 op 16-12-2008 01:17 ]

[Mei]

mcDavid schreef op maandag 15 december 2008 @ 17:34:
[...]


Ik zie inmiddels dat dit niet is wat TS in gedachten heeft, maar als je een betere manier weet om objecten fixed te positioneren in IE6, zonder javascript en zonder frames, dan wil ik het graag horen!

Next time, use Google, my friend

[mcDavid]

MrVegeta schreef op dinsdag 16 december 2008 @ 00:25:
Ja dat komt inderdaad behoorlijk in de buurt van wat ik wil, maar ik kan aan die div geen absolute waarde geven omdat de content dus altijd verandert. Wat ik wil is dat ook al is er geen content in de pagina dat de footer tegen de bodem aan zit omdat de "area" div tot de bodem zit.

Ik kan de "area" div wel op height:3000px zetten maar dan zit er natuurlijk altijd een scrollbar in de pagina etc.

Als ik jou was zou ik de footer dan met position:absolute uitlijnen op de onderkant van de wrapper, en de container min-height:100% maken. Maar again:ook dit werkt niet zomaar in IE6.

Mei schreef op dinsdag 16 december 2008 @ 11:36:
[...]
Next time, use Google, my friend

tnx, kan wel eens handig zijn!

[mad_max234]

Dit is de oplossing voor zijn template.

template.css (regel (189)

Cascading Stylesheet:

#leftcolumn {
float:left;
height:2000px;
margin:0;
padding:0;
width:20%;
}

Nu kan hij de pagina zolang maken als hij wilt en de pagina en footer zullen gewoon mee naar beneden gaan als de pagina grotere content bevat.

height:2000px; hoogte even aanpassen naar eigen smaak.