Página web con CSS
5 seguidores
Hola,
Es mi primera pagina que hago con CSS y DIV, queria saber si la veis bien hecha a nivel de codigo, porque yo veo q hay algun fallo por lo q se refiere a la flexibilidad, me refiero que a la hora de colocar los varios DIV dentro el DIV contenedor no creo q lo hago muy bien... Además si notais debajo hay un espacio muy grande blanco.
Este es el enlance
http://www.eribertocaria.com/monorecords/releases/mono001.php?session=releases&page=mono001
Gracias. Un saludo
eribertocaria
Gracias,
Pero en la pagina ARTIST me sigue haciendo el fondo en negro... como puedo solucinarlo?
marcosalfonso
Buenas.
Todas esas dudas que te surgen (y más que saldrán) las puedes resolver con CSS pero necesitas estudiarlo a fondo. Si vas a dedicarte a esto merece la pena ;)
Para el comportamiento que tienen los distintos navegadores (por ejemplo en la etiqueta <p>) puedes usar un "Reset", que lo que hace es resetear los valores iniciales que le dan los navegadores a las distintas etiquetas. Yo suelo usar el reset de Yahoo: http://developer.yahoo.com/yui/reset/
Una vez reseteado ya puedes usar margins, paddings,... a tu gusto, que se te verán bien en todos los navegadores.
Puedes echarle un vistazo a este artículo por ejemplo http://www.smashingmagazine.com/2007/03/14/css-based-navigation-menus-modern-solutions/ y ver el código CSS de los menús. Ahí tienes ejemplos de sobra de las dudas sobre los listados.
El consejo que te puedo dar: Si ves algo que te gusta, mira el código fuente. Con XHTML y CSS no hay secretos.
eribertocaria
...a la derecha perdon...
eribertocaria
Gracias,
Pero se queda desplazado a la izquierda y con el fondo negro...
leos
eribertocaria
ul {list-style:none;}
eribertocaria
Hola,
Muchas gracias a todos por los consejos que me habeis dado, pero me he quedado con una dudas:
- en primer lugar, utilizando en el menu los tags <ul><li>.....</li><li>.....</li></ul> salen unos circulitos a lado de cade enlance y estan despalzados hacia la derecha; ademas en las paginas artists y releases, el fondo del menu se queda en negro.. com puedo hacer para solucionar esto?
- otra duda es sobre el comportamiento de la funcion MARGIN en el tag <p>, en el que los valores vienen interpretados de manera diferente segun que la pagina se vea con Firefox o con Explorer.
Aqui podeis ver la pagina ARTIST.PHP: http://www.eribertocaria.com/monorecords/artist.php?page=artists&varArtist=bettosun en la que se puede notar lo del MENU y en el apartado DISCOGRAPHY apreciar el comportamiento del MARGIN en el tag <p>.
Aqui os enlazo tambien el CSS para si os pueda servir de algo! Supongo que si...
Gracias.
Un saludo
dagi3d
aunque algunos fallos que te han mencionado(sobre todo el tema del menú que sea una lista y lo de las tablas) también tiene cosas bien como que el javascript que has utilizado para el menú no es intrusivo y los buscadores podrán pasar por los enlaces sin problemas.
yo te aconsejaría que utilices los distintos tags que hay en html para hacer un código más semántico como por ejemplo para el logo, en lugar de utilizar un div usa un h1 con un texto para darle un jerarquía al documento.
luego no entiendo muy por qué tienes spans dentro spans que a priori no te harían falta:
<span class="menu"><span class="currentPage">Dates</span></span>
si lo has hecho porque necesitas aplicar la clase de currentPage lo puedes hacer en la misma declaración:
<span class="menu currentPage">Dates</span>
y tampoco termino de comprender por qué en las urls se pasan algunas variables que igual son innecesarias:
artists/claudioprc.php?session=artists&page=claudioprc
¿para qué le hace falta el valor de página cuando ya sabe que va a claudioprc? ¿y lo de artists, si ya está dentro del directorio artists, no es redundante?
marcosalfonso
Buenas.
Si me permites unos consejos:
Échale un vistazo al XHTML antes de diseñar. Lo primero de todo es un buen marcado, utilizando cada etiqueta del XHTML para lo que realmente es. De esta forma le das un valor semántico a tu contenido. Una vez tengas un buen marcado y tu contenido bien etiquetado, ya puedes darle forma con la CSS
Ejemplo:
-Un div es solamente un contenedor, no tiene valor semántico, con lo que no debes usarlo si no es necesario. (se suele llamar "divitis" al uso excesivo de DIV). La etiqueta SPAN otro tanto, ningún valor semántico...
- La etiqueta TABLE, es para datos tabulados no la uses como contenedor ni para diseñar.
- Los BR son para provocar un salto de línea, no para separar items (todos los que tienes sobran)
- ...
Tu código podría quedar algo así:
<div id="header">
<a href="" title="página principal Mono Records"><img src="" alt="mono records" /></a>
<ul id="main_menu">
<li><a href="#">Label</a></li>
<li><a href="#">Artists</a></li>
<li>Releases
<ul>
<li>Mono 001</li>
<li><a href="#">Secret Key</a></li>
</ul>
</li>
<li><a href="#">Dates</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
<h1>V/A Mono Session 001</h1>
...
...
</div>
Para todo lo demás, CSS ;)
Saludos
Usuario desconocido
A mi hay div que me sobran, como el "punti" y el "disco", por ejemplo. El menú lateral debería ser una ul, no sólo a metidos ahí a cholón. Pero bueno, para ser lo primero que haces no está mal... Y aunque no hagas una maquetación para SEO (aún no entiendo eso) valida SIEMPRE tu código.
dummyrampage
Asi por encima, está muy bien la estructura.
Eso si intenta, en la medida que puedas, eliminar las tablas. Aunque a veces se hacen casi imprescindibles.
2 consejos te doy,
1º Revisa bien la web cuando la maquetes con CSS para explorer, firefox y safari. Porque cada uno tiene sus limitaciones.
2º Si la maquetacion la haces para posicionamiento SEO te recomiendo que las valides antes en la web w3c (http://validator.w3.org/).
te dara informacion de los puntos a mejorar en la maquetación y etiqueta tu web con un nivel de accesibilidad para discapacitados,por extension mayor informacion para los robots de buscadores.