Foros del Web » Creando para Internet » HTML »

Varias dudas (float, lista e imagen)

Estas en el tema de Varias dudas (float, lista e imagen) en el foro de HTML en Foros del Web. Bueno de alguna forma me presento porque empece hace muy poco.. Tengo 13 años, y hace poco empece con el Dreamweaver y HTML a tratar ...
  #1 (permalink)  
Antiguo 04/08/2009, 14:55
 
Fecha de Ingreso: febrero-2009
Mensajes: 54
Antigüedad: 8 años, 9 meses
Puntos: 0
Varias dudas (float, lista e imagen)

Bueno de alguna forma me presento porque empece hace muy poco.. Tengo 13 años, y hace poco empece con el Dreamweaver y HTML a tratar de hacer una pagina de basket.. voy aprendiendo poco a poco, tambien aprendi lo basico de CSS, aunque algunas cosas mas detalladas me faltan.. Este ultimo mes estuve viendo el diseño (pero no con el HTML, sino el diseño de como se veria) y hace unos dias empece a hacerla..

Pero me surgieron varios problemas.. Si pueden, por favor respondan todos, sino, lo que sea, sera agradecido.. Lo malo es que no me dejan poner las fotos..

1- Hice como una especie de cuadro, que tiene un titulo, abajo la foto, y abajo una descripcion.. este es el codigo CSS:

Código HTML:
#tituloNoticiaUno {
	margin-top:15px;
	padding-top:5px;
	padding-bottom:5px;
	font-size:15px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	background-color: #E5E5E5;
	text-align:left;
	padding-left:5px;
	padding-right:5px;
	width:240px; }
	
#textoNoticiaUno {
	font-size:11px;
	width:244px;
	background-color: #E5E5E5;
	margin-top:0px;
	text-align:left;
	padding-left:3px;
	padding-right:3px;
	padding-bottom:3px; }

#leerMas {
	color: #000000;
	font-weight:bold;
	text-decoration:none }
	
#autor {
	font-weight:bold;
	color:#FF0000;
	padding-bottom: 5px;
	border-bottom: 1px solid #8D8D8D; }
Y este es el codigo del cuadro donde esta la noticia..

Código HTML:
<div id="tituloNoticiaUno"><a href="link de la noticia">Shelden Williams se va a Boston</a></div>
<img src="link de la foto" width="250" height="150" />
<div id="textoNoticiaUno">
<div id="autor">03/08/09 - Santiago Sabene</div>
Shelden Williams viene a reforzar el juego interior verde, e intentará demostrar de una vez por todas que tiene un sitio en profesionales.&nbsp;&nbsp;<a href="link de la noticia" id="leerMas">Leer completo</a></div> 
El problema es que al verlo en el preview del Dreamweaver.. entre la foto, y el texto donde esta la descripcion y el autor, me aparece una linea blanca de unos 3 o 4 pixeles.. hay algun problema con el CSS?


2- Bueno, de esos cuadros, son dos identicos.. miren, aqui se los pongo de vuelta ambos por las dudas.. el CSS:

Código HTML:
#noticiaUno {
	float:left; }
	
#tituloNoticiaUno {
	margin-top:15px;
	padding-top:5px;
	padding-bottom:5px;
	font-size:15px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	background-color: #E5E5E5;
	text-align:left;
	padding-left:5px;
	padding-right:5px;
	width:240px; }
	
#textoNoticiaUno {
	font-size:11px;
	width:244px;
	background-color: #E5E5E5;
	margin-top:0px;
	text-align:left;
	padding-left:3px;
	padding-right:3px;
	padding-bottom:3px; }
	
#tituloNoticiaDos {
	margin-top:15px;
	padding-top:5px;
	padding-bottom:5px;
	font-size:15px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	background-color: #E5E5E5;
	text-align:left;
	padding-left:5px;
	padding-right:5px;
	width:240px;
	vertical-align:middle }
	
#textoNoticiaDos {
	font-size:11px;
	width:244px;
	background-color: #E5E5E5;
	margin-top:0px;
	text-align:left;
	padding-left:3px;
	padding-right:3px;
	padding-bottom:3px; }
	
#leerMas {
	color: #000000;
	font-weight:bold;
	text-decoration:none }
	
#autor {
	font-weight:bold;
	color:#FF0000;
	padding-bottom: 5px;
	border-bottom: 1px solid #8D8D8D; }
Y el codigo de ambos cuadros..

Código HTML:
<div id="noticiaUno"><div id="tituloNoticiaUno"><a href="link de la noticia">Shelden Williams se va a Boston</a></div>
<img src="link de la foto" width="250" height="150" />
<div id="textoNoticiaUno">
<div id="autor">03/08/09 - Santiago Sabene</div>
Shelden Williams viene a reforzar el juego interior verde, e intentará demostrar de una vez por todas que tiene un sitio en profesionales.&nbsp;&nbsp;<a href="link de la noticia" id="leerMas">Leer completo</a></div></div>

<div id="tituloNoticiaDos"><a href="link de la noticia">Ryan Hollins es casi Timberwolve</a></div>
<img src="link de la foto" width="250" height="150" />
<div id="textoNoticiaDos">
<div id="autor">03/08/09 - Esteban Mon</div>
Ryan Hollins ha firmado con los Minnesota Timberwolves, pero Dallas tiene 7 dias para igualar la oferta, lo cual no parece posible.&nbsp;&nbsp;<a href="link de la noticia" id="leerMas">Leer completo</a></div> 
La cosa es que me salen uno a la izquierda, y el otro casi a la derecha... pero quiero que esten al medio y casi pegados.. si le pongo un div align center, queda igual.. si al de la izquierda le pongo un margin left mas o menos de 30, sale mas al medio.. pero el otro tambien se corre.. y entre ambos queda una separacion bastante grande, y quiero que esten a lo sumo con una separacion de 10 px.. la solucion sera hacerlo en una tabla?

Bueno pues eso.. si me surge algo mas.. pregunto..
  #2 (permalink)  
Antiguo 04/08/2009, 15:09
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: Varias dudas (float, lista e imagen)

Mira como los trabajaste estando indentado

Código HTML:
Ver original
  1. <div id="noticiaUno">
  2.     <div id="tituloNoticiaUno"><a href="link de la noticia">Shelden Williams se va a Boston</a></div>
  3.     <img src="link de la foto" width="250" height="150" />
  4.     <div id="textoNoticiaUno">
  5.         <div id="autor">03/08/09 - Santiago Sabene</div>
  6.         Shelden Williams viene a reforzar el juego interior verde, e intentará demostrar de una vez por todas que tiene un sitio en profesionales.&nbsp;&nbsp;<a href="link de la noticia" id="leerMas">Leer completo</a>
  7.     </div>
  8. </div>
  9.  
  10. <div id="tituloNoticiaDos">
  11.     <a href="link de la noticia">Ryan Hollins es casi Timberwolve</a>
  12. </div>
  13. <img src="link de la foto" width="250" height="150" />
  14. <div id="textoNoticiaDos">
  15.     <div id="autor">03/08/09 - Esteban Mon</div>
  16.     Ryan Hollins ha firmado con los Minnesota Timberwolves, pero Dallas tiene 7 dias para igualar la oferta, lo cual no parece posible.&nbsp;&nbsp;<a href="link de la noticia" id="leerMas">Leer completo</a>
  17. </div>

Tienes varias cosas. Miralo y me dejas saber si no encuentras lo que te digo. Siempre es bueno indentar para ver como estoy haciendo las paginas.
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #3 (permalink)  
Antiguo 04/08/2009, 15:15
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Varias dudas (float, lista e imagen)

Hola Uymeloolvide
Sería bueno poder ver esa imagen, así que haz lo siguiente:
ponla sin el http inicial y las 3w para que no la rebote el foro. También ayudaría que pongas captura de pantalla de cómo lo ves y cómo querrías que se viese.

Pero ya te adelanto que creo que estás cayendo en algo de "divitis" (exceso de etiquetas div), recuerda que con (x)html tienes muchas más.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 04/08/2009, 16:33
 
Fecha de Ingreso: febrero-2009
Mensajes: 54
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Varias dudas (float, lista e imagen)

abimaelrc, no se lo que me quieres decir..

kseso, aqui esta la captura de la primera, la de la separacion entre la imagen y la descripcion.. i28.tinypic.com/vfk32r.png Como querria que se viese, simple, pegado a la foto...
Y aqui la de la separacion entre ambas.. i32.tinypic.com/2mqjlf8.jpg Si al cuadro de la izquierda le pongo margin, el de la derecha tambien se mueve..

Y lo de los divs, ya se Pero es que que mas se le puede poner? class es lo mismo.. o en la etiqueta le pongo style...
  #5 (permalink)  
Antiguo 04/08/2009, 17:43
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Varias dudas (float, lista e imagen)

¿Las imágenes van a tener el mismo tamaño o no?
¿Sólo vas a mostrar 2 noticias o podrán ser más?
En caso de que sean más ¿quieres que aparezcan 2 en cada fila o todas las que entren?
La caja (div) que contiene las noticias ¿qué tamaño propiedades tiene?

Para que me haga una idea más acertada de lo que quieres hacer, pon una captura de la parte de la página donde muestras esas noticias, por favor.

Y como dices que te estás iniciando en css, mira a ver si el pdf de iniciación al css que hay en www.librosweb.es te es de ayuda.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 04/08/2009, 17:43
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Varias dudas (float, lista e imagen)

y no has probado al cuadro de la derecha ponerle un id o class distinto al de la izquierda?
__________________
No diseñes usando tablas.
  #7 (permalink)  
Antiguo 04/08/2009, 20:54
 
Fecha de Ingreso: febrero-2009
Mensajes: 54
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Varias dudas (float, lista e imagen)

Cita:
Iniciado por kseso? Ver Mensaje
¿Las imágenes van a tener el mismo tamaño o no?
¿Sólo vas a mostrar 2 noticias o podrán ser más?
En caso de que sean más ¿quieres que aparezcan 2 en cada fila o todas las que entren?
La caja (div) que contiene las noticias ¿qué tamaño propiedades tiene?

Para que me haga una idea más acertada de lo que quieres hacer, pon una captura de la parte de la página donde muestras esas noticias, por favor.

Y como dices que te estás iniciando en css, mira a ver si el pdf de iniciación al css que hay en (no me deja poner links) te es de ayuda.

Un saludo
Si, se supone que tendran el mismo tamaño porque ya luego cuando tenga una foto, con el Photoshop lo edito para que siempre tengan esas medidas...

En realidad, es una noticia grande por arriba de esas dos, y luego esas dos abajo.. tal vez mas adelante seran 3, pero creo que con 2 estara bien..

Y no tengo un div para cada cuadro entero.. solo le hice uno al de la izquierda para ponerle el float:left, pero no se si cambiara mucho.. porque el width ya lo tienen el titulo, la foto y la descripcion, y el height seria auto porque el titulo a veces es 1 o 2 lineas, asi como la descripcion que pueden ser 3, 4 o 5 lineas..

Ahi va la captura.. esta el fondo, y luego un div para el cuadro blanco donde meti la cabecera, el menu (que se ve descuadrado, porque no se por que pero cuando lo veo la pantalla con los menus, se ve bien, pero cuando pongo F11 para ver pantalla completa, se corre) y luego las 3 noticias.. i30.tinypic.com/352s0fc.png.

Ok, ya la vere..

PD: otra cosa.. cuando en el preview veo todo.. esto o cualquier cosa.. todo me sale con un margen.. ese borde no es porque yo le puse margin, se me hizo solo.. pero yo he visto paginas que hay texto o cuadros pegados al margen... y te puede descuadrar eso..
  #8 (permalink)  
Antiguo 04/08/2009, 20:54
 
Fecha de Ingreso: febrero-2009
Mensajes: 54
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Varias dudas (float, lista e imagen)

Cita:
Iniciado por hades87 Ver Mensaje
y no has probado al cuadro de la derecha ponerle un id o class distinto al de la izquierda?
Pero si son distintos.. uno tiene noticiaUno y el otro noticiaDos...
  #9 (permalink)  
Antiguo 05/08/2009, 01:44
Avatar de Corneja  
Fecha de Ingreso: febrero-2008
Ubicación: Senolaf
Mensajes: 268
Antigüedad: 9 años, 9 meses
Puntos: 8
Respuesta: Varias dudas (float, lista e imagen)

Hola. Te ayudará saber que si tienes 5 noticias y a las cinco les vas a poner el mismo estilo de título, el mismo estilo de autor y el mismo estilo de texto, no tienes que crear 5 div con 5 id distintas, creas una clase y se la asignas a las cinco

Código HTML:
.titulo{
	margin-top:15px;
	padding-top:5px;
	padding-bottom:5px;
	font-size:15px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	background-color: #E5E5E5;
	text-align:left;
	padding-left:5px;
	padding-right:5px;
	width:240px;
}

<div class="titulo"><a href="link de la noticia">Ryan Hollins berwolve</a></div> 
  #10 (permalink)  
Antiguo 05/08/2009, 10:48
 
Fecha de Ingreso: febrero-2009
Mensajes: 54
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Varias dudas (float, lista e imagen)

Cita:
Iniciado por Corneja Ver Mensaje
Hola. Te ayudará saber que si tienes 5 noticias y a las cinco les vas a poner el mismo estilo de título, el mismo estilo de autor y el mismo estilo de texto, no tienes que crear 5 div con 5 id distintas, creas una clase y se la asignas a las cinco

Código HTML:
.titulo{
	margin-top:15px;
	padding-top:5px;
	padding-bottom:5px;
	font-size:15px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	background-color: #E5E5E5;
	text-align:left;
	padding-left:5px;
	padding-right:5px;
	width:240px;
}

<div class="titulo"><a href="link de la noticia">Ryan Hollins berwolve</a></div> 
Pues si... pero lo hice solo con 2.. porque la de arriba es mas grande.. pero de todas formas eso no me resolvera lo que busco..

por que puede ser entonces? Tengo que hacer una tabla, o que?
  #11 (permalink)  
Antiguo 05/08/2009, 11:09
 
Fecha de Ingreso: febrero-2009
Mensajes: 54
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Varias dudas (float, lista e imagen)

Problema 1 solucionado!!! luego de la imagen le he puesto un <br> y queda pegadito!!!

Ahora el problema es el float.. pero no se por que pasa eso! yo probe abriendo otros archivos nuevos.. le puse una imagen y al lado texto, y te los pone pegados :S
  #12 (permalink)  
Antiguo 05/08/2009, 11:44
 
Fecha de Ingreso: febrero-2009
Mensajes: 54
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Varias dudas (float, lista e imagen)

Creo que ya se por que es.. al contenedor de las 3 noticias, le puse align:center... y parece ser que en el float, el cuadro de la izquierda no me lo mandaba al medio.. pero bueno.. ahora le saco ese align, y se lo tendre que poner a cada uno.. porque probe de dejar el center, y ponerle left a un contenedor de las 2 noticias mas pequeñas, pero sigue igual..

Gracias a todos por la ayuda...
  #13 (permalink)  
Antiguo 05/08/2009, 12:06
 
Fecha de Ingreso: febrero-2009
Mensajes: 54
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Varias dudas (float, lista e imagen)

Bueno pues lo hice asi.. le saque el center al contenedor de todas las noticias (en realidad, de esa columna) y a la principal le puse center, y estos dos, que quedaron a la izquierda, les puse un margin:left para que mas o menos quede centrado, y un margin:right al de la izquierda para separarlos..

De todas formas, no se si sera perfecto el centrado.. lo que puedo hacer (no solo para eso, sino para no tener que darle align:center a cada cosa) es volver a poner todo centrado, y crear un div contenedor de las dos noticias, que este centrado, y que tenga un width exacto de la anchura de las dos noticias, mas la separacion que le quiera dar.. y ahi las pongo, con el margin correspondiente..

Es mejor hacer esto ultimo no?
  #14 (permalink)  
Antiguo 05/08/2009, 12:16
 
Fecha de Ingreso: febrero-2009
Mensajes: 54
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Varias dudas (float, lista e imagen)

Si lo se, estoy hablando solo xD pero es que fui cada vez descubriendo mas..
Hice eso.. estaba todo en center, puse un div nuevo que contenga las dos noticias.. el ancho era el ancho de la noticia 1, la noticia 2, y la separacion entre ellas.. y luego el primer cuadro le puse align left, y al otro le puse align right... miren aqui una captura de como quedo.. cualquier otra duda que me surga les consulto ;)

i26.tinypic.com/2mzjiub.png
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 01:38.