problema de maquetacion

rufus · #1 (**permalink**) 08/06/2009, 16:39

mi duda es la siguiente...usando html y css... tengo 8 cuadrados de 200px de ancho y 200 px de alto..colocados uno al lado del otro no se si me explico 1 y 1 y debajo de estos dos otros 1 y 1 cuadritos de 200...

ahora en el primero de la izquierda (elsuperior) kiero meter una imagen pekeña y alinear un texto a su derecha a la misma altura sin ke se me descuadre todo pongo a continuacion el codigo ke e usado para hacerlo.

html

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>mudanzas 2000 s.l</title>
<link href="micss2.css" rel="stylesheet" type="text/css"/>
</head>

<body>




<div id="wrapper">
    <div id="header"><img src="imagenes/titulo.jpg" width="798" height="84" align="absmiddle"/> </div>
	<p> </p>
    <div id="menu"><div class="barraMenu">
	<a class="botonMenu" href="index.php">inicio</a><a class="botonMenu" href="">Nosotros</a><a class="botonMenu" href="">presupuestos</a><a class="botonMenu" href="">donde estamos</a><a class="botonMenu" href="">Garantía</a><a class="botonMenu" href="">Delegaciones</a><a class="botonMenu" href="">Servicios</a> 
      <p> </p>
</div>
</div>
    <div id="mainservicio">
      <div id="columservicio1">
        <div id="columservicio1foto"> <img src="imagenes/servicioscasa.jpg" width="87" height="88" align="left" />	  </div>
      </div>
		  <div id="columservicio2">
    </div>
	<div id="columservicio3">
    </div>
	<div id="columservicio4">
	</div>
	<div id="columservicio5">
	</div>
</div>

</body>
</html>

y css

Código:

#wrapper {
	height:auto;
	margin:auto;
	width: 800px;
}
#header {

	height:auto;
	background-color:#FFFFFF;
	margin:auto;		
}

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

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

}

#menu div.barraMenu a.botonMenu {
background-color: #0000FF;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}
#wrapper #menu .barraMenu {
text-align:center;
}


#menu div.barraMenu a.botonMenu:hover {
background-color: #0000CC;
}

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


#mainservicio{
width:800px;
	background-color:#FFFFFF;
	height:800px;
	float:inherit;
	text-align: justify;
	}

#columservicio1{
	width:400px;
	background-color:#FFFFFF;
	height:200px;
	float:left;
	text-align: right;
	overflow: auto;
	}
#columservicio1foto{
width:95px;
	background-color:#FFFFFF;
	height:200px;
	float:left;
	}

#columservicio2{
width:400px;
	background-color:#FFFFFF;
	height:200px;
	float:left;
	}
#columservicio3{
width:400px;
	background-color:#FFFFFF;
	height:200px;
	float:left;
	}

#columservicio4{
width:400px;
	background-color:#FFFFFF;
	height:200px;
	float:left;
	}
#columservicio5{
width:400px;
	background-color:#FFFFFF;
	height:200px;
	float:left;
	}

ke tengo ke poner en el css para poder poner la imagen a la izquierda y el texto a la misma altura ke la imagen a su derecha???

el ejemplo del ke me gio esta en 3w mudanzas . es en el apartado servicios

gracias

Calizman · #2 (**permalink**) 09/06/2009, 02:16

Saludos!!

Entiendo tu problema, pero lamentablemente no entiendo nada de tu codigo... Sea como sea, voy a ayudarte.

Uno de los mayores problemas que la gente tiene para maquetar (y no lo digo solo por ti) es que no usan las herramientas CSS y HTML para lo que son. Ahora me explico con ejemplos:

Si lo que quieres es tener un texto alineado a la derecha, y una imagen a la izquierda, simplemente metes esos dos en un div, y les das las instrucciones adecuadas. Te quedaria de esta forma:

Código HTML:

Ver original<div id="contenedor">
 <img src="imagen.jpg" />
 <p> texto texto texto </p>
</div>

Código CSS:

Ver original#contenedor {
position: relative;
float: left;
}
#contenedor img {
float: left;
}
#contenedor p {
float: right;
}

De esta forma, la imagen queda de el lado izquierdo, y tu texto de el lado derecho... Espero que te sirva y que te ayude eh!

Hasta Luego!!

rufus · #3 (**permalink**) 09/06/2009, 13:54

muchas gracias calizz me as ayudado...ya lo tengo maketado como kiero pero tengo ke darle un buen formato al texto para que quede presentable..gracias

Calizman · #4 (**permalink**) 09/06/2009, 14:45

Por nada, es un placer ayudar

rufus · #5 (**permalink**) 11/06/2009, 12:49

calizz tengo otro problema relacionado con la duda ke me resolviste, tengo 2 columnas y 2 filas ok? ke en numeros seria:

1 2
3 4

pues no se ke he hecho con el codigo ke ahora la celda numero "2" keda asi

1
2 3
4

me entiendes se me a descuadrado todo. te paso otra vez el codigo incluyendo la solucion ke me diste para ver si puedes volver a ayudarme:

html

Código:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>mudanzas 2000 s.l</title>

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

<body>




<div id="wrapper">
    <div id="header"><img src="imagenes/titulo.jpg" width="798" height="84" align="absmiddle"/> </div>
	<p> </p>
    <div id="menu"><div class="barraMenu">
	<a class="botonMenu" href="index.php">inicio</a><a class="botonMenu" href="">Nosotros</a><a class="botonMenu" href="">presupuestos</a><a class="botonMenu" href="">donde estamos</a><a class="botonMenu" href="">Garantía</a><a class="botonMenu" href="">Delegaciones</a><a class="botonMenu" href="">Servicios</a> 
      <p> </p>
</div>
</div>
    <div id="mainservicio">
      <div id="columservicio1">
       <img src="imagenes/servicioscasa.jpg" width="87" height="88"/>	  
	   <h5>SERVICIO DE MUDANZAS PARA PARTICULARES</h5>
<p>Contamos con el equipo y experiencia necesaria para en el traslado de su domicilio...
Ver más información</p>
      </div>
	<div id="columservicio2">
	</div>
	<div id="columservicio3">
    </div>
	<div id="columservicio4">
	</div>
</div>

</body>
</html>

y css

Código:

#mainservicio{
width:800px;
	background-color:#FFFFFF;
	height:800px;
	float:inherit;
	
	}

#columservicio1{
	width:400px;
	background-color:#FFFFFF;
	height:150px;
	float:left;
	overflow: auto;
	position: relative;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-right-style: groove;
	border-bottom-style: groove;

	}
	
	#columservicio1 img{
	float: left;
	}
	
	#columservicio1 p {
	float: right;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color:#999999;
	}
	
#columservicio1 h5 {
	float: right;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	color:#FF0000;
	}

#columservicio2{
width:400px;
	background-color:#FFFFFF;
	height:150px;
	float:left;


	}
	
#columservicio3{
width:400px;
	background-color:#FFFFFF;
	height:150px;
	float:left;
	}

#columservicio4{
width:400px;
	background-color:#FFFFFF;
	height:150px;
	float:left;
	}

que tengo que modificar en el codigo para que las celdas se me queden como yo quiero es decir por orden:

1 2
3 4

que ago?

saludos

jomaruro · #6 (**permalink**) 13/06/2009, 10:15

Hola:

Creo que algo has cambiado en columservicio1 que ha aumentado de tamaño y junto con columservicio2 son más anchos que mainservicio.

Saludos.