[SOLUCIONADO] Problema con la estructura

sleek · #1 (**permalink**) 16/02/2013, 10:15

Estoy leyendo un libro sobre HTML5 pero me he colgado en algo que seguro es un pequeño detalle, es que el <aside> no se me coloca al lado derecho de <section>, pero no lo hace, se queda debajo de <section> como si no le quedara espacio para poder acomodarse,he intentado probado varias cosas pero nada. Espero puedan ayudarme por favor.

aquí el HTML

Código:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="iso-8859-1"/>
  <meta name="description" content="Ejmeplo de HTML5"/>
  <meta name="keywords" content="HTML5, CSS3, JavaScript"/>
  <title>Titulo del documento</title>
  <link rel="stylesheet" href="misestilos.css">

</head>
<body>
<div id=agrupar>
  <header id=cabecera>
    <h1>Este es el titulo principal del sitio web</h1>
  </header>
  <nav id=menu>
    <ul>
      <li>principal</li>
      <li>fotos</li>
      <li>videos</li>
      <li>contacto</li>
    </ul>
  </nav>
  <sention id=seccion>
     <article>
        <header>
          <hgroup>
            <h1>Titulo del primer mensaje</h1>
            <h2>Subtitulo del mensaje uno</h2>
          </hgroup>
          <time datetime="2013-10-12T12:10:45" pubdate>publicado 12-10-2013</time>
        </header>
          <p class=mitexto1>Este es el texto de mi primer mensaje</p>
        <figure>
          <img src=http://minkbooks.com/content/myimage.jpg>
          <figcaption>
             Esta es la imagen del primer mensaje
          </figcaption>
        </figure>
        <footer>
          <p>comentarios (0)</p>
        </footer>
     </article>
     <article>
        <header>
          <hgroup>
            <h1>Titulo de mi segundo mensaje</h1>
            <h2>subtitulo del segundo mensaje</h2>
          </hgroup>
          <time datetime="2013-10-12T12:10:45" pubdate>publicado 12-10-2013</time>
        </header>
          Este es mi segundo articulo!!!
        <footer>
          <p>comentarios (0)</p>
        </footer>
     </article>
  </section>
  <aside id=columna>
    <blockquote>I am Geek</blockquote> 
  </aside>
  <footer id=pie>
    <small>Copy-Left; 2013</small>
  </footer>
</div>
</body>
</html>

Aquí el CSS:

Código:

* {
  margin: 0px;
  padding: 0px;
}

h1 {
  font: bold 20px verdana, sans-serif;
}
h2 {
  font: bold 14px verdana, sans-serif;
}

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

body {
  text-align: center;
}

#agrupar {
  width: 960px;
  margin: 15px auto;
  text-align: left;
}

#cabecera {
  background: #FFFBB9;
  border: 1px solid #999999;
  padding: 20px;
}

#menu {
  background: #CCCCCC;
  padding: 5px 15px;
}
#menu li {
  display: inline-block;
  list-style: none;
  padding: 5px;
  font: bold 14px verdana, sans-serif;
}

#seccion {
  float: left;
  width: 660px;
  margin: 20px;
}
#columna {
  float: left;
  width: 220px;
  margin: 20px 0px;
  padding: 20px;
  background: #CCCCCC;
}

#pie {
  clear: both;
  text-align: center;
  padding: 20px;
  border-top: 2px solid #999999;
}

article {
  background: #FFFBCC;
  border: 1px solid #999999;
  padding: 20px;
  margin-bottom: 15px;
}
article footer {
  text-align: right;
}
time {
  color: #999999;
}
figcaption {
  font: italic 14px verdana, sans-serif;
}

Espero sus respuestas jeje

Bandit · #2 (**permalink**) 16/02/2013, 11:09

Hola sleek:
Bienvenido al Foro.
Hay un error en ésta línea: <sention id=seccion> no es sention sino section debe ser escrito así: <section id="seccion">
No es necesario usar la etiqueta header y footer en los artículos, esas etiquetas solamente son para el encabezamiento y el pie de la página.

Espero haberte sido de ayuda.

sleek · #3 (**permalink**) 16/02/2013, 11:18

Sii muchas gracias amigo, era eso, estaba un error de sintaxis xD, oye he notado que cuando identifico una clase poniendola entre comillas el navegador parece que no lo reconociera, por eso le quité las cmillas y funciona bien, ¿será que estoy haciendo algo mal en ese sentido?, sin eembargo corrgiendo lo que me dijiste ahora se ve como debería de verse según el libro, gracias!

Bandit · #4 (**permalink**) 16/02/2013, 11:22

Me olvide de decirte que los ID y las class deben ser escritos entre comillas.

Espero haberte sido de ayuda.

sleek · #5 (**permalink**) 16/02/2013, 11:25

Bandit, exactamente esa es mi duda, me funciona perfectamente sin comillas, al contrario cuando pongo comillas me da rollo... :S

pitufoweb · #6 (**permalink**) 16/02/2013, 11:25

Cita:

Iniciado por Bandit

No es necesario usar la etiqueta header y footer en los artículos, esas etiquetas solamente son para el encabezamiento y el pie de la página.

El header y footer NO son solamente para el encabezamiento y el pie de la página. Se pueden usar donde se crea conveniente.

Saludos

Bandit · #7 (**permalink**) 16/02/2013, 12:07

Para empezar, al utilizar en todo lugar esos tag, uno tiene que ponerles un ID o un class para manipularlo, ya que al utilizarlos en la cabecera y el el pie simplemente con poner header o footer el navegador entenderá a que parte de la página se está refiriendo y de ese modo será más limpio y corto el CSS.

Espero haberte sido de ayuda.

Bandit · #8 (**permalink**) 16/02/2013, 12:09

sleek:
No tiene porque producirte un problema al ponerlos entre comillas ya que es la forma correcta de escribirlo.
Al menú le faltan los link, debes de escribirlo así:

Código HTML:

Ver original<ul>
      <li><a href="#">principal</a></li>
      <li><a href="">fotos</a></li>
      <li><a href="">videos</a></li>
      <li><a href="">contacto</a></li>
</ul>

Espero haberte sido de ayuda.

pzin · #9 (**permalink**) 16/02/2013, 13:19

Fíjate que estés usando comillas dobles o simples, y no del tipo ` u otras historias.

Cita:

Iniciado por Bandit

Me olvide de decirte que los ID y las class deben ser escritos entre comillas.

En HTML5 no es necesario meter los valores de los atributos entre comillas. Que no siéndolo, si que pienso que es recomendable. Aunque es a gusto de cada cual.

Lo de usar clases e ideses tampoco es que sea tan tan necesario; se pueden usar selectores tipo > en CSS para referirse sólo a hijos inminentes: body>header. Aunque también depende de cada cual. La verdad es que así aunque el código sea más limpio, es más difícil luego de ver claramente a qué se refiere cada cosa.

sleek · #10 (**permalink**) 16/02/2013, 13:43

De verdad muchas gracias por sus respuestas, yo me estoy iniciando en este mundo del desarrollo web, antes lo hacía con dreamweaver y tal, pero nunca conseguía un buen rendimiento, aprendí que esos programaas generan "codigo basura", es decir, pueden usarse pero es bueno saber a profundidad sobre HTML y CSS para controlar mas a fondo el desarrollo web, al menos esto es lo que he podido deducir de lo que voy investigando.

Bueno, ahora les dejo otro problemita que se me presentó (jajaja), disculpen de verdad, se que son cosas tontas, pero como les dije estoy comenzando y pues espero poder recicibr ayuda de ustedes.

Estoy ahora probrando las caracteristicas de CSS3, estoy en esa parte del libro que estoy leyendo, todo va bien, pero me he topado con un problema, el border-image, pues pongo el codigo como dice en el libro y en w3school, pero no se refleja en el navegador, seguro otra tontería mas, he revisado pero no veo que está mal.

Html:

Código:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Nuevos Estilos CSS3</title>
  <link rel="stylesheet" href="nuevocss3.css">
</head>
<body>
<header id="principal">
  <span id="titulo">Estilos CSS Web 2.0</span>
</header>
</body>
</html>

CSS:

Código:

body {
  text-align: center;
}
#principal {
  display: block;
  width: 500px;
  margin: 50px auto;
  padding: 15px;
  text-align: center;
  border: 29px;
  -moz-border-image: url(border.png) 29 29 stretch;
  -webkit-border-image: url(border.png) 29 29 stretch;
  border-image: url(border.png) 29 stretch;
  background: #DDDDDD;
  

  -moz-border-radius: 20px / 10px;
  -webkit-border-radius: 20px / 10px;
  border-radius: 20px / 10px;

  -moz-box-shadow: rgb(150,150,150) 5px 5px;
  -webkit-box-shadow: rgb(150,150,150) 5px 5px;
  box-shadow: rgb(150,150,150) 0px 0px 10px;

  background: -webkit-radial-gradient(center, circle, #FFFFFF 0%, #006699 200%);
  background: -moz-radial-gradient(center, circle, #FFFFFF 0%, #006699 200%);
}
#titulo {
  font: bold 36px FreeSerif, verdana, sans-serif;
  text-shadow: rgba(0,0,0,0.5) 3px 3px 5px;
  color: hsla(120, 100%, 50%, 0.5);
}
@font-face {
  font-family: "FreeSerif";
  src: url("FreeSerif.ttf");
}

Esta es la imagen que estoy utilizando, en mi PC le cambié el nombre a esta imagen por "border.png"

Y de antemano gracias a todos, son muy amables en respodner las dudas de un novato xD

pitufoweb · #11 (**permalink**) 16/02/2013, 14:26

Cita:

Iniciado por Bandit

Para empezar, al utilizar en todo lugar esos tag, uno tiene que ponerles un ID o un class para manipularlo

Eso no es del todo cierto y aunque así lo fuera, no es una razón suficiente para no utilizarlos.

Cita:

Iniciado por Bandit

Al utilizarlos en la cabecera y el el pie simplemente con poner header o footer el navegador entenderá a que parte de la página se está refiriendo y de ese modo será más limpio y corto el CSS.

Siempre trato de hacer todo lo posible para no utilizar marcado innecesario. Pero cuando creo que es conveniente agregar alguna etiqueta o atributos, simplemente las agrego...No importa que sea mas largo código o que sea mas difícil para manipularlo.

Al final de lo que se trata es de estructurar la información utilizando las etiquetas y atributos adecuadamente...Algunos le llaman a esto Semántica, pero en realidad yo creo que la Semántica es mucho mas que eso.

Saludos

pitufoweb · #12 (**permalink**) 16/02/2013, 14:32

sleek:

Tu problema es mas de CSS que HTML. Creo que seria mejor que hicieras tu preguntas en el foro correspondiente...en este caso, en foro de CSS.

Saludos

Bandit · #13 (**permalink**) 19/02/2013, 16:16

Hola sleek:
Aquí tienes un generador de border-image: http://border-image.com/

Espero haberte sido de ayuda.