Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Guilherme Wathier

Avaliação de código

Por , em Desenvolvimento frontend

Recommended Posts

Guilherme Wathier    1

Guilherme Wathier
Postado

Galera eu estou criando um layout, mais o código esta tudo mal feito, no chrome funciona, o layout não se ajusta na tela, queria pedir a ajuda de vocês para fazer ele se ajustar em qualquer tipo de tela e em varios navegadores.

 

Principalmente o código css que ta mal feito.

 

HTML:

<!DOCTYPE html>
<!--[if IE 6]><html id="ie6" dir="ltr" lang="pt-BR"><![endif]-->
<!--[if IE 7]><html id="ie7" dir="ltr" lang="pt-BR"><![endif]-->
<!--[if IE 8]><html id="ie8" dir="ltr" lang="pt-BR"><![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)]><!--><html dir="ltr" lang="pt-BR"><!--<![endif]--><head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=3.3.2'></script>
<link rel="shortcut icon" href="CONE DO FAVICOON DO BLOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Suporte Blogger - Dicas Blogger e WordPress</title>
<meta charset="UTF-8" />

<meta name="description" content="Como criar um blog - Blogger ou Wordpress = Ferramentas blog, templates para wordpress ou blogger, dicas blogger, ganhar dinheiro online,codigos blog, como divulgar blog, dicas wordpress, dicas seo, como criar um blog ou um site, plugins e gadgets, dicas google adsense" />
<meta name="keywords" content="wordpress, blogger, seo, dicas blogger, plugins wordpress, criar site, criar blog, divulgar blog, como criar um site, templates para blog, ganhar dinheiro online, como criar um blogspot, dicas wp, blogger templates, wordpress templates, codigos para blogs, adsense" />
<link rel="alternate" type="application/rss+xml" title="título do feed" href="endereçofeedburner" />
<link rel="canonical" href="http://www.suporteblogger.com/" />
<meta name="author" content="Guilherme Wathier" />
</head>
<body>
<div id="box">
</div><!-- BOX -->


<header id="header">
<div id="header_topo">
<ul>
	<li><a href="http://localhost/suporteblogger/" style="background:#232323;">home</a></li>
	<li><a href="#">sobre</a></li>
	<li><a href="#">contato</a></li>
	<li><a href="#">tutoriais</a></li>
</ul>

<nav class="midias">
	<ul>
	<li><a href="#" style="background:#232323; color:#069; font-weight:bold; line-height:37px;">t</a></li>
	<li><a href="#" style="background:#232323; color:#069; font-weight:bold; line-height:37px;">f</a></li>
	<li><a href="#" style="background:#232323; color:#069; font-weight:bold; line-height:37px;">g</a></li>
	<li><a href="#" style="background:#232323; color:#069; font-weight:bold; line-height:37px;">l</a></li>
</ul>
</nav>
</div>

<div id="header_logo">
	<img src="logo.png" />
   </div><!-- HEADER LOGO -->

   <div id="header_search">
   	<input type="text" name="s" placeholder="Faça sua busca..." class="caixa" />
   	<input type="submit" name="buscar" class="botao" value="Buscar" />
   </div><!-- HEADER SEARCH -->

   <nav id="header_menu">
   <ul>
       <li><a href="#">parceiros</a></li>
       <li><a href="#">afiliados</a></li>
       <li><a href="#">cursos</a></li>
       <li><a href="#">tutoriais</a></li>
       <li><a href="#" style="background: url(menu.png)">ferramentas</a></li>
   </ul>
   </nav><!-- HEADER MENU -->
</header><!-- HEADER -->


<nav id="menu">
</nav><!-- MENU -->


<article id="content">
<div id="content_conteudo">
   </div><!-- CONTENT CONTEUDO -->
</article><!-- CONTENT -->

<aside id="content_sidebar">
</aside><!-- CONTENT SIDEBAR -->

<footer id="footer_colunas">
</footer><!-- FOOTER COLUNAS -->


<footer id="footer">
<div id="footer_txt">
   </div><!-- FOOTER TXT -->

   <div id="footer_ass">
   </div><!-- FOOTER ASS -->
</footer><!-- FOOTER -->
</body>
</html>

 

CSS:

@charset utf-8;
/* Theme Name: Suporte Blogger V1
Theme URI: http://www.suporteblogger.com/
Description: Suporte Blogger Tema Oficial Versão1
Author: Guilherme Wathier
Author URI: http://www.suporteblogger.com/
Version: 1.0
Tags: suporte, blogger,
*/

/* RESET */
*{margin:0; padding:0;}
/* FECHA RESET */

/* OUTROS */
body {}
#box {}
/* FECHA OUTROS */

/* HEADER */
#header_topo {100%; height:38px; background:#333; border-bottom:1px solid #000;}
#header_topo ul {float: left; margin-left:200px; list-style:none;}
#header_topo ul li {display: inline;}
#header_topo ul li a {padding: 2px 10px; float:left; color: #fff; line-height: 34px; text-decoration: none; font-family:'Continuum Medium', Arial, Helvetica, sans-serif;}
#header_topo ul li a:hover {background-color:#232323;}
.midias ul li a{margin-left:7px; height:34px; width:14px; text-align:center;}

#header {background:#069; height:185px; position:relative; border-bottom:1px solid #000;}
#header_logo {float:left; margin-left:200px; padding-top:10px;}
#header_search {padding-left:130px; margin-top:36px; float:left;}
.caixa{width:170px; height:25px; background:#fff; border:1px solid #333; padding:5px; outline:none; color:#666;}
.botao{width:55px; border:1px solid #000; background:#333; color:#fff; height:37px; padding-top:1px;}

#header_menu {height: 45px; background: #058; margin-top:101px; margin-left: 713px; margin-right:200px;}
#header_menu ul li {display: inline;}
#header_menu ul li a{display: block; float: right; line-height: 45px; padding: 0 13px; font-family:arial; font-size:17px; color: #FFF; text-decoration: none;}
#header_menu ul li a:hover{background: url('menu.png') repeat-x;}
/* FECHA HEADER */

/* CONTENT */
#content {}
#content_conteudo {}
#content_sidebar {}
/* FECHA CONTENT */

/* FOOTER COLUNAS */
#footer_colunas {}
/* FECHA FOOTER COLUNAS */

/* FOOTER */
#clear {}
#footer {}
#footer_txt {}
#footer_ass {}
/* FECHA FOOTER */

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dusigner    0

Dusigner
Postado

Olá!

 

Consegui observar no seu código, que você esta utilizando tags do HTML5!

 

Sabemos que o HTML5 é o futuro mas não o presente!

 

A solução é você utilizar de alguma biblioteca de javascript para manipular estas tag do html5, para os IE inferiores ao 9!

 

Veja no link:

Habilitar HTML5 no Internet Explorer

 

Só assim conseguira deixar igual em todos os Browsers, lógico, a medida que for fazendo o layout já vai testando em todos os browsers.

 

Eu recomento ainda utilizar a boa e velha <DIV>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito