Atascado en un proyecto. AYUDAAAAA

Fran Diez · 27 Ene 2015, 18:13 · Solicitar retirada

Tras conocer la web, y hacer el curso-tutorial del htmlkit, y css, quise seguir actualizando los conocimientos.
Asi que me lance a crear mi propia pagina web.
La verdad, es que el resultado, no va mal, pero...( siempre hay un pero), me quede atascado.

Si me permitis, os cuelgo el codigo html, y el css, que llevo por el momento, que no es extenso y os explico donde estoy atascado, y que quiero hacer.

CODIGO HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Titulo de la pagina</title>
<link rel="stylesheet" type="text/css" href="estilo.css"/>
</head>
<body>
<div id="agrupar">
<header id="principal">
<span id="titulo">Mi página</span>
</header>
<nav id="menu">
<ul>
<li class="button uno">TU WEB</li>
<li class="button dos">CHAT</li>
<li class="button tres">FORO</li>
<li class="button cuatro">CONTACTO</li>
</ul>
</nav>
</div>
</body>
</html>

Codigo CSS

body{
text-align: center;
background-color: #FFFACD;
}
header, section, footer, aside, nav, article, figure, figcaption,
hgroup{
display: block;
}
#agrupar{
width: 60%;
margin: 15px auto;
text-align: left;
}
#principal{
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: silver;

border-radius: 135px / 120px;
box-shadow: rgb(150,150,150) 5px 5px 10px;

background: -webkit-radial-gradient(center, ellipse, #FAF0E6, #c0c0c0);
background: -moz-radial-gradient(center, ellipse, #FAF0E6, #c0c0c0);
}
#titulo{
font: bold italic 76px verdana, sans-serif;
text-shadow: rgb(150,150,150) 3px 3px 5px;
}
@font-face {
font-family: 'lobster_1.3regular';
src: url('font/lobster_1.3-webfont.eot');
src: url('font/lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'),
url('font/lobster_1.3-webfont.woff2') format('woff2'),
url('font/lobster_1.3-webfont.woff') format('woff'),
url('font/lobster_1.3-webfont.ttf') format('truetype'),
url('font/lobster_1.3-webfont.svg#lobster_1.3regular') format('svg');
font-weight: normal;
font-style: normal;

}
#menu{
background: silver;
padding: 5px 30px;
text-align: center;
border: 1px solid #999999;
border-radius: 135px / 120px;
box-shadow: rgb(150,150,150) 5px 5px 10px;
background: -webkit-radial-gradient(center, ellipse, #FAF0E6, #c0c0c0);
background: -moz-radial-gradient(center, ellipse, #FAF0E6, #c0c0c0);
}
.button{
/* estilo tipografico */

color: #000000;
font: bold italic 20px verdana, sans-serif;
text-transform: uppercase;
text-shadow: rgb(150,150,150) 3px 3px 5px;

/* padding, margin, y borde */

padding: 5px 15px 5px 10px;
margin-right: 10px;
cursor: pointer;
border: 1px solid;
border-radius: 20px;

/* propiedades para la animacion */

transition: all 0.20s linear;
-webkit-transition: all 0.20s linear;
-moz-transition: all 0.20s linear;
position: relative;
bottom: 0;
}
.uno{
background: #D3D3D3;
box-shadow: rgb(150,150,150) 5px 5px 10px;
padding: 5px 30px 5px 30px;
border: 0px;
}
.dos{
background: #D3D3D3;
box-shadow: rgb(150,150,150) 5px 5px 10px;
padding: 5px 30px 5px 30px;
border: 0px;
}
.tres{
background: #D3D3D3;
box-shadow: rgb(150,150,150) 5px 5px 10px;
padding: 5px 30px 5px 30px;
border: 0px;
}
.cuatro{
background: #D3D3D3;
box-shadow: rgb(150,150,150) 5px 5px 10px;
padding: 5px 30px 5px 30px;
border: 0px;
}
.button:active{
bottom: -5px;
}
.uno:active{
box-shadow: 0 0 0 rgb(150,150,150), inset 0 0 5px rgba(0, 0, 0, 0.4);
}
.dos:active{
box-shadow: 0 0 0 rgb(150,150,150), inset 0 0 5px rgba(0, 0, 0, 0.4);
}
.tres:active{
box-shadow: 0 0 0 rgb(150,150,150), inset 0 0 5px rgba(0, 0, 0, 0.4);
}
.cuatro:active{
box-shadow: 0 0 0 rgb(150,150,150), inset 0 0 5px rgba(0, 0, 0, 0.4);
}
#menu li{
display: inline-block;
list-style: none;
}

Si los pegais en Sublime, y los ejecutais, vereis una simple web, con un titulo, y una barra de navegacion inline-block con 4 botones animados.
¿Donde estoy atascado?
Quiero que al presionar esos botones actuen como hiperenlaces.
El primero, "TU WEB", hacia "www.comocreartuweb.com" en otra pestaña del navegador.
El segundo a otra pestaña del navegador a otra pagina donde habra un chat, la tercera a otra pestaña del navegador donde habra un foro y la ultima un enlace al correo.
El problema es que no soy capaz ni con <a href....>, ni con <input>

Seguro, que entre todos vosotros habra alguien que me de una solucion, porque soy incapaz de hacerlo, y me gusta mucho el diseño que lleva hasta ahora.
Gracias por vuestro tiempo.

skaparate · 27 Ene 2015, 20:35 · Solicitar retirada

Hola!

Es simple... si entendí bien, deberías ser capaz de hacerlo así:

<li id="a"><a href="http://www.comocreartuweb.com/">TU WEB</a></li>
<li id="b"><a href="chat.html">CHAT</a></li>
<li id="c"><a href="otra.html">OTRA</a></li>
<li id="d"><a href="/una/ruta/dentro/del/servidor/contacto.html">CONTACTO</a></li>

Los motivos por lo que puede fallar es que las rutas no estén bien o que la página no exista.

Fran Diez · 27 Ene 2015, 22:20 · Solicitar retirada

Gracias por tu respuesta Skaparate, pero como soy muy nuevo en esto, o no me explique bien, o no te entiendo.
No entiendo lo del "id".
Cada etiqueta li, ya esta referenciada a una clase.
<li class="button uno">TU WEB</li>

skaparate · 27 Ene 2015, 23:08 · Solicitar retirada

No hay problema, es solo un ejemplo, lo importante es lo que va dentro de la etiqueta li: la etiqueta a. Aquí hay un ejemplo: http://jsfiddle.net/skaparate/mtc3wnL3/1/

Doodleo · 27 Ene 2015, 23:32 · Solicitar retirada

@Fran Diez: Como añadido te comento que cualquier elemento puede poseer un id y una (o varias) clases a la vez sin ningún problema, eso sí, el id es único para cada elemento! Por tanto, esto sería posible:

<li id="a" class="button"><a href="http://www.comocreartuweb.com/">TU WEB</a></li>
<li id="b" class="button"><a href="chat.html">CHAT</a></li>
<li id="c" class="button"><a href="otra.html">OTRA</a></li>
<li id="d" class="button"><a href="/una/ruta/dentro/del/servidor/contacto.html">CONTACTO</a></li>

Fran Diez · 28 Ene 2015, 17:55 · Solicitar retirada

Millon de gracias, Doodle y a Skaparate, ha funcionado perfectamente, y lo mas importante, que he aprendido algo mas.
Ahora solo debo cambiar el estilo, para que el boton no cambie de aspecto durante todo el proceso de hiperenlace.
Repito millon de gracias.
Al moderador, solo decirle que puede dar el tema por cerrado si asi lo desea.

Doodleo · 30 Ene 2015, 22:35 · Solicitar retirada

Las gracias dáselas a @skaparate que es el usuario más activo del foro y ayuda a todo el mundo todos los días :p
Aprovecho para pedirte a ti y el resto de usuarios, que cuando pongas un código sea entre las etiquetas correspondientes (si es html debes ponerlo entre

 y [/html ] y si es php entre [php] y [/php ] - sin los espacios finales, obviamente xD). Si no ponlo entre [code] y [/code ] :)

En tu código hay alguna cosa que puedes simplificar, si hay varios elementos que van a tener el mismo CSS puedes ponerlos en la misma línea y sólo tendrás que declararlos una vez :)

Por ejemplo, tienes este código:
[code]
[COLOR=#333333].uno{[/COLOR]
[COLOR=#333333]background: #D3D3D3;[/COLOR]
[COLOR=#333333]box-shadow: rgb(150,150,150) 5px 5px 10px;[/COLOR]
[COLOR=#333333]padding: 5px 30px 5px 30px;[/COLOR]
[COLOR=#333333]border: 0px;[/COLOR]
[COLOR=#333333]}[/COLOR]
[COLOR=#333333].dos{[/COLOR]
[COLOR=#333333]background: #D3D3D3;[/COLOR]
[COLOR=#333333]box-shadow: rgb(150,150,150) 5px 5px 10px;[/COLOR]
[COLOR=#333333]padding: 5px 30px 5px 30px;[/COLOR]
[COLOR=#333333]border: 0px;[/COLOR]
[COLOR=#333333]}[/COLOR]
[COLOR=#333333].tres{[/COLOR]
[COLOR=#333333]background: #D3D3D3;[/COLOR]
[COLOR=#333333]box-shadow: rgb(150,150,150) 5px 5px 10px;[/COLOR]
[COLOR=#333333]padding: 5px 30px 5px 30px;[/COLOR]
[COLOR=#333333]border: 0px;[/COLOR]
[COLOR=#333333]}[/COLOR]
[COLOR=#333333].cuatro{[/COLOR]
[COLOR=#333333]background: #D3D3D3;[/COLOR]
[COLOR=#333333]box-shadow: rgb(150,150,150) 5px 5px 10px;[/COLOR]
[COLOR=#333333]padding: 5px 30px 5px 30px;[/COLOR]
[COLOR=#333333]border: 0px;[/COLOR]
[COLOR=#333333]}

[/COLOR][COLOR=#333333].uno:active{[/COLOR]
[COLOR=#333333]box-shadow: 0 0 0 rgb(150,150,150), inset 0 0 5px rgba(0, 0, 0, 0.4);[/COLOR]
[COLOR=#333333]}[/COLOR]
[COLOR=#333333].dos:active{[/COLOR]
[COLOR=#333333]box-shadow: 0 0 0 rgb(150,150,150), inset 0 0 5px rgba(0, 0, 0, 0.4);[/COLOR]
[COLOR=#333333]}[/COLOR]
[COLOR=#333333].tres:active{[/COLOR]
[COLOR=#333333]box-shadow: 0 0 0 rgb(150,150,150), inset 0 0 5px rgba(0, 0, 0, 0.4);[/COLOR]
[COLOR=#333333]}[/COLOR]
[COLOR=#333333].cuatro:active{[/COLOR]
[COLOR=#333333]box-shadow: 0 0 0 rgb(150,150,150), inset 0 0 5px rgba(0, 0, 0, 0.4);[/COLOR]
[COLOR=#333333]}[/COLOR]
[/code]

Que puedes convertirlo en esto, porque todos tienen el mismo CSS!:
[code]
.uno, .dos, .tres, .cuatro {
  [COLOR=#333333]background: #D3D3D3;[/COLOR]
[COLOR=#333333]  box-shadow: rgb(150,150,150) 5px 5px 10px;[/COLOR]
[COLOR=#333333]  padding: 5px 30px; /* Esto es lo mismo que 5px 30px 5px 30px: 5px por arriba y abajo, 30px por derecha e izquierda */[/COLOR]
[COLOR=#333333]  border: 0; /* Si el valor es 0 píxeles, basta con escribir simplemente el 0 */[/COLOR]
}
[COLOR=#333333].uno:active, .dos:active, .tres:active, .cuatro:active {[/COLOR]
[COLOR=#333333]  box-shadow: 0 0 0 rgb(150,150,150), inset 0 0 5px rgba(0, 0, 0, 0.4);[/COLOR]
[COLOR=#333333]}[/COLOR]
[/code]

Te recomendaría también leer sobre los prefijos para la combatibilidad de navegadores, puesto que poniendo simplemente "box-shadow" no se verá en todos los navegadores. Busca sobre los prefijos -moz- o -webkit-, por ejemplo :)