Este menu en CSS

Hola amigos:
Quisiera saber si me pueden ayudar a hacer este menu en CSS, o sea, a que me digan como hacerlo, pues yo ya lo hice con JS.

Caracteristicas:
El rollover del botón es sencillo, al pasar por arriba del botón cambia de color el texto.
El logo tenga un vinculo a la página principal.

Espero me puedan ayudar..

Para eso te sirve perfectamente el tuto de menus de navegacion.

http://www.cristalab.com/tutoriales/130/crear-menus-de-navegacion-en-css-usando-listas

Incluso creo que lo podrias hacer sin imagenes (aparte del logo por supuesto)

Si ramm creo que de hecho yo podría hacerlo (pero con ayuda) lo que no me queda claro es como pongo la imagen de fondo (el rectangulo con bordes redondeados) y el logo encima junto con el texto (botones)

Código :

<div id="barra">
  <h1><a href="/"><span>ElavDesigner</span></a></h1>
  <ul>
    <li><a href="/portafoio/">Portafolio</a></li>
    <li><a href="/portafoio/">Portafolio</a></li>
    <li><a href="/portafoio/">Portafolio</a></li>
  </ul>
</div>

Código :

#barra {
  width:496px;
  height:35px;
  background-image:url(fondo_menu.png);
  }
#barra h1 {
  margin:0;
  padding:0;
  float:left;
  }
#barra h1 a {
  display:block;
  width:136px;
  height:35px;
  background-image:url(logo.png);
  }
#barra h1 a span {
  display:none;
  }

Eso para crear un boton con el logo, link al inicio y de paso esconder el titulo del sitio.

Lo demas lo puedes hacer con el tuto.

Gracias voy a probar.........

Bueno para empezar le modifiqué algunas cosas. Por ejemplo le quite la etiqueta <li> porque me lo mostraba como una lista hacia abajo.
me va quedando así:



Ahora ¿Cómo hago para bajar el texto al nivel de el logo, separarlo como en la imagen de arriba y que además no me muestre el texto subrayado y me lo muestre en blanco?

elav todos esos cambios te vienen explicados en el tutorial que te indican mas arriba, te lo dejo aqui de nuevo:

http://www.cristalab.com/tutoriales/130/crear-menus-de-navegacion-en-css-usando-listas

OK ustedes ganan voy a revisar el tuto

De todos modos sigo aceptando ayuda fácil

[pedro]elav, te apreciamos aquí. Haznos un favor... no escribas posts cada vez que se te ocurre... si ya tienes una respuesta y nadie ha escrito más en el hilo, edita el anterior, pero no nos hagas leer respuestas que podrían ir juntas.... de nuevo, por favor. Llevo tres días "juntando" tus respuestas que podrían ir en un sólo post. Por ahora te lo pido por favor y como dijeran los aztecas, en buena onda...[/pedro]

Elav, la idea de Cristalab es precisamente que te esfuerces por aprender, no que te den la ayuda fácil.

De todos modos... no lo sé... ayuda más fácil que los tutoriales y los foros para dudas no existe, a menos que esperes que te den las cosas hechas.

Por lo de alinear el logo y los links, puedes fijarte en este link:
http://www.cristalab.com/foros/viewtopic.php?t=15068
Mi problema era diferente, pero la solución que me dio NEO_JP te puede servir también.

Por lo demás, creo que en el tuto está todo.

No necesitas eso.

Vuelve a poner los <li> y sigue las instrucciones del tuto, juega con los padding, y asi muy facilmente lo logras, creo que no hay forma mas facil que esa.

ok pero en el tuto no ponen especificamente como bajar o subir el texto un poquito....pero bueno, ya estoy tomando el metodo Clab (esfuerzo)

Bueno si me ayudó mucho ........gracias Elke

[pedro]Sigo juntando esta cosa.[/pedro]

con padding-top: xx controlas la separación del texto del borde superior.

Bien ramm ya logré poner el texto centrado aunque no recuerdo que haya puesto padding-top.

Ahora me haría falta saber como separo el texto entre ellos.

PD: Miren amigos, lo que en realidad sucede es que no sé para que es cada cosa. Si tuviera una especie de diccionario CSS donde diga para que es cada cosa, tal vez no pasara tanto trabajo. ¿Saben de alguno?

Aquí

Bien zarzamora lo que tendré que buscar un traductor ahora De todos modos pienso que eso mismo se debería de hacer en Clab pero en español claro y ponerlo en tutoriales o algo así. de todas formas está muy bueno. gracias

[elav] Bueno he empezado desde cero y lo primero que hice fue poner esto

html

Código :

<div id="contenedor">
       <div id="header">
       </div>
       <div id="swf">
       </div>
       <div id="contenido">
       <div>
</div>

CSS

Código :

BODY { 
   font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; 
   margin: 10 0 10 0px; 
   text-align: center; 
   background-color: #ebebeb; 
} 
#contenedor{ 
   text-align:left; 
   width:496px; 
   margin:auto; 
} 
#contenido{
   text-align:center;
   width:496px;
   margin:auto;
} 
#header {
  width:496px;
  height:35px;
  background-image:url(../images/fondo_menu.gif);
  text-align:right;
  }
#header h1 {
  margin:0;
  padding:0;
  float:left;
  }
#header h1 a {
  display:block;
  width:136px;
  height:35px;
  background-image:url(../images/logo.gif);
  }
#header h1 a span {
  display:none;
  }
#navi {  
   list-style:none;
   margin:0;
   padding:0;
}
#navi li {
   margin:2px;
   padding:8px; //Ya no necesito el padding, tambien quitare el borde que puse antes.
   float:right;
}
#navi li a {
   display:block;
   width:100px;
   padding:4px 0;
   text-decoration:none;
   text-align:center;
   font-size:11px;
   color:#FFFFFF;
   background-color:#000000;
   border-left:10px solid #666666;  //Agrego un borde ancho a la izquierda
}
#navi li a:hover {
   color:#99CC00;
   background-color:#003366;
   border-left-color:#99CC00; //Luego le cambio el color al borde en el evento hover.
}
//Ahora vamos con el hover:
#navi li a:hover {
   color:#99CC00;
   background-color:#003366;
}

Y me quedé aquí porque no hay forma de que el menu se ponga horizontal

Hasta aqui para tener un orden de lo que quería junto con el código del menú que me dio ramm

Fijate que arriba de este tema hay un post it con eso... Incluso hay un par en castellano...

Y por si te da paja hacer click y buscar: http://www.cristalab.com/foros/viewtopic.php?t=12468

Sigo sin poder alinear el texto a la derecha y separarlo. ¿Hay algo mal en ese código?
Se me hace un poco complicado esto del CSS.

A #navi { le pones float:right; y a los #navi li { le pones float:left;
el primero, manda toda la lista a la derecha, (logico no? float:right;=flotar a la derecha)

Y lo segundo manda a los <li> a ponerse cada uno a la izquierda del anterior.
Tienes un link o algo?

ramm escribió:

¿cómo que si tiene un link?

Un link a lo que está haciendo...

Algunas recomendaciones:

Código :

BODY { ---> No uses mayúsculas en los nombres de los tags
   font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; --> Usa font-family y font-size, es más adecuado y te permite controlar mejor tus fuentes y no revuelvas, aquí manejas puntos y más abajo píxeles
   margin: 10 0 10 0px;
   text-align: center;
   background-color: #ebebeb; --> Los hexadecimales en mayúscula, por favor
} 

Lo voy a poner (se refieren al trabajo hasta ahora ¿no?)

Ya se me puso todo horizontal Ahora voy a ver como logro ponerlo a la altura del logo, porque me queda debajo de la imagen del fondo y el logotipo. Gracias.

Voy a ver si logro resolverlo yo solo

elav yo tambien estoy estudiando algo de css y xhtml... te recomiendo igual los maestros que respondieron antes ... que LEAS los manuales !!!!
'display:inline' te puede ayudar para las etiquetas <li>
san google en español tambien ayuda mucho

Ya lo creo, pero esto del CSS resulta algo complicado a veces si no sabes para que es cada cosa, como y cuando se utiliza...etc
Pienso que este tipo de aprendizaje requiere de alguien (profesor, amigo....) que te guíe.

el tema del aprendizaje ya ha sido tratado, pero en épocas de internet dudo que la ayuda guiada sea la única manera de aprender las cosas.

sólo ve a tu alrededor, todo cristalab está lleno de autodidactas que aprendieron con tutoriales, y en señal de agradecimiento escriben más para que otra gente pueda aprender

dime, si de verdad este tipo de aprendizaje fuera únicamente a través de otra persona, crees que tendría sentido escribir estos documentos?

Mira fael en este tipo de aprendizaje influyen muchas cosas. Ya dije anteriormente que no es que no quiera aprender por mis medios, es que no tengo muchos medios, ¿entiendes? Estoy seguro que si me encontrara con un libro de CSS aprendiera, pero no tengo donde encontrarlo. Ese es el problema. La conexión en mi pais es muy mala y a veces entrar a sitios donde normalemente culaquiera de ustedes les tomaria 2 seg a mi se me abre en 1 o hasta 5 minutos Imaginate entonces como va la cosa. Por eso necesito tanta ayuda.

Mmmmm... pues eso es cierto, pero tambien puedes hacer lo que muchos hacemos.

Click derecho y ver codigo fuente, buscamos el archivo CSS y luego vamos viendo como hicieron cada cosa que nos interesa.

Bueno, al menos yo hago eso, por que así tambien puedo ir calando y ver como cambia.

Exacto cuando no tienes $$, para pagar un curso o profesor privado, es ver, experimentar y practicar, practicar y más aún practicar.

tooooooooooooooooooooooodo lo que sé es gracias al Internet :: [gracias internet, mi mejor maestro ]

Solamente es cosa de buscar :: [recuerda que el que busca, encuentra]