Layout 100%, Quase

Leandro Senni · Junho 30, 2008

Ola... estou com um pequeno prblema...

meu codigo CSS e HTML

#page, #topo, #menu, #conteudo, #rodape, #news {
	width: 100%;
}
#topo {
	height: 130px;
	background-image:url(page/image/topo.jpg);
}
#logotipo {
	margin-left:17px;
	margin-top:11px;
}
#menu {
	height: 35px;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	padding-top: 12px;
	background-color:#FFFFFF;
}
#conteudo {
	background-color: #EBEBEB;
	min-height:100px;
	clear:both;
}
#informacao {
	width:160px;
	margin:10px;
	margin-left:0px;
	float:right;
}
#artigo {
	width:auto;
	margin:10px;
	float:left;
}
.left {
	float:left;
}
.right {
	float:right;
}
#rodape {
	height: 30px;
	padding-top:10px;
	clear:both;
}

<?php include_once("Connections/db_blog.php"); ?>
<?php include("system/funcao.php"); ?>
<?php include("page/head.php"); ?>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="page">
<?php include("page/topo.php"); ?>
<?php include("page/menu.php"); ?>
<div id="conteudo">
  <div id="artigo">a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a </div>
  <div id="informacao">informações ssobre todos as operações e LINK para a visita</div>
  </div>
<?php include("page/rodape.php"); ?>
</div>
</body>

</html>

Os Include esta Otimos... pois estava num em modo 800*600

bom meu problema é... a DIV informacao deve ter 160PX... e o resto AUTO... ou 100% do que sobrou para ela...

Arrumei a BODY para fica no minimo 800*600 pra cima...

body,td,th {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
}
body {
	margin:10px;
	background-color: #FFFFFF;
	min-width:757px;
}

so que no FF nao fica FLOAT Certo tentei de monte... como posso realizar um LAYOUT 100%??

Obrigado!!!

brcontainer · Junho 30, 2008

ponha um link fica mais facil, uma pergunta, por que colocou width:100%;

#page, #topo, #menu, #conteudo, #rodape, #news {
	width: 100%;
}

tecnicamente o 100% não funciona igual em tabelas, ele funciona conforme o tamanho da janela, acho que isso pode ser parte do problema.

Leandro Senni · Junho 30, 2008

OK... as 20:06 vai esta no SITE brazilpoliticagem.net46.net

deixo pra você lá...

Hoje, qual o melhor pra BLOG... 100% ou um tamanho FIXO fipo pra 1024?

brcontainer · Junho 30, 2008

100% não é igual como com tabelas, que se ajusta aos elementos PAIS, portanto seria melhor algo fixo, pois a ideia de layout liquido não funciona da maneira que você está pensando.

[editado]tem muita coisa errada no seu site, tanto quanto a semantica, tanto quanto a estrutura e algumas coisas de padrões.

no menu recomendo usar listas não ordenadas: <UL> e <LI>

adicione o atributo ALT="":

<img src="/page/image/logotipo.jpg" id="logotipo" title="Blog Brazil" />

faça algo fixo:

#page, #topo, #menu, #conteudo, #rodape, #news {
	width: 100%;
}

#page, #topo, #menu, #conteudo, #rodape, #news {
	width: 1000px;
}

Leandro Senni · Junho 30, 2008

OK... VLW ai em...SilverFox...

vou ver e cria em modo 1024 pois.. 800*600 fica pequenino demais... ainda mais pra mim usa quase 2500

FALOW...

brcontainer · Junho 30, 2008

opa detalhe o use de target="" não é mais aceito, ele é "deprecated".

[editado]

isso vai lhe ajudar a fazer menus melhores:

http://www.maujor.com/tutorial/menu_vert.php

http://www.maujor.com/tutorial/menurollimg.php

http://www.maujor.com/tutorial/menutooltip.php

para alinhar eles na horizontal basta aplicar uma media grande (tipo width:100px;) ao o UL e aplicar float:left; aos li's

Leandro Senni · Julho 1, 2008

Tem como eu cria em CSS... tipo... site vai esta em 1024...

uma pessoa acessa em 800*600 e o MENU e RODAPE fica centralizado pra ela... e se essa pessoa MAXIMIZA para 1024 o MENU e RODAPE fica do tamanho e centraliza?

tipo... uma DIV dinamica... ele aumenta o tamanho conforme o tamanho do BROWSER...

tinha um TUTO mais nao achei que falava de usa POSITION...

VLW>..

Aprendiz CSS · Julho 1, 2008

o que você pode fazer, mas só funcionará nos navegadores novos é usar o MIN-WIDTH e o MAX-WIDTH

abraço

Leandro Senni · Julho 1, 2008

mais isso eu sei... queria uma coisa que faz qdo você MAXIMIZA ele muda...

tipo

| |

assim 800*600

e 1024

| |

fica reto... mostrando para 800*600 somente o rodape inteiro

brcontainer · Julho 1, 2008

bem seria que tipo de layout duas colunas ou três colunas, o que o Aprendiz CSS falou praticamente é a resposta.

só uma pergunta você quer que a página aumente na vertical ou horizontal?

vou lhe passar um link (pelo que eu entedi de rodape):

rodape fixo: http://forum.imasters.com.br/index.php?showtopic=291579

e na horizontal seria isso:

http://forum.imasters.com.br/index.php...=247766&hl=

Leandro Senni · Julho 2, 2008

Nao tenho a certeza se é possivel adaptar...

POIS somente o RODAPE vai muda...

tipo... Meu LAYOUT sera pra 1024

entao se eu entro com 800*600 o MENU fica mais ao canto... queria que ele se ajustasse ao centro sempre... e com isso o rodape...

tipo... minha imagem... de como esta

Imagem Postada

esse Rodape é pra fica assim em MODO 800*600 fica certinho e no caso em 1024 que é a FOTO é pra fica ate no FINAL... tipo ele seguir a barra e no MAX ate XXXPX... no caso acho que é 982px...

Usando o POSITION???

Aprendiz CSS · Julho 2, 2008

tenta colocar no menu

margin: 0 auto; /* alinha para os outros */
text-align: center; /* alinha para o IE */

espero que seja isso!

Leandro Senni · Julho 4, 2008

Ola criei um sistema assim...

é um sobre.. com Imagem de fundo... para formato de Site em LAYOUT 100%....

ele espande para HORIZONTAL E VERTICAL

o Codigo...

.contsobre {
	background-color:#55C4C0;
	background-image:url(/page/image/contsobre/contsobre_a1.jpg);
	background-repeat: no-repeat;
}
.sobreTopEsq {
	float:left;
	background-image:url(/page/image/contsobre/contsobre_a1.jpg);
	background-repeat:no-repeat;
	width:29px;
	height:40px;
}
.sobreTopDir {
	float:right;
	background-image: url(/page/image/contsobre/contsobre_a3.jpg);
	background-repeat:no-repeat;
	width:29px;
	height:40px;
}
.sobreTopCen {
	float:none;
	background-image:url(/page/image/contsobre/contsobre_a2.jpg);
	background-repeat:repeat-x;
	width:auto;
	height:40px;
}
.sobreCenEsq {
	background-image:url(/page/image/contsobre/contsobre_b1.jpg); 
	background-repeat:repeat-y; 
}
.sobreCenDir {
	float:right;
	background-image:url(/page/image/contsobre/contsobre_b3.jpg);
	background-repeat:repeat-y;
	width:29px;
}
.sobreCenCen {
	margin-left:29px;
	padding-right:29px;
	background-image:url(/page/image/contsobre/contsobre_b3.jpg);
	background-position:right;
	background-repeat:repeat-y;
}
.sobreBotEsq {
	float:left;
	background-image:url(/page/image/contsobre/contsobre_c1.jpg);
	background-repeat:no-repeat;
	width:29px;
	height:23px;
}
.sobreBotDir {
	float:right;
	background-image:url(/page/image/contsobre/contsobre_c3.jpg);
	background-repeat:no-repeat;
	width:29px;
	height:23px;
}
.sobreBotCen {
	float:none;
	background-image:url(/page/image/contsobre/contsobre_c2.jpg);
	width:auto;
	height:23px;
}

como posso otimizar?

tipo. assim o codigo...

Nos Canto... o Esq, Dir.. tem imagem e o CenCen fica com o fundo de CONTSOBRE

tem como por em somente 1 {} todos os CANTOS?

Obrigado

brcontainer · Julho 5, 2008

1 {}

isso não deu para entender, você quer um px em todos os cantos ou você quer definir varias coisas em um só seletor {}?

Leandro Senni · Julho 5, 2008

em somente um tipo de .ARTIGO { }

em vez destes 10 quase. ai...

tem como simplifica ou OTIMIZA?

William Bruno · Julho 5, 2008

Com essa marcação, oque você pode fazer em CSS, é juntar as estilizações iguais.

.contsobre, sobreTopEsq, sobreTopDir, .... e por ai vai{
	width:29px;
	e vai colocando todas as que forem iguais...
}

Não sei oque você tá tentando fazer... mas deve haver um jeito melhor tb... oque pode ser feito em CSS, para diminuir o código apartir doque você postou, é isso.

Leandro Senni · Julho 5, 2008

Ok... nao tem como você declara.. um background tipo ... superior direito e superior esquerdo ter um fundo diferente

somente usando um conjunto Novo né?

William Bruno · Julho 5, 2008

Não entendi muito bem.. mas você ja ouviu CSS Sprite?

http://imasters.com.br/artigo/6041/css/css_sprite/

A técnica aqui, é retirar de uma só imagem, alterando posicionamentos todas as que você precisa.

E se restar algo, é sempre bom consultar:

http://www.maujor.com/tutorial/backtut.php

^^ no mais, vai perguntando ai...

Arquivado

Layout 100%, Quase

Recommended Posts

Leandro Senni 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leandro Senni 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leandro Senni 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leandro Senni 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leandro Senni 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leandro Senni 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leandro Senni 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leandro Senni 1

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

Leandro Senni 1

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

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real