Primeros pasos en CSS

mete el texto del h1 entre etiquetas span luego en el css

h1 span{display:none;}

He desisitido con el h1 de la cabecera. He probado de varias maneras tu coódigo. y no resulta.

Código:

h1 a {
display: block;
height: 100px;
width: 100px;
background-color: #000066;
text-indent: -9999px;
}

He metido una imagen para crear un enlace al inicio, y al meter el tecto en h1 y decirle que lo saque fuera con el margen negativo, me creaba un huevo..

De todos modos gracias, sigo con lo mio.

Ciao!

De Madrid semos.

Recuerda buscar info sobre lo que te digo. Que no todo es CSS. De hecho a mi cada vez me gusta más trabajar sin estilos, currarme todo el código a mano y ponerme luego con la maquetación. Es un placer el tener un html limpito :-P

ahhhhhhhaaa!!!

Ahora lo entiendo todo.

:D que alegria que da!!

Te debo un par decañas? Por cierto de donde eres?

Porque en realidad si que hay texto. La imagen está de fondo, y el texto tiene una sangría negativa tan grande que se sale de la caja. Todo esto con CSS claro. Por lo que de cara a buscadores tu H1 dice: soy tal, aunque con la CSS me esconda.

vale, pero si el el bloque h1 de la imagen no meto texto.. como sabe el nombre de la empresa?

Por otr lado he intentado meterlo como tu dices y no he podido.

Tampoco quiero hacerte perder mucho tiempo, .. y como te dije esto de la semantica es para la segunda fase, de momento con que se vea bien en los principales navegadores.. me sobra!

GRACIAS!

¿¿En el faldón??

Mira, es como un libro. ¿Dónde pone el nombre del capítulo? ¿Arriba verdad? Si le quitas los estilos a la página tienes que identificar inmediatamente de que te van a hablar, no te tienes que leer todo para saber que va de lo que pone el h1 del faldón.

OK, he pensado que mejor poner el h1 debajo, en el faldon, que bien con el nombre y a que se dedican, y va plenamente en texto. Te parece bien? No importa que esté al final verdad?

Ya, la web semantica la dejaré para otra fase, lo cierto es que con maquetar, ya me doy por satisfecho.

La verdad es que no me está costando tanto como creia... en parte gracias a tus consejo.

Por ejemplo: google no sabe leer imágenes. Sólo lee texto, y esa es la manera en la que le estás diciendo: mira, somos tal empresa y nos dedicamos a esto. Al declararlo como H1 es tomado como lo más importante de la página. H2 es importante, pero menos, y así sucesivamente. Quítale los estilosa tu página y verás lo que te digo.

Busca links sobre semántica web, que como te dije es muy interesante y tiene más chicha que lo que te cuento yo aquí.

La verdad es que lo del h1 con una imagen de fondo me choca,.. no se como interpretarlo, s no es texto.. que importancia tiene el declararlo como h1?

Gracias por la ayuda.

AAaaahhhhhhhhhhhhhh!!!!

OK! mucha gracias!

El validador del DW es un poco castaña. Lo mejor es que valides desde la web de la w3c. Bájate la barra "web developer" para FF, que con un atajo de teclado te lo hace en el momento.

Lo de meter el Flash con swfobject, es la manera óptima de incluir flash en el html. Es un script muy fácil de insertar.

Y lo del h1, pues mira, por ejemplo así (cambia el color de fondo por la imagen y listo):

<code>
h1 a {
display: block;
height: 100px;
width: 100px;
background-color: #000066;
text-indent: -9999px;
}
</code>

uhmmm.. muchas gracias, pero no se si lo llego a entender todo.

No sé comousar el h1 en el logo... el logo actualmente está como fondo, pero será una imagen con un link. A eso se le puede meter h1??

Y lo del "flsh con el swfobject".. no se lo que es.

Y por último, lo de validar, no se si el validador del DW es bueno. ALguno mejor?

Muchasssss gracias!! tus consejos valen su peso en oro.

No te he entendido tio, ¿a qué te refieres con eso de que no fluye?

Por cierto, cambia lo que te dije de los h1-h2-h3, pon lo de calidad certificada en el alt de la imagen de aenor, mete el flsh con el swfobject, y sobre todo, valida.

Saludos

Por cierto tengo un problemilla con las listas. No entiendo por que esta parte no fluye hasta el final como la parte de la izquierda:

<code>#navcontainer{
float: left;
width: 301px;
margin-bottom:10px;
padding: 0;
background-color:#999999;

}

#navcontainer ul {
margin: 0;
list-style-type: none;
}

#navcontainer li {
margin: 0;
}

#navcontainer a {
display: block;
width: 280px;
text-decoration: none;
border-bottom: 1px solid #fff;
color: #fff;
font-family: trebuchet ms, Helvetica, sans-serif;
font-size: 21px;
font-weight: 100;
padding: 7px 0px 7px 20px;
background-image: url(../images/bd/b_principal_off.jpg);
background-repeat: repeat-x;
}

#navcontainer a:hover {
background-image: url(../images/bd/b_principal_on.jpg);
background-repeat: repeat-x;
}

#navcontainer li li a {
display: block;
color: #333333;
background-color: #69C;
width: 263px;
padding: 5px 3px 5px 35px;
text-decoration: none;
border-bottom: 1px solid #fff;
letter-spacing: 1px;
font-family: trebuchet ms, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
background-image: url(../images/bd/b_submenu_fondo.jpg);
background-repeat: repeat-x;
}

#navcontainer li li a:hover {
background-image: url(../images/bd/b_submenu_fondo_on.jpg);
background-repeat: repeat-x;
color: #e45522;
}

#calidad {
background: #d6dbdd;
margin: 0;
padding: 8px 0px 0px 70px;
height: 172px;
width: 230px;
background-image: url(../images/bd/b_submenu_fondo.jpg);
background-repeat: repeat-x;
}</code>

Mira como está quedando

Cierto lo de las listas. No sé cómo se me pasó decírtelo.

Suerte

Correcto!!

El diseño no es definitivo, lo estoy haciendo bastante simplon y grande para no perderme en los detalles.

Pero creo que es muy interesante lo que me dices.

Ahora estoy trabajando en otra programación para hacer "más fluido el contenido", despues de leer los tutoriales de listomatic me he dado cuenta que mi layout podía tener problemas de fluidez, ya que el footer estaba anclado, y no permitiría crecer verticalmente al contenido.

También voy a cambiar el menu para usar listas anidadas, en vez de usar una estructura de divs separada.

Gracias.. muchas gracias.

Te digo unas cosillas que vienen bien:

- En el menú lo veo un poco grande y separado de lo que es el contenido. Los ojos tienen que hacer cierto-bastante recorrido desde que hace click hasta que empieza a leer.

- Has utilizado H1 para el menú. Yo te diría que hicieras los siguiente: Utilizar h1 para el logo y a los que se dedica la empresa, h2 para titular del contenido.

-Seguro que dentro de una sección tienes otra subsección, en ese caso el h3 lo utilizaría ahí.

- Busca links sobre semántica, que es todo esto que te comento. aparte de interesante, para los buscadores viene muy bien,

Añado uno de mis tutoriales favoritos sobre maquetación básica en css

http://www.maxdesign.com.au/presentation/process/index_step04.htm

Es un breve y claro tutorial de como empezar a trabajar con CSS, pero claro, no es más quye el principio.

:D

Pues como dices en el post "son la biblia del css",.. no cabe duda que habrá que leerlo.

Me he leido ya un libro y mil tutoriales.. pero esto de la maquetación en css es práctica, error, práctica, error..

Gracias SR. Josh!!!.
Un abrazo mu gordo pa ti!

Hazme caso y visita las dos webs que enlazo aquí ;)