Foros del Web » Creando para Internet » Diseño web »

problema de maquetacion

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

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
  #2 (permalink)  
Antiguo 09/06/2009, 03:16
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: problema de maquetacion

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
  1. <div id="contenedor">
  2.  <img src="imagen.jpg" />
  3.  <p> texto texto texto </p>
  4. </div>

Código CSS:
Ver original
  1. #contenedor {
  2. position: relative;
  3. float: left;
  4. }
  5. #contenedor img {
  6. float: left;
  7. }
  8. #contenedor p {
  9. float: right;
  10. }

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!!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 09/06/2009, 14:54
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problema de maquetacion

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
  #4 (permalink)  
Antiguo 09/06/2009, 15:45
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: problema de maquetacion

Por nada, es un placer ayudar
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #5 (permalink)  
Antiguo 11/06/2009, 13:49
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problema de maquetacion

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
  #6 (permalink)  
Antiguo 13/06/2009, 11:15
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: problema de maquetacion

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.

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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 15:39.