Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Berlan Barbalho

Erro com divs

Por , em Desenvolvimento frontend

Recommended Posts

Berlan Barbalho    0

Berlan Barbalho
Postado

Galera estou com um problema que ja me quebrou muito a cabeça, bom o problema é o seguinte:

 

O meu site é dividido em 4 divs, header(parte do banner e menu superior) / menuleft (menu laretal e informações) / main (parte do conteudo que fica no meio) / footer (parte inferior).

 

O problema é que a div "menuleft" e "main" ficam lado a lado dentro de outra div (chamada de "wrap"), dai o problema é que a "wrap" so acompanha o tamanho da div "menuleft", que na maioria das vezes é menor que a div "main", dai a div "main" fica por cima da div "wrap", e isso ja vem me quebrando muito a cabeça, vou deixar 2 imagens para melhor explicar e conteudo dos arquivos.

 

3aPJUGx.png

Aqui abaixo é onde começa a "wrap":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>{#TITLE_SITE}</title>
<link rel="stylesheet" href="templates/mudine/media/Style/DineStyle.css" type="text/css" />
<script type="text/javascript" src="templates/mudine/media/Scripts/jquery-1.4.2.js"></script>
<script type="text/javascript" src="templates/mudine/media/Scripts/ajax.js"></script>
<script type="text/javascript" src="templates/mudine/media/Scripts/menu.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script src="templates/mudine/media/Scripts/jquery.chocoslider.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:800' rel='stylesheet' type='text/css'>
<script type="text/javascript">
    $(window).load(function() {
      $('#slider').chocoslider();
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
    $('#subir').click(function(){
    $('html, body').animate({scrollTop:0}, 'slow');
    return false;
             });     });
</script>
</head>

<body>
		<div id="background" />
		<div id="background2" />
		<div id="background3" />
<!-- wrap starts here -->
<div id="wrap">

		<!--header -->
		<div id="header"> </div>
		<div id="sse50">
		
<ul id="menu-new">
	<li><a href="?page=home" class="menu01">Menu 01</a></li>
	<li><a href="?page=register" class="menu02">Menu 02</a></li>
	<li><a href="?page=downloads" class="menu03">Menu 03</a></li>
	<li><a href="?page=rankings" class="menu04">Menu 04</a></li>
	<li><a href="../forum" class="menu05">Menu 05</a></li>
</ul>
  </div>
</div>
</div>
</div>

Aqui abaixo é onde vem a main e a menuleft, porem a menuleft ta como include:

{#INCLUDE:header}
		<!-- content-wrap starts here -->
				<div id="background4" /><br />
		<div id="content-wrap">
                <div id="main">
                             <ul>
                <iframe src="templates/mudine/banner.tpl.php" width="100%" height="209px" scrolling="no" border="0" frameborder="0"></iframe>
                                 </ul> <br />
                                 <table border="0" width="100%" class="tops">
<tr>
                    <td valign="top" width="19%">
                        <ul class="tops">
                            {#RANK_TOP_RESETS_HOME}
                        </ul>
                    </td>
                    <td valign="top" width="19%">
                        <ul class="tops">
                            {#RANK_TOP_MASTER_RESETS_HOME}
                        </ul>
                    </td>
                    <td valign="top" width="19%">
                        <ul class="tops">
                            {#RANK_TOP_HERO_HOME}
                        </ul>
                    </td>
                    <td valign="top" width="19%">
                        <ul class="tops">
                            {#RANK_TOP_PK_HOME}
                        </ul>
                    </td>
                    <td valign="top" width="19%">
                        <ul class="tops"><table style="border: 0px solid #22272a;" width="100%">
                        <tr>
                            {#RANK_TOP_GUILDS_HOME}
                        </tr>
                        </table>
                        </ul>
                    </td>
</tr>
</table>  <br />

                  <div valign="top"">
                      <h1>Últimas notícias:</h1>
                    <ul>
                        {#LAST_NOTICES_HOME}<br />
                    </ul>
                  </div>     <br />
                  <?php
                  global $FORUM_CONFIGS;
                  if($FORUM_CONFIGS['ENABLE'] == TRUE)
                  {
                  ?>
                  <div valign="top">
                      <h1>Últimas do forum:</h1>
                    <ul>
                        {#LAST_FORUM_HOME} <br />
                    </ul>
                  </div>     <br />
                  <?php
                  }
                  
                  global $CHAT_REAL_TIME;
                  if($CHAT_REAL_TIME['ENABLE'] == TRUE)
                  {
                  ?>
                  <style>
                    .chatList
                    {            
                        /* Use para os outros templates
                        border-bottom-color:#C2CAD3; 
                        border-bottom-width:thin; 
                        border-bottom-style:dotted;
                        */
                    }
                    .chatList.chat
                    {
                        color: #000;
                    }
                    .chatList.party
                    {
                        color: #000;
                        background-color: #4682B4;
                    }
                    .chatList.post, .chatList.whisper, .chatList.aliance
                    {
                        color: #000;
                        background-color: #DCC17C;
                    }
                    .chatList.guild
                    {
                        color: #000;
                        background-color: #76F6C5;
                    }
                    #chatRealTimeUl li
                    {
                        padding: 0;
                        margin: 1px 0 1px 0!important;   
                        list-style: none;
                        background: none;
                        color: #000;
                    }
                    #chatRealTimeUl
                    {
                        padding: 0;
                        margin: 0;
                    }
                  </style>
                  <div valign="top">
                  	<h1>Chat do jogo em tempo real:</span>    <span onclick="javascript: Verify('?page=ajax&require=chatrealtime', 'chatRealTimeUl', 'get');" style="cursor: pointer;">[Atualizar chat]</span></h1>
                    <ul style='height: 150px; overflow: hidden;' id="chatRealTimeUl">
                    	 <script type="text/javascript">Verify('?page=ajax&require=chatrealtime', 'chatRealTimeUl', 'get');</script>
                    </ul>
                  </div>     <br />
                  <?php
                  }
                                
                  global $CASTLE_SIEGE;
                  if($CASTLE_SIEGE['ENABLE'] == TRUE)
                  {
                  ?>
                  <div valign="top">
                      <h1>Castle Siege:</h1>
                        <div style="background: url(templates/refresh/images/siege.png) no-repeat center center; height: 120px ">
                             <div style="position:relative; top:47px; left:290px;"><a href="?page=rankings&type=7&name={#CASTLE_SIEGE_OCCUPY_GUILD}">{#CASTLE_SIEGE_OCCUPY_GUILD}</a></div>
                             <div style="position:relative; top:58px; left:290px; color: #FFFFFF;">{#CASTLE_SIEGE_END_DATE}</div>
                        </div>
                  </div>     <br />
                  <?php
                  }
                  ?>
                  
                  <?php
                  global $SCREENSHOTS;
                  if($SCREENSHOTS['HOME'] == TRUE)
                  {
                  ?>
                  <div valign="top">
                      <h1>ScreenShots:</h1>
                      <table width="100%" style="background: #181818; border: 1px solid #22272a;"><tr>
                        <?php
                            new ldModules("screenshots");
                            screenshots::getScreenshots();
                        ?>
                        </tr>
                        <tr><td align="right" colspan="<?php echo $SCREENSHOTS['TOP_HOME']; ?>"><a href="?page=loadModule&module=screenshots&action=viewAll">[Ver todas]</a></td></tr></table>
                  </div>     <br />
                  <?php
                  }
                  ?>      
                </div>
                
               {#INCLUDE:menuLeft}
               
		<!-- content-wrap ends here -->
		</div>
		</div>	
{#INCLUDE:footer}

Aqui abaixo o conteudo da "menuleft"

               <div id='menuleft'>
<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Informações</span></a></li>
   <li><a href='?page=vips'><span>Vip & {#CASH_NAME}</span></a></li>
   <li><a href='{#SHOPPING_LINK}'><span>Shopping</span></a></li>
   <li><a href='#'><span>Ajuda (FAQ)</span></a></li>
   <li><a href='#'><span>Comandos</span></a></li>
   <li><a href='#'><span>Eventos</span></a></li>
   <li><a href='#'><span>Equipe</span></a></li>
</ul>
</div>

               </div>        <br />
               <div id='menuleft'>
                 <h1>Informações</h1>
                  <div class='left-box'>
                    <ul class='sidemenu'>                
                       <li>Versão: <strong>{#SERVER_VERSION}</strong></li>
                       <li>Experiência: <strong>{#SERVER_XP}</strong></li>
                       <li>Drops: <strong>{#SERVER_DROP}</strong></li>
                       <li>Bug Bless: <strong>{#SERVER_BUGBLESS}</strong></li>
                       <li>Resets: <strong><a href="">Ver Tabela</a></strong></li>
                       <li>Tipos de Vip: <strong>{#VIP_NAME_1}, {#VIP_NAME_2}</strong></li>
                       <li>Chars Banidos: <strong><a href="?page=banned&type=characters">Ver</a></strong></li>
                       <li>Contas Banidos: <strong><a href="?page=banned&type=accounts">Ver</a></strong></li>
                     </ul>    
                   </div>
               </div>     <br />
               
               <div id='menuleft'>
                 {#DIV[LOGIN_LOGOUT]}
               </div>          <br />

E abaixo vou postar toda minha css: (obs: ta meio bagunçada)

/* Top Elements */
@font-face {
	font-family: 'Philosopher-Regular';
	src: url('../../media/fonts/Philosopher-Regular/Philosopher-Regular.eot');
	src: url('../../media/fonts/Philosopher-Regular/Philosopher-Regular.woff') format('woff'), url('../../media/fonts/Philosopher-Regular/Philosopher-Regular.ttf') format('truetype'), url('../../media/fonts/Philosopher-Regular/Philosopher-Regular.svg') format('svg');
}
@font-face {
	font-family: 'Philosopher-Bold';
	src: url('../../media/fonts/Philosopher-Bold/Philosopher-Bold.eot');
	src: url('../../media/fonts/Philosopher-Bold/Philosopher-Bold.woff') format('woff'), url('../../media/fonts/Philosopher-Bold/Philosopher-Bold.ttf') format('truetype'), url('../../media/fonts/Philosopher-Bold/Philosopher-Bold.svg') format('svg');
}

* { margin: 0; padding: 0; }

body {
	background: #000 url(../../images/bg-body.jpg) repeat;
	font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
	color: #727272;
	text-align: left;
}
div {
display:block;
}

#background {
	background: url(../../images/bg-page.jpg) no-repeat top center;
	margin: 0;
	padding: 0;
}
#background2 {
	background: url(../../images/bg-header2.png) repeat-x top center;
	margin: 0;
	padding: 0;
}
#background3 {
	background: url(../../images/bg-header.png) no-repeat top center;
	margin: 0;
	padding: 0;
}
#background4 {
	background: #000 url(../../images/gradient.png) repeat-x bottom center;
    border-left: 1px solid #22272a;
    border-top: 0px solid #22272a;
    border-bottom: 0px solid #22272a;
    border-right: 1px solid #22272a;
    margin: 0 auto;
    width: 958px;
	padding: 0;
}

#footer2 {
	background: url(../../images/bg-footer2.png) repeat-x bottom center;
	margin: 0;
	padding: 0;
}
#footer3 {
	background: url(../../images/bg-footer.png) no-repeat bottom center;
	margin: 0;
	padding: 0;
}

#menu-2 {
	background: url(../../images/bg-navigation.png) no-repeat top center;
	margin: 0;
	padding: 0;
	height: 116px;
}

/* links */
a, a:visited {
	text-decoration: none;
	color: #666;
	background: inherit;
}
a:hover {
	color: #ccc;
	background: inherit;
}
p {
    line-height: 21px;
}
hr {
    margin-bottom: 5px;
	height:2px;
	border: 1px solid;
	border-color: #000 #fff #22272a #0f0;
	border-left: 0px;
	border-right: 0px;
	}
strong{
    color: #666;
}

/* headers */
h1, h2, h3 {
 font-family: Tahoma, Verdana, 'Trebuchet MS', Sans-serif;
 font-weight: Bold;
}
h1 {
	font-size: 120%;	
}
h2 {
	font-size: 110%;
	text-transform: uppercase;
	color: #727272;
}
h3 {
	font-size: 110%;
	color: #666666;
}
h6 {
	font-size: 120%;	
}

/* images */
img {
	border: 0px solid #22272a;
}
img.float-right {
  margin: 5px 0px 10px 10px;
}
img.float-left {
  margin: 5px 10px 10px 0px;
}

h1, h2, h3, h6, p {
	padding: 10px;		
	margin: 0;
}
ul, ol {
	margin: 5px 20px;
	padding: 0 20px;
	color: #727272;
}
ul span, ol span {
	font-size: 12px;
    line-height: 21px;
	color: #777777;
}

code {
  margin: 5px 0;
  padding: 10px;
  text-align: left;
  display: block;
  overflow: auto;  
  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
  /* white-space: pre; */
  background: #FAFAFA;
  border: 1px solid #f2f2f2;  
}
.quadros {
  margin: 0px 0;
  padding: 10px;
  text-align: center;
  display: block;
  overflow: auto;  
  /* white-space: pre; */
  background: #181818;
  border: 1px solid #22272a;
}
#.quadros ul.sidemenu li {
	border-bottom: 1px solid #22272a;
	background: url(../../images/seta.png) no-repeat 8px 3px;
	padding: 2px 0 2px 25px;
	margin: 0 2px;
}
.qdestaques {
  margin: 5px 0;
  padding: 10px;
  text-align: left;
  display: block;
  overflow: auto;  
  /* white-space: pre; */
  background: #FAFAFA;
  border: 3px solid #FF3737;
}
.qdestaques2 {
  margin: 5px 0;
  padding: 10px;
  text-align: left;
  display: block;
  overflow: auto;  
  /* white-space: pre; */
  background: #EDEBFE;
  border: 3px solid #5339CC;  
}
acronym {
  cursor: help;
  border-bottom: 1px solid #777;
}
blockquote {
	margin: 10px;
 	padding: 0 0 0 28px;  
   border: 1px solid #f2f2f2; 
  	background: #FAFAFA url(../../images/quote.gif) no-repeat 5px 5px;
}

/* form elements */
form {
	margin:0px; padding: 0px;
    background: #181818;
	border: 0px solid #22272a;
}
label {
	display:block;
	font-weight:bold;
	margin:5px;
}
input {
	padding:2px;
	height: 20px;
	border: 1px solid #22272a;
	background: #181818 url(../../images/gradient05.png) repeat-x;
	font: normal 1em Verdana, sans-serif;
	color:#777;
}
input.login {
	padding:0 0 0 10px;
	height: 27px;
	width: 90%;
	border: 1px solid #22272a;
	background: #181818 url(../../images/gradient05.png) repeat-x;
	font: normal 1em Verdana, sans-serif;
	color:#777;
}
select {
	padding:0 0 0 3px;
	height: 27px;
	text-align: left;
	border: 1px solid #22272a;
	background: #181818 url(../../images/gradient05.png) repeat-x;
	font: normal 1em Verdana, sans-serif;
	color:#777;
}
input.button {
    height: 25px;
    padding: 2px;
	font: bolder 1em Verdana, sans-serif;
	border: 1px solid #22272a;
    background: #202020;
    -moz-border-radius: 5px; /* Para Firefox */
    -webkit-border-radius: 5px; /*Para Safari e Chrome */
    border-radius: 5px; /* Para Opera 10.5+*/
}
textarea {
	width:400px;
	padding:2px;
	font: normal 1em Verdana, sans-serif;
	border:1px solid #eee;
	height:100px;
	display:block;
	color:#777;
}

/* search */
form.search {
	position: absolute;
	top: 35px; right: 25px;
	background: transparent;
	border: none;	
}	
form.search input.textbox {
	margin: 0; padding: 1px 2px;
	width: 120px;
	background: #FFF;
	color: #333; 
}
form.search input.button {
	background: #CCC url(../../images/gradient3.png) repeat-x;
	color: #333;
	border: none;	
	width: 70px; height: 50px;
}

/********************************************
   LAYOUT
********************************************/ 
#wrap {
	width: 960px;
/*	background: #CCC url(../../images/content.jpg) repeat-y center top;       */
	margin: 0 auto;
	text-align: center;
}
#content-wrap {
	clear: both;
/*	background: url(../../images/bg-body2.png) repeat-y center top;     */
	width: 920px;
	padding: 0;
	margin: 0 auto;
}
#header {
	width: 960px;
	position: relative;
	height: 180px;
	background: url(../../images/bg-header.png) no-repeat center top;
	padding: 0;
	margin: 0;
	font-size: 14px;
	color: #FFF;
	overflow: hidden;
}
#header > div {
	background: url(../../images/bg-header.png) no-repeat top center;
	margin: 0;
	padding: 0;
}
#header > div > div {
	height: 147px;
	margin: 0 auto;
	padding: 49px 0 0;
	position: relative;
	width: 960px;
	z-index: 5;
}
#header h1#logo-text {
	position: absolute;
	margin: 0; padding: 0;
	font: bolder 3.3em 'Trebuchet MS', Arial, Sans-serif;
	letter-spacing: -2px;
	color: #FFF;
	text-transform: none;

	/* change the values of top and left to adjust the position of the logo*/
	top: 28px; left: 50px;
}
#header h2#slogan {
	position: absolute;
	margin: 0; padding: 0;
	font: normal .8em 'Trebuchet MS', Arial, Sans-serif;
	text-transform: none;
	color: #FFF;

	/* change the values of top and left to adjust the position of the slogan*/
	top: 74px; left: 58px;
}
#header a.logo {
	display: block;
	margin: 0 auto;
	padding: 0;
	width: 540px;
}
#header a.logo img {
	border: 0;
	display: block;
}

/* Menu */
#menu {
	clear: both;	
	margin: 0; padding: 0 40px 0 0;
	background: url(../../images/menu.png) repeat-y center top;
	font: bold 12px/26px Verdana, Arial, Tahoma, Sans-serif;
	height: 105px;
	overflow: hidden;
}
#menu ul {
	float: right;
	list-style: none;
	margin:0; padding: 0;
}
#menu ul li {
	display: inline;
}
#menu ul li a {
	display: block;
	float: left;
	padding: 0 8px;
	color: #FFF;	
	text-decoration: none;
}
#menu ul li a:hover {
	background-color: #ECECEC;
	color: #333;	
}
#menu ul li#current a {	
	background-color: #FFF;
	color: #333;
}

/* Main Column */
#main {
	float:right;
	width: 662px;
	padding: 0;
    margin: 0;
}
#main ul{
	padding: 0;
    margin: 0;
    background: #181818;
    list-style-type:none;
    text-align: left;
	border: 1px solid #22272a;
}
#main ul.tops{
	padding: 0;
    margin: 0;
	background: #181818 url(../../images/gradient04.png) repeat-x center bottom;
	border: 1px solid #22272a;
}
#main ul.ranking{
	padding: 0;
    margin: 3px;
	background: #181818 url(../../images/gradient04.png) repeat-x center bottom;
	border: 1px solid #22272a;
}
#main h1 {
	margin-top: 0px;
	height: 56px;
	padding: 0px 0 0px 10px;
	font-family: 'Philosopher-Regular', 'Impact';
	font-size: 16px;
	text-transform: uppercase;
	text-align: center;
	font-weight: normal;
	letter-spacing: 0.07em;
	line-height: 56px;
	color: #fff;
	background: #181818 url(../../images/gradient02.png) no-repeat left bottom;
	border: 0px solid #22272a;
}
#main h2 {
	height: 16px;
	padding: 0px 0px 0px 22px;
	font-size: 13px;
	font-family: Verdana, Tahoma, arial, sans-serif;
	text-transform: capitalize;
	font-weight: bold;
	line-height: 16px;
	color: #a8a8a8;
	background: url(../../images/seta4.png) no-repeat left bottom;
	border: 0px solid #22272a;
}
#main h3 {
	margin-top: -4px;
	height: 16px;
	padding: 0px 15px 0px 0px;
	font-size: 12px;
	font-weight: normal;
	text-align: 10px;
	letter-spacing: 0.02em;
	line-height: 16px;
	color: #ccc;
	background: url(../../images/mais.png) no-repeat right bottom;
	border: 0px solid #22272a;
}
#main h4 {
	height: 16px;
	padding: 0px 0px 0px 5px;
	font-size: 11px;
	font-family: Tahoma, arial, sans-serif;
	text-transform: capitalize;
	letter-spacing: -0.02em;
	font-weight: bold;
	line-height: 16px;
	color: #a8a8a8;
	border: 0px solid #22272a;
}
#main h5 {
	margin-top: -4px;
	height: 16px;
	padding: 0px 15px 0px 0px;
	font-size: 10px;
	font-weight: normal;
	text-align: 10px;
	letter-spacing: 0.02em;
	line-height: 16px;
	color: #ccc;
	background: url(../../images/mais.png) no-repeat right bottom;
	border: 0px solid #22272a;
}
#main table {
	padding: 0;
    margin: 0;
    text-align: left;
	border: 0px solid #22272a;
}
.interna {
outline-offset: -1px;
outline: 1px solid #22272a;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}

.post-footer {
	background-color: #FAFAFA;
	padding: 5px; margin: 20px 10px 0 10px;
	border: 1px solid #f2f2f2;
	font-size: 95%;	
}
.post-footer .date {
	background: url(../../images/clock.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
	background: url(../../images/comment.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
	background: url(../../images/page.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}

/* Sidebars */	
#menuleft {
	width: 248px;
	padding: 0px;
    margin: 0px;
}		
#menuleft h1 {
	margin-top: 0px;
	height: 56px;
	padding: 0px 0 0px 10px;
	text-align:center;
	font-family: 'Philosopher-Regular', 'Impact';
	font-size: 16px;
	text-transform: uppercase;
	font-weight: normal;
	letter-spacing: 0.07em;
	line-height: 56px;
	color: #fff;
	background: #181818 url(../../images/gradient01.png) no-repeat left bottom;
	border: 0px solid #22272a;
}
#menuleft .left-box {
    background: #181818;
	border: 1px solid #22272a;
	margin: 0 0 5px 0;
}
#menuleft ul.sidemenu {
	list-style: none;
	text-align: left;
	margin: 3px 0 8px 0; padding: 0;
	text-decoration: none;		
}
#menuleft ul.sidemenu li {
	border-bottom: 1px solid #22272a;
	background: url(../../images/seta.png) no-repeat 8px 3px;
	padding: 2px 0 2px 25px;
	margin: 0 2px;
}
#menuleft ul.sidemenu a {
	font-weight: bolder;
	text-decoration: none;	
	background-image: none;	
}
/* Footer */	
#footer {
	color: #666666;
	background: url(../../images/bg-body-footer.png) no-repeat center top;
	clear: both;
	width: 960px;
	height: 350px;
	text-align: center;	
	font-size: 92%;
}
#footer a { text-decoration: none;
}
#footer ul {
	display: block;
	margin: 0 auto;
	padding: 0 0 45px;
	overflow: hidden;
	width: 490px;
}
#footer ul li {
	display: block;
	float: left;
	list-style: none;
	margin: 0 22px;
	padding: 0;
}
#footer ul li a {
	background: url(../../images/icons.png) no-repeat;
	color: #fff;
	display: block;
	line-height: 73px;
	height: 73px;
	text-decoration: none;
	text-indent: -99999px;
	width: 73px;
}
#footer ul #facebook a {
	background-position: 0 0;
}
#footer ul #facebook a:hover {
	background-position: -78px 0;
}
#footer ul #twitter a {
	background-position: 0 -78px;
}
#footer ul #twitter a:hover {
	background-position: -78px -78px;
}
#footer ul #googleplus a {
	background-position: 0 -156px;
}
#footer ul #googleplus a:hover {
	background-position: -78px -156px;
}
#footer ul #youtube a {
	background-position: 0 -234px;
}
#footer ul #youtube a:hover {
	background-position: -78px -234px;
}

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes */
.clear { clear: both; }
.gray { color: #CCC; }

/*
#gauge_onlines_total {
border:outset;
border-width:thin;
width:150px; 
font-size: 1px; 
}
#gauge_onlines_progress {
background-color:#00A600;
height:6px;
}
*/
.gauge{margin:0px;padding:0px;overflow:hidden;}
.gauge .top{margin:0px 1px;overflow:hidden;height:1px;background:#b2b2b2;}
.gauge .bottom{margin:0px 1px;overflow:hidden;height:1px;background:#8d8d8d;}
.gauge .content{border-left-width:1px;border-right-width:1px;border-style:none solid;border-left-color:#aaa;border-right-color:#aaa;overflow:hidden;background:#fff;}
.gauge .content .filling{background-color:#39b3d5;}
.gauge .content .remaining{border:1px solid #efefef;overflow:hidden;background-color:#fff;}


/* Virtual vault */
.vaultBox {                
    width: 300px;
    height: 589px;
    background-image: url(../../images/vault.png);
}

.vaultBox #vaultName {                
    position: relative;
    top: 15px;  
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 11px;
    text-align: center;
    color: #fff;
}

.vaultBox ul#itemsVaultGame, ul#itemsVaultVirtual {                   
    position: relative;
    top: 66px;
    left: 25px;               
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: auto;                 
    width: 251px;
    height: 474px;    
}
.vaultBox ul#itemsVaultGame li, ul#itemsVaultVirtual li {                
    width: 96%;
    height: 17px;    
    margin: 0;
    padding-left: 8px;
    color: #fff;
    overflow: hidden;
    list-style: none; 
    background: none;
}
.vaultBox ul#itemsVaultGame li:hover, ul#itemsVaultVirtual li:hover {                
    width: 96%;
    height: 17px;    
    margin: 0;    
    padding-left: 8px;
    color: #000;
    background-color: #FFF;
    overflow: hidden; 
}
.vaultBox ul#itemsVaultGame li:hover, ul#itemsVaultVirtual li:hover {                
    cursor: pointer; 
}

.staffOffline { color:#000000; font-weight:normal; }
.staffOnline { color:#008000; }

/* interface game */
.goldenArcherBox {                
    width: 491px;
    height: 589px;
    background-image: url(../../images/goldenarcher/interface.jpg);
    font: 11px Tahoma,Geneva,sans-serif !important;
}

.goldenArcherBox #goldenArcherName {                
    position: relative;
    top: 15px;  
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 11px;
    text-align: center;
    color: #96FFF0;
    width: 300px;
}
.goldenArcherBox #serialText {                
    height: 300px;
    left: 30px;
    position: relative;
    top: 65px;
    width: 240px;
    text-align: justify;
}
.goldenArcherBox #serialText p {                
    color: #fff;
    font-size: 11px;
    padding: 0px;
    font: Tahoma, Geneva, sans-serif !important;
}
.goldenArcherBox #serialText p.goldText {                
    color: #EAE25B;
    font-size: 11px;
    text-align: center;
}
.goldenArcherBox #serialText p.bold { 
    font-weight: bold;
}
.goldenArcherBox #serialInput {                
    position: relative;
    top: 106px;
    left: 62px;
    width: 174px;
}
.goldenArcherBox #serialInput input {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    color: #FFFFFF;
    font-size: 12px;
    height: 17px;
    text-align: center;
    width: 168px;
}
.goldenArcherBox #serialCheck {                
    position: relative;
    top: 131px;
    left: 53px;
    width: 193px;
}  
.goldenArcherBox #serialCheck input {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    color: yellow;
    font-size: 12px;
    height: 31px;
    text-align: center;
    width: 190px;
}
.goldenArcherBox #serialResponse {                
    position: relative;
    top: 151px;
    left: 53px;
    width: 193px;
    text-align: center;  
}
.goldenArcherBox #serialResponse p.yellow{                
    color: yellow;
    font-weight: bold;
}
.goldenArcherBox #serialResponse p.white{                
    color: white; 
    font-weight: bold;
}



/* question event */
#questionsEvent {
    width: 450px; 
    height: 360px;
    font-size: 12px;
}
#questionsEvent form {
    padding: 0px;
    margin: 0px;
    border: none;
    background: #fff;
}
#questionsEvent #answerQuestion {
    text-align: center;
}
#questionsEvent #answerQuestion p { 
    font-weight: bold;
    font-size: 12px;
    color: #000; 
    line-height: normal;
    margin: 0;
    padding: 0; 
}
#questionsEvent #answerQuestion p.congratulations { 
    font-weight: bold;
    font-size: 16px;
    color: green;
    line-height: normal;
    margin: 0;
    padding: 0;
}
#questionsEvent #optionsQuestion { 
    margin: 10px;
    width: 425px;
    overflow: hidden;
    padding-top: 10px;
}
#questionsEvent #stringQuestion { 
    color: black;
    font-weight: bold;
    font-size: 16px;
    width: 425px;
    background-color: #F2F2F2;
    /*padding: 5px;*/
    text-align: center;
    margin-bottom: 2px;
}
#questionsEvent #stringsAnswer { 
    color: black;
    font-size: 12px;       
    padding: 5px;
    background-color: #F8F8F8;
    text-align: left;
}
#questionsEvent #buttonSubmit { 
    width: 425px;
    background-color: #F8F8F8;
} 
#questionsEvent #buttonSubmit input { 
    color: #000;
    margin: 5px;
    width: 412px;
}  
#questionsEvent #reponseSubmit { 
    text-align: center;
} 
#questionsEvent #reponseSubmit p { 
    font-weight: bold;
    font-size: 12px;
    color: #000;
    line-height: normal;
    margin: 0;
    padding: 0;
} 
#questionsEvent #reponseSubmit p.correctResponse { 
    font-weight: bold;
    font-size: 16px;
    color: green;
    line-height: normal;
    margin: 0;
    padding: 0;
}
#questionsEvent #reponseSubmit p.incorrectResponse { 
    font-weight: bold;
    color: red;
    line-height: normal;
    margin: 0;
    padding: 0;
}
#questionsEvent #reponseSubmit p.serial { 
    font-weight: bold;
    font-size: 16px;
    color: green;
    line-height: normal;
    margin: 0;
    padding: 0;
}
                           
#questionsEvent #timerString {
    float: right;
    padding-right: 10px;
    font-weight: bold;
    font-size: 12px;
}
#questionsEvent #timerCount {
    display: inline;
    font-weight: bold;
    color: green;
    font-size: 12px;
}

/********* Menu Superior ********/

#sse50
{
    background: url(../../images/bg-body-header.png) no-repeat center bottom;
    padding:0px;/*changing its value will give menu margins to its container*/
    text-align:center;
	height: 120px;
    margin:0 auto;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
#sses50
{
    margin:0 auto;/*If you don't want the menu center aligned, remove this line and above text-align:center*/
    text-align:center;
    font-size:0;
}

#sses50 ul, #sses50 li
{
    display: inline;
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-image:none;
}


#sses50 a
{
    text-align: center;
    display: inline-block;
    font: normal 11px Verdana;
    width:130px;
    height:70px;
    line-height:60px;
    background: url(../../images/1.png) no-repeat left top;
    color: #888888;
    text-decoration: none;
    white-space:nowrap;
}

#sses50 a:hover, #sses50 a.current
{
    background: url(../../images/1-on.png) no-repeat left top;
    color:Red;
}

#sses50 a.end
{
    width:1px;
    padding-left:0;padding-right:0;
}

#menu-new {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 116px;
	background: url(../../images/menu/bg-navigation.png) no-repeat;
	position: relative;
}
#menu-new span {
	display: none;
	position: absolute;
}
#menu-new a {
	display: block;
	text-indent: -900%;
	position: absolute;
	outline: none;
}
#menu-new a:hover {
	background-position: center bottom;
}
#menu-new a:hover span{
	display: block;
}
#menu-new .menu01 {
	width: 166px;
	height: 105px;
	background: url(../../images/menu/1-menu.png) no-repeat;
	left: 50px;
	top: 9px;
}
#menu-new .menu02 {
	width: 166px;
	height: 105px;
	background: url(../../images/menu/2-menu.png) no-repeat;
	left: 224px;
	top: 9px;
}
#menu-new .menu03 {
	width: 166px;
	height: 105px;
	background: url(../../images/menu/3-menu.png) no-repeat;
	left: 396px;
	top: 9px;
}
#menu-new .menu04 {
	width: 166px;
	height: 105px;
	background: url(../../images/menu/4-menu.png) no-repeat;
	left: 570px;
	top: 9px;
}
#menu-new .menu05 {
	width: 166px;
	height: 105px;
	background: url(../../images/menu/5-menu.png) no-repeat;
	left: 742px;
	top: 9px;
}

/********* Menu Lateral ********/
#cssmenu {
  width: 237px;
  border-color: #D76100;
  border-size: 0px;
  text-align: left;
  border-width: 0px;
  padding: 5px;
  background: #181818;
  border: 1px solid #22272a;
}
#cssmenu ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
#cssmenu li a {
  height: 37px;
  height: 29px;
  width: 206px;
  text-decoration: none;
  font-weight: normal;
  color: #a8a8a8;
  display: block;
  background: url(../../images/menu/menu-left.png);
  padding: 8px 0 0 30px;
}
#cssmenu li a:hover {
  color: #666;
  background: url(../../images/menu/menu-left.png) 0 -37px;
  padding: 8px 0 0 30px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

Já tendo usar um clear antes de fechar a div principal?

talvez pelos floats, a div pai de todas não está "englobando" tudo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Berlan Barbalho    0

Berlan Barbalho
Postado

Já tendo usar um clear antes de fechar a div principal?

talvez pelos floats, a div pai de todas não está "englobando" tudo.

Tentei a sugestão do WictorP, porem não deu certo.

 

 

 

Antes de fechar a div content-wrap coloque

<div style="clear:both;"></div>
<div id="content-wrap">
<div style="clear:both;"></div>
</div>

Como mencionei acima, não deu certo! :(

 

 

amigo te o site online ? fica ais facil ajudar.

Ele está em uma maquina virtual, porem ja providenciei um dominio e hospedagem para por online, so esperar propagar os DNS e ja ponho pra funfar on...

 

OBS: no IE6 ele carrega direitinho! (muito estranho)

Compartilhar este post

Link para o post
Compartilhar em outros sites

baguera13    5

baguera13
Postado

O problema é o que você está utilizando position float nas divs e a wrap só consegue 'captar' a altura do primeiro filho, ou seja a menu left.

 

Você pode tentar algumas coisas:

 

- colocar em primeiro lugar no código a div main (com alinhamento a direita) e logo abaixo a menu left com alinhamento a esquerda;

 

- definir um min-height: 100%, para as 3 divs (ou só na principal, na teoria funfaria tbm);

 

- usar o clear:both; (como já citaram a cima) antes do fechamento da div wrap;

 

abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Berlan Barbalho    0

Berlan Barbalho
Postado

Pessoal, muito obrigado, consegui resolver minha bronca, eu coloquei o "clear:both" no final da "menuleft", e funfou perfeito!

 

Muito obrigado mesmo, ja tinha quebrado muito a cabeça e não tinha conseguido isso!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito