Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá a todos,
estou fazendo um site para a associação de karatê que participo. na página administrativa penso em fazer um layout que lembra o painel de controle do Windows XP organizado em categorias. Para cada coluna de ícones, crei dois div para a lista de opções (cada div seria uma coluna de ítens) e mais um div para mais algumas opções. veja a figura para ter uma idéia
/applications/core/interface/imageproxy/imageproxy.php?img=http://img257.imageshack.us/img257/5181/layoutchi.jpg&key=9dbad1550c015d8ae44469dbe1277cda3bd386ee209cff2008ed48d0852e5bc2" alt="Imagem Postada" />
porém, olha como está ficando
/applications/core/interface/imageproxy/imageproxy.php?img=http://img10.imageshack.us/img10/8020/layout2egr.jpg&key=974324d7d1d322393aef69adc8d9274c0f53566cf400dc349338d831228d32ac" alt="Imagem Postada" />
A área marcada de amarelo deveria ficar do tamanho da caixa azul + caixa vermelha e abaixo das mesmas.
dicas?
opa, tentei adicionar o clear no div mas não resultou em nada...
o administracao.css:
.painel_admin{
float: left;
height: 27px;
width: 300px;
font-size: 8pt;
margin: 10px;
padding: 10px;
display: inline;
text-align: left;
}.painel_admin ol {
margin: 0;
padding: 0;
margin-left: 6px;
}
#painel_admin_bottom{
position: absolute;
text-align: center;
width: 740px;
clear:left;
}#painel_admin_bottom ol li{
display: inline;
text-align: center;
line-height: 24px;
} width: 300px;
color: #CCCCCC;
float: right;
border: none;
font-weight:bold;
padding: 5px 7px;
margin: 2px;
text-decoration: none;
} color: #CC6600;
border: none;
font-weight:bold;
text-decoration: none;
}body {
background: #000000;
color: #DDDDDD;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0; padding: 0;
text-align: center;
}
#corpo{
background:url(./pics/text-bgpic.jpg);
background-color:#0D0d0d;
min-height:320px;
max-height:320px;
height: 320px;
background-repeat:no-repeat;
background-position:bottom;
padding: 5px;
line-height: 150%;
overflow:auto;
text-align: justify;
scrollbar-arrow-color: #000000;
scrollbar-base-color: #000000;
scrollbar-dark-shadow-color: #000000;
scrollbar-track-color: #333333;
scrollbar-face-color: #555555;
scrollbar-shadow-color: #555555;
scrollbar-highlight-color: #555555;
scrollbar-3d-light-color: #333333;
}
#tudo {
background: #000000;
border: #555555 1px solid;
width: 740px;
margin: auto;
padding: 0px;
text-align: left;
}
#conteudo {
clear: both;
font-size: 12px;
padding: 5px;
text-align: center;
}administracao.php
<html>
<head>
<title>Associação de Karatê de Carangola</title>
</head>
<body>
<link href="index.css" rel="stylesheet" type="text/css">
<link href="administracao.css" rel="stylesheet" type="text/css">
<div id="tudo">
<?php include("./top.php"); ?>
<div id="corpo">
<div align="center">
<div class="painel_admin">
<ol>
<li><a href="">Adicionar notícia</a></li>
<li><a href="">Alterar notícia</a></li>
<li><a href="">Excluir notícia</a></li>
<li><a href="">Adicionar evento</a></li>
<li><a href="">Alterar evento</a></li>
<li><a href="">Excluir evento</a></li>
<li><a href="">Adicionar técnica</a></li>
<li><a href="">Alterar técnica</a></li>
<li><a href="">Excluir técnica</a></li>
</ol>
</div>
<div class="painel_admin">
<ol>
<li><a href=""><img src="./pics/adc_karateca.gif" border="0">Adicionar karateca</img></a></li>
<li><a href="">Alterar karateca</a></li>
<li><a href="">Excluir karateca</a></li>
<li><a href="">Adicionar mídia para download</a></li>
<li><a href="">Alterar mídia para download</a></li>
<li><a href="">Excluir mídia para download</a></li>
<li><a href="">Adicionar foto</a></li>
<li><a href="">Alterar foto</a></li>
<li><a href="">Excluir foto</a></li>
</ol>
</div>
</div>
<div id="painel_admin_bottom">
<ol>
<li><a href="">o que e o karate</a></li>
<li><a href="">contato</a></li>
<li><a href="">sobre a associacao</a></li>
</ol>
</div>
</div>
<?php include("./panels.php"); ?>
<?php include("./bottom.php"); ?>
</div>
</body>
</html>opa, no primeiro post, eu falei que queria que a caixa amarela ficasse do mesmo tamanho, porém, eu queria que ficasse com a largura das duas caixas combinadas (vermelha + azul)
Pode postar um link? Com os códigos não conseguir ver anda. :S
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
pode ser zip no rapidshare?
não man poste o link do site que é melhor ;)
num tá online, tá no meu pc e eu não estou dando sorte com o no-ip aqui em casa... =/
Use o 000WebHost que é bem bom para apenas testes. É free e sem propaganda. :D
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Kara, não fui feliz ao me cadastrar neste site (nao consegui fazer o download do exe para validação do IP). Na busca por uma solução, acabei encontrando este site:
aí, depois de tanto remar sem sucesso, achei o www.100webspace.com
o link do site ficou este: http://carangolakara...ministracao.php
Crie uma classe para aquele box e dentro dele coloque só os a e o flutue-os. Se o box não ficar em baixo, adicione um clear: both. ;)
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
valew conrade!
mas no caso, eu tive que aplicar no backup de uma versão próxima ao que eu tinha no primeiro post... =/
deu certo, agora é só corrigir o alinhamento e adicionar os gliphs :)
posta o codigo pro pessoal da uma olhada mas tenta da um
clear:left ou clear:both na div amarela pq as outras estao flutuando e ela "pula" pra cima se nao flutuar tbm