Varias dudas (float, lista e imagen)

uymeloolvide · #1 (**permalink**) 04/08/2009, 13:55

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..

abimaelrc · #2 (**permalink**) 04/08/2009, 14:09

Mira como los trabajaste estando indentado

Código HTML:

Ver original<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>

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.

kseso? · #3 (**permalink**) 04/08/2009, 14:15

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

uymeloolvide · #4 (**permalink**) 04/08/2009, 15:33

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...

kseso? · #5 (**permalink**) 04/08/2009, 16:43

¿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

hades87 · #6 (**permalink**) 04/08/2009, 16:43

y no has probado al cuadro de la derecha ponerle un id o class distinto al de la izquierda?

uymeloolvide · #7 (**permalink**) 04/08/2009, 19:54

Cita:

Iniciado por kseso?

¿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..

uymeloolvide · #8 (**permalink**) 04/08/2009, 19:54

Cita:

Iniciado por hades87

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...

Corneja · #9 (**permalink**) 05/08/2009, 00:44

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>

uymeloolvide · #10 (**permalink**) 05/08/2009, 09:48

Cita:

Iniciado por Corneja

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?

uymeloolvide · #11 (**permalink**) 05/08/2009, 10:09

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

uymeloolvide · #12 (**permalink**) 05/08/2009, 10:44

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...

uymeloolvide · #13 (**permalink**) 05/08/2009, 11:06

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?

uymeloolvide · #14 (**permalink**) 05/08/2009, 11:16

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