Tekst loopt achter absolute footer bij klein venster - Softwareontwikkeling

zondag 14 januari 2007 21:18

Acties:

Topicstarter

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:

lorem ipsum bla bla bla
bla bla bla
bla bla bla_________________
|Footer met copyright zooi |
|__________________________|
bla bla bla

Als het kan, zo:

code:

lorem ipsum bla bla bla
bla bla bla
bla bla bla
bla bla bla 
bla bla bla
bla bla bla
_______________
|Footer        |
|______________|

zondag 14 januari 2007 21:58

Acties:

radem205

Ik weet niet of het werk, maar probeer is onderstaande toe te voegen tussen je content en footer divs:

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

maandag 15 januari 2007 14:42

Acties:

maarud

Topicstarter

ik heb bovenstaande op 5 plekken in de code geprobeerd, maar niets werkt...

dit is de code:

PHP:

<?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>

maandag 15 januari 2007 14:46

Acties:

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'

maandag 15 januari 2007 15:03

Acties:

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.

maandag 15 januari 2007 18:42

Acties:

maarud

Topicstarter

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

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

donderdag 18 januari 2007 19:33

Acties:

maarud

Topicstarter

[kickje]

donderdag 18 januari 2007 19:39

Acties:

Verwijderd

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

donderdag 18 januari 2007 21:46

Acties:

maarud

Topicstarter

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 ]

donderdag 18 januari 2007 22:05

Acties:

moozzuzz

google op layoutgala. Is ook al heeeeel erg veel op dit forum gevraagd ivm 100% height.

donderdag 18 januari 2007 22:14

Acties:

maarud

Topicstarter

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....

vrijdag 19 januari 2007 09:24

Acties:

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

vrijdag 19 januari 2007 09:34

Acties:

Serenity

Probeer footerStickAlt

vrijdag 19 januari 2007 14:36

Acties:

maarud

Topicstarter

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:

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 ]