Otro problema de maquetacion.

rufus · #1 (**permalink**) 27/07/2009, 13:08

el problema que tengo es que tengo dos columnas dentro de una celda. y en la columna de la derecha que es mucho mas ancha que la columna de la izquierda quiero meter una imagen a la izquierda y a la misma altura un texto. pues esto no consigo que me salga bien.

El texto se ve a la derecha como tiene que estar pero no a la misma altura que la imagen. pongo el codigo html y el codigo css para que me digais que falla.........

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=iso-8859-1" />
<title>mudanzas 2000 s.l</title>



<link href="delegaciones.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	background-color: #ffd68e;
}
.Estilo1 {color: #A97110}
-->
</style>
</head>

<body>
<div id="wrapperservicios">
<div id="headerservicios"> 
	<p><img src="imagenes/logo-final.jpg" width="270" height="95" /></p>
</div>
    <div id="menu">
      <div class="barraMenu">
	<span class="Estilo1"><a class="botonMenu" href="index.php"><strong>Inicio</strong>  </a><a class="botonMenu" href="nosotros.php"><strong>Nosotros </strong> </a><a class="botonMenu" href=""><strong>Presupuestos </strong> </a><a class="botonMenu"><strong>Donde estamos </strong></a><a class="botonMenu" href="garantia.php"><strong>Garantía </strong> </a><a class="botonMenu" href=""><strong>Delegaciones </strong> </a></span><a href="servicios.php" class="botonMenu "><strong>Servicios </strong></a> 
      <p><img src="imagenes/imagengarantiacabezera.jpg" width="800" height="149" /></p>
      </div>
      <div id="maingarantia">

<div id="celdaizquierda">
</div>

<div id="celdaderecha">
<img src="imagenes/MAPA_MAP_DEFAULT.GIF" alt="ESPAÑA" name="MAPAGIF" width="174" height="155" border=0 align="middle" useMap = "#MAP"  isMap id="MAPAGIF">
<h2>DELEGACIONES</h2>
<p><strong>Puede solicitar presupuesto sin comprimiso en el TLF: 91 xxxxxxx(Madrid) o 9xxxxxxxxx(Barcelona)o 97 636 89 95 (Valencia) o  9xxxxxxx (Málaga) a través del correo electrónico [email protected] le atenderemos a la mayor brevedad posible. 
</strong></p>
	 
<map name = "MAP">

<area id="barcelona" coords="115,32,164,52" alt="Barcelona"   shape="RECT" onclick="showLightbox4()"/>

<area id="madrid" coords="45,38,88,81" alt="Madrid" shape="RECT" onclick="showLightbox3()"/>

<area id="valencia" coords="111,63,137,94" alt="Valencia" shape="RECT" onclick="showLightbox2()"/>

<area id="malaga" coords="16,120,117,152" alt="Málaga" shape="RECT" onclick="showLightbox()"/>
</map>


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

Código:

/* CSS Document */

#wrapperservicios{
	height:auto;
	margin:auto;
	width: 800px;
	border-top-color:#000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	border-top-style: solid;
	border-right-style:solid;
	border-left-style: solid;
	border-bottom-style:solid;
	background-color: #FFFFFF;
	border-width:thin;

	
	}
	
#headerservicios {
	width:800px;
	height:auto;
	background-color: #FFFFFF;
	margin:auto;	
	float:left;	
	
}


#menu div.barraMenu,
#menu div.barraMenu 
a.botonMenu {
	font-family: sans-serif, Verdana, Arial;
	font-size: 14px;
	color: #FFFFFF;
	width:800px;
	height:auto;
	margin:auto;
	
}

#menu div.barraMenu {
text-align:left;
margin:auto;




	
}

#menu div.barraMenu a.botonMenu {
background-color: #FFFFFF;
color: #a97110;
cursor: pointer;
padding: 10px 6px 2px 5px;
text-decoration: none;
background-color: #ffffff;

}
#wrapperservicios #menu .barraMenu {
text-align:center;
background-color: #FFFFFF;
height:auto;

}


#menu div.barraMenu a.botonMenu:hover {
color:#006729;

}

#menu div.barraMenu a.botonMenu:active {
	text-align: center;
}	


#imagenindex {
width:800px;
height:142px;
margin:auto;
padding-top:20px;
}
#maingarantia{
width:800px;
	background-color:#FFFFFF;
	height:1200px;
	float:inherit;
	
	}
	
#textogarantia{
width:800px;
height:900px;
padding-left:30px;
padding-right:30px;
padding-top:20px;

}	

#celdaizquierda{
width:180px;
height:1200px;
float:left;
}

#celdaderecha{
width:620px;
height:1200px;
float:left;
}

#celdaderecha img{
float:left;
}

#celdaderecha h2{
float:right;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:left;
font-size:16px;
padding-right:200px;

}

#celdaderecha p{
float:right;
font-size:12px;
text-align:justify;
padding-left:180px;
padding-right:100px;
font-family:Verdana, Arial, Helvetica, sans-serif;

}

rufus · #2 (**permalink**) 27/07/2009, 13:33

era una tonteria los float en #celdaderecha p y h2 era eso ;)

jomaruro · #3 (**permalink**) 27/07/2009, 16:11

Hola:

Debes acostumbrarte a depurar tu código, esto

Código:

#wrapperservicios{
	height:auto;
	margin:auto;
	width: 800px;
	border-top-color:#000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	border-top-style: solid;
	border-right-style:solid;
	border-left-style: solid;
	border-bottom-style:solid;
	background-color: #FFFFFF;
	border-width:thin;
}

se puede poner así:

Código:

#wrapperservicios{
	height:auto;
	margin:auto;
	width: 800px;
        border: #000000 solid thin;
	background-color: #FFFFFF;
}

Saludos.