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

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

Estas en el tema de [ayuda]como arreglar estas etiquetas div una al lado de otra en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/07/2013, 23:06
(Desactivado)
 
Fecha de Ingreso: mayo-2012
Mensajes: 58
Antigüedad: 12 años, 4 meses
Puntos: 0
[ayuda]como arreglar estas etiquetas div una al lado de otra

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
  #2 (permalink)  
Antiguo 18/07/2013, 00:57
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 15 años, 3 meses
Puntos: 641
Respuesta: [ayuda]como arreglar estas etiquetas div una al lado de otra

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.
  #3 (permalink)  
Antiguo 18/07/2013, 02:54
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 6 meses
Puntos: 1826
Información Respuesta: [ayuda]como arreglar estas etiquetas div una al lado de otra

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
  1. <div id="wrap">
  2.     <div id="main">
  3.  
  4.     </div>
  5. </div>
  6.  
  7. <div id="footer">
  8. </div>

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

Código CSS:
Ver original
  1. main {
  2. width: 90%;
  3. margin: 0 auto;}
y listo.
  #4 (permalink)  
Antiguo 18/07/2013, 21:16
(Desactivado)
 
Fecha de Ingreso: mayo-2012
Mensajes: 58
Antigüedad: 12 años, 4 meses
Puntos: 0
Respuesta: [ayuda]como arreglar estas etiquetas div una al lado de otra

Cita:
Iniciado por memoadian Ver Mensaje
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.
Solo definí el ancho en el css de fotoderecha, central y foto izquierda, con box-sizing para central por que tiene borde


me podrias explicar un poco mejor esta parte
  #5 (permalink)  
Antiguo 18/07/2013, 21:17
(Desactivado)
 
Fecha de Ingreso: mayo-2012
Mensajes: 58
Antigüedad: 12 años, 4 meses
Puntos: 0
Respuesta: [ayuda]como arreglar estas etiquetas div una al lado de otra

Cita:
Iniciado por Rafael Ver Mensaje
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
  1. <div id="wrap">
  2.     <div id="main">
  3.  
  4.     </div>
  5. </div>
  6.  
  7. <div id="footer">
  8. </div>

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

Código CSS:
Ver original
  1. main {
  2. width: 90%;
  3. margin: 0 auto;}
y listo.
osea tu me recomiendas que le ponga un contenedor a mis tres etiquetas divs

Etiquetas: extension, flotante, generador
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 22:01.