problema dos imágenes dentro de un header div

Jor1980 · #1 (**permalink**) 11/07/2011, 10:16

Hola en mi web tengo un div que actúa como wrapper para que todo el contenido de la web parezca dentro de él en el centro de la pantalla.

Dentro de este div tengo otro div llamado headerdiv en el que hay dos imágenes que ocupan todo su espacio. cuando la ventana está maximizada no hay problemas, pero cuando la minimizo estas imágenes se descuadran. como puedo hacer que queden fijas cuando minimizo dentro de mi headerdiv, una al lado de la otra?

Código:

.float-left{
float: left;
}
.float-right{
float: right;
}

#headerdiv{
	margin:0px;
	padding:0px;
	height:200px;
	background-color:#E60000;
	background-position:center;
	background-repeat:no-repeat;
}
#headerimage{
	margin:0px;
	padding:0px;
	position:relative;
}

Código:

 <div id="headerdiv">
		 
      
      
        <img src="images/mapfre.jpg" alt="" class="float-right" id="headerimage"/>
         <img src="images/header.jpg" class="float-left" id="headerimage" />
        
       
        
        
    </div><!--end headerdiv--->

ZoroRoronoa · #2 (**permalink**) 11/07/2011, 10:50

Si tienes dos imagenes como dicen, especifica el tamaño.
Ejemplo:

si la image 1 mide 200px alto y 500px de ancho
la image 2 mide 200px alto y 300px ancho, entonces suman 800 de ancho

en el div header coloca 800 de ancho.

Pero toma en cuenta si tienes margenes, borders, etc...
Ya que estos suman el ancho, por ejemplo si tienes bordes de 1 px sobre las imagenes, aumentarian 2 px de alto y 2px de ancho.

y seria 804px de ancho en total.

ETC... espero hayas comprendido, toma en cuenta la suma de todo lo que ocupe espacio, para definir el ancho al divheader.

Saludos

Jor1980 · #3 (**permalink**) 11/07/2011, 12:49

Mi div tiene 900px de ancho, entre las dos imágenes suman 900px de ancho y no uso border, cuando la ventana está maximizada no existe ningún problema con ellas, el problema aparece cuando la ventana del explorador la hago más estrecha, cuando hago dependiendo de lo estrecha que haga la ventana del explorador uno o las dos imágenes queda fuera de la div en líneas diferentes.

ZoroRoronoa · #4 (**permalink**) 11/07/2011, 13:40

Deberias poner el codigo.
Aunque si no usas porcentajes, no entiendo por que pasa esto, pero podrias usar la propiedad de min-width en el contenedor.

Jor1980 · #5 (**permalink**) 12/07/2011, 06:11

Aquí está el código, las imágenes y la div que da problemas es la div headerdiv:

Mi index:

Código:

<!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=utf-8" />
<title>Agente Mapfre-Home</title>
<link href="MainStyle.css" rel="stylesheet" type="text/css" />
<link href="HorizMenstyle.css" rel="stylesheet" type="text/css" />
<link href="menuVert_style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="buttonswrapper">
<img src="images/solicite.jpg"/>
<ul id="menu">
	<li><a href="#" title="">Presupuesto Seguro Hogar</a></li>
	<li><a href="#" title="">Presupuesto Seguro Coche</a></li>
	<li><a href="#" title="">Presupuesto Seguro Moto</a></li>
	<li><a href="#" title="">Presupuesto Seguro Comercios</a></li>
	<li><a href="#" title="">Presupuesto Seguro Decesos</a></li>
    <li><a href="#" title="">Presupuesto Seguro RC</a></li>
    <li><a href="#" title="">Presupuesto Seguro Salud</a></li>
    <li><a href="#" title="">Presupuesto Seguro Vida</a></li>
    <li><a href="#" title="">Presupuesto Seguro Salud Dental</a></li>
    <li><a href="#" title="">Presupuesto Seguro Indemización por Baja Laboral</a></li>
    <li><a href="#" title="">Presupuesto Seguro De Viaje</a></li>
</ul>
</div>
<!--div para incluir los botones de solicitud de presupuestos-->

<div id="wrapper">

   <div id="headerdiv"><img src="images/header.jpg" class="float-left" id="headerimage" />
        <img src="images/mapfre.jpg" alt="" class="float-right" id="headerimage"/></div><!--end headerdiv--->
    
 
<div class="nav-container-outer">
   <img src="images/nav-bg-l.jpg" alt="" class="float-left" />
   <img src="images/nav-bg-r.jpg" alt="" class="float-right" />
	 <ul id="nav-container" class="nav-container">
	  	<li><a class="item-primary" href="#">Seguros de Coche</a>
  				<ul>
                	<li><a href="#">Póliza Básica</a></li>
                    <li><a href="#">Póliza 7</a></li>
                    <li><a href="#">Nueva Póliza 10</a></li>
                    <li><a href="#">Póliza Líder</a></li>
                    <li><a href="#">Póliza Todo Riesgo 100</a></li>
                </ul><!--end Seguros de Coche list--->
      </li><!--end Seguros de Coche-->
      
      
       <li><a class="item-primary" href="#">Seguros de Moto</a>
       		<ul>
            	<li><a href="#">Moto Básica</a></li>
                <li><a href="#">Moto Diez</a></li>
                <li><a href="#">Moto Líder</a></li>
            </ul><!--end Seguros de Moto ul-->
       </li>
          	   
               
               
		  <li><a class="item-primary" href="#">Seguros Generales</a>
          		<ul>
                	<li><a href="#">Hogar Básico</a></li>
                    <li><a href="#">Hogar Familiar</a></li>
                    <li><a href="#">Hogar Total</a></li>
                    <li><a href="#">Hogar Platino</a></li>
                    <li><a href="#">Seguro de Comercios</a></li>
                    <li><a href="#">Seguro de Decesos</a></li>
                    <li><a href="#">Seguro de Viajes</a></li>
                    <li><a href="#">Responsabilidad Civil</a></li>
                    <li><a href="#">Seguro de Comunidades</a></li>
                    <li><a href="#">Seguro de Accidentes Personales</a></li>
                </ul><!--end ul seguros generales-->
           </li><!--end Seguros Generales li-->  
           
              
   		  <li><a class="item-primary" href="#">Seguros de Salud</a>
          		<ul>
                	<li><a href="#">Reembolso de Gastos</a></li>
                    <li><a href="#">Asistencia Sanitaria</a></li>
                    <li><a href="#">Seguros Indemnización por Baja</a></li>
                    <li><a href="#">Salud Dental</a></li>
                </ul><!--end ul Seguros de Salud-->	
          </li><!--end li Seguros de Salud-->
          
          
   		  <li><a class="item-primary" href="#">Seguros de Vida</a>
          		<ul>
                	 <li><a href="#">Planes de Pensiones</a></li>
                     <li><a href="#">Seguro de Vida</a></li>
                     <li><a href="#">Fondos de Inversión</a></li>
                     <li><a href="#">PIAS</a></li>
                </ul><!--end Seguros de Vida ul-->
          </li><!--end Seguros de Vida li-->
   		  
          
          <li><a class="item-primary" href="#">Productos Bancarios</a>
          	<ul>
            	<li><a href="#">Hipotecas</a></li>
                <li><a href="#">Consumo</a></li>
                <li><a href="#">Cuenta Corriente</a></li>
                <li><a href="#">Depósitos</a></li>
                <li><a href="#">Líneas ICO</a></li>
            </ul><!--end Productos Bancarios ul-->	
          </li><!--end Productos Bancario li-->
	</ul><!--navigationmenu end-->
    </div><!--end navigation div--->

	<div id="infopanel">
	  <h1>InfoPane</h1>	
	</div><!--end infopanel-->
 
 
 

</div><!--end wrapperdiv-->

<div id="footer" class="nav-container-outer2">
	<img src="images/nav-bg-l.jpg" class="float-left" />
    <img src="images/nav-bg-r.jpg" class="float-right" />
</div><!--end footer div>



</body>
</html>

La hoja css de las div usadas como wrappers:

Código:

@charset "utf-8";

/*Global---------------------------*/
body{background-color:#FFF; }
h1{font:Tahoma, Geneva, sans-serif; color:#FFFFFF;}



/*Containers-----------------------*/
#wrapper{background-color:#FFF; width:900px;  margin-left:auto; margin-right:auto; border-style:solid; border-color:#E0E0E0; min-width:900px; 
}

#buttonswrapper{margin-left:0px; background-color:#333; width:170px; padding:0px; height:1100px; float:left;}

#infopanel{background-color:#D4D4D4;width:inherit; margin:0px;height:800px;}


#headerdiv{
	margin:0px;
	padding:0px;
	height:200px;
	width:inherit;
	background-color:#E60000;
	background-position:center;
	background-repeat:no-repeat;
	min-width:900px;
}
#headerimage{
	margin:0px;
	padding:0px;
	position:relative;
}

#footer{
	margin:0;
	padding:0;
	width:1080px;
	background-image:url(images/nav-bg.jpg);
}

.nav-container-outer2{
background: #990000;
padding: 0px;
height: 75px;
background: url(images/nav-bg.jpg);
}

Y la hoja css del navigation menú:

Código:

@charset "utf-8";
/* CSS Document */



/*^'^ Navigation Structure ^'^*/
.nav-container-outer{
background: #990000;
padding: 0px;
height: 74px;
background: url(images/nav-bg.jpg);
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
.nav-container{
position:relative;
zoom:1;
margin:0px;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
width:190px;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}

/*^'^ Primary Items ^'^*/	
#nav-container a{	
padding:7px 1px 7px 18px;
margin: 10px 0px 0px 0px;
color:#BA0703;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: url(images/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: top;
}

#nav-container a:hover{
color:#FFF;
background: url(images/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: center;
}

/*^'^ Secondary Items Container ^'^*/	
#nav-container div, #nav-container ul{	
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: url(images/item-secondary-container-bg.jpg);
background-repeat:repeat-x;
background-color:#CF1D01;
border-bottom: 1px solid #CA6500;
}

/*^'^ Secondary Items ^'^*/	
#nav-container div a, #nav-container ul a{	
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background: url(images/item-secondary-bg.jpg);
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
color:#FFF;
}

/*^'^ Secondary Items Hover State ^'^*/	
#nav-container div a:hover, #nav-container ul a:hover{	
background-color:#CCC;
background: url(images/item-secondary-bg.jpg);
background-repeat: no-repeat;
color:#CC0000;
}

/*^'^ Secondary Item Titles ^'^*/	
#nav-container .item-secondary-title{	
cursor:default;
padding:4px 0px 3px 7px;
color: #6C3600;
font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:11px;
/* background: url(images/item-secondary-title-bg.jpg); */
background-repeat: no-repeat;
font-weight:bold;
}

/*^'^ Horizontal Dividers ^'^*/	
#nav-container .divider-horiz{	
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}

/*^'^ Vertical Dividers ^'^*/	
#nav-container .divider-vert{	
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}