View Full Version : duvida em layout


Acelarado
20-05-2006, 17:27
boas,

a minha duvida é a seguinte, como consigo criar algo do genero como isto: http://e107.org/news.php

refiro-me a a parte do layout, tipo posso aumentar ou diminuir o tamanho da janela que o banner por exemplo ajusta-se automaticamente.

eu não sei por que termos procurar no google em msm explicar-me bem... :(
se alguem me indicar uns tutorials ou dar umas dicas...
eu uso divs e css para trabalhar, agora ando a tentar fazer algo do genero como aquilo mas n estou msm a conseguir.

keoshi
20-05-2006, 17:49
Hey!

Não sei se já deste uma vista de olhos pelo código mas é simples.

Ele tem um div "header" com um "headerr" lá dentro:


<div id="header">(...)<div id="headerr">&nbsp;</div></div>


O '&nbsp;' é um caracter para aparecer um espaço, para ter a certeza que o div contém alguma coisa.

No 'header' tem uma imagem a repetir-se no eixo dos x e no 'headerr' tem este fim (http://e107.org/e107_themes/evil9/images/logo4.png) de header.

O truque aqui é colocar o div 'headerr' (neste caso) dentro do outro e dar-lhe um posicionamento absoluto, o que permite que definas onde ele se coloca - neste caso a 10px do topo e também a 10px da direita.

Em CSS isto seria:

position: absolute;
top:10px;
right:10px;

Acelarado
20-05-2006, 17:55
eu vi codigo da pagina e tenho uma div dentro da outra tb
o problema deve ser que n tenho em absolute

bem vou tentar a se consigo alguma cena

obrigado :)

keoshi
20-05-2006, 17:57
Tens mesmo que ter em absolute, os valores de posicionamento bem e vê tens o tal espaço = '&nbsp'
;)

Acelarado
20-05-2006, 18:12
<div id="banner"><div id="end">&nbsp;</div></div>



#banner {
height: 130px;
background-repeat: no-repeat;
background-image: url(../images/index_01.jpg);
}

#end {
background-image: url(../images/index_03.jpg);
position: absolute;
}


não me esta dar o fim desaparece, fica no prencipio mas nem aparece...
e depois eu tenho que ter algo a repetir uma parte da imagem n?

keoshi
20-05-2006, 18:26
Era mais fácil se desse para dar uma olhadela na página, mas pelo que estou a ver faltam aí os valores do posicionamento do #end.

top e right, se for como o caso que mostraste.

Acelarado
20-05-2006, 18:28
ok ja percebi e ja esta a funcionar

codigo html:
<div id="banner"><div id="end">&nbsp;</div></div>

codigo css:
#banner {
height: 130px;
background-repeat: repeat-x;
background-image: url(../images/index_01.jpg);
}

#end {
height: 130px;
background-image: url(../images/index_03.jpg);
position: absolute;
right: 5px;
width: 32px;
}

obrigado pela ajuda ;)

keoshi
20-05-2006, 18:39
De nada :)