[SOLUCIONADO] Problema con CSS en HTML5

718208 · #1 (**permalink**) 23/03/2015, 15:34

Hola, estoy practicando un poco css en html5, mi problema es el siguiente, tengo este código:

Código HTML:

<html>
<head>
 <title>Ejemplo de estilos para toda una p&aacute;gina</title>
 <STYLE type="text/css">

 H1 {text-decoration: underline; text-align:center}
 P {font-Family:arial,verdana; color: white; background-color: black}
 BODY {color:black;background-color: #cccccc; text-indent:1cm}

 </STYLE>
</head>

<body>
<h1>P&aacute;gina con estilos</h1>
Bienvenidos...
<p>Siento ser tan hortera, pero esto es un ejemplo sin m&aacute;s importancia</p>
</body>
</html>

Que obviamente se imprime como tiene que imprimirse, a pasar este código a html5 quedando así:

Código HTML:

<!DOCTYPE html>
<html lang="es"/>
<head>
	<title> titulo</title>
	<link rel="SHORTCUT ICON" href="favicon.ico"/>
	<meta name="robots" content="index/follow"/>
	<meta name="content type" content="text/html" charset="urf-8"/>
	<meta name="keywords" content="palabras claves"/>
	<meta name="description" content="descripcion de la pagina"/>
	
	<!-- CONFIGURACION CON CSS -->
	<STYLE type="text/css">

	H1 {text-decoration: underline; text-align:center}
	P {font-Family:arial,verdana; color: white; background-color: black}
	BODY {color:black;background-color: #cccccc; text-indent:1cm}
	Section {color:black;background-color: #cccccc; text-indent:1cm}
	Article {color:black;background-color: #cccccc; text-indent:1cm}
	
	</STYLE>
</head>
<body>
	<header> </header>
	<nav> </nav>
	<section>
		<article>
			<!-- CONTENIDO PRINCIPAL -->
			<h1>P&aacute;gina con estilos</h1>
			Bienvenidos...
			<p>Siento ser tan hortera, pero esto es un ejemplo sin m&aacute;s importancia</p>
		</article>
		<aside> </aside>
	
	</section>
</body>
</html>

No se imprime como el primer código presentado, se que es por que la etiqueta article "molesta" asi como debe molestar section y todas las otras, como podría hacer que se imprima como quiero? osea, como el primer código presentado.

Desde ya muchas gracias, Saludos: Mario Olivera

AngelKrak · #2 (**permalink**) 23/03/2015, 15:42

no entiendo muy bien que es lo que quieres :/ podrias explicarlo mejor?

718208 · #3 (**permalink**) 23/03/2015, 15:50

Hola angel, pues mira si ejecutas el primer codigo te va a mostrar la pagina de una manera, y con el segundo codigo te va a ejecutar la pagina de otra manera, lo que quiero es pasar el primer codigo a html5 con sus respectivas etiquetas, header, nav, section, article, etc y que se vea igual que en el primer código. Saludos!

718208 · #4 (**permalink**) 23/03/2015, 15:56

Cita:

Iniciado por 718208

Hola angel, pues mira si ejecutas el primer codigo te va a mostrar la pagina de una manera, y con el segundo codigo te va a ejecutar la pagina de otra manera, lo que quiero es pasar el primer codigo a html5 con sus respectivas etiquetas, header, nav, section, article, etc y que se vea igual que en el primer código. Saludos!

Creo que va a ser imposible la misma etiqueta <!DOCTYPE HTML> Molesta :/, auquesea no es lo mismo en mi navegador firefox

AngelKrak · #5 (**permalink**) 23/03/2015, 16:07

:O yo los veo iguales -_- lo unico que cambia es el tamaño de la letra titulo jajaja xD

y hasta donde yo se los 2 tiene HTML5 que el 2do codigo tenga las etiquetas completas es otra cosa ._. tan solo copia y pega y listo ._.

718208 · #6 (**permalink**) 23/03/2015, 16:14

Cita:

Iniciado por AngelKrak

:O yo los veo iguales -_- lo unico que cambia es el tamaño de la letra titulo jajaja xD

y hasta donde yo se los 2 tiene HTML5 que el 2do codigo tenga las etiquetas completas es otra cosa ._. tan solo copia y pega y listo ._.

Eso mismo, pues asi es en firefox:

Codigo SIN HTML5

Código CON HTML5

Me das la explicación de porque pasa esto y como solucionarlo usando html5, gracias :)

NueveReinas · #7 (**permalink**) 23/03/2015, 17:09

Cita:

Iniciado por 718208

Eso mismo, pues asi es en firefox:

Codigo SIN HTML5

Código CON HTML5

Me das la explicación de porque pasa esto y como solucionarlo usando html5, gracias :)

Hola.

Tus imágenes se ven muy pequeñas.
Te recomiendo usar Tinypic. Ahí, subes la imagen, copias el código para foros y lo pegas aquí

718208 · #8 (**permalink**) 23/03/2015, 17:27

Cita:

Iniciado por NueveReinas

Hola.

Tus imágenes se ven muy pequeñas.
Te recomiendo usar [URL="http://tinypic.com/"]Tinypic[/URL]. Ahí, subes la imagen, copias el código para foros y lo pegas aquí

No importa el tamaño de las imagenes, el problema se ve igual. Saludos!

ZoroRoronoa · #9 (**permalink**) 23/03/2015, 18:26

Eso pasa, porque las nuevas etiquetas, estan hechas para su debido uso.

<section> para Secciones
<article> para articulos.

<header> para cabeceras -> aqui van los titulos.

Tu estas usando un H1, dentro de un article, estonces el h1, hereda su tamaño de fuente.
Si lo usas dentro de un section, veras que el tamaño sera mas grande que estando dentro de "article" pero mas chica que la NORMAL.
Asi que para usar H1, debes usar su etiqueta correspondiente, es decir, la cabecera (header)
Si colocas el H1 dentro de un header, el valor por defecto del h1, se respetara, y su tamaño no cambiara.

PD: El tamaño de las imagenes si que importa, yo tambien no lograba entender cual era tu inconveniente.

En Resumen

<section> <h1> </h1> </section> MAL
<article> <h1> </h1> </article> MAL
<header> <h1> </h1> </header> BIEN

PD: Estas etiquetas se crearon para lo que son, no para ponerlas nomas por ahi y ya, en donde se veran mas bonitas, NO..!
estas etiquetas NO son divs, son etiquetas con estilos pre-definidos.

Saludos.

pzin · #10 (**permalink**) 24/03/2015, 10:48

Cita:

Iniciado por ZoroRoronoa

En Resumen

<section> <h1> </h1> </section> MAL
<article> <h1> </h1> </article> MAL
<header> <h1> </h1> </header> BIEN

PD: Estas etiquetas se crearon para lo que son, no para ponerlas nomas por ahi y ya, en donde se veran mas bonitas, NO..!
estas etiquetas NO son divs, son etiquetas con estilos pre-definidos.

¿Alguna fuente que sostenga eso?

Una que no la sostiene, con varias referencias a la especificación: http://html5doctor.com/outlines/

Estás mezclando semántica con estilos cuando son cosas que nada tienen que ver. Si no poco sentido tendría la semántica.

El problema de estilos que eso causa se puede solventar especificando los tamaños de los h1-6. Son sólo estilos por defecto que ponen los navegadores, que además no serán iguales según qué navegador.

AngelKrak · #11 (**permalink**) 24/03/2015, 11:21

pues yo no entiendo ni madres jajaja pero debe de ser una new condicion del HTML5 >_<

http://www.arumeinformatica.es/blog/...estructurales/

si quitas los <section> se vuelve mas grande, igual con los <articles> jajaja xD

ZoroRoronoa · #12 (**permalink**) 24/03/2015, 11:53

Cita:

Iniciado por pzin

¿Alguna fuente que sostenga eso?

Una que no la sostiene, con varias referencias a la especificación: http://html5doctor.com/outlines/

Estás mezclando semántica con estilos cuando son cosas que nada tienen que ver. Si no poco sentido tendría la semántica.

El problema de estilos que eso causa se puede solventar especificando los tamaños de los h1-6. Son sólo estilos por defecto que ponen los navegadores, que además no serán iguales según qué navegador.

No me refiero precisamente a que esten MAL.

Solo quise hacer referencia para que el usuario entendiera porque los cambios del tamaño.
Y respecto a los cambios del tamaño, se ven diferentes si vez el H1 desde UN MISMO NAVEGADOR, pero dentro de diferentes etiquetas.

la w3, no te da ni dara errores en la semantica, pues incrustar h1 es valido hasta en un <p>.

Ahora, Se perfectamente que se pueden cambiar los estilos predefinidos de cualquier elemento.

Aqui el problema del usuario o mejor dicho "DUDA", era porque cambiaba el tamaño.

Ahi esta la respuesta, al no ser especificado un valor de tamaño al h1, tomara por defectos los que hereda del padre, en este caso.

un tamaño distinto en header
otro distinto en section
otro distinto en article.

y TODOS VIENDOSE DESDE EL MISMO NAVEGADOR.

Por ultimo, como mencione, la w3 no te dara errores en la semantica, porque no existe ningun error, pero si quieres tratar de manera justa los estilos predefinidos de cada elemento y evitar estar Re-ESPECCIFICANDO estilos a los elementos porque sus padres les heredaron OTROS, pues que perdida de tiempo no crees.

TE LA PONDRE MAS FACIL

header esta hecha para h1 -> notaras que su tamaño no cambia al meter h1 dentro de header

section esta hecha para h2 -> notaras que su tamaño no cambia al meter h2 dentro de section
SI METES h1 dentro de section, tendre el mismo tamaño por default que un "h2"

article esta hecha para un h2
Si metes un h1 entro de article, veras que tomara el tamaño por default de un "h2"

si metes un ARTICLE DENTRO DE UN SECTION, Y EN EL ARTICLE UN H1, tomara el valor por default de un "h3".

PD: Y no estamos hablando de "compatibilidad de navegadores", todo esto viendolo desde la ultima version de firefox.

Un saludo mi estimado

pzin · #13 (**permalink**) 24/03/2015, 16:06

Pero es que no puedes basar la semántica de una página por los estilos por defecto que deciden poner en cada navegador, porque eso lo decide cada casa. De ahí los famosos resets y normalizes.

Es como si me dices que para evitar estar volviendo a especificar los colores de los enlaces mejor dejarlos como están. No tiene sentido alguno.

Y bueno, si lees el artículo que puse por ahí, verás no solo que no está mal, sino incluso que es recomendable hacer lo que decías que estaba mal. Por lo tanto, la semántica de un sitio y el outline de HTML5 contra una cosa tan normal como especificar un valor en CSS, yo creo que pesa más lo primero.

ZoroRoronoa · #14 (**permalink**) 24/03/2015, 18:23

lose lose...

Hasta yo me pongo a meter miles de estilos en mi sitio, lo unico a lo que conllevó este tema, fue a aclarar el ¿Porqué? Cambiaban los tamaños del h1.

Un saludo, y este tema debe Cerrarse Ya.

Rucedry · #15 (**permalink**) 02/04/2015, 18:59

Cita:

Iniciado por ZoroRoronoa

lose lose...

Hasta yo me pongo a meter miles de estilos en mi sitio, lo unico a lo que conllevó este tema, fue a aclarar el ¿Porqué? Cambiaban los tamaños del h1.

Un saludo, y este tema debe Cerrarse Ya.

Reabriendo tema, solo para agradecer tu explicacion, yo tenia la misma duda, decidi no usar los h's, y el tamaño lo definia con css, ahora que entiendo, puedo volver a usarlos.

Excelente explicación, gracias!!