Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Acomodar Menu CSS

 Estas en el tema de Acomodar Menu CSS en el foro de CSS en Foros del Web. Tengo los siguientes codigos, Código HTML: header { background: #000000; margin: 0 auto; max-width: 100%; max-height: 300px; } header h1 { display: inline-block; margin: 0 ...
  #1 (permalink)  
Antiguo 25/09/2013, 08:47
Avatar de Simon_Echecopar  
Fecha de Ingreso: marzo-2012
Mensajes: 96
Antigüedad: 12 años, 8 meses
Puntos: 0
Acomodar Menu CSS
Tengo los siguientes codigos,
Código HTML:
header {
    background: #000000;
    margin: 0 auto;
    max-width: 100%;
    max-height: 300px;
}
header h1 {
    display: inline-block;
    margin: 0 auto;
    max-width: 100%;
    vertical-align: top;
}
header h1 video {
    display: inline-block;
    max-width: 100%;
    height: 200px;
    vertical-align: top;
    margin: 0;
}
header nav {
    display: inline-block;
    padding: 0;
    max-width: 100%;
    height:150px;
}
header nav p {
    vertical-align: top;
    position: relative;
    top: 50px;
}
header nav p#titulo {
    font-size: 3em;
    color: #FFF;
    vertical-align: middle;
}
header nav p#slogan {
    color: #ffcb05;
    font-size: 1.1em;
    font-weight:bold;
    vertical-align: middle;
}
header nav p#subtitulo {
    color: #999999;
    font-size: 1.9em;
    font-weight:bold;
}
ul#menu {
    display: block;
    list-style: none;
    position: relative;
    right: -400px;
    max-width: 100%;
    vertical-align: middle;
}
header nav ul li {
    display: inline-block;
    padding: 0.1em;
    vertical-align: bottom;
}
header nav ul li a {
    background: #000000;
    border: 0;
    color: #FFF;
    font-family: century gothic, Helvetica, Verdana;
    font-size: 1em;
    padding: 1.2em;
    text-decoration: none;
    display: block;
	width:38px;
	height:5px;
}
Código HTML:
<header>
  <h1>
   <video autoplay="true" width="90%" height="100%">
    <source src="vid/animacion.ogv" type='video/ogg' />
    <source src="vid/animacion.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
   </video> 
  </h1>
		  <nav>
            <p id="titulo"> OL SPORTS</p>
            <p id="slogan"> DOMINANDO EL BAL&Oacute;N </p>
            <p id="subtitulo"> AGENCIA DE CONTENIDOS DEPORTIVOS <br/>
			 <ul id="menu">
                <li><a href="index.html">Inicio</a></li>
                <li><a href="agencia.html">Agenda</a></li>
                <li><a href="nosotros.html">Nosotros</a></li>
                <li><a href="servicios.html">Servicios</a></li>
                <li><a href="contacto.html">Contacto</a></li>
				<li ><a href="Clientes.html"><font color="red">Clientes</font></a><br/><a width="50" href="registroinicio.html">Login/Sign Up</a></li></ul> 
			</p></nav></header>
No entiendo como puedo acomodar el menu exactamente abajo del texto. Soy nuevo en HTML5 y no lo he usado antes. Si alguien me lo explica sabre corregirlo.
  #2 (permalink)  
Antiguo 25/09/2013, 09:07
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: Acomodar Menu CSS
Con ese código sale debajo del texto. Tal vez haya código que no hayas publicado. :pesando:

Lo de poner un vídeo dentro de un cabecera es una salvajada.
  #3 (permalink)  
Antiguo 25/09/2013, 09:34
Avatar de Simon_Echecopar  
Fecha de Ingreso: marzo-2012
Mensajes: 96
Antigüedad: 12 años, 8 meses
Puntos: 0
Respuesta: Acomodar Menu CSS
Lo demas del codigo y CSS completo

Código HTML:
*{
    border: 0;
    margin: 0;
    padding: 0;
}
article, figcaption, figure, footer, header, hgroup, nav, section {
    display:  block;
}

body {
    background: url(../img/pasto1.jpg) repeat-y scroll 0;
    color: #FFF;
    font-family: century gothic, Helvetica, Verdana;
    font-size: 1em;
}
img, video {
    max-width: 100%;
}

header {
    background: #000000;
    margin: 0 auto;
    max-width: 100%;
    max-height: 300px;
}
header h1 {
    display: inline-block;
    margin: 0 auto;
    max-width: 100%;
    vertical-align: top;
}
header h1 video {
    display: inline-block;
    max-width: 100%;
    height: 200px;
    vertical-align: top;
    margin: 0;
}
header nav {
    display: inline-block;
    padding: 0;
    max-width: 100%;
    height:150px;
}
header nav p {
    vertical-align: top;
    position: relative;
    top: 50px;
}
header nav p#titulo {
    font-size: 3em;
    color: #FFF;
    vertical-align: middle;
}
header nav p#slogan {
    color: #ffcb05;
    font-size: 1.1em;
    font-weight:bold;
    vertical-align: middle;
}
header nav p#subtitulo {
    color: #999999;
    font-size: 1.9em;
    font-weight:bold;
}
ul#menu {
    display: block;
    list-style: none;
    position: relative;
    right: -400px;
    max-width: 100%;
    vertical-align: middle;
}
header nav ul li {
    display: inline-block;
    padding: 0.1em;
    vertical-align: bottom;
}
header nav ul li a {
    background: #000000;
    border: 0;
    color: #FFF;
    font-family: century gothic, Helvetica, Verdana;
    font-size: 1em;
    padding: 1.2em;
    text-decoration: none;
    display: block;
	width:38px;
	height:5px;
}
section ul {
    display: block;
    list-style: none;
    max-width: 100%;
    vertical-align: middle;
    text-align: center;
}
section ul li {
    display: inline-block;
    padding: 0.1em;
    vertical-align: top;
    width: 30%;
}
section ul li a {
    background: #000000;
    border: 0;
    color: #FFF;
    font-family: century gothic, Helvetica, Verdana;
    font-size: 1em;
    padding: 1.2em;
    text-decoration: none;
    display: block;
}

.embed {
    max-width: 100%;
}
section#espacio {
    background-color:transparent;
}
section#contenido {
    background: rgba(0,0,0,0.5);
    max-width: 90%;
    border-radius: 0.1em;
    padding: 1em;
    margin: 0 auto;
}
.principal {
	background: url(../img/pasto.jpg)  scroll 0;
    background-color:transparent;
    border: 2px;
    border-radius: 0.1em;
    margin: 0 auto;
    max-width:  100%;
    padding: 0.5em;
    vertical-align: top;
}
.vid { 
    background: #000;
    display: block;
    max-width: 100%;
    height: 350px;
    vertical-align: top;
    padding: 1.5em;
    margin: 0 auto;
    text-align: center;
	background: url(../img/pasto.jpg) scroll 0;
}
.objeto {
    background: transparent;
    padding: 3.5em;
}
.titulo {
    padding: 0;
    width: 100%;
    text-align: center;
    color: red;
}
.imagen {
    max-width: 200px;
    padding: 1em;
}
.amarillo {
    font-size: 2em;
    color: #ffcb05;
    vertical-align: middle;
    text-align: center;
    max-width: 100%;
}
.posicion {
    
}
.imagen1 {
    max-width: 100px;
    height: 100px;
    padding: 0.8em;
}
.titagenda {
    background-color: transparent;
    font-family: century gothic, Helvetica, Verdana;
    font-size: 1.5em;
    padding: 0.8em 0 0 0;
    max-width: 100%;
}
.agenda {
    background-color: transparent;
    font-family: century gothic, Helvetica, Verdana;
    font-size: 1em;
    padding: 0;
    max-width: 100%;
}
/*.agencia {
    display: block;
    max-width: 33.333%;
}

footer {
    color: #000;
    font-size: 0.85em;
    padding: 0.75em 0;
}
*/
Código HTML:
<section id="espacio"> <br /> </section>
    <section id="contenido"> 
        <section class="principal">
            <div class="vid">
                <embed class="embed" src="vid/video_corporativo.mov" AUTOPLAY="false" CONTROLLER="true" width="390" height="250" PLUGINSPAGE="http://quicktime.apple.com/"/>
            </div>
        </section>
        <section class="principal">
            <ul>
                <li> <a href="agencia.html" class="titulo">AGENDA</a> </li>
                <li> <a href="sportsmedia.html" class="titulo">SPORTS MEDIA</a> </li>
                <li> <a class="titulo">SPORTS PREMIUM</a> </li>
            </ul>
            <ul>
                <li> <img class="imagen" src="img/agencia.JPG"/> </li>
                <li> <img class="imagen" src="img/u2_02.JPG"/> </li>
                <li> <img class="imagen" src="img/u2_03.JPG"/> </li>
            </ul>        
        </section>

        <section id="espacio"> <br /> </section>
        <article>
            <p class="amarillo">INFORMACI&Oacute;N DE COBERTURAS</p>
            <ul class="posicion">
                <li> <img class="imagen1" src="img/bola_caliente.jpg"/> </li>
                <li> 
                    <a class="titagenda"> BEISBOL LIGA DEL PACIFICO </a> 
                    <a class="agenda">  Diciembre 22, 2013 <br /> 
                                        Da click para ver el video completo
                    </a>
                </li>
            </ul>
            <ul class="posicion">
                <li> <img class="imagen1" src="img/bola_caliente.jpg"/> </li>
                <li> 
                    <a class="titagenda"> BEISBOL LIGA DEL PACIFICO </a> 
                    <a class="agenda">  Diciembre 22, 2013 <br /> 
                                        Da click para ver el video completo
                    </a>
                </li>
            </ul>
            <ul class="posicion">
                <li> <img class="imagen1" src="img/bola_caliente.jpg"/> </li>
                <li> 
                    <a class="titagenda"> BEISBOL LIGA DEL PACIFICO </a> 
                    <a class="agenda">  Diciembre 22, 2013 <br /> 
                                        Da click para ver el video completo
                    </a>
                </li>
            </ul>
            <ul class="posicion">
                <li> <img class="imagen1" src="img/bola_caliente.jpg"/> </li>
                <li> 
                    <a class="titagenda"> BEISBOL LIGA DEL PACIFICO </a> 
                    <a class="agenda">  Diciembre 22, 2013 <br /> 
                                        Da click para ver el video completo
                    </a>
                </li>
            </ul>
            <ul class="posicion">
                <li> <img class="imagen1" src="img/bola_caliente.jpg"/> </li>
                <li> 
                    <a class="titagenda"> BEISBOL LIGA DEL PACIFICO </a> 
                    <a class="agenda">  Diciembre 22, 2013 <br /> 
                                        Da click para ver el video completo
                    </a>
                </li>
            </ul>
            <ul class="posicion">
                <li> <img class="imagen1" src="img/bola_caliente.jpg"/> </li>
                <li> 
                    <a class="titagenda"> BEISBOL LIGA DEL PACIFICO </a> 
                    <a class="agenda">  Diciembre 22, 2013 <br /> 
                                        Da click para ver el video completo
                    </a>
                </li>
            </ul>
        </article>
    </section>
  #4 (permalink)  
Antiguo 25/09/2013, 10:01
Avatar de Simon_Echecopar  
Fecha de Ingreso: marzo-2012
Mensajes: 96
Antigüedad: 12 años, 8 meses
Puntos: 0
Respuesta: Acomodar Menu CSS
Oficialmente se ve como en esta liga:
http://http://www.eventosypresentaciones.com.mx/

Etiquetas: acomodar, background, color, contenido, 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


« Tema Anterior | Próximo Tema »


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