Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

div on the bottom

Status
Not open for further replies.
filipel

filipel

Programmer
Aug 13, 2007
42
PT
how to put a div always on the botom of page?
 
Sort by date Sort by votes
There's many ways, but more often than not they cause more problems than they're worth.

1. You could absolutely position the div with bottom: 0;
2. You could give your html and body 100% height and then work with that.

The problems that arise however will be that when your content is longer than the whole page, both solutions will be shaky at best. #1 will simply hover over your content (or under) and #2 will stop at the end of the screen. Also, you have to consider that computer screens are getting bigger and bigger and if you have little content and then a div at the very bottom it might look weird.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
i have a content that is bigger than the page.Can you put some code to resolve that?
 
Upvote 0 Downvote
If your content is bigger (longer) than the screen size and you want your div to be below that content, normal unstyled code will do that automatically. There is no coding necessary.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
yes i know but for some reason the div is overlapped to another,i dont know why
 
Upvote 0 Downvote
Must be your code. But since I cannot see your code, I can only say that I agree that the div is overlapped and that's what it should look like, given the code. Show me the code to convince me otherwise.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
php file:


<body>

<div id="header">
<h1>Bidoeira</h1>
<h3>Admin</h3>
</div>
<hr>
<div class="menuAdmin">
<ul>
<li><a href="#">SubDominios</a>
<ul>
<li><a href="menuAdminSistema.php?id=2">Criar</a></li>
<li><a href="menuAdminSistema.php?id=3">Visualizar</a></li>
</ul>
</li>
<li><a href="#">Conteudos</a>
<ul>
<li><a href="#">Actualiza&ccedil;&atilde;o</a></li>
</ul>
</li>
<li><a href="funcoesDB.php?id=9">LogOut</a></li>
</ul>
</div>

<div class="areaFotos">
<form name="op" method="post" action="funcoesDB.php?id=10">
<table border="1" class="opcoes" cellspacing="10">
<tr><th>Fotos</th></tr>
<tr>
<td>
Foto1: <input type="file" size="55" accept="image/jpeg,image/gif">
<input type="button" onClick="insereTexto(this)" value="Insere Texto" ><br>
Foto2: <input type="file" size="55" accept="image/jpeg,image/gif">
<input type="button" onClick="insereTexto(this)" value="Insere Texto"><br>
Foto3: <input type="file" size="55" accept="image/jpeg,image/gif">
<input type="button" onClick="insereTexto(this)" value="Insere Texto"><br>
Foto4: <input type="file" size="55" accept="image/jpeg,image/gif">
<input type="button" onClick="insereTexto(this)" value="Insere Texto"><br>
Logo : <input type="file" size="55" accept="image/jpeg,image/gif"> </td>
</tr>
<tr><th>Novidades-&gt;<input type="button" onClick="insereTexto(this)" value="Cria Novidade"></th></tr>
</table>
<br>
<table border="1" class="opcoes" cellspacing="10">
<tr><th colspan="3">Dados de SubDominio</th></tr>
<tr><td>Nome:</td>
<td colspan="2"><input type="text" name="nome" size="55"></td>
<tr> <td>Descri&ccedil;&atilde;o:</td>
<td colspan="2" rowspan="2"><textarea name="descri" cols="30" rows="8"></textarea></td>
</tr>
<tr><td colspan="3" align="right"><input type="submit" value="Enviar" name="submeter"></td></tr>
</table>

</form>

</div>
<div id="areaTexto">
<textarea name="texto" cols="30" rows="8"></textarea>
</div>


<div id="footer">
<p>email : <a href="mailto:#">ei13131@student.estg.ipleiria.pt</a> &copy; Copyright 2007 (Filipe Louren&ccedil;o / Paulo Sousa - ARG1 - Estg)</p>
</div>
</body>

css file:

/* CSS Document */

body{
background-color: #e7e7e7;
}




h1{
background-color: #c7c7c7;
border: 1px solid #888;
font-family: Verdana;
font-size: 18pt;
padding: 10px;
margin-left:5px;
margin-right:5px;
}

.menu{
background-color: #c7c7c7;
border: 1px solid #888;
font-family: Arial;
font-size: 11pt;
padding: 10px;
margin-top:30px;
margin-left:5px;
width:200px;
height:60px;
font-weight:bold;
}

.mensagem{
background-color: #c7c7c7;
border: 1px solid #888;
font-family: Arial;
font-size: 11pt;
padding: 10px;
position:relative;
top:-240px;
margin-left:210px;
margin-right:5px;
height:240px;
}

b.titulo{
color:blue;
}
 
Upvote 0 Downvote
Sorry the css file is this ,not that last one
 
Upvote 0 Downvote
css file:

/* CSS Document */


#cabecalho{
width:100%;
height:125px;
background-color:#0065CC;
}

.opcoes tr td{

border:none;
}
#data{
position:absolute;
top:105px;
left:250px;
color:#660000;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:19px;

}


.tabelas{

border:0;
padding:0;
border-spacing:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
text-align:center;
font-weight:bold;
color:#FFFFFF;
}

#areaTexto{
visibility:hidden;
width:200px;
height:100px;
position:absolute;

}


.areaFotos{
position:relative;
width:630px;
height:100px;
margin-left:10px;
margin-top:15px;

}


body{
background-color:#0000CC;
}

body, * {
padding: 0; /*faz o reset de todas as margens dos browsers*/
margin: 0;
}

#header {
width:90%;
height:70px;
background-color:#0066CC;
padding:10px;
}

#header h1{
z-index:1;
font-size:45px;
font-family:Georgia, "Times New Roman", Times, sans-serif;
}

#header h3{
z-index:2;
font-family: 'trebuchet ms', 'century gothic', verdana, sans-serif;
font-size: 35px;
font-weight: 400;
position:absolute;
left:190px;
top:35px;
}


#zona_login{
margin-left:100px;
font-size:10pt;
}

span {
color:#FFFFFF;
}



a {
text-decoration: none;
color:#000000;
}


a:hover {
text-decoration:underline;
color: #06f;
}


.ahref{
font-family: 'trebuchet ms', 'century gothic', verdana, sans-serif;
font-size: 10px; font-weight: 300;
color:#FF0000;
text-decoration:underline;
}

#footer{

width:760px;
text-align:center;
color:#FFFFFF;
width: 100%;

}

#conteudo{
color:#FFFFFF;
position:absolute;
margin-left:250px;
margin-top:20px;
}

#menu_esq{
position:absolute;
width:160px;
height:200px;
left:10px;
font-size:20px;
border: 2px solid #000000;
}

#menu_esq a{
display:block;
width:140px;
color:#CCCCCC;
}

#menu_esq a:hover{
background-image:url(Imagens/back_menu.jpg);
color:#000000;
}



#list_menu_cria {
top:57px;
position:absolute;
margin-left:320px;
visibility:hidden;

}

#list_menu_cria ul {
margin: 0;
padding: 0;
list-style-type: none;/*Não aparece ordem de lista*/
font-family: verdana, arial, sanf-serif;
font-size: 12px;
height:100px;
width:110px;
}

#list_menu_cria li {
margin: 2px 0 0;

}

#list_menu_cria a {
display: block;
width:90px;
padding: 2px 2px 2px 10px;
border: 1px solid #000000;
background: #dcdcdc;
text-decoration: none; /*para remover os sublinhados*/
}


/* menu horizontal */
.menuAdmin * { margin: 0; padding: 0;}
.menuAdmin a { display: block; }
.menuAdmin li { list-style: none; float: left; height: 1%; }
.menuAdmin li ul { position: absolute; visibility: hidden;}
.menuAdmin li ul li { float: none; white-space: nowrap; display: inline; /* o inline é pro IE */}
.menuAdmin li ul li ul { position: absolute; left: 100%; top: 0; }
.menuAdmin li:hover ul, .menuAdmin li.over ul { visibility: visible;}
.menuAdmin li:hover ul ul, .menuAdmin li.over ul ul { visibility: hidden;}
.menuAdmin ul ul li:hover ul, .menuAdmin ul ul li.over ul { visibility: visible;}

*.menuAdmin {
width: 757px;
height: 31px;
background-repeat: repeat-x;
background-position: top;
background:#003399;
margin-left:10px;
}
.menuAdmin a {
font-weight: bold;
text-decoration: none;
color:#FFFFFF;
line-height: 20px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
}
.menuAdmin a:hover {
text-decoration: underline;
color:#FFF;
background:#000;
}
.menuAdmin ul li ul {
border: 1px solid #000;
background-color: #CCCCCC;
}
 
Upvote 0 Downvote
I suggest you stop using absolute positioning for normal elements, if you wish to avoid this problem.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
171
lmcate
lmcate
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
702
spamjim
spamjim
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
637
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
825
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top