Alternativa ao Faux column

gRoOvE · Março 19, 2012

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.

NetBoy16 · Março 19, 2012

Poderia colocar link do site, fica mais facil pra verificar :)

William Bruno · Março 19, 2012

eu postei um tempo atrás, uma técnica de faux columns, sem usar imagens:

http://wbruno.com.br/2011/03/12/faux-columns-sem-imagens/

gRoOvE · Março 19, 2012

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

Evandro Oliveira · Março 19, 2012

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).

gRoOvE · Março 19, 2012

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.

William Bruno · Março 19, 2012

Depende do layout @gRoOvE,

Poste uma imagem dele, só assim consigo te sugerir uma boa solução.

gRoOvE · Março 21, 2012

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:

Alguém consegue me ajudar? Se é que é possível fazer isso com esta alternativa ao faux column.

William Bruno · Março 21, 2012

poste também o html, ou então um link online.

Assim podemos executar o código e ver o erro acontecendo.

gRoOvE · Março 22, 2012

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.

Evandro Oliveira · Março 22, 2012

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.

gRoOvE · Março 23, 2012

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;
}
a:hover {
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;
}

Arquivado

Alternativa ao Faux column

Recommended Posts

gRoOvE 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

gRoOvE 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

gRoOvE 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

gRoOvE 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

gRoOvE 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

gRoOvE 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Fóruns

Tempo Real

Informação importante