Ir para conteúdo

POWERED BY:

Arquivado

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

xurissoooo

Div forçando os demais dentro dele

Por , em Desenvolvimento frontend

Recommended Posts

xurissoooo    10

xurissoooo
Postado

Gente, tenho dois Divs que são Menu do Tema 1 e Menu do Tema 2

 

Os dois Divs tão com a posicao errada e eu não to conseguindo por na posição certa

 

Quero saber se eu consigo criar um div limpo e fazer ele só para posicionar os outros dois que eu mexi demais, e consigo fazer este novo div posicionar forçado os outros dois que estão com classe e tudo feita já

 

Como eu faço?

 

Alguem tem um exemplo de DIV forçando para iniciar pela ESQUERDA, em alguma posicao da tela pra mim tentar só colocar os outros ali dentro e ver se fixa ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

LucasCairesF    8

LucasCairesF
Postado

Olá, não entendi a sua dúvida. Se possível acrescente o código ou a imagem de como está e de como quer que fique... Qualquer coisa chama por msg ou adicione no meu skype que eu te ajudo.

Skype: Lcaires5

Compartilhar este post

Link para o post
Compartilhar em outros sites

xurissoooo    10

xurissoooo
Postado

Tem um MENU que vem do Banco de Dados,

Se Tema = 1 { VEM MENU 1 }

Se Tema = 2 { VEM MENU 2 }

 

Ambos os MENUS tem que ficar alinhado com o AVATAR

Que esta puxando la em cima do Banco de Dados (Imagem do Usuario)

 

Se eu conseguisse alinhar outros novos dois menus, eu jogaria fora os atuais, pois a classe deles está muito mexida já.

 

 

<?php
session_start();
//==============================
// VERIFICA SE USUARIO ESTA LOGADO
if($_SESSION['validacao']!=1){
include("login_code.php");
}else{
//==============================
// INCLUI ARQUIVO DE VARIAVEIS PARA CONEXAO
include  "conexao_banco.php";
//==============================
// CONECTA COM O BANCO DE DADOS
$con = mysql_connect($host_banco,$usuario_banco,$senha_banco)
or die("nao conectou-se ao host");
mysql_select_db($nome_banco)or die("nao conectou-se ao banco");
//==============================
// INICIA CONSULTA DE DADOS DO USUARIO
$consulta="select * from usuarios
           where login='$usuario'";
$result=mysql_query($consulta)
or die("TNT SECRETA $usuario");


while($linha=mysql_fetch_assoc($result)){
$nome=$linha['nome'];
//==============================
// VERIFICA E DEFINE BACKGROUND DA PAGINA
$bground_usuario=$linha['bground'];
$_SESSION['bground_session']=$linha['bground'];
}
if($bground_usuario==$bground_padrao){
$bground_dir="images/" . $bground_padrao;
}else{
$bground_dir='usuarios/' . $usuario . '/bground_' . $bground_usuario;
}
//==============================
?>
<!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>
<link href="css/top.css" rel="stylesheet" type="text/css" />






<style type="text/css">
body {
background-repeat: repeat;
background-image: url(<?php echo "$bground_dir"; ?>);
}
a:link {
color: #333;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #333;
}
a:hover {
text-decoration: none;
color: #00C;
}
a:active {
text-decoration: none;
color: #333;
}


</style>
<link href="css/conta.css" rel="stylesheet" type="text/css" />
<link href="css/contamenu.css" rel="stylesheet" type="text/css" />
<link href="css/formata.css" rel="stylesheet" type="text/css" />


</head>


<body>
<div class="fcentro">


<table width="900" border="0" align="center" cellpadding="0" cellspacing="0" class="tabela_principal">
  <tr>
    <td width="437"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="menu_esquerda">
      <tr>
        <td>
<?php // Se esta Logado mostrar Foto
$con="select * from usuarios
 where login='$usuario'";
$result=mysql_query($con)
 or die("TNT NAO VAI $usuario");
while($linha=mysql_fetch_assoc($result)){
$foto=$linha['foto'];
$abre_foto= 'usuarios/' . $foto_usuarios . $foto;
echo '
<div <p><img src="'.$abre_foto.'" width="160" height="160" class="avatar" id="photo1" border="1" /></div>
';


}




?></td>
      </tr>
    </table></td>
    <td width="317"> </td>
  </tr>
  <tr>
    <td>
<?php
//=========================
//PREFIXO DO MENU DIV
if ($menu_session=="2"){ echo ' <div class="card signin-card clearfix"> '; }
//=========================


$seleciona = mysql_query("select * from menu where pagina='conta.php'");
while ($linha = mysql_fetch_assoc($seleciona)) {


$_linkmenu=$linha['linkmenu'];
$_idmenu=$linha['idmenu'];
$_nomemenu=$linha['nome'];
$_arquivomenu=$linha['arquivo'];


//=========================
// MENU TABLE
if ($menu_session=="1"){
echo '<table width="300px" border="0" align="left" cellpadding="1" cellspacing="2">
      <tr>
        <td bgcolor="#CCCCCC"><table width="300px" border="0" align="center" cellpadding="8" cellspacing="0">
          <tr>
            <td bgcolor="#FFFFFF"><a href=' . $_linkmenu . '><img src=' . $_arquivomenu . ' alt=' . $_idmenu . ' width="100%" height="60" class="botoes_center" /></a></td>
          </tr>
        </table></td>
      </tr>
    </table>';


}
//=========================
// MENU DIV
if ($menu_session=="2"){
echo '<div><a href=' . $_linkmenu . '><input name="' . $_idmenu . '" type="submit" class="rc-button rc-button-submit" id="' . $_idmenu . '" value="' . $_nomemenu . '" /></a></div>';
}
//=========================
// TERMINA REPETICAO
};
//=========================
// SUFIXO DO MENU DIV
if ($menu_session=="2"){ echo '</div>'; }
//=========================
?>
    </td>
    <td></td>
  </tr>
</table>


</div>
</body>
</html>
<?php
}
?>

 

 

 

Url: http://xurisso.amserver1.com/xurisso1/usuario.php

Login: teste@gmail.com
Senha: teste

Compartilhar este post

Link para o post
Compartilhar em outros sites

xurissoooo    10

xurissoooo
Postado

O correto seria manter o AVATAR em cima do MENU AZUL

 

Porém o avatar esta mais para a esquerda

Teria que alinahr o avatar com o Menu Azul

---------->

 

A esquerda deles é Margem

 

 

Vou postar uma imagem de como está aqui

 

 

 

 

COM A IMAGEM DE COMO EU QUERO:

 

 

 

http://imageshack.com/a/img838/2120/ilpw.jpg

Compartilhar este post

Link para o post
Compartilhar em outros sites

xurissoooo    10

xurissoooo
Postado

Imagem de como eu to tentando fazer ficar e nao consigo: http://xurisso.amserver1.com/xurisso1/site.jpg

 

Observacao: Aquele link que tu me deu, consegui ver a imagem, mas hospedar a foto lá não por que ta demorado pra baixar o aplicativo

 

 

EDITADO:

 

Acho que entendi, vlw vou tentar!!!!!!!!!!!!!!!!! :D

 

O ultimo link seu tinha aberto errado eu nao vi sua resposta

Compartilhar este post

Link para o post
Compartilhar em outros sites

xurissoooo    10

xurissoooo
Postado

Eu quero ocupar a tela toda daquela resolucao 900X acho que é de tablet, é 900 e alguma coisa, nao chega a 1024.

 

O resto é margem

 

 

Se eu estiver certo é 270px o DIV do MENU

 

Talvez eu diminua isso ainda, mas o que importa é o INICIO dele ser sempre num Ponto X, Igual ao do Avatar

 

A ALTURA É INFINITA

 

 

//=========================
//PREFIXO DO MENU DIV
if ($menu_session=="2"){ echo ' <div class="card clearfix"> '; }
//=========================

 

 

  .card {
  padding: 20px 15px 30px;
  width: 270px;
  }

 

 

 

 

 

E a imagem é 160x160

Compartilhar este post

Link para o post
Compartilhar em outros sites

xurissoooo    10

xurissoooo
Postado

Eu vou apagar este botão, mas nao importa o DIV que eu faça novo eu nao consigo alinahr com o avatar >.<

 

Fica se mechendo conforme eu mudo

 

Sou muito ruim mesmo >.<

 

Nao consigo fazer o div ficar Tamanho Igual

Compartilhar este post

Link para o post
Compartilhar em outros sites

xurissoooo    10

xurissoooo
Postado

Ta add

 

Entrei agora

 

o CSS dele é só isto:

 

 

 

@charset "utf-8";
.menu {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}




<style>
  html, body {
  font-family: Arial, sans-serif;
  background: #fff;
  margin: 0;
  padding: 0;
  border: 0;
  position: absolute;
  height: 100%;
  min-width: 50%;
  font-size: 13px;
  color: #404040;
  direction: ltr;
  -webkit-text-size-adjust: none;
  }
  button,
  input[type=button],
  input[type=submit] {
  font-family: Arial, sans-serif;
  }


  
  /* For modern browsers */
  .clearfix:before,
  .clearfix:after {
  content: "";
  display: table;
  }
  .clearfix:after {
  clear: both;
  }
  /* For IE 6/7 (trigger hasLayout) */
  .clearfix {
  zoom:1;
  }




  .card {
  background-color: #f7f7f7;
  padding: 20px 25px 30px;
  margin: 0 auto 0px;
  width: 200px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  }
  .card *:first-child {
  margin-top: 0;
  }
  .rc-button {
  display: inline-block;
  min-width: 0px;
  text-align: center;
  color: #444;
  font-size: 14px;
  font-weight: 400;
  height: 36px;
  padding: 0 8px;
  line-height: 0px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -o-transition: all 0.218s;
  -moz-transition: all 0.218s;
  -webkit-transition: all 0.218s;
  transition: all 0.218s;
  border: 1px solid #dcdcdc;
  background-color: #f5f5f5;
  background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
  -o-transition: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
  }
  .card .rc-button {
  width: 100%;
  padding: 0;
  }
  .rc-button:hover {
  border: 1px solid #c6c6c6;
  color: #333;
  text-decoration: none;
  -o-transition: all 0.0s;
  -moz-transition: all 0.0s;
  -webkit-transition: all 0.0s;
  transition: all 0.0s;
  background-color: #f8f8f8;
  background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
  background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1);
  background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1);
  background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1);
  background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  }
  .rc-button:active {
  background-color: #f6f6f6;
  background-image: -webkit-linear-gradient(top,#f6f6f6,#f1f1f1);
  background-image: -moz-linear-gradient(top,#f6f6f6,#f1f1f1);
  background-image: -ms-linear-gradient(top,#f6f6f6,#f1f1f1);
  background-image: -o-linear-gradient(top,#f6f6f6,#f1f1f1);
  background-image: linear-gradient(top,#f6f6f6,#f1f1f1);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }
  .rc-button-submit {
  border: 1px solid #3079ed;
  color: #fff;
  text-shadow: 0 1px rgba(0,0,0,0.1);
  background-color: #4d90fe;
  background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
  background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
  background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
  background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
  background-image: linear-gradient(top,#4d90fe,#4787ed);
  }
  .rc-button-submit:hover {
  border: 1px solid #2f5bb7;
  color: #fff;
  text-shadow: 0 1px rgba(0,0,0,0.3);
  background-color: #357ae8;
  background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8);
  background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);
  background-image: -ms-linear-gradient(top,#4d90fe,#357ae8);
  background-image: -o-linear-gradient(top,#4d90fe,#357ae8);
  background-image: linear-gradient(top,#4d90fe,#357ae8);
  }
  .rc-button-submit:active {
  background-color: #357ae8;
  background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8);
  background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);
  background-image: -ms-linear-gradient(top,#4d90fe,#357ae8);
  background-image: -o-linear-gradient(top,#4d90fe,#357ae8);
  background-image: linear-gradient(top,#4d90fe,#357ae8);
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  }

 

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