Ir para conteúdo

POWERED BY:

Arquivado

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

Rspina

Imposivel desenvolver este layout!?

Por , em Desenvolvimento frontend

Recommended Posts

Rspina    0

Rspina
Postado

Olá galera!! Seguinte....nem sei masi o que tentar, ja tentei de tudo e não deu certo se alguem tiver a solução vai ser o cara ao meu ver!!!!!

 

este é o layout:

http://www.fohatlux.com.br/teste/layout.jpg

 

1 - Esse layout fica centralizado na tela.

2 - a parte onde vai o conteudo é a parte branca, esta parte branca esta dividida por uma linha pontilhada separando o conteudo do background. O conteudo fica do lado esquerdo e o que estiver do lado diretito da linha deve ser o background, onde este deve preencher de branco todo o espaço que estiver sobrando do lado direito e ainda o pior de tudo acompahnar na altura o que estiver no lado do conteudo e ai que estou apanhando.....

 

este é o link da estrutura:

 

http://www.fohatlux.com.br/teste/

 

codigo:

 

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>

<!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=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

body{

background:url(img/backpag.jpg) repeat;

color:#333;

font-family:"Trebuchet MS", Verdana, Arial, sans-serif;

font-size:12px;

margin:0;

padding:0;

height:100%;

text-align:center;

cursor:default;

}

html{

height:100%;

}

#bgright{

background:#FFF url(img/backpagright.jpg) repeat-x;

color:#333;

height:183px;

left:50%;

position:absolute;

top:0;

z-index:0;

width:50%;

}

#geral{

background:#FFF url(img/backcont.jpg) repeat-y;

color:#333;

display:table;

margin:0 auto;

padding:0;

position:relative;

text-align:left;

width:770px;

z-index:1;

height:100%;

}

#top{

margin:0;

padding:0;

width:770px;

height:183px;

background:#FFF url(img/backtop.jpg) no-repeat;

}

#menu{

margin:0;

padding:0;

width:500px;

height:36px;

float:right;

}

#logo{

margin:59px 0 0 22px;

padding:0;

width:162px;

height:69px;

position:absolute;

cursor:pointer;

background-color:#CCCCCC;

}

#ilustracao{

margin:36px 0 0 488px;

padding:0;

width:282px;

height:147px;

position:absolute;

background-color:#CCCCCC;

}

</style>

</head>

<body>

 

<div id="bgright"></div>

<div id="geral">

<div id="top">

<div id="logo">LOGO</div>

<div id="menu">MENU PRINCIPAL</div>

<div id="ilustracao">ILUSTRACAO DE PAGINA</div>

</div>

</div>

 

</body>

</html>

 

valeu

 

Att

 

Rafael

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Escreva alguns textos de exemplos no seu jpg pra gente saber mais ou menos onde vai cada menu, link, texto de conteudo, etc...

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Utilize este modelo feito pelo pa_bruno: http://www.brunodulcetti.com/artigos/layou...nasEsquerda.htm

 

que pode ser lido neste artigo: http://www.imasters.com.br/artigo.php?cn=3638&cc=280

 

 

Simplão e vai ficar show!!! Depois posta o resultado pra gente ver. Seu design ficou muito bom...

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