Foros del Web » Creando para Internet » HTML »

Altura y ancho de elementos de sitio?

Estas en el tema de Altura y ancho de elementos de sitio? en el foro de HTML en Foros del Web. Hola a todos, no soy diseñadora pero por razones desconocidas me pusieron a hacerle un poco al html, mi duda creo es básica pero no ...
  #1 (permalink)  
Antiguo 01/09/2009, 19:50
 
Fecha de Ingreso: octubre-2008
Mensajes: 81
Antigüedad: 9 años, 1 mes
Puntos: 3
Pregunta Altura y ancho de elementos de sitio?

Hola a todos, no soy diseñadora pero por razones desconocidas me pusieron a hacerle un poco al html, mi duda creo es básica pero no he encontrado en la red algo que m oriente un poquillo, alguien podria explicarme como establecer el ancho y la altura de los elementos en una pagina llamense divs, listas, etc? hasta ahora lo he ido manejando utilizando las celdas de una tabla, pero conforme he leido mas y mas del tema, me he enterado es mala practica basar la estructura de un sitio en tablas. Ya manejo css's y divs, sera que por ahi esta la respuesta? Agradeceria una orientación. Gracias.
  #2 (permalink)  
Antiguo 01/09/2009, 20:07
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Altura y ancho de elementos de sitio?

Primero, pones a tu elemento una clase:

<div class="caja">

Luego, en CSS le das el tamaño:

.caja{width:200px;height:150px;overflow:auto}

No olvides el punto al comenzar. Si no le pones un height, se ajustará a la altura de su contenido. En el ejemplo te pongo un overflow:auto, ya que si el contenido es más grande que el tamaño de la caja, esto hará que aparezcan una flechas de desplazamiento.

Espero te ayude, si necesitas más información, siempre estamos dispuestos a ayudarte. Éxito
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #3 (permalink)  
Antiguo 02/09/2009, 12:46
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Altura y ancho de elementos de sitio?

Hola Milen:

Lo que dice daPhyre es correcto, pero con su permiso quisiera agregar algo que es fundamental:

el ancho real de tus cajas css (si no sabes que es busca en google "css box") esta dado por la suma de margin + padding + width.
es decir si por ejemplo tienes asignado a tu div un width=200px un padding-left:10px; y un margin-right:10px; Entonces el ancho real de tu div será 200px+10px+10px=220px

Ten presente este detalle porque tu cerebro te lo va a agradecer a la hora de flotar tus divs

Cito "me he enterado es mala practica basar la estructura de un sitio en tablas. Ya manejo css's y divs, sera que por ahi esta la respuesta? Agradeceria una orientación. Gracias."

Para ello te recomiendo los siguientes links aportados por mikmoro:

http://www.araudi.net/migracion/migr...sin_dolor.html
http://www.araudi.net/migracion/migr..._parte_II.html

Saludos!
  #4 (permalink)  
Antiguo 03/09/2009, 00:41
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Altura y ancho de elementos de sitio?

Cita:
el ancho real de tus cajas css (si no sabes que es busca en google "css box") esta dado por la suma de margin + padding + width.
te falto mencionar border
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #5 (permalink)  
Antiguo 03/09/2009, 09:48
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Altura y ancho de elementos de sitio?

Hola zerokilled, tienes razón:
Finalmente, el ancho total será la suma de width (ancho del contenido) + padding (distancia desde el border hasta al contenido de la css-box) + margin (distancia desde el border de la css-box hasta el objeto más cercano) + border

Gracias por su respuesta, creo que los siguientes links serán útiles para profundizar en el tema:

http://www.librosweb.es/css/capitulo..._de_cajas.html

... y sobre todo teniendo en cuenta que IE no respeta los estándares de la w3c y modifica el ancho de las cajas-css (bugs de ie 5, 6 y 7):

http://www.maestrosdelweb.com/editorial/cssmodelocajas/
http://www.labrujulaverde.com/css/di...fox-ie6-e-ie7/
http://www.456bereastreet.com/archiv...css_box_model/

Saludos!

Última edición por cristian_cena; 03/09/2009 a las 15:11
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 16:39.