Foros del Web » Creando para Internet » CSS »

Presentación y primeras dudas

Estas en el tema de Presentación y primeras dudas en el foro de CSS en Foros del Web. Hola a todos: Soy nuevo por aquí y soy un novato total en esto de la programación web. No he encontrado ningún post para presentaciones, ...
  #1 (permalink)  
Antiguo 22/01/2013, 04:57
Avatar de cubeman  
Fecha de Ingreso: enero-2013
Mensajes: 12
Antigüedad: 11 años, 9 meses
Puntos: 1
Presentación y primeras dudas

Hola a todos:

Soy nuevo por aquí y soy un novato total en esto de la programación web. No he encontrado ningún post para presentaciones, por lo que os saludo desde este mismo mensaje.

Estoy programando mi primera web con XHTML y CSS y la ayuda de un libro de Anaya Multimedia, pero ya me estoy enfrentando a mi primer problema con la barra del menú, con el que espero me podáis ayudar. He buscado en la FAQ del foro, pero no he visto nada al respecto.

El caso es que no consigo que el menú desplegable se visualice correctamente. En concreto, el submenú se superpone a la barra principal (la lista de primer nivel) en vez de desplegarse en bloque bajo ésta, y estoy desesperado porque no sé qué es lo que está mal. He copiado el código del libro, agregando algo de formato, y, por tanto, debería salir bien, pero no es así. Lo he revisado mil veces y no me puedo creer que esté encallado en algo tan simple, pero no consigo resolverlo. Para los expertos esto será algo simple como el mecanismo de un sacapuntas, pero para mí ahora mismo es un mundo.

A continuación os pongo el código XHTML (Nota: He dejado sólo lo imprescindible para que se vea sólo el menú. Ignorad la foto bajo el menú, que es sólo de prueba):


Código:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>
<link rel="stylesheet" type="text/css" href="index.css" />
<title>Pedro Ortiz Olivas - Artista plástico</title>
</head>

<body>
<div id="barra_menu">
<ul id="menu">
<li id="inicio"><a href="http://www.pedroortizolivas.es">INICIO</a></li>
<li id="semblanza"><a href="http://www.pedroortizolivas.es/semblanza.html">SEMBLANZA</a></li>
<li id="trayectoria"><a href="http://www.pedroortizolivas.es/trayectoria.html">TRAYECTORIA</a>
    <ul id="submenu_trayectoria">
    <li id="expo_individuales">Exposiciones individuales</li>
    <li id="expo_colectivas">Exposiciones colectivas</li>
    <li id="expo_individuales_2">Exposiciones individuales_2</li>
    <li id="expo_colectivas_2">Exposiciones colectivas_2</li>
    </ul>
</li>
<li id="galeria"><a href="http://www.pedroortizolivas.es/obra.html">GALERÍA</a>
    <ul id="submenu_obra">
    <li id="obra_figurativa">Obra figurativa</li>
    <li id="obra_abstracta">Obra abstracta</li>
    <li id="obra_vanguardista">Obra vanguardista</li>
    </ul>
</li>
<li id="contacto"><a href="http://www.pedroortizolivas.es/contacto.html">CONTACTO</a></li>
<li id="blog"><a href="http://www.pedroortizolivas.es/blog.html">BLOG</a></li>
</ul>
</div>

<img id="home_background" src="images/home_background.png" width="1024" height="450" alt="Pedro_Ortiz_Olivas_homepage_background" />

</body>
</html>

Y, a continuación, el código CSS:


Código:
div#cuerpo {margin:0 auto; width:1024px;}

ul#menu {
    margin:0;
    padding:0;
    border:0 none;
    width:1024px;
    list-style:none;    
    font-size:16px;
    font-family:Lucida Sans Unicode, Lucida Sans Regular, LucidaGrande sans-serif;}    

ul#menu li {
    margin:0;
    padding-bottom:5px;
    border:0 none;
    float:left;
    display:inline;}

ul#menu a {
    display:block;
    float:left;
    width:auto;
    height:20px;
    color:#F8ECE0;
    background:#610B0B;
    text-align:center;
    text-decoration:none;
    margin-right:2px;
    padding:10px;
    border:1px solid black;}

ul#menu a:hover {
    color:#610B0B;
    background:#E8C3B7;
    border:1px solid #610B0B;}

ul#menu li ul {display:none;}

ul#menu li:hover ul {
    display:block;
    width:10em;
    position:absolute;}

ul#menu li ul li {
    float:none;
    width:100px;
    color:#610B0B;
    background:#F8ECE0;}

div#barra_menu {clear:left;}

La web se puede ver en: http://www.pedroortizolivas.es
Espero que me podáis ayudar, y os lo agradezco por adelantado.
Nos iremos viendo por aquí.

Saludos.
  #2 (permalink)  
Antiguo 22/01/2013, 05:31
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: Presentación y primeras dudas

Bienvenido a FDW.

Deberían de enmarcar tu post con una leyenda debajo que diga "cómo postear un duda en un foro".

Lo primero que deberías de hacer, es darle una posición relativa a los primeros items del menú. Es decir, los LI principales. Porque al darle posición absoluta al submenú, tiene posición absoluta respecto al resto del documento HTML, es decir, toda la página. Añadiéndole una posición relativa al padre, lo que consigues es que la posición absoluta del hijo sea relativa a la posición del padre y no a la página.
Igual no notas diferencia nada más cambiar esto, porque el submenú te seguirá saliendo justo arriba. Que es el problema que tienes, que más abajo se resuelve.

Yo personalmente añadiría el selector > a la regla. Así atributos y propiedades que le des a LI, sólo se aplicarán para los hijos directos de ul#menu. Prefiero hacerlo así porque luego no tengo que resetear reglas en los LI del submenú.
Código CSS:
Ver original
  1. ul#menu > li {
  2.     position: relative;
  3. }

Los enlaces A dentro de LI no hacen falta que estén flotados. Ya que quienes flotan son los LI. Basta con dejarlos como elementos de bloque.
Código CSS:
Ver original
  1. ul#menu a {
  2.     display:block;
  3.     float:left; /* <-- No hace falta */
  4. }

Y no sólo que no haga falta, sino que es realmente la causa del problema. Piensa que tienes un enlace flotando, y a continuación el submenú UL. Para hacer que salga justo por debajo, tendrías que limpiar el flotado con clear:left para que lo siguiente —el submenú— salga por debajo.
Pero como no hace falta que flote, con quitarlo se resuelve el problema.

Otra cosa que vi en algún sitio del código. Cuando flotas un elemento, este se convierte automáticamente en un elemento en bloque. Sería redundante especifar un float:left junto a un display:block.
  #3 (permalink)  
Antiguo 22/01/2013, 06:56
Avatar de cubeman  
Fecha de Ingreso: enero-2013
Mensajes: 12
Antigüedad: 11 años, 9 meses
Puntos: 1
Respuesta: Presentación y primeras dudas

Mil gracias por tu ayuda. Si no es por tu comentario, hubiera acabado por darle puñetazos al monitor. Ahora tengo que cuadrar un poco la apariencia y seguir hasta el final. No descarto que tenga nuevas dudas más adelante.

Muchas gracias de nuevo.
  #4 (permalink)  
Antiguo 04/03/2013, 10:37
Avatar de cubeman  
Fecha de Ingreso: enero-2013
Mensajes: 12
Antigüedad: 11 años, 9 meses
Puntos: 1
Respuesta: Presentación y primeras dudas

Bueno, tengo que reflotar el tema porque soy incapaz de rematar el puñetero menú. Tras un tiempo con la página aparcada, he vuelto a ello, pero no puedo cuadrarlo (incluso llegué a intentar otro tipo de menú, pero el resultado fue mucho peor...).

Tras la inestimable ayuda del forero Bonez, el susodicho menú quedó como se puede ver en la siguiente URL: http://www.pedroortizolivas.es
(nota: olvidad todo lo que hay ahí, que es provisional; centrémonos en el menú)

Estos son mis problemas:

1) ¿Qué tengo que hacer para que el menú ocupe el 100% del ancho determinado de la página (1024px)? Si os fijáis, faltan unos píxeles.
Este no es un tema crucial, pero quiero entender cómo se hace bien.

2) Submenús (I): El background de éstos cambia de color en estado :hover, pero sólo la parte del texto (probadlo). Yo quiero que cambie el color de fondo del botón completo.

3) Submenús (II): Éstos se superponen al botón del que nacen, pero quedan por debajo del que está inmediatamente a su derecha.
¿Cómo hacer que no se superpongan al menú principal y que nazcan alineados desde el borde izquierdo los botones correspondientes?

4) Submenús (III): ¿Cómo ajusto correctamente ancho de éstos de manera que cada opción del botón TRAYECTORIA esté en una sola línea?

Adjunto código relativo al menú:
HTML
Código:
<div id="barra_menu">
        <ul id="menu">
            <li id="inicio">
                <a href="http://www.pedroortizolivas.es">INICIO</a>
            </li>
            <li id="semblanza">
                <a href="http://www.pedroortizolivas.es/semblanza.html">SEMBLANZA</a>
            </li>
            <li id="trayectoria">
                <a href="http://www.pedroortizolivas.es">TRAYECTORIA</a>
                <ul id="submenu_trayectoria">
                    <li id="expo_individuales"><a href="http://www.pedroortizolivas.es/expo_ind.html">Exposiciones individuales</a></li>
                    <li id="expo_colectivas"><a href="http://www.pedroortizolivas.es/expo_col.html">Exposiciones colectivas</a></li>
                </ul>
            </li>
            <li id="galeria">
                <a href="http://www.pedroortizolivas.es">GALERÍA</a>
                <ul id="submenu_obra">
                    <li id="obra_figurativa">
                        <a href="http://www.pedroortizolivas.es/figurativa.html">Obra figurativa</a>
                    </li>
                    <li id="obra_abstracta">
                        <a href="http://www.pedroortizolivas.es/abstracta.html">Obra abstracta</a>
                    </li>
                    <li id="obra_vanguardista">
                        <a href="http://www.pedroortizolivas.es/vanguardia.html">Obra vanguardista</a>
                    </li>
                </ul>
            </li>
            <li id="contacto">
                <a href="http://www.pedroortizolivas.es/contacto.html">CONTACTO</a>
            </li>
            <li id="blog">
                <a href="http://pedroortizolivas.wordpress.com.">BLOG</a>
            </li>
        </ul>
</div>

CSS
Código:
#menu
{
    border:0 none;
    font-size:1em;
    list-style:none;
    margin:0;
    padding:0;
    width:100%;
}  

#menu a:hover
{
    background:#E8C3B7;
    border:1px solid #610B0B;
    color:#610B0B;
}  

#menu > li
{
    border:0 none;
    display:inline-block;
    float:left;
    margin:0;
    padding-bottom:0.4em;
    position:relative;
}

#menu li a
{
    background:#610B0B;
    border:1px solid black;
    color:#F8ECE0;
    height:1.2em;
    margin-right:3px;
    padding:6px 45px;
    text-align:center;
    text-decoration:none;
    width:auto;
}


#menu li:hover ul
{
    display:block;
    position:absolute;
    width:100px;
}

#menu li ul
{
    display:none;
}

#menu li ul li
{
    background:#F8ECE0;
    color:#610B0B;
    float:none;
    list-style:none;
    padding:0 10px;
    width:150px;
}

#menu li ul li a
{
    background:#F8ECE0;
    border:none;
    color:#610B0B;
    margin:0;
    padding:0;
    text-align:left;
    text-decoration:none;
    width:auto;
}

#menu li ul li a:hover
{
    background:#FEAF99;
    border:none;
    color:#610B0B;
}

A ver si esta vez lo consigo... Mil gracias por adelantado.
  #5 (permalink)  
Antiguo 04/03/2013, 17:12
Avatar de Bandit
Moderador
 
Fecha de Ingreso: julio-2003
Ubicación: Lima - Perú
Mensajes: 16.726
Antigüedad: 21 años, 4 meses
Puntos: 406
Respuesta: Presentación y primeras dudas

Hola cubeman:
Aquí tienes un video tutorial: http://www.youtube.com/watch?v=qSk5Q4oZb3s

Espero haberte sido de ayuda.
__________________
Bandit.
Si no sabes estudia y si sabes enseña.
http://www.banditwebdesign.com/
  #6 (permalink)  
Antiguo 05/03/2013, 05:17
Avatar de cubeman  
Fecha de Ingreso: enero-2013
Mensajes: 12
Antigüedad: 11 años, 9 meses
Puntos: 1
Respuesta: Presentación y primeras dudas

Muchas gracias, Bandit. Con ese tutorial finalmente he conseguido que mi menú tome forma (y te aseguro que habré probado ya como 5 ó 6 sin éxito). También he pasado el código a HTML5. Aún tengo que pulir el estilo, pero hay un par de cosas que consigo resolver:

1) Le he puesto border-radius a los submenús, lo cual funciona, pero al pasar el ratón sobre el botón inferior, los bordes se ponen cuadrados. He intentado arreglarlo añadiéndole box-sizing: border-box, pero seguía haciendo lo mismo. ¿Alguna idea?

2) Intenté reducir mínimamente la altura del menú porque me gustaba más, pero entonces, al pasar el ratón sobre los botones, éstos mantenían la altura de antes del cambio, así que lo dejé como está ahora, pero quisiera entender por qué pasa eso.

Adjunto el HTML y CSS actuales del menú:

Código HTML:
 <nav>
        <ul id="menu">
            <li id="inicio">
                <a href="http://www.pedroortizolivas.es">INICIO</a>
            </li>
            <li id="semblanza">
                <a href="http://www.pedroortizolivas.es/semblanza.html">SEMBLANZA</a>
            </li>
            <li id="trayectoria">
                <a href="#">TRAYECTORIA</a>
                <ul class="submenu">
                    <li id="expo_individuales"><a href="http://www.pedroortizolivas.es/expo_ind.html">Exposiciones individuales</a></li>
                    <li id="expo_colectivas"><a href="http://www.pedroortizolivas.es/expo_col.html">Exposiciones colectivas</a></li>
                </ul>
            </li>
            <li id="galeria">
                <a href="#">GALERÍA</a>
                <ul class="submenu">
                    <li id="obra_figurativa">
                        <a href="http://www.pedroortizolivas.es/figurativa.html">Obra figurativa</a>
                    </li>
                    <li id="obra_abstracta">
                        <a href="http://www.pedroortizolivas.es/abstracta.html">Obra abstracta</a>
                    </li>
                    <li id="obra_vanguardista">
                        <a href="http://www.pedroortizolivas.es/vanguardia.html">Obra vanguardista</a>
                    </li>
                </ul>
            </li>
            <li id="contacto">
                <a href="http://www.pedroortizolivas.es/contacto.html">CONTACTO</a>
            </li>
            <li id="blog">
                <a href="http://pedroortizolivas.wordpress.com.">BLOG</a>
            </li>
        </ul>
    </nav> 
Código:
nav ul
{
    list-style: none;
    padding: 0;
}

nav, li ul
{
    background: #610B0B;
}

#menu
{
    margin: 0 auto 1.1em;
    width: 100%;
}

#menu a
{
    color: #F8ECE0;
    text-decoration: none;
}

#menu > li    /* Afecta sólo a los hijos de #menu */
{
    display: inline-block;
    width: 16.2%;
}

#menu > li > a
{
    display: block;
    padding: 0.5em 1em 0.5em 0.5em;
}  

#menu li:hover
{
    background: #BD5C44;
    text-shadow: 0.1em 0.1em 0.25em black;
}

#menu li:hover a
{
    color: #F8ECE0;
}

#menu li:hover ul
{
    display: block;
}

#menu li ul
{
    border-radius: 0 0 4px 4px;
        -moz-border-radius: 0 0 4px 4px;
        -webkit-border-radius: 0 0 4px 4px;
    box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    display: none;
    position: absolute;
}

.submenu a
{
    display:block;
    padding: 0.5em 0.9em 0.5em 0.5em;
    width: 100%;
}

Etiquetas: dudas, hover, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 05:59.