[Div] Image Altijd Bottom align - Softwareontwikkeling

dinsdag 23 augustus 2005 11:43

Acties:

Topicstarter

Beste Mede E-programmeurs.

Ik heb een klein probleempje.

ik heb mijn website opgedeelt in een aantal divs

code:

--------------------------------------------------------------
                    Header
--------------------------------------------------------------
  Zoeken   | DHTML menu |    Empty    |
---------------------------------------------------
Menu       |    Content       |  Nieuwsmsg |
                |                       |                     |
                |                       |                     |
                |                       |                     |
                |                       |                     |
                |                       |                     |
--------------------------------------------------------------
 Taal        |                                             |
vlaggen   |                                             |
--------------------------------------------------------------

Het is een Content Manager Systeem, en die maakt automatisch het menu aan.
Ik heb op de menu een overflow:auto gezet, aangezien het menu soms langer is dan een 1024 res. beeldscherm
( body staat natuurlijk : <body scroll="no"> )

De 2 vlaggen staan dus in 1 div, en het menu staat in 1 div.

Als het menu nu langer word als de pagina toestaat komt er een scrollbar, alleen die houdt op als hij de Vlaggen-Dib bereikt.

Wat ik nu zou willen, is eigenlijk dat de Vlaggen-div weggaat, maar dat de 2 images wel altijd onderaan de pagina staan.
( tenzij er natuurlijk naar beneden gescrolled moet worden. dan moeten ze gewoon onder de menu structuur komen te staan )
Is dit op 1 of andere manier mogelijk ?

Online voorbeeld : www.respond.nl/nieuwe-website/index.php
IE - Compatible

bij voorbaat dank,

De template code

code:

<?
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<?=head()?>
<meta http-equiv="Content-Language" content="en-us">
<title>Respond!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body scroll=no <?=onload()?>>
<script type='text/javascript' src='<?=$pth['folder']['template']?>menu.js'></script>
<div id="header"></div>
<div id="search"><table width="189" border="0" align="Center"><tr> <td width="183"><?=searchbox()?></td> </tr> </table> </div>
<div id="hvmenu"><?include ('dhtml.navi')?></div><div id="menuback"></div>
<div id="rempty"></div>
<div id="menu">  
  <p class="style2">
  <table width="180" border="0" align="center">
    <tr>
      <td width="177"><span class="style3">Respond</span></td>
    </tr>
  </table>

  <table width="180" height="326" border="0" align="center">
    <tr>
      <td width="185" height="322" valign="top"><?=toc(2,3)?><?=loginlink()?>
      <p>[img]"<?=$pth['folder']['templateimages']?>en.gif"[/img] <a href="http://www.respond.nl">[img]"<?=$pth['folder']['templateimages']?>nl.gif"[/img]</a> </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      </td>
    </tr>
  </table>
  </div>
<div id="content">
  <table width="506" height="443" border="0" align="center">
    <tr>
      <td valign="top">
<?=editmenu()?>
<?=content()?>
</td>
    </tr>
  </table>
</div>
<div id="nieuws">
  <table width="209" height="284" border="0" align="center">
  <tr>
    <td width="220" valign="top"><p><span class="style4">Nieuws</span><br>
      <?
// VOEG DEZE LIJN TOE OM DE NIEUWS ITEMS OP TE HALEN
addNieuwsToText();//$pth['file']['content'],$MaxNieuwItems, $searchBeginString, $searchEndString);
?><?=newsbox(News)?></td>
  </tr>
</table>
</div>
<div id="vlag">
  <div align="center"></div>
</div>
<div id="adres"> 
  <p class="style6"><font class="adres style1">
  Respond BV<strong><br>
  </strong></font><font class="adres style1">Jules Verneweg 121<br>
             5015 BK Tilburg<br>
             Nederland<br>
             t. 013 532 1001<br>
             f. 013 544 2340<br>
  <a href="mailto:info@respond.nl">e. info@respond.nl</a></font></p>
</div>
<div id="plaatje1" style="background-image:[img]"<?=$pth['folder']['templateimages']?>terrorisme[/img]</div>
<div id="plaatje3"></div>
<div id="plaatje2"></div>
<div id="plaatje4"></div>
<div id="vlagsimg"></div>
</body>
</html>

The Css Code

code:

body {      
    width:1003px;
    height:;
    margin:0;
    overflow: none;
        }
        
#header {
    width:1020px;
    height:120px;
    margin:0;
    background-image: url(images/Respond1_1.jpg);
        }
            
#search {
    width:215px;
    height:30px;
    border-right:3px solid #ffffff;
    border-left:1px solid #000000;
    border-top:1px solid #ffffff;
    position:absolute;
    float:left;
    margin:0;
    background-color:e56b20;
    top: 120px;
            }
#hvmenu1 {
    width:575px;
    height:25px;
    border:1px solid #ffffff;
    position:absolute;
    float:left;
    margin:0;
    left:213px;
    top:120px;
    background-color:#000000;
            }
#rempty {
    width:231px;
    height:30px;
    position:absolute;
    margin:0;
    left: 789px;
    top: 120px;
    border-right:3px solid #000000;
    background-image: url(images/Respond2_4.jpg);
            }
#Menu {
    width:217px;
    height: 418px;
    border-right:3px solid #ffffff;
    border-left:1px solid #000000;
    border-top:1px solid #ffffff;
    background-color:0e2d89;
    position:absolute;
    margin:0;
    left: 0px;
    top: 150px;
    float:left;
    overflow:Auto;
    }
    
#content {
    width:577px;
    height:450px;
    border-bottom:1px solid #000000;
    border-right:3px solid #ffffff;
    border-left:1px solid #ffffff;
    boroder-top:1px solid #ffffff
    float:left;
    position:absolute;
    left: 213px;
    top: 149px;
    overflow:Auto;
    }
#nieuws {
    width:232px;
    height:450px;
    position:absolute;
    border-bottom:1px solid #000000;
    border-right:3px solid #000000;
    border-left:1px solid #ffffff;
    left: 788px;
    top: 150px;
    background-image: url(images/Respond4_2.jpg);
    }

#vlag {
    width:213px;
    height:440px;
    position:absolute;
    left: 0px;
    top: 568px;
    background-color:0e2d89;
    border-left:1px solid #000000;
}
#adres {
    width:133px;
    height:103px;
    background-color:#e56b20;
    position:absolute;
    left: 801px;
    top: 475px;
}

#plaatje1 {
    width:80px;
    height:80px;
    border:1px solid #ffffff;
    position:absolute;
    left: 17px;
    top: 20px;
    background-image: url(images/brand%20klein2.jpg);
}
#plaatje3 {
    width:80px;
    height:80px;
    border:1px solid #ffffff;
    position:absolute;
    left: 207px;
    top: 19px;
    background-image: url(images/controle%20centrum%20klein2.jpg);
}
#plaatje2 {
    width:80px;
    height:80px;
    border:1px solid #ffffff;
    position:absolute;
    left: 112px;
    top: 20px;
    background-image: url(images/materiaal%20klein2.jpg);
}
#plaatje4 {
    width:80px;
    height:80px;
    border:1px solid #ffffff;
    position:absolute;
    left: 302px;
    top: 19px;
    background-image: url(images/terrorisme%20klein2.jpg);
}

#vlagsimg {
    position:absolute;
    width:214px;
    height:100px;
    left: 18px;
    top: 569px;
}
font.adres {
size:1;
color:000000;
}


.NieuwsItem
{
    font-family: Verdana;
    font-style: Bold;
    font-size: 20px;o
    color: #0e2e85;
}
.style1 {
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style2 {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 18px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}.style3 {
    color: #FFFFFF;
    font-size: 14pt;
}

.style4 {font-size: 14pt}
.style6 {font-family: Verdana, Arial, Helvetica, sans-serif}

.login { position:absolute;
        width:100px;
        height:20px;
        background-color:#000000;
        }
        
#menuback { position:absolute;
        width:575px;
        height:20px;
        background-color:#000000;
        left:214px;
        top:120px;
        }
img {margin:0; border:0px solid; vertical-align:bottom;}

dinsdag 23 augustus 2005 12:34

Acties:

Daugobelion

[off-topic]

Het is Content Management Systeem.

[/off-topic]

Jou vlaggetjes staan nou in div-tag menu volgens je source.
Die moeten dus nog een div lager. Dan kan je ze bottom-allignen en klaar is kees denk ik.

dinsdag 23 augustus 2005 12:45

Acties:

Vecodo

Topicstarter

correct , maar lees nu het eerste stuk , en bekijk het online voorbeeld.
dan snap je dat het NIET klaar is cees is.

[ Voor 6% gewijzigd door Vecodo op 23-08-2005 12:46 ]

dinsdag 23 augustus 2005 12:51

Acties:

Daugobelion

Jou menu heeft een vaste hoogte van 326 pixels. Dus je menu zal nooit aan de onderkant komen op een hoge res. Dus dan zakken je vlaggetjes ook niet. Die blijven binnen jou 326 pixels. Je zal je menu dus automatisch aan moeten passen aan je scherm res.

dinsdag 23 augustus 2005 12:54

Acties:

Vecodo

Topicstarter

scherm is gemaakt voor een 1024 res.
dus dat is geen probleem.

Zoals je hebt kunnen lezen heb ik aan de menu div dit mee gegeven

overflow:auto

dus als die groter word. Scroll je naar beneden !

dinsdag 23 augustus 2005 13:21

Acties:

Daugobelion

Let me get this straight. Je wilt de vlaggetjes onderin je scherm krijgen zonder die vlaggen-div die je gemaakt hebt. Dus dan komen de vlaggetjes in jou menu-div. Jou menu div heeft een vaste hoogte van 412 pix (staat in je css). Deze kan dus nooit en te nimmer groter worden. Die overflow zorgt voor een scrollbar zodra die INHOUD van je menu groter word. Dus als je je vlaggetjes in je menu-div bottom alligned, zakken ze niet verder dan 412 pixels. Je moet er dus voor zorgen dan jou menu-div een variabele hoogte krijgt! Deze past zich aan aan je scherm res en als dan nog de INHOUD groter word zorgt de overflow ervoor dat er nog een scrollbar bij komt. Maar in ieder geval blijven de vlaggetjes altijd onderaan staan.

dinsdag 23 augustus 2005 13:23

Acties:

Vecodo

Topicstarter

dus in principe zeg je dat, ik niet met PX moet werken maar met % ?

want als je dit alleen voor het menu doet, moet je dit ook voor alles doen

dinsdag 23 augustus 2005 13:48

Acties:

Vecodo

Topicstarter

heb hem opgelost, andere manier. maar werkt nu wel !