Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Se tiver alguém ai disposto a ajuda por favor fale.
Bom não entra na minha cabeça como fatiar o layout e como montar ele no HTML+CSS, tipo porque aquele jeito de recortar e ja sai pronto o css e o html nos deixa lerdos e não aprendemos como montar ele na marra vamos dizer assim, por isso queria que alguém me ajudasse a montar um layout .
>
Se tiver alguém ai disposto a ajuda por favor fale.
Bom não entra na minha cabeça como fatiar o layout e como montar ele no HTML+CSS, tipo porque aquele jeito de recortar e ja sai pronto o css e o html nos deixa lerdos e não aprendemos como montar ele na marra vamos dizer assim, por isso queria que alguém me ajudasse a montar um layout que vou disponibilizar, tipo primeiro agente vai recortando e quem ajuda vai postando o código aqui até o layout estiver pronto. Pois acho que não vai servir so pra mim mais pra muitas outras pessoas que tem as mesmas dúvidas que eu.
Download PSD do layout:
http://rapidshare.com/files/124850772/Untitled-1.psd.html
Deis de já agradeço de coração quem ajudar, pois a situação ta precária aqui apkasokasoaskas. até mais.
Opa! concordo plenamente com o que o tiu uill disse!
aqui no forum e em diversos outros sites e foruns, as pessoas não se importam em ajudar, mas querer pronto é pedir demais. Se quiser mesmo pronto, pode negociar um preço com o pessoal que faz free-lance [sou um deles], ainda existem muitos blogs na internet que ensinam, dão o caminho das pedras de como fazer os layouts e outras coisas.
eu tenho um blog a pouco tempo acesse: http://aprendacss.wordpress.com
lá existem algumas dicas legais.
quando ao seu layout, não consegui visualizar, se puder postar uma imagem em http://imageshack.us ficaria agradecido!
se quiser um orçamento do layout, por favor entre em contato via MP
se quiser fazer sozinho, sugiro dividir o seu layout em containers para facilitar o seu trabalho!
abraço
Esse layout nem e pra vender nem nada, se acha que iria vender um layout feio desce??? fiz ele pra ve se conseguia codificar ele como falei so pra treinar, e se eu fosse vender nunca iria disponibilizar o psd, me desculpe, mais e porque quando tento codificar nunca da certo escrevo tudo com html certinho, o problema e na hora de adcionar as imagens.
EDIT: tiu uiLL valeu pelas dicas do div nem sabia de englobar tudo, vou ir postando aqui minha evolução ai vocês podem ir me ajudando?
>
Esse layout nem e pra vender nem nada, se acha que iria vender um layout feio desce??? fiz ele pra ve se conseguia codificar ele como falei so pra treinar, e se eu fosse vender nunca iria disponibilizar o psd, me desculpe, mais e porque quando tento codificar nunca da certo escrevo tudo com html certinho, o problema e na hora de adcionar as imagens.
EDIT: tiu uiLL valeu pelas dicas do div nem sabia de englobar tudo, vou ir postando aqui minha evolução ai vocês podem ir me ajudando?
opa!
cara será que você está fazendo o HTML certinho??
faça da seguinte forma!
conforme for aparecendo as dúvidas, dê uma pesquisada no forum, pois tem muita dúvida respondidas e se caso ainda persistirem as dúvidas, poste que teremos prazer em te ajudar!
até mais
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="">
<title>Untitled 1</title>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">MENU</a></li>
<li><a href="#">ARTIGOS</a></li>
<li><a href="#">DOWNLOADS</a></li>
<li><a href="#">CONTATO</a></li>
</ul>
</div>
<div id="menu2">
<ul>
<li><a href="#">EPSODIOS</a></li>
<li><a href="#">RMVB</a></li>
<li><a href="#">DVD</a></li>
<li><a href="#">IMAGENS</a></li>
<li><a href="#">TUDO</a></li>
<li><a href="#">TESTES</a></li>
<li><a href="#">GOGO</a></li>
<li><a href="#">FOCO</a></li>
<li><a href="#">HTML</a></li>
</ul>
</div>
<div id="titulo1">
<h1>UZUMAKI NARUTO</h1>
</div>
<div id="paragrafro1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In justo mi, convallis non, laoreet id condimentum a, dui.Quisque erat lorem, cursus at, tempus et, lobortis ut, purus. Curabitur tempor ullamcorper purus. Nulla facilisi.
Curabitur lectus. Etiam sem elit, ornare in, hendrerit quis, tristique sed, velit. Suspendisse rhoncus pede eget lorem.
Pellentesque eleifend ipsum non ligula. Nullam a tellus sit amet dolor blandit fringilla. Vestibulum lobortis turpis non s
em. Nullam vel dolor vitae mauris tincidunt malesuada. Suspendisse vehicula. Aliquam ac magna sit amet tortor pretiu
m vestibulum. Nulla tristique aliquam turpis</p>
</div>
<div id="paragrafo2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In justo mi, convallis non, laoreet id condimentum a, dui. Quisque ante risus, porttitor in, consectetuer eu,. Suspendisse sodales eros eget elit. Donec at risus. Mauris pede.</p>
</div>
</body>
</html>
Ta certo o código?
Posta o CSS tb.
E olhe:
<div id="menu2">
<ul>Pesquise sobre DIVMANIA, você não precisa criar um container nivel de bloco DIV para um elemento que já tem!!!UL já é um container, pelo que vi, você não precisa dessa div. Ficaria:
<ul id="menu2">..A mesma coisa para o parágrafo.
Use DIVs para recortar o layout, e posicionar, e não para fixar elementos desse jeito ai. Leia novamente os passos que eu disse. Pois pelo que vi, você não seguiu nenhum deles, eu listei todas as DIVs que você vai precisar.
apenas se atende ao detalhe do DOCTYPE
crie uma div para englobar todos os elementos
<div id="titulo1">
<h1>UZUMAKI NARUTO</h1>
</div>
<div id="paragrafro1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In justo mi, convallis non, laoreet id condimentum a, dui.
Quisque ante risus, porttitor in, consectetuer eu, tristique sit amet, sem. estibulum fermentum blandit erat. Donec
ligula enim, congue nec, dapibus iaculis, elementum sed, risus. Vestibulum nunc libero, adipiscing at, congue ut,
molestie ut, lorem. Duis ultrices lectus quis elit. Quisque vestibulum. Fusce orci nibh, eleifend sed, semper ut, viverra
sed, neque. Donec tincidunt molestie quam. Sed pharetra dapibus elit. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Phasellus at purus. In tincidunt tellus. Duis quis mi in ligula luctus tempor
. Suspendisse sodales eros eget elit. Donec at risus. Mauris pede.
Sed elit. Praesent orci magna, ullamcorper at, aliquet sed, pretium vitae, elit. Sed nisl. Curabitur in pede sed eros
tincidunt pretium. Ut eleifend egestas est. Phasellus ornare. Suspendisse potenti. Vivamus nec tortor vitae libero
actor elementum. Vivamus tincidunt felis id nibh. Quisque gravida ante vel metus. Aliquam tempus congue augue.
In nunc nulla, ullamcorper eu, facilisis sit amet, interdum eget, purus. Etiam orci tortor, luctus non, venenatis et,
consectetuer sed, orci. Phasellus justo. Aliquam porttitor faucibus nisl. Donec eget neque. Nunc laoreet. Pellentesque
convallis orci et mi. Quisque ac augue.
Quisque erat lorem, cursus at, tempus et, lobortis ut, purus. Curabitur tempor ullamcorper purus. Nulla facilisi.
Curabitur lectus. Etiam sem elit, ornare in, hendrerit quis, tristique sed, velit. Suspendisse rhoncus pede eget lorem.
Pellentesque eleifend ipsum non ligula. Nullam a tellus sit amet dolor blandit fringilla. Vestibulum lobortis turpis non s
em. Nullam vel dolor vitae mauris tincidunt malesuada. Suspendisse vehicula. Aliquam ac magna sit amet tortor pretiu
m vestibulum. Nulla tristique aliquam turpis</p>
</div>
<div id="paragrafo2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In justo mi, convallis non, laoreet id condimentum a, dui. Quisque ante risus, porttitor in, consectetuer eu,. Suspendisse sodales eros eget elit. Donec at risus. Mauris pede.</p>
</div><div id="conteudo">
<h1>UZUMAKI NARUTO</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In justo mi, convallis non, laoreet id condimentum a, dui.
Quisque ante risus, porttitor in, consectetuer eu, tristique sit amet, sem. estibulum fermentum blandit erat. Donec
ligula enim, congue nec, dapibus iaculis, elementum sed, risus. Vestibulum nunc libero, adipiscing at, congue ut,
molestie ut, lorem. Duis ultrices lectus quis elit. Quisque vestibulum. Fusce orci nibh, eleifend sed, semper ut, viverra
sed, neque. Donec tincidunt molestie quam. Sed pharetra dapibus elit. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Phasellus at purus. In tincidunt tellus. Duis quis mi in ligula luctus tempor
. Suspendisse sodales eros eget elit. Donec at risus. Mauris pede.
Sed elit. Praesent orci magna, ullamcorper at, aliquet sed, pretium vitae, elit. Sed nisl. Curabitur in pede sed eros
tincidunt pretium. Ut eleifend egestas est. Phasellus ornare. Suspendisse potenti. Vivamus nec tortor vitae libero
actor elementum. Vivamus tincidunt felis id nibh. Quisque gravida ante vel metus. Aliquam tempus congue augue.
In nunc nulla, ullamcorper eu, facilisis sit amet, interdum eget, purus. Etiam orci tortor, luctus non, venenatis et,
consectetuer sed, orci. Phasellus justo. Aliquam porttitor faucibus nisl. Donec eget neque. Nunc laoreet. Pellentesque
convallis orci et mi. Quisque ac augue.
Quisque erat lorem, cursus at, tempus et, lobortis ut, purus. Curabitur tempor ullamcorper purus. Nulla facilisi.
Curabitur lectus. Etiam sem elit, ornare in, hendrerit quis, tristique sed, velit. Suspendisse rhoncus pede eget lorem.
Pellentesque eleifend ipsum non ligula. Nullam a tellus sit amet dolor blandit fringilla. Vestibulum lobortis turpis non s
em. Nullam vel dolor vitae mauris tincidunt malesuada. Suspendisse vehicula. Aliquam ac magna sit amet tortor pretiu
m vestibulum. Nulla tristique aliquam turpis</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In justo mi, convallis non, laoreet id condimentum a, dui. Quisque ante risus, porttitor in, consectetuer eu,. Suspendisse sodales eros eget elit. Donec at risus. Mauris pede.</p>
</div>Achei esse link:
http://www.maujor.com/tutorial/layout-css-passo-a-passo.php
Acho que lhe será útil... vai estudando e perguntando..
>
Achei esse link:
http://www.maujor.com/tutorial/layout-css-passo-a-passo.php
Acho que lhe será útil... vai estudando e perguntando..
muito bom esse link!
abraço
Cara... você tá praticamente pedindo para que façamos o teu trabalho..
Os passos são os seguintes:
Faça uma DIV geral, para englobar todas as outras, e centralizar o site.
Faça uma DIV para o topo, e nela coloque a imagem do topo, o menu do topo, e o search.
Faça uma DIV para o conteudo, e nela flutue uma UL para o menu(estilize a UL mesmo), e depois insira teus conteudos.
Faça outra DIV para o rodapé, já com clear, e de um pouco de margem para que ela fique assim, longe da do conteudo.
Agora você começa a pensar se esses teus cantos arredondados serão com imagens, e qntas. Pois se o conteudo for precisa crescer, você vai precisar de no minimo 2 imagens... (para cada box arredondado). Se não, se puder ser qualquer arredondamento, faça com http://www.html.it/articoli/nifty/index.html
E seja feliz cara... pedir pra alguém fazer todo o código, seria o mesmo de exportar em tabelas pelo photoshop, pois você não estaria aprendendo nada e seria fácil pra você do mesmo jeito.
Eu trabalho com isso, faço FreeLancers. Não me importo de tentar ajudar as pessoas no fórum, pois aprendo assim. Mas não farei todo o trabalho de graça. Vou lhe mandar um PM.