Tekst loopt achter absolute footer bij klein venster

Pagina: 1
Acties:
  • 158 views sinds 30-01-2008
  • Reageer

  • maarud
  • Registratie: Mei 2005
  • Laatst online: 10:41
Ik heb een eigen Joomla-template gemaakt, en omdat ik de footer tegen de statusbalk aan wilde, heb ik hem absolute gemaakt. Echter, als ik het venster heel erg verklein, loopt de tekst achter de footer door. Dit komt dus waarschijnlijk omdat hij absolute is, of niet? Dus mijn vraag is, hoe maak ik de pagina zó dat de footer gewoon altijd onder de tekst blijft?

Nu:

code:
1
2
3
4
5
6
lorem ipsum bla bla bla
bla bla bla
bla bla bla_________________
|Footer met copyright zooi |
|__________________________|
bla bla bla


Als het kan, zo:
code:
1
2
3
4
5
6
7
8
9
lorem ipsum bla bla bla
bla bla bla
bla bla bla
bla bla bla 
bla bla bla
bla bla bla
_______________
|Footer        |
|______________|

  • radem205
  • Registratie: Juni 2002
  • Laatst online: 02-02-2022
Ik weet niet of het werk, maar probeer is onderstaande toe te voegen tussen je content en footer divs:

<div style="clear: both;">
</div>

  • maarud
  • Registratie: Mei 2005
  • Laatst online: 10:41
ik heb bovenstaande op 5 plekken in de code geprobeerd, maar niets werkt...

dit is de code:
PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
</head>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="87%" height="61" background="templates/prefBL/images/header_bg.jpg"><img src="templates/prefBL/images/header.jpg" width="179" height="58" align="top" /></td>
    <td width="13%"><img src="templates/prefBL/images/toppic.gif" /></td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><?php mosPathWay(); ?></td>
    <td align="right"><?php echo mosCurrentDate(); ?></td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="2" valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top"><?php mosLoadModules ( 'left' ); ?></td>
    <td valign="top"><?php mosMainBody(); ?></td><div style="clear: both;">
</div>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="36" valign="bottom"></td>
  </tr>
</table>
<table width="100%" height="34" border="0" cellpadding="0" cellspacing="0" id="footer">
  <tr>
    <td height="34" valign="bottom" background="templates/prefBL/images/basebg.gif">Copyright 2007 Prefin Advies B.V. </td>
  </tr>
</table>
</body>
</html>

  • Janoz
  • Registratie: Oktober 2000
  • Laatst online: 14:25

Janoz

Moderator Devschuur®

!litemod

Waarom gebruik je overal tabellen met maar 1 cel? Wat is daar het nut van?

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'


  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 10-11 15:46

OkkE

CSS influencer :+

Absolute gepositioneerde elementen worden uit de 'flow' van je website gehaald. Het nadeel hier van is dat andere elementen niet "weten" dat je absolute element daar staat, en kunnen er dan ook niet omheen lopen.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


  • maarud
  • Registratie: Mei 2005
  • Laatst online: 10:41
Janoz schreef op maandag 15 januari 2007 @ 14:46:
Waarom gebruik je overal tabellen met maar 1 cel? Wat is daar het nut van?
weet ik niet, zo stond het in de tutorial en toen ik een tabel deed met een boel cellen zag de site er vaag uit... Dus doe ik het maar zo :p

maar gaat het niet dan, om toch de footer onderaan te laten staan?

  • maarud
  • Registratie: Mei 2005
  • Laatst online: 10:41
[kickje]

Verwijderd

#footer {clear: both;} zou moeten werken, moet je wel je absolute weg halen

  • maarud
  • Registratie: Mei 2005
  • Laatst online: 10:41
Verwijderd schreef op donderdag 18 januari 2007 @ 19:39:
#footer {clear: both;} zou moeten werken, moet je wel je absolute weg halen
maar;

werkt het helemaal-onderaan-zetten-van-de-footer dan nog wel?

* maarud checkt ff

edit: nee dus. De footer moet helemaal onderaan, en de tekst mag er niet achter lopen. Dus bij een korte pagina footer helemaal onderaan, en bij een langere pagina dat de footer gewoon meerekt. Eigenlijk kan dit dus niet met absolute; hoe kan het dan wel?

[ Voor 30% gewijzigd door maarud op 18-01-2007 21:51 ]


  • moozzuzz
  • Registratie: Januari 2005
  • Niet online
google op layoutgala. Is ook al heeeeel erg veel op dit forum gevraagd ivm 100% height.

  • maarud
  • Registratie: Mei 2005
  • Laatst online: 10:41
moozzuzz schreef op donderdag 18 januari 2007 @ 22:05:
google op layoutgala. Is ook al heeeeel erg veel op dit forum gevraagd ivm 100% height.
hmm geen enkele van deze heeft de footer helemaal onderaan tegen de statusbalk....

Verwijderd

Heb je niet een link naar de pagina. Overigens zijn table designs wel erg vorige eeuw ;)

Waarschijnlijk zoek je zoiets als dit:
http://www.cssplay.co.uk/layouts/bodyfix.html

  • Serenity
  • Registratie: Oktober 2005
  • Laatst online: 14-01-2023
Probeer footerStickAlt :)

  • maarud
  • Registratie: Mei 2005
  • Laatst online: 10:41
Het is een Joomla template dus de pagina is ubersimpel, 2/3/4 tabbelen met een klein php stukje code erin en klaar... Alleen die footer dus....

Maar zal bovenstande is proberen...

JAAAAA

gelukt met tut van The Man in Blue (serenity's link):

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
html
{
height: 100%;
}

body
{
height: 100%;
}

#nonFooter
{
position: relative;
min-height: 100%;
}

* html #nonFooter
{
height: 100%;
}

#footer
{
position: relative;
margin-top: -7.5em;
}

[ Voor 48% gewijzigd door maarud op 19-01-2007 15:23 ]

Pagina: 1