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