Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #59 da revista programar. Faz já o download aqui!

ForgottenFace

Container div não aumenta de tamanho

Mensagens Recomendadas

ForgottenFace    0
ForgottenFace

Boas!

Estou com um problema que já me está a deixar pelos cabelos.

Então é assim eu tenho um container div chamado .mainpage, com dois divs, .main e .verticalad e por mais que eu tente com que a altura do .mainpage se ajuste a altura dos outros dois divs, nada funciona. Já tentei um div para fazer clear aos divs que la estão dentro, já tentei overflow:hidden, de tudo e mais alguma coisa e por mais que eu faça isto não funciona.

O código foi feito um bocado à pressa ontem e com as edições que levou nas últimas horas, já deve haver algum lixo, mas eu não sei o que possa estar a fazer com que não funcione.

Tentei indentar isto o melhor que pude. Será que me podem ajudar?

CSS:


body {
   background: #191919;
   font-family:Verdana, Geneva, sans-serif;
   color: #7d7d7d;
   font-size: 14px;
   /*font-weight: bold;*/
}

a {
   color: #9e560a;
   text-decoration:none;
}

a:hover {
   color: #9a9a9a;
}

.mainmenu {
   width:1151px;
   margin-left:auto;
   margin-right:auto;
}

.menuitem {
   background: #202020;
   font-family:"Arial Narrow";
   letter-spacing: 0.1em;
   padding-left:9px;
   padding-right:7px;
   font-size: 31px;
   color: #9e560a;
   cursor:pointer;
}

.menuitem:hover {
   background: #8b8a8a;
   color: #191919;
}

.header {
   width:1151px;
   height:134px;
   margin-left:auto;
   margin-right:auto;
}

.headerimg {
   height:134px;
   float:left;
}

.login {
   float:right;
   margin-top:20px;
   margin-bottom:auto;
   margin-right:40px;
}

.mainpage {

   width:1151px;
   background: #202020;
   min-height:720px !important;
   margin-left:auto;
   margin-right:auto;
   padding-bottom:10px;
   overflow: hidden;
}

#username, #password {
   text-align:center;
   color: #7d7d7d;
   background: #202020;
   font-weight: 500;
   width: 133px;
   height: 24px;
   font-size:14px;
   font-family:"Arial Narrow";
   letter-spacing: 0.1em;
   border:none;
   outline: none;
   margin-bottom:5px;
}

#login {
   background: #9e560a;
   color: #191919;
   font-family:"Arial Narrow";
   font-weight: 500;
   font-size:16px;
   width:107px;
   height:27px;
   outline:none;
   letter-spacing: 0.1em;
   border:none;
   cursor:pointer;
}

#login:hover {
   background: #8b8a8a;
   color: #191919;
   border:none;
   outline:none;
}

.main {
   float:left;
   width:990px;
   min-height:720px !important;
   margin-right:160px;
   display: table-cell;
   table-layout:fixed;
   display: inline-block;
   margin: 0 auto;
   position:absolute;
}

.verticalad {
   float:right;
   min-height:720px;
   background: #202020;
   margin-top:5px;
   width:160px;
   padding:5px;
   /*display: table-cell;
   display: inline-block;*/
   position:relatve;
}

.secondmenu {
   max-width:700px;
   border-bottom:thin solid #6d1275;
   margin-right:auto;
   margin-left:auto;
   height:35px;
}

.2menuitems {
   height:31px;
   cursor:pointer;
}

#categories, #search, #voices, #authors, #admin, #faqs {
   padding-left:10px;
   paddign-right:10px;
   cursor:pointer;
}

.about {
   /*font-family:"Letter Gothic Std";*/
   margin-right:auto;
   margin-left:auto;
   width:80%;
   font-size:11px;
   text-align:justify;
   font-weight:400;
}

.copyright {
   width:80%;
   margin-left:auto;
   margin-right:auto;
   color:#565656;
   font-size:11px;
   text-align:justify;
   font-weight:400;
   border-top:thin solid #6d1275;
}

HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
   <div class='mainmenu'>
       <center>
       <a href='#'><span class='menuitem' id='submit'>SUBMIT</span></a>   
       <a href='#'><span class='menuitem' id='forums'>FORUMS</span></a>   
       <a href='#'><span class='menuitem' id='livestream'>LIVESTREAM</span></a>   
       <a href='#'><span class='menuitem' id='subscribe'>SUBSCRIBE</span></a>   
       <a href='#'><span class='menuitem' id='staffbio'>STAFF BIO</span></a>   
       <a href='#'><span class='menuitem' id='register'>REGISTER</span></a>
       </center>
   </div>
   <div class='header'>
       <div class='headerimg'>

       </div>

       <div class='login'>

           <center>
           <form>
               <input type='text' id='username'  name='username' /><br />
               <input type='password' id='password'  name='password' /><br />
               <input type='submit' id='login' value='LOGIN' name='login' />
           </form>
           </center>

       </div>
   </div>
   <div class='mainpage'>
       <div class='main'>
           <div class='secondmenu'>
               <center>
                <span class='2menuitems' id='categories'><img src='http://i.imgur.com/1ijATN7.png' onmouseover="this.src='http://i.imgur.com/4y9YkPi.png'" onmouseout="this.src='http://i.imgur.com/1ijATN7.png'"  /></span>

                   <span class='2menuitems' id='search'><img src='http://i.imgur.com/iSclKG5.png' onmouseover="this.src='http://i.imgur.com/NpZmfCc.png'" onmouseout="this.src='http://i.imgur.com/iSclKG5.png'"  /></span>

                   <span class='2menuitems' id='authors'><img src='http://i.imgur.com/olweLvH.png' onmouseover="this.src='http://i.imgur.com/rQTvPOq.png'" onmouseout="this.src='http://i.imgur.com/olweLvH.png'"  /></span>

                   <span class='2menuitems' id='voices'><img src='http://i.imgur.com/tQ9o2yW.png' onmouseover="this.src='http://i.imgur.com/kH6LNff.png'" onmouseout="this.src='http://i.imgur.com/tQ9o2yW.png'"  /></span>
           <span class='2menuitems' id='faqs'><img src='http://i.imgur.com/k95eIWx.png' onmouseover="this.src='http://i.imgur.com/Vyao80t.png'" onmouseout="this.src='http://i.imgur.com/k95eIWx.png'"  /></span>

                   <span class='2menuitems' id='admin'><img src='http://i.imgur.com/JdIp3qB.png' onmouseover="this.src='http://i.imgur.com/JNlHGqS.png'" onmouseout="this.src='http://i.imgur.com/JdIp3qB.png'"  /></span> 
                   </center>

           </div>
       <br />
           <div style='margin-left:auto;margin-right:auto;width:468px; height:60px;'><img src='http://i.imgur.com/a9VBUEd.png' /></div>
       <br />
           <p class='copyright'><br />
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt orci id erat aliquam vel malesuada augue porttitor. Sed odio tortor, gravida ut convallis commodo, laoreet id mi. Aliquam fermentum, erat id ultricies ornare, velit nisl fringilla turpis, sed imperdiet sem enim et est. Ut sed arcu urna. Donec venenatis, nunc a cursus ullamcorper, libero urna suscipit est, eget cursus ipsum lorem ac libero. Morbi venenatis pharetra lectus, sed dapibus ante convallis quis. Curabitur pretium porta sollicitudin. Morbi non leo turpis, sollicitudin dapibus turpis. Donec sollicitudin aliquet condimentum. Mauris arcu magna, bibendum sit amet placerat eu, volutpat et dolor. Cras semper accumsan turpis, at congue magna suscipit ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec porta, eros quis viverra facilisis, nisi ante sodales ligula, sed blandit justo libero in nulla. Morbi feugiat, elit sodales malesuada dictum, diam mauris pretium.</p>

       </div>
       <div class='verticalad'>
           <img src='http://i39.tinypic.com/zojdrc.png' /><br /><br />
       </div>
   </div>
   <script type="text/javascript">
       var username = document.getElementById("username");
       username.value = "USERNAME";
       username.onclick = function () {
           username.value = '';
       }
       var password = document.getElementById("password");
       password.value = "PASSWORD";
       password.onclick = function () {
           password.value = '';
       }
   </script>
</body>
</html>

Editado por brunoais
geshi

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
brunoais    67
brunoais

Já tentaste isto?

http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php

Já agora, não uses tags que estão classificadas como deprecated. É algo muito importante para se perceber!


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
ForgottenFace    0
ForgottenFace

Continua sem funcionar e não estou mesmo a entender porquê. Tentei das várias formas que estão nesse site.

Ah e obrigada pelo aviso, não fazia ideia que center já estava deprecated.

EDIT para não fazer double-post: Já consegui por isto a funcionar, eram os positions nos divs .main e .verticalad que estavam a estragar isto tudo. Obrigada pela ajuda :)

Editado por ForgottenFace

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
brunoais    67
brunoais

Como é que tentaste? Como é que ficou o código?

Eu n vejo uma stylesheet nisso. Assim está bem? Devias de deixar a stylesheet tratar da apresentação.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
ForgottenFace    0
ForgottenFace

Retiro o que disse. Isto afinal nao se arranjou =/ O código continua assim neste momento. A stylesheet está mesmo no proprio documento, separei aqui para ser mais fácil de ver.

Okay, já consegui voltar atrás naquilo que tinha editado antes de deixar de funcionar outra vez e parece que já voltou a dar. Espero que não dê barraca outra vez.

Foi assim que ficou:

CSS:

body {
background: #191919;
font-family:Verdana, Geneva, sans-serif;
color: #7d7d7d;
font-size: 14px;
/*font-weight: bold;*/
}

a {
color: #9e560a;
text-decoration:none;
}

a:hover {
color: #9a9a9a;
}

.mainmenu {
width:1151px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

.menuitem {
background: #202020;
font-family:"Arial Narrow";
letter-spacing: 0.1em;
padding-left:9px;
padding-right:7px;
font-size: 31px;
color: #9e560a;
cursor:pointer;
}

.menuitem:hover {
background: #8b8a8a;
color: #191919;
}

.header {
width:1151px;
height:134px;
margin-left:auto;
margin-right:auto;
}

.headerimg {
height:134px;
float:left;
}

.login {
float:right;
margin-top:20px;
margin-bottom:auto;
margin-right:40px;
text-align:center;
}

.mainpage {

width:1151px;
background: #202020;
min-height:720px !important;
margin-left:auto;
margin-right:auto;
padding-bottom:10px;
overflow: hidden;
}

#username, #password {
text-align:center;
color: #7d7d7d;
background: #202020;
font-weight: 500;
width: 133px;
height: 24px;
font-size:14px;
font-family:"Arial Narrow";
letter-spacing: 0.1em;
border:none;
outline: none;
margin-bottom:5px;
}

#login {
background: #9e560a;
color: #191919;
font-family:"Arial Narrow";
font-weight: 500;
font-size:16px;
width:107px;
height:27px;
outline:none;
letter-spacing: 0.1em;
border:none;
cursor:pointer;
}

#login:hover {
background: #8b8a8a;
color: #191919;
border:none;
outline:none;
}

.main {
float:left;
width:980px;
min-height:720px !important;
margin-right:170px;
display: table-cell;
table-layout:fixed;
display: inline-block;
margin: 0 auto;
/*position:absolute;*/
}

.verticalad {
float:right;
min-height:715px;
background: #202020;
margin-top:5px;
width:160px;
padding:5px;
display: table-cell;
display: inline-block;
position:absolute;
}

.secondmenu {
max-width:700px;
border-bottom:thin solid #6d1275;
margin-right:auto;
margin-left:auto;
height:35px;
text-align:center;
}

.2menuitems {
height:31px;
cursor:pointer;
}

#categories, #search, #voices, #authors, #admin, #faqs {
padding-left:10px;
paddign-right:10px;
cursor:pointer;
}

.about {
/*font-family:"Letter Gothic Std";*/
margin-right:auto;
margin-left:auto;
width:80%;
font-size:11px;
text-align:justify;
font-weight:400;
}

.copyright {
width:80%;
margin-left:auto;
margin-right:auto;
color:#565656;
font-size:11px;
text-align:justify;
font-weight:400;
border-top:thin solid #6d1275;
}
 

HTML

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>

CSS AQUI


</style>
</head>
<body>
<div class='mainmenu'>

	<a href='#'><span class='menuitem' id='submit'>SUBMIT</span></a>  
	<a href='#'><span class='menuitem' id='forums'>FORUMS</span></a>  
	<a href='#'><span class='menuitem' id='livestream'>LIVESTREAM</span></a>  
	<a href='#'><span class='menuitem' id='subscribe'>SUBSCRIBE</span></a>  
	<a href='#'><span class='menuitem' id='staffbio'>STAFF BIO</span></a>  
	<a href='#'><span class='menuitem' id='register'>REGISTER</span></a>

</div>
<div class='header'>
	<div class='headerimg'>

	</div>

	<div class='login'>


		<form>
			<input type='text' id='username'  name='username' /><br />
			<input type='password' id='password'  name='password' /><br />
			<input type='submit' id='login' value='LOGIN' name='login' />
		</form>


	</div>
</div>
<div class='mainpage'>
	<div class='main'>
		<div class='secondmenu'>

			 <span class='2menuitems' id='categories'><img src='http://i.imgur.com/1ijATN7.png' onmouseover="this.src='http://i.imgur.com/4y9YkPi.png'" onmouseout="this.src='http://i.imgur.com/1ijATN7.png'" /></span>

				<span class='2menuitems' id='search'><img src='http://i.imgur.com/iSclKG5.png' onmouseover="this.src='http://i.imgur.com/NpZmfCc.png'" onmouseout="this.src='http://i.imgur.com/iSclKG5.png'" /></span>

				<span class='2menuitems' id='authors'><img src='http://i.imgur.com/olweLvH.png' onmouseover="this.src='http://i.imgur.com/rQTvPOq.png'" onmouseout="this.src='http://i.imgur.com/olweLvH.png'" /></span>

				<span class='2menuitems' id='voices'><img src='http://i.imgur.com/tQ9o2yW.png' onmouseover="this.src='http://i.imgur.com/kH6LNff.png'" onmouseout="this.src='http://i.imgur.com/tQ9o2yW.png'" /></span>
		<span class='2menuitems' id='faqs'><img src='http://i.imgur.com/k95eIWx.png' onmouseover="this.src='http://i.imgur.com/Vyao80t.png'" onmouseout="this.src='http://i.imgur.com/k95eIWx.png'" /></span>

				<span class='2menuitems' id='admin'><img src='http://i.imgur.com/JdIp3qB.png' onmouseover="this.src='http://i.imgur.com/JNlHGqS.png'" onmouseout="this.src='http://i.imgur.com/JdIp3qB.png'" /></span>


		</div>
	<br />
		<div style='margin-left:auto;margin-right:auto;width:468px; height:60px;'><img src='http://i.imgur.com/a9VBUEd.png' /></div>
	<br />
		<p class='copyright'><br />
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt orci id erat aliquam vel malesuada augue porttitor. Sed odio tortor, gravida ut convallis commodo, laoreet id mi. Aliquam fermentum, erat id ultricies ornare, velit nisl fringilla turpis, sed imperdiet sem enim et est. Ut sed arcu urna. Donec venenatis, nunc a cursus ullamcorper, libero urna suscipit est, eget cursus ipsum lorem ac libero. Morbi venenatis pharetra lectus, sed dapibus ante convallis quis. Curabitur pretium porta sollicitudin. Morbi non leo turpis, sollicitudin dapibus turpis. Donec sollicitudin aliquet condimentum. Mauris arcu magna, bibendum sit amet placerat eu, volutpat et dolor. Cras semper accumsan turpis, at congue magna suscipit ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec porta, eros quis viverra facilisis, nisi ante sodales ligula, sed blandit justo libero in nulla. Morbi feugiat, elit sodales malesuada dictum, diam mauris pretium.</p>


	</div>
	<div class='verticalad'>
		<img src='http://i39.tinypic.com/zojdrc.png' /><br /><br />
	</div>
</div>

<script type="text/javascript">
	var username = document.getElementById("username");
	username.value = "USERNAME";
	username.onclick = function () {
		username.value = '';
	}
	var password = document.getElementById("password");
	password.value = "PASSWORD";
	password.onclick = function () {
		password.value = '';
	}
</script>
</body>
</html>
 

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
brunoais    67
brunoais

Porque é que não usaste o

.btcf:after {
content:"";
display:table;
clear:both;
}

?


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora


×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.