Foros del Web » Creando para Internet » CSS »

Otro problema de maquetacion.

Estas en el tema de Otro problema de maquetacion. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/07/2009, 14:08
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
Otro problema de maquetacion.

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;

}
  #2 (permalink)  
Antiguo 27/07/2009, 14:33
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: Otro problema de maquetacion.

era una tonteria los float en #celdaderecha p y h2 era eso ;)
  #3 (permalink)  
Antiguo 27/07/2009, 17:11
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Otro problema de maquetacion.

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.

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 00:23.