problemas con html5

sandra_ducsipu · #1 (**permalink**) 17/01/2012, 12:11

hola buen día, soy nueva con html5, y tengo un problema al intentar colocar mis imagenes y texto dentro de un marco que coloque con la siguiente linea en la hoja de estilo

<style>

header, footer, aside, nav, section, article{
display:block;
}
body {width: 937px; margin: 20px auto; /* center */ padding: 20px; height: 626px;
border: 8px solid black; border-color:#F60}

</style>

mi problema es que todo lo que viene en mi <body> no lo visualizo dentro de este borde, solo algunas cosas...

alguna sugerencia???

gracias

emprear · #2 (**permalink**) 17/01/2012, 17:36

Primero, Bienvenida a FDW !!

Ahora pregunto... ¿dónde está "todo lo que viene en mi body"?
y por ahora, de html5, en tu código, nada.

Da más detalles por favor

SAludos

gildus · #3 (**permalink**) 17/01/2012, 18:41

Holas,

Mas que HTML5, es creo CSS, alli podrias aumentar:

Código CSS:

Ver originalbody, header, footer, aside, nav, section, article{
    display:block;
}

Saludos

sandra_ducsipu · #4 (**permalink**) 18/01/2012, 09:42

Hola,

Muchas gracias por interesarse en mi tema, a continuacion agrego mi código y posteriormente les explico mas a fondo mi problema.

<html lang="en">
<head>
<title>html5</title>

<style>

header, footer, aside, nav, section, article{
display:block;
}
body {width: 937px; margin: 20px auto; /* center */ padding: 20px; height: 626px;
border: 8px solid black; border-color:#F60}

header h1 {
float: left; font-size: 10px;
font-weight: normal;
}

header nav {
float: right; text-align: right;
padding: 4px 0 0 0;
}

#menu1{
position:absolute;
left:255px;
top:325px;
width:252.5px;
height:27.5px;
z-index:30;
}

#menu2{
position:absolute;
left:430px;
top:325px;
width:252.5px;
height:27.5px;
z-index:20;
}

#menu3{
position:absolute;
left:600px;
top:325px;
width:252.5px;
height:27.5px;
z-index:10;
}

#linea{
position:absolute;
background-color:#006A80;
left:253px;
top:356px;
width:937px;
height:23px;
z-index:5;
}

#contenido{
position:absolute;
left:253px;
top:378px;
width:937px;
height:262px;
z-index:4;
}
</style>
<body>
<header>
<h1><a href="#" title="Return to the homepage"><img src="logo.png"/></a></h1>

<nav>
<table width="639.3" height="40" border="0" align="right" cellpadding="5" cellspacing="5" frame="lhs" rules="cols" bordercolor="#CCCCCC"><font face="Trebuchet MS, Arial, Helvetica, sans-serif">
<tr>
<td width="160" height="40" align="center">
DESCRIPCIÓN DE SOLUCIONES
</td>
<td width="160" height="40" align="center">
ARTÍCULOS
</td>
<td width="160" height="40" align="center">
PODCAST
</td>
<td width="160" height="40" align="center">
VIDEOS
</td>
<td width="160" height="40" align="center">
WHITEPAPERS
</td>
</tr>
</font>
</table>
</nav>

<img src="banner.png" />

<section id="menu1"><img src="menu_1.png" /></font></section>

<section id="menu2"><img src="menu_2.png" /></section>

<section id="menu3"><img src="menu_3.png" /></section>

<article id="linea"></article>
</header>

<section id="contenido">Contenido</section>

</body>
</html>

Mi problema es que las imagenes no se muestran dentro del borde que rodea toda la informacion, por lo tanto ajuste los pixeles de mi hoja de estilo, ya lo visualizo correctamente pero al momento de reducir o aplicar mi pantalla de la página descubro que todo cambia de tamaño pero las pestañas y línea jamas entra al borde..

espero haber sido clara con mi problema muchas gracias

emprear · #5 (**permalink**) 18/01/2012, 11:09

Si bien tu html tiene algunos errores, se ve todo dentro de ese marco naranja de unos 900px.

Eso sí, para que se vea correctamente la primer linea de tu html dede incluir el Doctype, que no lo tiene, No solo basta escribir en html5, tenes que indicarle al navegador que lo estás haciendo, es decir

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
 <head>
 <title>titulo</title>

También detecto un tag <font> mal anidado, eliminalo. y maneja la tipografía a traves de css.
Pero advierto que no tengo las imágenes, no se como pueda influir el tamaño de estas
Saludos

sandra_ducsipu · #6 (**permalink**) 20/01/2012, 10:52

hola;

pues agrege la línea Doctype, pero mi problema de las imagenes se sigue presentando

emprear · #7 (**permalink**) 20/01/2012, 11:09

Yo solo puedo analizar tu código html/css, y este se ve asi
tanto en IE como en FF/chrome

http://foros.emprear.com/html/html5.html
Ahi está el cuadro con las cosas adentro.
Sería mejor que expliques mas el problema y que postees una url donde verlo, incluidas las imégenes

SAludos

gildus · #8 (**permalink**) 20/01/2012, 11:49

Holas,

Trata de usar mas el margin-top que top,. si quieres que salga de corrido o seguido las secciones podrias usar el display:inline-block y en la imagen tambien.

Trata de usar margin-left en vez de left y margin-top en vez de top. Si tendrias una imagen como deseas que salga seria mas entendible y asi ayudarte.

Saludos