Foros del Web » Creando para Internet » HTML »

Desesperacion con background y header!!!

Estas en el tema de Desesperacion con background y header!!! en el foro de HTML en Foros del Web. Amigos Estaba creando un header el cual ocupe todo el ancho de la pantalla (asi como el de foros de web)y cuando pense que todo ...
  #1 (permalink)  
Antiguo 10/03/2010, 20:37
 
Fecha de Ingreso: agosto-2002
Ubicación: Australia
Mensajes: 38
Antigüedad: 15 años, 4 meses
Puntos: 0
Desesperacion con background y header!!!

Amigos
Estaba creando un header el cual ocupe todo el ancho de la pantalla (asi como el de foros de web)y cuando pense que todo iba bien al probarlo en mi universidad este no actuaba de la forma que deberia hacerlo en el iexplorer7 (Al hacer zoom a la pagina el background no redimensiona como lo hacen los demas objetos). Yo tengo en mi computadora el ie8, opera y mozilla y no tengo ese problema.

Por favor no se que codigo poner para que se vea bien en todo los navegadores???.
aqui un ejemplo del error pero solo se ve cuando se ve con iexplore7(No lo probe con iexplorer 6 pero me imagino que debe pasar lo mismo) http://www.theozsolutions.com.au/test/ . si aplican zoom in or zoom out se deforma todo!!!

el codigo es:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Webe |</title>


<link href="style.css" rel="stylesheet" type="text/css" />


<!--[if lte IE 7] lo use a ver si ayudaba con el error pero nada!!>
<script src="ie7/IE8.js" type="text/javascript"></script>
<script src="ie7/ie7-squish.js" type="text/javascript"></script>
<![endif]-->
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body>
<!-- topPan-->
<div id="topPan">
<h1>Web</h1>
<a href="index.html"><img src="images/logo.gif" title="Wn" alt="Web design" width="372" height="91" border="0" /></a>
<ul>
<li><a href="index.html">Home </a> </li>
<li><a href="about.html">About us</a> </li>
<li><a href="services.html">Services </a> </li>
<li><a href="portfolio.html">Clients</a> </li>
<li><a href="contact.html">Contact </a> </li>
</ul>
</div>


el css es:
/* CSS Document */
body{
padding:0px;
background: url(images/header-bg.jpg) 0 0 repeat-x #EFEFEF;
color:#CCC;
font:14px/20px Arial, Helvetica, sans-serif;
font-weight:normal;
height:100%;
}
div, p, h1, h2, h3, h4, ul, a, img{
padding:0;
margin:0;
border: thin none #999;
text-align: left;
background-repeat: repeat-x;
}
ul{
list-style-type:circle;
font-size: 12px;
padding:10px;
}

title{
font-family:"Times New Roman", Times, serif;
font-size: 20px;
color:#960;
font-weight: bold;
}

b{ color:#FC6;
font-weight:bold;
font:10px verdana, arial;

}

/* TOP PANEL */
#topPan{width:700px; height:252px; position:relative; margin:0 auto; padding:0;}
#topPan h1{
width:371px;
height:195px;
background:url(images/header-img1.jpg) 0 0 no-repeat #FEEBB0;
color:#fff;
text-indent:-2000px;
}
#topPan img{
width:372px;
height:91px;
position:absolute;
top:109px;
right:-2px;
margin:0px;
padding:0px;
}
#topPan ul{
width:376px;
height:32px;
display:block;
position:absolute;
top:206px;
right:-2px;
margin:0px;
padding:0px;
background:url(images/menu-bg.gif) 0 0 repeat-x #FF8714;
color:#fff;
}
#topPan ul li{float:left; display:block; width:75px; height:32px; background:url(images/menu-devider.gif) right top no-repeat;}
#topPan ul li span{display:block; width:73px; height:32px; background:url(images/menu-hover.gif) 50% 0 no-repeat; font:13px/32px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; text-decoration:none;}
#topPan ul li a{display:block; width:73px; height:32px; background:url(images/menu-bg.gif) 0 0 repeat-x #FF8714; color:#fff; font:13px/32px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; text-decoration:none;}
#topPan ul li a:hover{display:block; width:73px; background:url(images/menu-hover.gif) 50% 0 no-repeat;text-decoration:none; /*position:fixed;*/ margin:0; padding:0px;}
#topPan ul li.contact{display:block; width:75px; height:32px; background:url(images/menu-bg.gif) 0 0 repeat-x #FF8714; color:#fff; font:13px/32px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; text-decoration:none;}
#topPan ul li.contact:hover{display:block; width:75px; background:url(images/menu-hover.gif) 50% 0 no-repeat;text-decoration:none; /*position:fixed;*/ margin:0; padding:0px;}
  #2 (permalink)  
Antiguo 10/03/2010, 21:10
Avatar de RusO91  
Fecha de Ingreso: enero-2008
Ubicación: Rosario
Mensajes: 91
Antigüedad: 9 años, 10 meses
Puntos: 2
Respuesta: Desesperacion con background y header!!!

ponele al div que querés ocupe todo el ancho la propiedad

width:100%;
  #3 (permalink)  
Antiguo 10/03/2010, 21:42
 
Fecha de Ingreso: agosto-2002
Ubicación: Australia
Mensajes: 38
Antigüedad: 15 años, 4 meses
Puntos: 0
Respuesta: Desesperacion con background y header!!!

Sorry no entiendo?? el background esta en la linea del body o esta tengo que ponerla en un div?? please podrias indicarme en el codigo que cambiar?? muchas gracias por tu ayuda!!

body{
padding:0px;
background: url(images/header-bg.jpg) 0 0 repeat-x #EFEFEF;
color:#CCC;
font:14px/20px Arial, Helvetica, sans-serif;
font-weight:normal;
height:100%;
}
  #4 (permalink)  
Antiguo 10/03/2010, 22:26
 
Fecha de Ingreso: agosto-2002
Ubicación: Australia
Mensajes: 38
Antigüedad: 15 años, 4 meses
Puntos: 0
Respuesta: Desesperacion con background y header!!!

Gracias amigos ya entendi y funciona de maravilla, el problema es que intente colocar el background solo en el body. Lo puse en un container con el with 100% y este si redimensiona en todos los navegadores. Eso me pasa por empezar el diseno con un template!!! el osioso trabaja dos veces jajaj

Etiquetas: header, iexplorer7, redimensionamiento, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:47.