Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde,
Pessoal , estou aprendendo XHTML e CSS na "unha" afim de conseguir meu "ganha pão" e a maior dificuldade que estou tendo no momento é em como otimizar meu código e utilizar os recursos de maneira correta. Estou desenvolvendo um site (somente para o meu aprendizado)e gostaria que os colegas o avaliassem e me corrijam no que julgarem necessário.Segue abaixo o código em html e após a folha de estilo.
OBS: Eu praticamente não apliquei regras de estilo, somente a marcação e posicionamento dos elementos.
<!doctype html>
<html>
<head>
<title>Galeria de Arte</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="gravuras, pintores, galeria, relevo" />
<meta name="description" content="Gravuras - Artistas nacionais e internacionais" />
<base target="_blank" />
<link rel="stylesheet" type="text/css" href="estilo.css" media="screen" />
</head>
<body><!--container que comporta toda a página-->
<div id="wrapper">
<!--cabecalho da página-->
<header id="header">
<div id="logo">
<a href="#"><img src="http://lorempixel.com/245/95/sports" alt="Logo da Galeria" /></a>
</div>
<!-- formularios de pesquisa -->
<form action="url" id="mainForm">
<input type="text" placeholder="Artistas" name="procArt"/>
<input type="submit" value="ok"/>
<input type="text" placeholder="Procurar Por" name="procPor"/>
<input type="submit" value="ok"/>
</form>
<nav id="nav">
<a href="#">LINK 1</a>
<a href="#">LINK 2</a>
<a href="#">LINK 3</a>
<a href="#">LINK 4</a>
</nav>
<!-- quadro com as formas de pagamento e entrega, no cabeçalho -->
<div id="cards">
Pagamento: <br />
<img src="http://placehold.it/29x19" alt="Master Card" />
<img src=" http://placehold.it/29x19" alt="Visa" />
<img src=" http://placehold.it/29x19" alt="american" />
<img src=" http://placehold.it/29x19" alt="PayPal" />
<img src=" http://placehold.it/29x19" alt="Pague Seguro" /> <br />
Entregas:<br />
<img src=" http://placehold.it/30x30" alt="UPS" />
<img src=" http://placehold.it/56x27" alt="fedex" />
<img src="http://placehold.it/80x20" alt="correios" />
</div>
</header><!-- Container para todas as colunas da página -->
<div id="content">
<!--coluna esquerda -->
<div id="left">
<div class="box" id="carrinho">
<h2 class="title">Meu carrinho </h2>
<span class="subtitle">
Voce tem:<br />
total:<br />
</span>
<button type="button">Editar carrinho</button> <br />
<button type="button">Finalizar compra</button>
</div>
<ul class="box">
<li class="title">Artistas</li>
<li> <a href="#">Nome Sobrenome</a></li>
<li> <a href="#">Nome Sobrenome </a></li>
<li> <a href="#">Nome Sobrenome </a></li>
<li> <a href="#">Nome Sobrenome </a></li>
<li> <a href="#">Nome Sobrenome </a></li>
<li> <a href="#">Nome Sobrenome </a></li>
<li> <a href="#">Nome Sobrenome </a></li>
<li> <a href="#">Nome Sobrenome </a></li>
</ul>
</div><!--coluna do meio -->
<div id="middle">
<div class="box">
<p>IMAGENS EM DESTAQUE</p>
Nome do Autor <br/>
Descrição breve <br />
preço <br />
<button type="button">Ver Item</button>
<div id="displayIMG"> <!--Box que exibe os quadros em destaque -->
<img src="http://placehold.it/450x340" />
</div>
</div><!--galeria de imagens localizada abaixo do display -->
<div id="galery">
Galeria de Imagens
</div>
</div><!--fim da coluna do meio--><!-- coluna direita -->
<div id="right">
<ul class="box">
<li class="title">Ultimas aquisicoes</li>
<li><img src="http://placehold.it/70x110"</li>
<li class="subtitle">Nome do autor</li>
<li class="description">Descrição genérica</li>
<li class="description">preço</li>
<li><img src="http://placehold.it/70x110"</li>
<li class="subtitle">Nome do autor</li>
<li class="description">Descrição genérica</li>
<li class="description">preço</li>
<li><img src="http://placehold.it/70x110"</li>
<li class="subtitle">Nome do autor</li>
<li class="description">Descrição genérica</li>
<li class="description">preço</li>
</ul>
<div class="box">
<h4 class="title">Acompanhe-nos</h4>
<div>
<img src="http://placehold.it/70x15">
<br />
<img src="http://placehold.it/70x15" >
</div>
</div>
<div>
Newsletter
</div>
</div><!--fim da coluna da direta --><!--conteudo do menu inferior acima do rodape -->
<div id="menuInf">
Menu Inferior
</div>
<!--rodape -->
<footer id="footer">
Rodape
</footer>
</div><!--fim da div content -->
</div><!--fim da div wrapper -->
</body>
</html>Agora a folha de estilo.
html,body{
margin:0px auto;
height:100%;
}li{
list-style: none;
}/regras para os box que comportam conteudo das colunas/
.box{
border:1px solid #cccccc;
padding-left:0px;
}/insere a borda inferior e formata o texto dos titulos dos boxes/
.title{
border-bottom: 1px solid #cccccc;
font:15px arial ;
font-weight: bold;
}.subtitle{
font:12px arial;
font-weight: bold;
color:#666666;
}.description{
font:12px arial;
color:#666666;
}
#wrapper{
width: 960px;
margin: auto;
margin-top:20px;
}/--------------------regras do cabeçalho -------------------------------/
/container do cabeçalho/
#header{
position:relative;
border:1px solid;
}/logotipo da empresa/
id#logo{
position:absolute;
top:0px;
left:0px;
}#mainForm{
position:absolute;
top:20px;
left:300px;
}/navigation menu/
#nav{
position:absolute;
top:60px;
left:300px;
}#cards{
position:absolute;
top:0px;
right:10px;
}/container para as colunas da pagina/
#content{
margin-top: 20px;
border:1px solid;
}#left {
float:left;
width: 220px;
}#carrinho{
background:url("http://placehold.it/23x18") no-repeat right top;
}#artistas{
margin-top:20px;
}/coluna do meio/
#middle{
width: 520px;
margin-left:20px;
float:left;
}/imagem em destaque do box do meio da pagina/
#displayIMG img{
border:10px solid #999999;
margin:0px 0px 5px 25px;
}/aqui vai entrar uma lista de imagens como no box da direta, mas na horizontal/
#galery{
background-color:#999900;
}/coluna direita/
#right{
width: 160px;
float:right;
}/elementos fora da página (Outra opção de menu , recursos, etc)/
#menuInf{
clear:both;
}
#footer{
background-color:#660066;
}
Para dar um exemplo sobre uma das minhas dúvidas: Nos boxes que estão na coluna e no cabeçalho ( <header> ) , não sei exatamente qual marcação utilizar.Elementos de bloco formam uma quebra de linha que não confere com o layout (e utilizar o display inline também não funciona).Carregando comentários...