Ir para conteúdo

POWERED BY:

Arquivado

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

gioweb21

Problema de Div no Blogger

Por , em Desenvolvimento frontend

Recommended Posts

gioweb21    0

gioweb21
Postado

Pessoal eu estou montando um blog no sistema blogger do google.

Só que o layout está parecendo quebrado no firefox ( no IE ele está ok)

Acessem este link por favor:

http://www.gioweb.com.br/teste_blog/teste.html

 

Abaixo o código que eu utilizei:

 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

<style type='text/css'>

div.box_menu {
  padding: 0 0 0 0;
}
div.box_menu ul {
  list-style: none;
  height: 171px;
}
div.box_menu ul li {
  float: left;
  height: 171px;
  overflow: hidden;
}
div.box_menu ul li a {
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -9999em;
  overflow: hidden;
}
div.box_menu ul li#link01 {
  width: 150px;
  background: transparent url(botao1.jpg) no-repeat 0 0;
}
div.box_menu ul li#link02 {
  width: 150px;
  background: transparent url(botao2.jpg) no-repeat 0 0;
}
div.box_menu ul li#link03 {
  width: 150px;
  background: transparent url(botao3.jpg) no-repeat 0 0;
}
div.box_menu ul li#link04 {
  width: 150px;
  background: transparent url(botao4.jpg) no-repeat 0 0;
}
div.box_menu ul li#link05 {
  width: 150px;
  background: transparent url(botao5.jpg) no-repeat 0 0;
}
div.box_menu ul li#link06 {
  width: 150px;
  background: transparent url(botao5.jpg) no-repeat 0 0;
}
div.box_menu ul li#link01 a:hover {
  background: transparent url(botao1.jpg) no-repeat 0 -171px;
}
div.box_menu ul li#link02 a:hover {
  background: transparent url(botao2.jpg) no-repeat 0 -171px;
}
div.box_menu ul li#link03 a:hover {
  background: transparent url(botao3.jpg) no-repeat 0 -171px;
}
div.box_menu ul li#link04 a:hover {
  background: transparent url(botao4.jpg) no-repeat 0 -171px;
}
div.box_menu ul li#link05 a:hover {
  background: transparent url(botao5.jpg) no-repeat 0 -171px;
}
div.box_menu ul li#link06 a:hover {
  background: transparent url(botao5.jpg) no-repeat 0 -171px;
}
</style>

<table bgcolor='#D98000' border='0' cellpadding='0' cellspacing='0' width='900'>
  <tr>
	<td align='center' height='30'></td>
  </tr>
</table>
<div class='box_menu' style='padding:0 0 0 0; margin:0;'><div style='padding:0 0 0 0; margin:0;'><ul style='padding:0; margin:0;'>
<a href="index.html"><img src='topo.jpg' border="0"/></a><li id='link01'><a href='link1.html'>link1</a></li>
<li id='link02'><a href='link2.html'>link2</a></li>
<li id='link03'><a href='link3.html'>link3</a></li>
<li id='link04'><a href='link4.html'>link4</a></li>
<li id='link05'><a href='link5.html'>link5</a></li>
<li id='link06'><a href='link6.html'>link6</a></li>
</ul>
</div></td></tr></table>

Se alguem puder me dar uma dica, eu agradeço!!!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

gioweb21 seu lauyout quebra tanto no FF quanto no IE é só você redimensionar seu BROWSER

para ver isso acontecer

 

é só definir uma largura no div.box_menu

div.box_menu {
width:800px;
padding:0px;
}

Dicas:

evite estilos exemplo:

<div class='box_menu' style='padding:0 0 0 0; margin:0;'>
use classes e indetificadores

 

no padding: 0 0 0 0; não prescisa disso caso todos lado sejam 0(zero)

faça assim padding:0px;

 

e tambem não use tabelas para estruturar layouts

;)

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