Jump to content
ForgottenFace

Container div não aumenta de tamanho

Recommended Posts

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>

Edited by brunoais
geshi

Share this post


Link to post
Share on other sites
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%.

Share this post


Link to post
Share on other sites
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 :)

Edited by ForgottenFace

Share this post


Link to post
Share on other sites
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%.

Share this post


Link to post
Share on other sites
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>
 

Share this post


Link to post
Share on other sites
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%.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.