Topo não fica 100%

brunoqueiros · Novembro 17, 2010

Estou montando um blog, ai quando eu começo a diminuir a tela o BG do topo não fica mais 100%,

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" type="text/css" rel="stylesheet">
<title>Blog </title>
</head>
<body>
<div id="header">
	<div id="nav" class="col-full">
	<ul class="nav">
		<li>Home</li>
		<li>Sobre</li>
		<li>Loja</li>
		<li>Contato</li>
	</ul>
	
	<div id="search">
		search
	</div>
	</div>
</div>
<div id="subheader" class="navigation">
	<div id="nav-cat" class="col-full">
	<ul class="nav-cat">
		<li>Aplicativos</li>
		<li>Dicas Linux</li>
		<li>Produtos</li>
		<li>Notícias</li>
	</ul>
	</div>
</div>

<div id="all" class="col-full">
<div id="content">
		<div id="content-left">
			<div id="post">
				<div id="title"><h1>Concurso: Blog</h1></div>
				<div id="comments-post"><p>16</p></div>
				<div id="clear"></div>
				<div id="meta">
					<p>por <a href="#">Loja</a>, postado em Nov.16,2010 | <a href="#">Novidades</a>,<a href="#">Promoções</a> |</p>
				</div>
				<div id="content-post">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non tellus vitae risus gravida accumsan ac sit amet lectus. Pellentesque adipiscing leo sed justo volutpat eu tincidunt urna ornare. Ut enim ante, condimentum eu congue ultrices, sodales quis turpis. Pellentesque nec urna euismod massa pellentesque scelerisque eu at eros.</p>
				</div>
				<div class="post-footer">

    				<div class="post-footer-left"><a href="#">Continue Lendo</a></div>

    				<div class="post-footer-right"><img src="images/tag.png"> <a href="#">blog</a>, <a href="#">Concurso</a>, <a href="#">Loja</a></div>

   				</div>

			</div>
			
			<div id="post">
				<div id="title"><h1>Concurso: Blog</h1></div>
				<div id="comments-post"><p>16</p></div>
				<div id="clear"></div>
				<div id="meta">
					<p>por <a href="#">Loja</a>, postado em Nov.16,2010 | <a href="#">Novidades</a>,<a href="#">Promoções</a> |</p>
				</div>
				<div id="content-post">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non tellus vitae risus gravida accumsan ac sit amet lectus. Pellentesque adipiscing leo sed justo volutpat eu tincidunt urna ornare. Ut enim ante, condimentum eu congue ultrices, sodales quis turpis. Pellentesque nec urna euismod massa pellentesque scelerisque eu at eros.</p>
				</div>
				<div class="post-footer">

    				<div class="post-footer-left"><a href="#">Continue Lendo</a></div>

    				<div class="post-footer-right"><img src="images/tag.png"> <a href="#">blog</a>, <a href="#">Concurso</a>, <a href="#">Loja</a></div>

   				</div>

			</div>
		</div>
		
		<div id="content-right">
			<div id="sidebar">
				<div id="title"><h1>Posts Populares</h1></div>

			</div>
		</div>
	</div>
</div>
</body>
</html>

/*
Theme Name: theme
Theme URI: http://
Description: The 2010 default theme for WordPress.
Author: Bruno Ferreira
Version: 1.0
Tags: blue, white, two-columns, fixed-width, blog, clear
*/
* { font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0;  }

/*-------------------------------------------------------------------------------------------*/
body{background:#eeeeee;}

/*HEADER*/
#header{height:50px; background:#505050; width:100%; position:static;}
#subheader{height:30px; background:#e9dc20; width:100%;}
.nav{color:#eeeeee; font-size:12px; padding-top:15px;}
.nav ul  {margin:0; padding:0; list-style:none;}
.nav li  {float:left; width: auto; margin-right:20px;}
.navigation {text-transform: uppercase; font-size:11px; font-family:Tahoma;}
#search{float:right;}

.nav-cat{padding-top:8px; color:#505050;}
.nav-cat ul  {margin:0; padding:0; list-style:none;}
.nav-cat li  {float:left; width: auto; margin-right:20px;}


#content{padding-top:15px;}
#content-left{float:left; width:660px;}
#content-right{float:right; width:300px;}
#post{font-family:"Franklin Gothic Book"; padding-bottom:25px; border-bottom: solid 1px #cdcdcd; margin-bottom: 25px;}
#title{float:left;}
#title h1{color:#505050; font-size:25px; text-transform: uppercase;}
#comments-post{background:url(images/comment.png) no-repeat; float:right;  width:50px; height:37px;}
#comments-post p{margin:5px 0 0 15px; color:#eeeeee;}
#meta{font-size:11px; margin:-9px 0 10px 4px;}
#meta a{color:#a69c1b; text-decoration:none;}
#content-post{padding-bottom:10px;}

.post-footer {border-top: solid 1px #cdcdcd; padding: 6px 0 4px 0;}
.post-footer a{color:#a69c1b; text-decoration:none;}

.post-footer-left {float: left;text-transform:uppercase; font-weight:bold;}

.post-footer-right {float: right; font-size:13px;}


#meta-bottom{border-top: solid 1px #cdcdcd; padding: 5px 0 4px 0; border-bottom: solid 1px #cdcdcd;}
#meta-bottom a{color:#a69c1b; text-decoration:none; text-transform:uppercase;}


#sidebar{font-family:"Franklin Gothic Book"; padding-left:10px;}

#clear{clear:both;}
.col-full{width: 960px; margin: 0 auto; padding-left: 20px; min-height: 700px;}
.col-left{float:left;}
.col-right{float:right;}

Evandro Oliveira · Novembro 17, 2010

Cadê o DOCTYPE?

E essa sopa de <div>'s aê, amigão?

Vamos começar ajeitando a marcação?? Estudar o que é realmente cada elemento e procurar adicionar um pouco de semântica nisso? quem sabe não fica mais fácil?

Evite nomear os elementos de acordo com sua posição "col-left/right" e sim com seu conteúdo.

Se futuramente você desejar inverter os elementos vai ter de trocar os nomes das classes, modificar o CSS e talvez até javascript.

HTML é responsável por CONTEÚDO e não por posicionamento.

brunoqueiros · Novembro 17, 2010

Cara eu tentei arrumar aqui, fiz umas alterações e verifiquei o CSS e o HTML no validador do W3C, deu que ta certo, ta correto msm?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" type="text/css" rel="stylesheet">
<title>Blog Loja</title>
</head>
<body>
<img src="images/logo.png" class="logo" alt="Loja">
<div id="header" class="navigation">
	<div class="col-full">
	  <ul class="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">Sobre</a></li>
		<li><a href="#">Loja</a></li>
		<li><a href="#">Contato</a></li>
	  </ul>
	
	  <div id="search">
		<img src="images/search.jpg" alt="search">
	  </div>
	</div>
</div>
<div id="subheader" class="navigation">
	<div class="col-full">
	  <ul class="nav-cat">
		<li><a href="#">Aplicativos</a></li>
		<li><a href="#">Dicas Linux</a></li>
		<li><a href="#">Produtos</a></li>
		<li><a href="#">Notícias</a></li>
	  </ul>
	</div>
</div>

<div class="col-full">
<div id="content">
		<div id="container">
			<div class="post">
				<h1><a href="#">Concurso: Blog</a></h1>
				<div class="comments-post"><p>16</p></div>
				<div class="clear"></div>
					<p class="meta">por <a href="#">Loja Geek</a>, postado em Nov.16,2010 | <a href="#">Novidades</a>,<a href="#">Promoções</a> |</p>
				<div class="content-post">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non tellus vitae risus gravida accumsan ac sit amet lectus. Pellentesque adipiscing leo sed justo volutpat eu tincidunt urna ornare. Ut enim ante, condimentum eu congue ultrices, sodales quis turpis. Pellentesque nec urna euismod massa pellentesque scelerisque eu at eros.
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non tellus vitae risus gravida accumsan ac sit amet lectus. Pellentesque adipiscing leo sed justo volutpat eu tincidunt urna ornare. Ut enim ante, condimentum eu congue ultrices, sodales quis turpis. Pellentesque nec urna euismod massa pellentesque scelerisque eu at eros.</p>
				</div>
				<div class="post-footer">

    				<a href="#" class="post-footer-left">Continue Lendo</a>
    				<div class="post-footer-right"><img src="images/tag.png" alt="tag"> <a href="#">blog</a>, <a href="#">Concurso</a>, <a href="#">LojaGeek</a></div>

   				</div>

			</div>
			
			<div class="post">
				<h1><a href="#">Concurso: Blog</a></h1>
				<div class="comments-post"><p>16</p></div>
				<div class="clear"></div>
					<p class="meta">por <a href="#">Loja Geek</a>, postado em Nov.16,2010 | <a href="#">Novidades</a>,<a href="#">Promoções</a> |</p>
				<div class="content-post">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non tellus vitae risus gravida accumsan ac sit amet lectus. Pellentesque adipiscing leo sed justo volutpat eu tincidunt urna ornare. Ut enim ante, condimentum eu congue ultrices, sodales quis turpis. Pellentesque nec urna euismod massa pellentesque scelerisque eu at eros.</p>
				</div>
				<div class="post-footer">

    				<a href="#" class="post-footer-left">Continue Lendo</a>
    				<div class="post-footer-right"><img src="images/tag.png" alt="tag"> <a href="#">blog</a>, <a href="#">Concurso</a>, <a href="#">LojaGeek</a></div>

   				</div>

			</div>
            
		</div>
		
		<div id="widget-area">
			<div class="sidebar">
				<h1>Posts Populares</h1>
                <ul>
                	<li><a href="#">Concurso: blog.lojageek.com</a></li>
                	<li><a href="#">Promoção Relâmpago! Dryfit por apenas R$18,90</a></li>
                	<li><a href="#">Novos Produtos: Canecas STAR WARS COFFEE</a></li>
                	<li><a href="#">Concurso: blog.lojageek.com</a></li>
                	<li><a href="#">Promoção Relâmpago! Dryfit por apenas R$18,90</a></li>
                	<li><a href="#">Novos Produtos: Canecas STAR WARS COFFEE</a></li>
                </ul>
			</div>
            
            <div class="sidebar">
				<h1>Últimos Posts</h1>
                <ul>
                	<li><a href="#">Concurso: blog.lojageek.com</a></li>
                	<li><a href="#">Promoção Relâmpago! Dryfit por apenas R$18,90</a></li>
                	<li><a href="#">Novos Produtos: Canecas STAR WARS COFFEE</a></li>
                	<li><a href="#">Concurso: blog.lojageek.com</a></li>
                	<li><a href="#">Promoção Relâmpago! Dryfit por apenas R$18,90</a></li>
                	<li><a href="#">Novos Produtos: Canecas STAR WARS COFFEE</a></li>
                </ul>
			</div>
            
            <div class="sidebar">
				<h1>Twitter</h1>
                	<div style="margin-right:0px"><div id="twitter_div">
					<h2 style="display:none;" class="sidebar-title">Twitter Updates</h2>
					<ul id="twitter_update_list"></ul>
					<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/lojageek"></a>
					</div>
					<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
					<script src="http://twitter.com/statuses/user_timeline/lojageek.json?callback=twitterCallback2&count=5" type="text/javascript"></script></div>
				</div>
			</div>
            
	</div>
</div>
<div class="clear"></div>

<div id="footer">
   <div class="col-full-footer">
	<p class="col-left">Wordpress</p>
	<p class="col-right"><a href="#">RSS</a> | <a href="#">Twitter</a> | <a href="#">Facebook</a> | <a href="#">YouTube</a> | <a href="#">Loja</a></p>
   </div>
</div>
</body>
</html>

/*
Theme Name: Loja Geek
Theme URI: http://lojageek.com.br/blog
Description: The 2010 default theme for WordPress.
Author: Bruno Ferreira
Version: 1.0
Tags: blue, white, two-columns, fixed-width, blog, clear
*/
* { font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0;  }

/*-------------------------------------------------------------------------------------------*/
body{background:#eeeeee; padding-top:15px;}

/*HEADER*/

.logo{height:54px; width:210px; margin-top: 15px; margin:0 auto; display:block;}
#header{height:50px; background:#505050;}
#subheader{height:30px; background:#e9dc20;}
.nav{color:#eeeeee; font-size:12px; padding-top:17px;}
.nav a{color:#eeeeee; text-decoration:none;}
.nav a:hover{color:#7da1ad;}
.nav ul  {margin:0; padding:0; list-style:none;}
.nav li  {float:left; width: auto; margin-right:20px;}
.navigation {text-transform: uppercase; font-size:11px; background-color: #000; font-family:Tahoma;}
#search{float:right; margin-top:-7px;}

.nav-cat{padding-top:8px; color:#505050;}
.nav-cat a{color:#505050; text-decoration:none;}
.nav-cat a:hover{color:#7da1ad;}
.nav-cat ul  {margin:0; padding:0; list-style:none;}
.nav-cat li  {float:left; margin-right:20px;}


/*CONTENT*/
#content{padding-top:15px; color:#848484; font-size:14px;}
#container{float:left; width:650px;}
#widget-area{float:right; width:290px; margin-left: 10px;}
.post{font-family:"Franklin Gothic Book"; padding-bottom:25px; border-bottom: solid 1px #cdcdcd; margin-bottom: 25px;}

h1{float:left;color:#505050; font-size:25px; text-transform: uppercase;}
h1 a{color:#505050; text-decoration:none;}
h1 a:hover{color:#acacac;}
.comments-post{background:url(images/comment.png) no-repeat; float:right;  width:50px; height:37px;}
.comments-post p{margin:5px 0 0 15px; color:#eeeeee;}
.meta{font-size:11px; margin:-9px 0 10px 4px; color:#676767 !important;}
.meta a{color:#735a1f; text-decoration:none;}
.meta a:hover{color:#7da1ad;}
.content-post{padding-bottom:10px;}

.post-footer {border-top: solid 1px #cdcdcd; padding: 6px 0 4px 0;}
.post-footer a{color:#735a1f; text-decoration:none;}
.post-footer a:hover{color:#7da1ad;}

.post-footer-left {float: left;text-transform:uppercase; font-weight:bold;}

.post-footer-right {float: right; font-size:13px;}




/*SIDEBAR*/
.sidebar{font-family:"Franklin Gothic Book"; padding-left:10px; margin-bottom:30px;}
.sidebar a{color:#735a1f; text-decoration:none;}
.sidebar a:hover{color:#7da1ad;}
.sidebar ul{list-style:none;border-bottom: solid 1px #cdcdcd; padding: 6px 0 4px 0; padding-top: 35px;}
.sidebar li{border-top: solid 1px #cdcdcd; padding: 6px 0 4px 0;}



#footer{height:50px; background:#505050; width:100%; padding-top:20px;}
#footer p{color:#eeeeee; font-size:12px;}
#footer a{color:#eeeeee; text-decoration:none;}

.clear{clear:both;}
.col-full{width: 960px; margin: 0 auto; padding-left: 20px; min-height: 700px;}
.col-full-footer{width: 960px; margin: 0 auto;}
.col-left{float:left;}
.col-right{float:right;}

Evandro Oliveira · Novembro 17, 2010

Bruno, apenas uns dois <div>'s que estavam sobrando depois da widget-area, além de um erro de marcação. O img da logo não pode ser colocado diretamente dentro de <body>.

<body> espera elementos de nível bloco (p, div, ul, form) enquanto <img> é um elemento de linha.

Eu colocaria a Busca como um item do menu, formatado separadamente e ganharia uma tag contêiner a menos.

Ao invés de:

<div class="topo">
    <ul>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
    </ul>
    <form action="busca.php" method="get">...</form>
</div>

porque não fazer assim??:

<ul class="topo">
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
    <li><form action="busca.php" method="get">...</form></li>
</ul>

Você continua com estilos chamados 'col-left/right'. Reforço a idéia de que nomeie as classes de acordo com seu CONTEÚDO e não posicionamento.

Observe, também, que - em se tratando de um tema para um CMS - você deve seguir mais algumas regras, específicas do CMS para o qual está desenvolvendo. Certifique se de cobrir todas as pendências, pelo menos do tema padrão. Por ser um conteúdo gerado dinamicamente, note que alguns setores importantes - como os posts, por exemplo - são gerados com suas classes e ID's específicos e será você quem deverá se adequar a essas regras.

Obedeça, também, as normas de desenvolvimento propostas pela ferramenta.

http://codex.wordpress.org/CSS_Coding_Standards

Depois de realizar a marcação desejada, antes de começar a estilizar, além de validar a marcação na W3C, você deverá correr um teste de unidade, a fim de verificar que não esqueceu nenhum componente antes de começar a estilizar. Isso lhe poupará grandes dores de cabeça futuras.

Entrar

Arquivado

Topo não fica 100%

Recommended Posts

brunoqueiros 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

brunoqueiros 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante