[ayuda]como arreglar estas etiquetas div una al lado de otra

adamsst · #1 (**permalink**) 17/07/2013, 23:06

hola a todos anteriormente me dijeron que en vez de tablas utilizara etiquetas div y bueno eso era lo que al principio pensaba hacer pero yo me manejo mucho mejor con tablas pero siempre me han dicho no uses tablas usa etiquetas div y bueno me anime a salir de las benditas tablas y empezar con las div

pero siempre me pasa lo mismo y ahora deseo que me ayuden a solucionar este problema

[align=center]asi se deberia ver la pagina que estoy haciendo esto lo logre con tablas[/align]

[align=center]y asi me quedo luego que empece a probar con etiquetas div[/align]

como hago para que el diseño de abajo me quede como el de arriba

aca el codigo html

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=utf-8" />
<title>Documento sin título</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />

</head>

<body>






<div id="fotoderecha"><img src="images/Sin título-1.png" width="87px" height="108px" /></div>

<div id="central"><p>Tratamientos Cosmeticos Faciales y Corporales</p></div>

<div id="fotoizquierda"><img src="images/Sin título-2.png" width="135px" height="108px" /></div>    
    
  



<div id="contenedordebotones"><table align="center" width="58%">
  <tr>
    
    <td class="boton1"><a>Inicio</a></td>
    <td class="boton2"><a>Tratamientos Corporales</a></td>
    <td class="boton3"><a>Tratamientos Faciales</a></td>
    <td class="boton4"><a>Contacto</a></td>
    
  </tr>
</table>


</div>


<div id="cuerpo">

    
<img src="images/imagen_inicio.fw.png" width="100%" height="100%" />




</div>



</body>
</html>

y aca el codigo css

Código:




#fotoderecha{
	
	float: left;
	
	}

#central{
	font-family: "Monotype Corsiva";
	font-size: 30px;
	background-color: #996600;
	height: 109px;
	text-align: center;	
	border-width: 1px; border-style: solid; border-color: black;
	float: left
	
	}

#fotoizquierda{
	
	
	
	
	
	}




#contenedordebotones{margin-top: 8px;
	font-family: "Monotype Corsiva";
	width: 100%;
	line-height: 120%;
	text-align: center;
	font-size: 20px;
	font-style: normal;
	color: #000;
	background-color: #C03;	
	border-width: 1px; border-style: solid; border-color: black;}


.boton1 a { text-decoration: none; border-radius: 10px; padding: 0px 5px 0px 5px; }
a:hover { background: #FFF; }

	 


.boton2  a { text-decoration: none; border-radius: 10px; padding: 0px 5px 0px 5px; }
a:hover { background: #FFF; }



.boton3  a { text-decoration: none; border-radius: 10px; padding: 0px 5px 0px 5px; }
a:hover { background: #FFF; }




.boton4  a { text-decoration: none; border-radius: 10px; padding: 0px 5px 0px 5px; }
a:hover { background: #FFF; }








#cuerpo {
	margin-top: 3px;
	border-width: 1px; border-style: solid; border-color: black;
	
}

gracias a quien me pueda ayudar

memoadian · #2 (**permalink**) 18/07/2013, 00:57

Pues todavía te falta mucho que aprender.

Aquí te dejo un ejemplo de como podrías hacerlo en base en lo que ya llevas.

Solo definí el ancho en el css de fotoderecha, central y foto izquierda, con box-sizing para central por que tiene borde

Aquí el ejemplo:

http://jsfiddle.net/FXwxY/

Aunque hay otras formas de hacerlo.

Rafael · #3 (**permalink**) 18/07/2013, 02:54

Yo te complemento algunos tips.

A la larga vas a acabar necesitando uno de estos: http://www.cssstickyfooter.com/ Ya parezco spammer co este sitio.

Esto te lleva a que tienes algo llamado un contenedor. Esta es la estructura básica:

Código HTML:

Ver original<div id="wrap">
    <div id="main">
 
    </div>
</div>
 
<div id="footer">
</div>

De ahí, para centrar, por ejemplo main le pones en la hoja de estilos.

Código CSS:

Ver originalmain {
width: 90%;
margin: 0 auto;}

y listo.

adamsst · #4 (**permalink**) 18/07/2013, 21:16

Cita:

Iniciado por memoadian