Galera ajudem ai!

28/10/2013

0

Front-end

Amigos queria saber como faço para bloquear um conteudo dentro de uma div no meu caso é meu "Header" e "Menu" porque quando vou diminuindo o zoom ele vai para esquerda;
Raniel Gomes

Raniel Gomes

Responder

Posts

29/10/2013

Joel Rodrigues

Poste o código aqui e, se possível, uma imagem do que está ocorrendo.

EVITE USAR ESSE TIPO DE TÍTULO.
Responder
Gostei + 0

29/10/2013

Raniel Gomes

Meu index:

<?php

$con = mysql_connect("servidor","banco","senha");
mysql_select_db("banco",$con);
session_start();

?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<title>Paulista Pinturas | Inicio</title>

<link rel="stylesheet" href="css/estilo.css"/>
<link rel="stylesheet" href="css/coin-slider/coin-slider-styles.css">

<script language="javascript" src="js/jquery-1.8.3.js"></script>
<script language="javascript" src="js/coin-slider/coin-slider.js"></script>

</script>

</head>

<body>
    <header>
<div class="header">
	<div id="content-header" class="content-header" >
  		<div class="header-logo">
        	<img src="imagens/logo.png">
                 <div id="menu" class="menu">
    <ul>
      <li><a href="index.php">Inicio</a></li>
      <li><a href="#">Empresa</a></li>
      <li><a href="#">Serviços</a></li>
      <li><a href="#">Área do Cliente</a></li>
      <li><a href="">Contato</a></li>
    </ul>
        </div>
        </div> 
    </div>
            </div>
    </header>
    
    <div class="container">
<div id="box" class="box">
	
            <!-- Div Menu -->
   
            <!-- Fim Div Menu -->
        
         
    <!-- Fim da área Header -->
    	
    <!-- Div Sidebar Esquerda -->
    <div id="sidebar-left" class="sidebar-left">
    	 
         
        <img id="img1" src="imagens/h-side.png">
        <img id="servico" src="imagens/serviços.png"/>
        
        <div id="sidebar-left1" >
            <div id="teste" style="width: 100px">	
            <div id="menu-adm">
        <h3>Artigo 1</h3>
        <div>
            <p>
                Texto.
            </p>
        </div>
        <h3>Artigo 2</h3>
        <div>
            <p>
                Texto.
            </p>
        </div>
    </div>
            </div>
        </div>
               
        <img id="img2" src="imagens/h-side.png">
        <img id="servico" src="imagens/login-texto.png"/>
        
        <div id="sidebar-left2" >
        	<div id="div-login">
                    
                    
            <!-- Forulario Login -->        
            <form id="" action="" method="post" enctype="multpart-form-data">
        	<label class="label-text">USUARIO:</label>
            <label>
            <input type="text" required title="Por favor preencha"
                   name="usuario" placeholder="Nome de Usuario">
            </label><br>
          	<label>SENHA:</label>
            <label>
                <input type="password" required name="senha" placeholder="Senha de Usuario"></label>
                <input type="hidden" name="acao" value="log">
          	<label><input type="submit" value="Login"></label>           
        	</form>
            <?php
	
	if(isset($_POST['acao']) && $_POST['acao'] == 'log')
	{
		$usuario = strip_tags($_POST['usuario']);
		$senha = strip_tags($_POST['senha']);

		if(empty($usuario) || empty($senha))
		{
			echo "Preencha todos os campos";
		}
    else
    {
        $selecionar = 
        mysql_query("SELECT * FROM clientes WHERE usuario='$usuario' AND senha='$senha'");

        $conta = mysql_num_rows($selecionar);

        if ($conta <= 0) 
        {

                echo 'Login ou Senha estão incorretos';
        }
        else 
        {
                while ($ln = mysql_fetch_array($selecionar)) {
                        $_SESSION['usuario'] = $ln['usuario'];
                        $_SESSION['senha'] = $ln['senha'];

                        echo '<script>location.href="area_administrativa/area_administrativa.php"</script>';
                }
        }
    }
}
?>
             
        </div>
        
        
        </div>
    </div><!-- Fim da Sidebar -->
    
    <!-- Div Conteudo -->
    <div id="content" class="content" >
   
    <div id="content-inner" >
        
     <h1 class="h3">Destaques</h1>
    
    <div class="inner-slide" id="inner-slide">
    
        <?php
       $sql_slide1 = mysql_query("SELECT * FROM slide WHERE Id=1");
       $ln_slide1 = mysql_fetch_array($sql_slide1);
       $sql_slide2 = mysql_query("SELECT * FROM slide WHERE Id=2");
       $ln_slide2 = mysql_fetch_array($sql_slide2);
       $sql_slide3 = mysql_query("SELECT * FROM slide WHERE Id=3");
       $ln_slide3 = mysql_fetch_array($sql_slide3);
       $sql_slide4 = mysql_query("SELECT * FROM slide WHERE Id=4");
       $ln_slide4 = mysql_fetch_array($sql_slide4);
        
        ?>
        
    <a href="#" target="_blank">
    	<img src="imagens/segurança.png" />
        <span>
        	<b><?php echo $ln_slide1['titulo'] ?></b><br>
            <?php echo  $ln_slide1['texto'] ?>
        </span>
     </a> 
     <a href="#" target="_blank">
	 
	<img src="imagens/suporte.jpg"/>
        <span>
        	<b><?php echo $ln_slide2['titulo'] ?></b><br>
            <?php echo $ln_slide2['texto'] ?>
        </span>
     </a>
     <a href="#" target="_blank">
    	<img src="imagens/tinta.png" />
        <span>
        	<b><?php echo $ln_slide3['titulo'] ?></b><br>
           <?php echo $ln_slide3['texto'] ?>
        </span>
     </a>  
    <a href="#" target="_blank">
    	<img src="imagens/10-anos.png"/>
        <span>
        	<b><?php echo $ln_slide4['titulo'] ?></b><br/>
            <?php echo $ln_slide4['texto'] ?>
        </span>
     </a>
    </div>
    <script type="text/javascript">

		$(document).ready(function(){
			
$('#inner-slide').coinslider({width:550, height:321, navigation:true, delay:5000});
		});

</script>
    
    </div>
    
    </div><!-- Fim do Conteúdo -->
    
    <!-- Div Spoiler -->
    <div class="spoiler">
    
    <div class="box-1">
        <img src="imagens/certificados/4rodas.png" title="Empresa certificada Quatro Rodas">
    </div>
    <div class="box-2">	
        <img src="imagens/certificados/4rodas.png" title="Empresa certificada Quatro Rodas">
    </div>
        <div class="box-2">	
        <img src="imagens/certificados/4rodas.png" title="Empresa certificada Quatro Rodas">
    </div>
    </div>
    <!-- Fim Div Spoiler -->
    
    <!-- Div Footer -->
    
    <!-- Fim Div Footer -->
</div>
    </div><!-- Container-->
    <div id="footer" class="footer">
        <p>Todos os direitos reservados © Paulista Pinturas - 2013</p>
    </div><!-- Fim do Radapé -->
<!-- Fim Div Box -->
</body>
</html>


Meu Style:

/* CSS Document */
/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

body
{
    font-family: 'Lato', Calibri, Arial, sans-serif;
    background-image: url("../imagens/area_adm/back.jpg");
}

.container
{
    background-color: white;
    box-shadow: 2px 5px 5px 3px #CCC;
    margin: 0 auto;
    width: 960px;
    height: 750px;
}
.box {
	 margin:0 auto;
	 width:960px;
	 }
.header
{
	height:161px;
        background-image:url(../imagens/header.png);
}

.header img
{
	margin-top:17px;
	margin-left:20px;
}

.content-header
{
	height:131px;
}
.menu
{
         margin: -11px auto;
	 height:32px;
	 background-image:url(../imagens/menu.png);
}

.header-logo
{
   border: 1px ;
}

.sidebar-left
{
	
	margin-top: -5px;
	margin-bottom: 20px;
	margin-left:10px;
	float:left;
	width:265px;

}

#img1
{
	position:absolute;
	margin-top:25px;	
	margin-left:125px;
}

#img2
{
	position:absolute;
	margin-top:25px;	
	margin-left:125px;
}

.slide
{
	
}

.inner-slide
{
	width:600px;
	margin-top:5px;
        margin-top:20px;
	height:500px;
        border: 1px solid black;
}

#div-login
{
	font-size:18px;
margin: 0px auto;
margin-bottom: 20px;
width:186px;
font-family:Berlin Sans FB;
}

#div-login input[type="text"],[type="password"]
{
margin-top:3px;
font-size:20px;
height: 30px;
width:170px;
box-shadow:1px 1px 1px 1px #CCC;
margin-bottom: 3px;
font-family:Berlin Sans FB;
border: 0.5px solid #999;
background-image:url(../imagens/side2.png);
background-repeat:no-repeat;
font-style:italic;
}

#div-login input[type="submit"]
{
margin-top:3px;
font-size:20px;
height: 30px;
width:170px;
margin-bottom: 15px;
font-family:Berlin Sans FB; 
background-color:#6184ad;
color:#C33;
border: none;
}

#div-login input[type="submit"]:hover
{
margin-top:3px;
font-size:20px;
height: 30px;
width:170px;
box-shadow:0px 0px 2px 1px #6184ad;
margin-bottom: 15px;
font-family:Berlin Sans FB;
color:#6184ad;
background-color:#C33;
}

#side
{
	margin-top:20px;
	width:200px;	
}

#sidebar-left1
{
	
	box-shadow: 0px 0px 2px 1px;
	padding-top:18px;
	margin-top:40px;
	width:246px;
	background-color:#FFF;	
	border-radius:5px;
        height: 300px;
}

#servico
{
	position:absolute;
	margin-top:27px;	
	margin-left:135px;
}

#sidebar-left2
{
	
	box-shadow: 0px 0px 2px 1px;
	padding-top:18px;
	margin-top:40px;
	width:246px;
	background-color:#FFF;	
	border-radius:5px;
}

.content
{
	float:right;
	width:600px;
	margin-right:25px;
	margin-top:20px;
	margin-bottom: 20px;
        
}


.content-inner
{
	border:1px solid black;
}

h1
{
	border-left: 10px solid #C33;
	background: #FFF;
	color: #6184ad;
	width:170px;
	padding: 5px;
	margin-top:0;
	margin-right: 200px;
	box-shadow: 0px 0px 2px 1px;
        font-family: 'Lato', Calibri, Arial, sans-serif;
}

.spoiler{ 
    width: 960px; float:right; margin-bottom:20px;margin-top:-10px; 
    background-color: #1c94c4;
    height: 311.5px;background-color:#6184ad;
}

.box-1
{
    margin-left: 50px;
    margin-top: 30px;
    float: left;
}

.box-1 img
{
    margin-top:3px;
    width: 270px;
}

.box-2
{
    margin-top: 30px;
    float: left;
    margin-left: 20px;
    boder: 1px solid black;
}

.box-2 img
{
    margin-top:3px;
    width: 270px;
}

.footer
{
clear:both;
height:67px;
background-image:url(../imagens/footer.png);
border: 1px solid #6184ad;
width: 100%;
border-bottom: 10px solid crimson;

}
.footer p
{
    font-size: 20px;
text-align: center;
margin-top: 20px;
font-weight: bold;
color: white;
}

.slide
{
	width:550px;
}

 .menu
 {	 
 background-image:url(../imagens/menu.png);
 }
 
 #menu ul {
	 
    padding:0px;
	margin: 0px;
    list-style:none;
	width:898px;
	margin-left:1px;
	
	
    }
    #menu ul li { display: inline; }

        #menu ul li a {		
    padding: 5px 15px;
    display: inline-block;
     
    /* visual do link */
	font-family:Rockwell Extra Bold;
    color: #6184ad;
    text-decoration: none;
	font-weight:bolder;
    }
    ul.menu li:hover, ul.menu li.current {}
    ul.menu li:hover a.home, ul.menu li.current a.home {background-position:right 0;}
ul.menu li:hover a.home img, ul.menu li.current a.home img {display:none;}
ul.menu li a:hover , ul.menu li.current a {color:#0fc6ee; text-shadow:#68dcf6 0 0 5px;}
    
        #menu ul li a:hover {
    color:#FFF;
	background-color:#6184ad;
    border-bottom:5px solid #C33;
    }
Responder
Gostei + 0

29/10/2013

Joel Rodrigues

Uma dica: nesses casos, procure postar apenas o código útil para a questão.
Além disso, faltou a imagem de o que está acontecendo.
Responder
Gostei + 0

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar