Foros del Web » Creando para Internet » CSS »

Alinear Div al TOP

Estas en el tema de Alinear Div al TOP en el foro de CSS en Foros del Web. Hola! Estoy maquetando una página y no logro que el div lateral (derecha) suba hasta arriba del todo y se alinee con los de la ...
  #1 (permalink)  
Antiguo 14/08/2008, 03:31
 
Fecha de Ingreso: marzo-2008
Mensajes: 12
Antigüedad: 9 años, 8 meses
Puntos: 0
Alinear Div al TOP

Hola! Estoy maquetando una página y no logro que el div lateral (derecha) suba hasta arriba del todo y se alinee con los de la izquierda.



código del div de la banda derecha:

Código:
#BDreta_index{
	width:275px;
	height:250px;
	padding: 0px;
	background-color : #ffffff;
	text-align: justify;
	float:right;
	margin: 5px;
	vertical-align: top;
}
  #2 (permalink)  
Antiguo 14/08/2008, 07:16
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Alinear Div al TOP

ponele a tu CSS esto

Cita:
*{margin:0;padding:0;}
  #3 (permalink)  
Antiguo 14/08/2008, 09:21
 
Fecha de Ingreso: marzo-2008
Mensajes: 12
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Alinear Div al TOP

Esto lo he probado, pq he buscado en el foro.

edtio: ahora lo acabo de probar y lo unico que hace es alinearse a la rerecha del todo... pero sigue sin subir hacia el top!! :(

Código:
#BDreta_index{
	width:275px;
	height:250px;
	text-align: justify;
	float:right;
	left:576px;
	margin:0;
	padding:0;
	margin:0;padding:0;
}

Última edición por chocola-t; 14/08/2008 a las 09:50
  #4 (permalink)  
Antiguo 14/08/2008, 10:46
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Alinear Div al TOP

¿Por qué no pones el resto del html y la css para que veamos qué le empuja hacia abajo?.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 14/08/2008, 12:05
 
Fecha de Ingreso: marzo-2008
Mensajes: 12
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Alinear Div al TOP

Aki tienes el css:
Código:
@charset "utf-8";
/* CSS Document */

BODY {
	background : #343434 url(images/fondo.gif) repeat;
	font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
	color : #666666;
	margin : 10px 0px 20px 0px;
	text-align: center;
	margin: 0;
	padding: 0;

}



#contingut{
text-align: left;
width: 800px;
height: 20px;
background-color : #333333;
margin: auto;
} 

H1{
font-size: 12pt;
}

#Informacions{
	width:450px;
	height:250px;
	margin-left: 20px;
	padding: 5px 0px 10px 0px;
	background-color : #ffffff;
	float:left;
	text-align: justify;
	margin-top:10px;
	padding-top:5px;
	
} 

#BDreta_index{
	width:275px;
	height:250px;
	text-align: justify;
	float:right;
	left:576px;
	margin:0;
	padding:0;
} 

#Barra_nav{
	width:750px;
	height:15px;
	max-height:37px;
	max-width:750px;
	margin-left:10px;
	margin-right:10px;
	margin-bottom:2px;
	margin-bottom:5px;
	margin-top: 5px;
	text-align:right;
	text-shadow:#FFFFFF;
	padding-top:5px;
	padding-bottom: 0px;
	text-decoration: blink;
}

#Credits{
	width:750px;
	height:24px;
	max-height:40px;
	max-width:750px;
	margin-left:10px;
	margin-right:10px;
	margin-bottom:2px;
	margin-bottom:14px;
	margin-top: 2px;
	text-align:center;
	text-shadow:#FFFFFF;
	padding-top:2px;
	padding-bottom: 0px;
	text-decoration: inherit;
}

#BLogin{
	width:260px;
	height:275px;
	margin-left: 20px;
	padding: 0px 5px 10px 5px;
	background-color : #E5E5E5;
	float:left;
	text-align: justify;
	margin-top:10px;
	padding-top:10px;
	vertical-align:top;
	
} 

#Imatge{
	width:177px;
	height:168px;
	left: 645px;
	top: 253px;
	margin-left: 50px;
	margin-top: 50px;
	vertical-align:middle;
}
y aki el html
Código:
   <link href="estilos.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Estilo1 {
	color: #FFFFFF;
	font-weight: bold;
	margin:0;
	padding:0;
}
.Estilo2 {color: #FFFFFF}
-->
</style>
<div id="contingut">
	<div align="center">
</div>
<head>
<title>Colla Joves 1970-2008</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">td img {display: block;}</style>
<!--Fireworks CS3 Dreamweaver CS3 target.  Created Tue Aug 12 19:11:41 GMT+0200 (Hora de verano romance) 2008-->
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#333333">
<table border="0" cellpadding="0" cellspacing="0" width="775">
<!-- fwtable fwsrc="plantilla.png" fwpage="Página 1" fwbase="index.gif" fwstyle="Dreamweaver" fwdocid = "359400552" fwnested="0" -->
  <tr>
   <td><img src="spacer.gif" width="775" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>

  <tr>
   <td><img name="index_r1_c1" src="index_r1_c1.jpg" width="775" height="11" border="0" id="index_r1_c1" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="11" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="index_r2_c1" src="index_r2_c1.jpg" width="775" height="127" border="0" id="index_r2_c1" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="127" border="0" alt="" /></td>
  </tr>
  <tr>
   <td valign="middle" background="index_r3_c1.jpg">
   
   <!--Menu navegació-->
   <div class="Estilo1" id="Barra_nav" span >Última actualització: 12/08/2008</div></td>
   
   <td><img src="spacer.gif" width="1" height="40" border="0" alt="" /></td>
  </tr>
  <tr>
   <td bgcolor="#FFFFFF">
   
   
   <div id="Informacions">
	<h1>Base de dades Castells Colla Joves Xiquets de Valls</h1>
    <p> En aquesta plana web podreu trobar tota la informació dels castells realitzats des de 1970 fins a l'actualitat, les poblacions, el tipus de castell, fotografies i informació relativa a les actuacions.</p>
    <p>	El fet de ser una de les colles punteres, obliga a portar correctament documentada les actuacions i diades realitzades al llarg de tota la història. </p>
    <p>Gràcies a una Base de Dades ben organitzada i actualitzada, podreu consultar qualsevol actuació a partir de diferents dades, com pot ser per any, per població, per castell, etc...</p>
    <p>El procés d'actualització actualment es basa en la documentació històrica i dels darrers anys de la Colla. </p>
    </div>
    
    <!-- INFORMACIÓ 2 -->
    
    <div id="Informacions">
    <h1> Notícia 2: Informacació actualització </h1>
    <p> Us informem que s'han acualitzat diferents actuacions dels anys 2001, 2006. </p>
    </div>
    
    
<!-- Bloc DRETA -->

	<div "id="BDreta_index">
     <div align="center" id="Imatge">de</div>
	</div>
   <td><img src="spacer.gif" width="1" height="480" border="0" alt="" /></td>
  </tr>
 
  

  <tr>
   <td background="index_r5_c1.jpg">
   		<div id="Credits"><span class="Estilo2">Colla Joves Xiquets de Valls.&copy; 2008. Valls<br>
        Diseny Web i Maquetació: Jordi Reverté i Marín | Programació base de dades: Joan Martinez </span></div>   </td>
   <td><img src="spacer.gif" width="1" height="42" border="0" alt="" /></td>
  </tr>
</table>
</body>
</html>
  #6 (permalink)  
Antiguo 14/08/2008, 12:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Alinear Div al TOP

Dos cosas:

1.- no debes usar dos veces el mismo ID (Informacions). El ID, como en todo en la informática, debe ser único.

2.- creo que el asunto lo podrás solucionar poniendo el div

<div "id="BDreta_index">

antes que los dos de "Informacions". Simplemente coge todo el bloque y colócalo delante de los otros dos, a ver qué pasa.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 19/08/2008, 10:27
 
Fecha de Ingreso: marzo-2008
Mensajes: 12
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Alinear Div al TOP

Mikmoro, gracias!

He cambiado el orten. Primero he escrito el bloque derecho y despues los bloques centrales. Asi queda de maravilla!! :) la combinación para 4 bloques es:

derecha - central - derecha - central. Así me queda bién cuadrada! :)

Lo del ID no entiendo pq lo dices? debo duplicar el ID si quiero poner por ejemplo 3 bloques de Informacions? (Informacions1, Infromacions2...?)

Gracias por contestar! :)
  #8 (permalink)  
Antiguo 19/08/2008, 12:34
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Alinear Div al TOP

Cita:
Iniciado por chocola-t Ver Mensaje
Lo del ID no entiendo pq lo dices? debo duplicar el ID si quiero poner por ejemplo 3 bloques de Informacions? (Informacions1, Infromacions2...?)
Así es, el ID es un identificador único y no se debe repetir. Si quieres dar el mismo formato a varios bloques debes cambiar el ID por class, que es la forma de que varios bloques tengan la misma clase sin problemas.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 23/08/2008, 04:26
 
Fecha de Ingreso: marzo-2008
Mensajes: 12
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Alinear Div al TOP

Lo tengo metido! No sabia esto de los ID y los class. Ahora funciona todo perfecto! :)

Gracias.
  #10 (permalink)  
Antiguo 23/08/2008, 09:12
 
Fecha de Ingreso: agosto-2008
Mensajes: 2
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Alinear Div al TOP

Cita:
Iniciado por chocola-t Ver Mensaje
Hola! Estoy maquetando una página y no logro que el div lateral (derecha) suba hasta arriba del todo y se alinee con los de la izquierda.



código del div de la banda derecha:

Código:
#BDreta_index{
	width:275px;
	height:250px;
	padding: 0px;
	background-color : #ffffff;
	text-align: justify;
	float:right;
	margin: 5px;
	vertical-align: top;
}
respuesta: prueba utilizando

position: absolute toma este ejemplo
<STYLE>
.cuadro{
color:#fff;
(position: absolute; ) <--- PRUEBA CON ESTO
top: 1.5 cm;
left: 6cm;
}
</STYLE>
</HEAD>
BODY BGCOLOR: ... COLOR: ... MARGIN(ME DA LADILLA PONERLOS TODOS)
<DIV CLASS=cuadro>control total</DIV>
marico el que lo lea
</BODY>
</HTML>
  #11 (permalink)  
Antiguo 23/08/2008, 16:32
 
Fecha de Ingreso: septiembre-2007
Ubicación: Buenos Aires, Argentina.
Mensajes: 95
Antigüedad: 10 años, 3 meses
Puntos: 2
Respuesta: Alinear Div al TOP

Si quieres que 2 div del mismo nivel, estén uno al lado del otro, tienes que ponerles a ambos en float. Left o right, como te guste. Si pones los 2 en float: left; el que aparezca primero irá mas a la izquierda.

A partir de eso fijate que lo vas a hacer andar bien, no hace falta usar position absolute ni nada de eso.
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 09:16.