Sobre el diseño del encabezado
Miquelcala. Me podrías ayudar sobre el código del diseño del encabezado en css3, es decir el logotipo de mi página me gustaría que estuviera a la izquierda y el menú que estuviera debajo del logotipo, el cual en este momento se encuentra a la derecha.
Actualmente tengo una cosa así:
CURSO DE DISEÑO Inicio ¿Quién es Manuel? Diseño Vídeos
WEB Contacto
Me gustaría que fuese así:
Curso de diseño web
Inicio ¿Quién es Manuel? Diseño Vídeos Contactos
1 respuesta
Coloca algo así, cambiando los margenes y paddings que te gusten, y dando tipos de letra, colores y formatos que prefieras
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
header { width: 1000px; margin: 0 auto; border: 2px solid red; }
header figure { margin:0; }
header h1 { margin-left: 20px; }
ul#menu { margin: 0 20px 20px; padding: 0; }
ul#menu li { display:inline-block; list-style-type: none; }
ul#menu li a { padding: 0 10px; text-decoration: none; color: #000; }
</style>
</head>
<body>
<header>
<figure><img src="tu_logo.jpg" width="" height=""></figure>
<h1>CURSO DE DISEÑO WEB</h1>
<nav><ul id="menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">¿Quién es Manuel?</a></li>
<li><a href="#">Diseño</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Contacto</a></li>
</ul></nav>
</header>
</body>
</html>Y no te acostumbres a que te vaya haciendo todo el trabajo. Esta vez y basta.El trabajo lo has de hacer tu. Coge libros, visita paginas y estudia y practica mucho con cosas sencillitas
Lo he realizado tal cual me has puesto y me aparece exactamente igual, sólo que en éste caso el encabezado me aparece solo en la mitad en la pantalla. Te voy a pasar mi código a ver si ves algún error.
Esta parte la he realizado en html
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="CURSO DE DISEÑO WEB">
<meta name="keyword" content= Diseño web, photoshop ">
<link rel="stylesheet" type="text/css" href="css/estilos.css"/>
<script src"http://code.jquery.com/jquery-latest.min.js"></script>
<script src"js/slides.min.jquery.js"></script>
<script>
$(function(){
$("#slideshow").slides();
});
</script>
<title>Emprendedores en RED</title>
</style>
</head>
<body>
<header>
<div id="subheader">
<div id="logotipo"><p><a href="">CURSO DE DISEÑO WEB</a></p></div>
<nav>
<ul>
<li><a href="#">INICIO</a></li>
<li><a href="#">¿QUIÉN ES MANUEL RUIZ?</a></li>
<li><a href="#">MULTINIVEL</a></li>
<li><a href="#">VÍDEOS</a></li>
<li><a href="#">CONTACTO</a></li>
</ul>
</nav>
</div>
</header>
Esta parte es la que he realizado en Css3
/*--- HEADER ---*/
header {
width:100%;
float:left;
background: #ffae35; / * navegadores viejos * /
background:-moz-linear-gradiente (arriba, #ffae35 0%, #ff3502 100%); / * FF3.6 + * /
background:-webkit-degradado (lineal, arriba a la izquierda, abajo a la izquierda, color-stop (0%, #ffae35), color-stop (100%, #ff3502)); / * Chrome, Safari4 + * /
background:-webkit-lineal de gradiente (arriba, #ffae35 0%, #ff3502 100%); / * Chrome10 +, Safari5.1 + * /
fondo:-o lineal de gradiente (arriba, #ffae35 0%, #ff3502 100%); / * Opera 11.10 + * /
fondo:-ms-linear-gradiente (arriba, #ffae35 0%, #ff3502 100%); / * IE10 + * /
fondo: gradiente lineal-(a abajo, #ffae35 0%, #ff3502 100%); / * W3C * /
Filtro: idprog: DXImageTransform.Microsoft.gradient (startColorstr = '#ffae35', endColorstr = "#ff3502", GradientType = 0); / * IE6-9 * /
}
#subheader {
width:960px;
margin:auto;
}
#logotipo {
float:left;
width:300px;
padding:10px 0px;
}
#logotipo a {
font-family:Mongolian Baiti;
font-size:50px;
color:#4b0303;
}
#logotipo a:hover {text-decoration:none;}
/*Menu*/
header #subheader nav {
float:right;
width:660px;
padding:30px 0px;
text-align:left;
}
header #subheader nav ul li {
display:inline;
font-family:Mongolian Baiti;
}
header #subheader nav ul li {
color:#fff;
font-size:18px;
padding:10px;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
}
header #subheader nav ul li a:hover {
color:#fff;
background:#4b0303;
text-decoration:none;
}
Por cierto tendré en cuenta lo que me has dicho anteriormente, muchas gracias por tu apoyo, sin el no habría sido posible realizar esto.
* Primero: el código que te mandé te queda centrado en la página porque le di un ancho fijo y un margin:0 auto. Si lo quieres a todo el ancho, ja está bien lo que has hecho tu de poner un header al 100% y un subheader al 960px. Por cierto, no uses margin:auto porque no coge bien los margenes arriba y abajo automáticos,. En todo caso usa margin;0 auto.
* Segundo: Errores en tu código
¿Que es eso de background:-moz-linear-gradiente (arriba, #ffae35 0%, #ff3502 100%); ?
¿Has traducido al castellano las instrucciones css? ¿Quién te ha dicho a ti eso? Esa linea ha de ser: background:-moz-linear-gradient(top, #ffae35 0%, #ff3502 100%); Y vigila, que NO hay espacio antes de abrir el paréntesis!
Yo te aconsejaría de quitar todos los floats que usas, que no hacen falta. Si los pones piensa que luego deberás 'limpiarlos'
Esa fuente que usas (Mongolian...) no es estándar. O sea que la mayoría de los usuarios de tu web NO la tiene instalada y por lo tanto NO pueden verla. Has de usar fuentes estándar o, en su caso, embeber la fuente que desees en el CSS (lo cual no es fácil, ya te digo)
En todo caso, usa instrucciones como font-family: "Mongolian Baiti", "Times New Roman", Times, serif; que le dice al navegador que, de no encontrar la primera fuente, coja la segunda o en su caso la tercera.
Bueno, ya te he dado trabajo. Suerte!
