Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia galera, estou enfrentando o mesmo problema relatado neste link do Maujor, tem alguma forma alternativa de resolver este problema ou somente com faux column? Achei muito complicado ter que criar uma imagem de fundo exatamente como está o layout, no caso tenho o menu separado do conteúdo por bordas tracejadas, não consigo acertar a imagem, hehe.
eu postei um tempo atrás, uma técnica de faux columns, sem usar imagens:
William vou testar o teu exemplo quando chegar em casa, só uma coisa: o fato de eu utilizar border nas colunas não vai influenciar?
Achei muito massa tua nuvem de tags no blog :D
>
William vou testar o teu exemplo quando chegar em casa, só uma coisa: o fato de eu utilizar border nas colunas não vai influenciar?
Achei muito massa tua nuvem de tags no blog :D
Vai. Por isso a técnica só funciona com cores sólidas, ou os efeitos disponíveis para bordas (dashed, dotted, double, inset, outset, etc).
>
Vai. Por isso a técnica só funciona com cores sólidas, ou os efeitos disponíveis para bordas (dashed, dotted, double, inset, outset, etc).
Então Evandro, estou usando justamente os efeitos disponíveis, no caso dotted.
Depende do layout @gRoOvE,
Poste uma imagem dele, só assim consigo te sugerir uma boa solução.
Consegui fazer da forma que foi dita, porém não estou conseguindo arrumar o rodapé que avançou por cima da coluna da esquerda.
Segue meu código:
* {
margin: 0;
padding: 0;
}body {
font:12px Verdana, Arial, Serif;
color:#BEBEBE;
height: 100%;
background: #999999;
text-align: center;
}
#Geral {
width: 1000px;
margin:0 auto;
text-align: left;
overflow: hidden;
}
#Cabecalho {
color: white;
height: 80px;
background: #000000;
font-weight: bold;
text-align: center;
}
#Conteudo {
float: right;
width: 800px;
background-color: #333333;
}
#Menu {
float: left;
background-color: #503d78;
width: 200px;
padding-bottom: 1000em;
margin-bottom: -999.5em;
}
#Rodape {
height: 20px;
clear: both;
background-color: #1C1C1C;
font-weight: bold;
}Imagem:
/applications/core/interface/imageproxy/imageproxy.php?img=http://dl.dropbox.com/u/38200936/piCSS.png&key=eeb9e928f730cbdbdedf7a954bf33e0f745d28314b18238d69ffe58980e7eb09" alt="piCSS.png" />
Alguém consegue me ajudar? Se é que é possível fazer isso com esta alternativa ao faux column.
poste também o html, ou então um link online.
Assim podemos executar o código e ver o erro acontecendo.
Estou rodando em servidor local. Com relação ao código, é algo simples assim:
<div id="geral">
<div id="Cabecalho"></div>
<div id="Menu"></div>
<div id="Conteudo"></div>
<div id="Rodape"></div>
</div>Caso seja necessário o código completo, posso postar depois.
Por favor, CSS completo e HTML completo dentro de [
[
. Fica mais fácil pra debugar.
Se preferir, pode mandar também um link para verificação online.
Segue o código:
index.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="/TurismoGuiado/resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<title>Turismo Online Guiado</title>
</h:head>
<h:body>
<div id="Geral">
<div id="Cabecalho">
<ui:insert name="Cabecalho">
<h1>TURISMO ONLINE GUIADO</h1>
</ui:insert>
</div>
<div id="Conteudo">
<ui:insert name="Conteudo"></ui:insert>
</div>
<div id="Menu">
<ui:insert name="Menu">
<h:form>
<h:panelGrid>
<h:commandLink value="Página Principal" action="paginaPrincipal" rendered="#{!usuarioMB.userAdmin}"/>
<h:commandLink value="Minha Página" action="principalAdmin" rendered="#{usuarioMB.userAdmin}"/>
<h:commandLink value="Manter Categoria Servicos" action="telaManterCategoria" rendered="#{usuarioMB.userAdmin}"/>
<h:commandLink value="Manter Ponto Interesse" action="telaManterPontoInteresse" rendered="#{usuarioMB.userAdmin}"/>
<h:commandLink value="Logout" action="#{usuarioMB.logOut}" rendered="#{usuarioMB.userAdmin}"/>
</h:panelGrid>
</h:form>
</ui:insert>
</div>
<div id="Rodape">
<ui:insert name="Rodape">
<h:panelGrid>
<h:outputText value="Projeto Interdisciplinar - Turismo Online Guiado v1.0"/>
<h:outputText value="Melhor visulizado em 1024x768 - Navegador Chrome v17"/>
</h:panelGrid>
</ui:insert>
</div>
</div>
</h:body>
</html>CSS
* {
margin: 0;
padding: 0;
}body {
font:12px Verdana, Arial, Serif;
color:#BEBEBE;
height: 100%;
background: #999999;
text-align: center;
}
#Geral {
width: 1000px;
margin:0 auto;
text-align: left;
overflow: hidden;
background: #444444;
}
#Cabecalho {
height: 40px;
background: #1C1C1C;
padding: 20px;
text-align: center;
}
#Conteudo {
float: right;
width: 800px;
background-color: #444444;
}
#Menu {
float: left;
background-color: #503d78;
width: 200px;
padding-bottom: 1000em;
margin-bottom: -999.5em;
}
#Rodape {
height: 20px;
clear: both;
background-color: #1C1C1C;
color: #fff;
font:10px Verdana, Arial, Serif;
text-align: center;
}
.tabelaCabecalho {
background-color: #000000;
font-size: 14px;
color: #ffffff;
}
.tabelaDados {
width: 100%;
color: #000000;
}
.tabelaLinhaCorClara {
background-color: #708090;
color: #fff;
font-weight:bold;
}
.tabelaLinhaCorEscura {
background-color: #666;
color: #fff;
font-weight:bold;
}a:link, a:visited {
text-decoration: none;
color:#FFFFFF;
font-weight:bold;
}color:#ADFF2F;
font-weight:bold;
}
#msgSucesso {
color: #6edc00;
font-size: 14px;
font-weight: bold;
}
#msgFalha {
color: #FF0000;
font-size: 14px;
font-weight: bold;
}
.labelForm {
font:12px Verdana, Arial, Serif;
color:#BEBEBE;
font-weight: bold;
}h2 {
border-bottom-style: solid;
border-bottom-width: 1px;
padding: 5px;
}h1 {
font-weight: bold;
color: white;
}
Poderia colocar link do site, fica mais facil pra verificar :)