24 replies to this topic

[Nicholas Pufal]

Pessoal, criei um Layout no Photoshop mas como sou meio amador em CSS não consigo imaginar forma possível de passar isso pra CSS, e deixando mais leve o site também.

Vejam:

 modelo4_3.jpg   57.67KB   44 downloads


É possível?

Eu leio bastante, já conheço várias fontes pra conteúdo de CSS. O que eu gostaria mesmo é de alguma dica referente a esse site.

Valeu!

[Luis Otávio]

Sim, é possivel, começe a fazer, poste suas dificuldades que te ajudaremos a seguir no caminho certo.
Mas antes Começe!.. errando q se aprende

[Nicholas Pufal]

Eis o problema, por onde começo? hehehe

Eu peguei e defini um fundo pra página (aquele tom de verde). E agora como fica melhor pra eu fazer aquela parte de cima?

Queria umas dicas quanto a isso e aí eu vou me virando.

Tava com a idéia de pegar e exportar aquela borda sup esquerda, o logo, a borda superior direita, aquelas "ondas" que tem abaixo do logo e o degrade de fundo do menu, tudo isso somente para a parte de cima. Tá correto ou tem forma mais simples?

Quanto a como montar as DIVs tambem tenho minhas duvidas, ja que a maioria é puramente figura na parte de cima (exceto o menu, porque acima do degrade vai ter texto - as opcoes do menu)

pensei em algo assim:

<DIV ID="TODO"> 

<div class="cima">
<div class="logo">
</div>
<div class="menu">
</div>
</div>

</DIV>

Só que não achei muito útil a estrutura assim. Acho que o logo podia ser definido apenas como fundo de DIV, entao acho que nao tem necessidade colocar todas aquelas divs, certo?

Enfim, essas são as dúvidas pra começo. Acho que tirando elas e pegando bem o raciocínio em cima desse exemplo eu me viro sozinho

Valeu!

Edição feita por: Firehalk, 12/03/2007, 15:02.

[sTriKe]

olha, eu faria mais ou menos assim :

<div id="topo">
</div>
<div id="menu">bota a imagem com os links aqui</div>
<div id="fotos">codigo das fotos</div>
<div id="conteudo">conteudo aqui</div>
<div id="rodape"></div>

no codigo do topo, dava pra por uma margin top, para deixar aquele espaço verde em cima

Edição feita por: sTriKe, 12/03/2007, 15:04.

[Sollos]

Dando umas dicas, sem dar spoil, eu usaria 7 Containers(Div/Span)
1º - Parte arredondada em cima
2º - Logo
3º - Menu
4º - Imagem
5º - Thumbs
6º - Conteúdo
7º - Rodapé do Layout

Contudo, é bom saber tambem como alinhar os div's dentro do corpo, veja a propriedade text-align para browser IE e margin para browser W3c.
Caso queria posicionar as imagens de forma fixa e manual, é possível usar também o atributo Position:Relative/Absolute e etc..
Mas é como o colega lá em cima disse!
Comece, mesmo errando! Depois poste as dúvidas!
Ah sim, um site bom pra entender CSS www.maujor.com, é em português.

[]'s

[Nicholas Pufal]

Tô com um problema de espaço agora. Não está corretamente centralizado o logo. Ele tá um pouco mais pra direita.

Meu código CSS:

BODY {
background-color: #45530F;
}

#todo {
margin: 0;
font: verdana 12px;
padding: 8;
width:80%;
height:80%;
}

.cima {
background: url(imagens/sup_esquerdo_novo.jpg) no-repeat 0% 0%;
height: 139px;
}

.cima img {
padding-left: 185;
}

.dir {
background: url(imagens/sup_direito.jpg) no-repeat 100% 0%;
height: 139px;
}

HTML:

<div id="todo">

  <div class="cima"><DIV CLASS="dir">
  <img src="imagens/logo.jpg" border="0"></div>
  </div>

</div>

As 2 figuras (sup_direito e sup_esquerdo_novo) tem 190px de largura. O logo tem largura de 328px.

Qual pode ser o problema?

obs: não é a centralização da DIV "todo" o problema. Isso eu sei arrumar. É a descentralização do logo dentro das duas bordas arredondas.

Segue foto.

 wm2.jpg   16.72KB   14 downloads

Edição feita por: Firehalk, 12/03/2007, 17:53.

[Klaus]

Se você tirar?

.cima img {
padding-left: 185;
}

[Sollos]

Pensando melhor, cria um Div que vai conter todos os outros, daí você alinha o conteudo do Body, e depois o conteudo desse Div "Mestre", uma vez que todas as imagens e areas de texto tem que ter o mesmo tamanho para ficar uniforme, fica tudo centralizado e alinhado.

[]'s

[bimonti]

Faz um fundo com o tamanho inteiro da div e sem as bordas arredondadas na parte de cima, faz um filete com o cor de fundo e preenche o background .... Depois você faz só as bordas e dá um float left e right pra cada uma delas... vou tentar desenhar aqui:

---------------------------------------------
| 1 |								   | 2 |
|										   |
|										   |
|										   |
---------------------------------------------

Onde 1 é a borda com float left e 2 com float right, mais ou menos assim:

#menu{ background:url(fundo.gif);width:700px;height:150px;}
#menu #left{ float:left}
#menu #right{ float:right}

<div id="menu">
  <img id="right" src="right.gif">
  <img id="left" src="left.gif">
</div>

Se por acaso não souber inserir o logo, é só colocar um id pra ele, e no CSS um clear both pra ele não mudar de lado, e o #menu você define um text-align: center; ....

Assim dá pra fazer tranquilo....

[Nicholas Pufal]

Se você tirar?

.cima img {
padding-left: 185;
}

Não adianta, eu precisava daquilo para a forma como eu tava posicionando.

bimonti

tô seguindo a tua linha de raciocínio e tá dando bons resultados! Mas agora que fui inserir o logo no meio ali tive alguns problemas. Como faço para posicionar o elemento no centro? Dá forma como eu fiz ele empurra a parte esquerda pra baixo. Além do que não sei porque mas a minha DIV "menu" não tá mais centralizada. O que tá errado?

CSS

<style type="text/css">
BODY {
background-color: #45530F;
}

#todo {
margin: 0;
font: verdana 12px;
padding: 8;
width:80%;
height:80%;
margin: 10px auto 10px auto;
}

#menu{ background:url(imagens/fundo_deg_rep.jpg);width:700px;height:208px;}
#menu #left{ float:left;}
#menu #right{ float:right;}

</style>

HTML

<div id="todo">

<div id="menu">
  <img id="right" src="imagens/curva_dir.jpg">
	<img id="logo" src="imagens/logo.jpg">
  <img id="left" src="imagens/curva_esq.jpg">
</div>

</div>

Em anexo foto do que está acontecendo (alinhamento da DIV menu está mais pra direita, e não ao centro. E tem aquela quebra de linha da parte esquerda).


 preview_erro.jpg   17.6KB   9 downloads

Muito obrigado por toda a ajuda até agora

[bimonti]

Então, não é necessário fazer as imagens de canto com o height inteiro, só um quadradinho em cima tá bom ... deixa eu fazer um esquema aqui no illustrator .. 1 minuto ...

Pronto, obrigado pela paciência ...
 desenho.jpg   4.5KB   16 downloads

Tomei a liberdade de expressar isso em CSS tbm, quem sabe não ajuda outras pessoas a fazer essa borda:

<style>
#top{ width:600px; height:150px;border:1px solid #000;}
#top #direita{	width:30px; height:30px; float:right; background:#ccc;}
#top #esquerda{	width:30px; height:30px; float:left; background:#ccc;}
#top #logo{	clear:both; width:200px; height:50px; background:#f00; margin:0px auto;}
</style>

<div id="top">
	<div id="direita"></div>
	<div id="esquerda"></div>
	<div id="logo"></div>
</div>

Usei divs pq não tinha imagens ...

[Nicholas Pufal]

hehehe valeu,, mas foi mais fácil que isso até, era só ter mudado a foto do logo para baixo das 2 DIVs

Com isso consegui arrumar o logo de lugar, sem aquela quebra que tava. Dei uma consertada no css da DIV mais externa, e agora está tudo alinhado... com exceção do logo O logo não fica no centro de jeito nenhum.

Além do que fui ver agora no IE o site e está uma coisa HORRÍVEL! Tá tudo completamente torto. Tô usando errado alguma coisa? Ou é problema do IE mesmo?

Vejam:

No FF ->  ff.jpg   23.36KB   12 downloads
No IE ->  ie.jpg   16.51KB   12 downloads

O HTML permanece o mesmo, com exceção de que agora a imagem do logo está abaixo das Divs (tudo perfeito no html).

Aqueles cantos arredondados eu tenho que deixar com aquela altura por causa da borda lateral existinte neles. Eu nao consigo reproduzir igual no CSS, nao fica muito bom.

O CSS agora está assim:

<style type="text/css">
BODY {
background-color: #45530F;
}

#todo {
margin: 0;
font: verdana 12px;
padding: 4;
width:720px;
height:80%;
margin: 10px auto 10px auto;
}

#menu{ background:url(imagens/fundo_deg_rep.jpg);width:100%;height:208px;}
#menu #left{ float:left; width: 36px; height: 208px;}
#menu #right{ float:right; width: 36px; height: 208px;}
#menu #logo {margin:0px auto; clear:both; width: 328px; height: 138px;}

</style>

Muito obrigado! Eu sei que eu tô um pé no sac... mas acho que superando essa primeira etapa eu me viro no resto, já que pra montar o resto é basicamente dessa forma mesmo.

[bimonti]

O comportamento é esperado mesmo, o logo descer ....

Pq com o clear:both ele não vai aceitar nada que esteja dos lados, então ele desce ... ^^

Veja a possibilidade de usar aquele CSS que eu fiz acima ... e o problema das bordas pode ser resolvido facilmente, pega o valor hexadecimal dessa cor no photoshop e na div do topo você seta o border-right e border-left de acordo ... não têm zica não ....

[Nicholas Pufal]

O comportamento é esperado mesmo, o logo descer ....

Pq com o clear:both ele não vai aceitar nada que esteja dos lados, então ele desce ... ^^

Veja a possibilidade de usar aquele CSS que eu fiz acima ... e o problema das bordas pode ser resolvido facilmente, pega o valor hexadecimal dessa cor no photoshop e na div do topo você seta o border-right e border-left de acordo ... não têm zica não ....

Cara, tem zica sim! hehehe e muita!

Primeiro: que a borda acaba pegando a figura das laterais (dos cantos, la de cima arredondados) e entao nao fica uma borda certinha.
Segundo: tive que tirar o clear:both (qual a utilidade dele por sinal? eu nao sabia que ele fazia aquilo de não deixar nada nas laterais... pois é exatamente o que eu quero! não quero o logo na linha abaixo).

No IE ficou um pouco melhor a minha situação, são só alguns ajustes agora pra centralizar, e esse problema aí da borda avançar além da quebra do contorno.

Foto:
 status.jpg   15.38KB   14 downloads


Valeu

[bimonti]

Faz sem borda plzzz ...