Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

MarcosMattos

menu

Por , em Desenvolvimento frontend

Recommended Posts

MarcosMattos    0

MarcosMattos
Postado

pessoal meu menu n quer descer de nem uma maneira alguem poderia me ajudar?

onde eu mudo a posilçao dele n to conseguindo quero botar o menu mas para baixo

	<div id="site_content">		
	
	  <div id="strapline">
		
<div class="menu-container">
    <ul class="menu clearfix">
			<li><a href="?id=inicial">Home</a></li>
		<li><a href="?id=novi">Novidades</a></li>
        <li><a href="#">Fifa Stars Cup</a>
            <!-- Nível 1 -->
            <!-- submenu -->
            <ul class="sub-menu clearfix">
					  <li><a href="#">Regulamentos e Cronogramas</a></li>
	                  <li><a href="?id=galeria" >Galeria de imagens</a></li> 
                <li><a href="#">Fifa Stars Cup 2015</a>
                    <!-- Nível 2 -->
                    <!-- submenu do submenu -->
                    <ul class="sub-menu">
                        <li><a href="#">Temporada 2015</a></li>
                        <li><a href="#">Temporada 2014</a></li>
						<li><a href="#">Temporada 2014</a></li>
                    </ul><!-- submenu do submenu -->
                </li>
  
            </ul><!-- submenu -->
 		<li><a href="?id=parceiros">Parceiros</a></li> 
		<li><a href="?id=sobre">Sobre a FCFDV</a></li>   
   <li><a href="#">rank</a>
            <!-- Nível 1 -->
            <!-- submenu -->
            <ul class="sub-menu clearfix">
					  <li><a href="#">Regulamentos e Cronogramas</a></li>
	                  <li><a href="?id=galeria" >Galeria de imagens</a></li> 
                <li><a href="#">Fifa Stars Cup 2015</a>
                    <!-- Nível 2 -->
                    <!-- submenu do submenu -->
                    <ul class="sub-menu">
                        <li><a href="#">Temporada 2015</a></li>
                        <li><a href="#">Temporada 2014</a></li>
						<li><a href="#">Temporada 2014</a></li>
                    </ul><!-- submenu do submenu -->
                </li>
  
            </ul><!-- submenu -->
 
    </ul>	
</ul>

    </ul>
</div>
      </div><!--close strapline-->

body, 
.menu,
.sub-menu {
    margin: 0;
    padding: 0;
	font-family: arial, helvetica, sans-serif;
	font-size: 15px;
	z-index: 1000;
}
.clearfix:after{
    content: '.';
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
    overflow: hidden;
}
.menu,
.sub-menu {
    list-style: none;
	z-index: 1000;
}
.sub-menu {
background-color:#F7D358;   
background: -moz-linear-gradient(#676767, #F7D358);  
background: -o-linear-gradient(#676767, #F7D358);
background: -webkit-linear-gradient(#676767, #F7D358); 
color:#ffffff; 
-moz-box-shadow:0 3px 10px 0 #CCC; 
-webkit-box-shadow:0 3px 10px 0 #ffffff; 
text-shadow:0px 0px 5px #000000;   

		z-index: 1000;
}
.menu a {
    text-decoration: none;
    display: block;
    padding: 10px;
    font-family: sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
		z-index: 1000;
}
.menu li {
		z-index: 1000;
}
.menu > li {
    float: left;
}
.menu > li:hover {
background-color:#F7D358;   
background: -moz-linear-gradient(#676767, #F7D358);  
background: -o-linear-gradient(#676767, #F7D358);
background: -webkit-linear-gradient(#676767, #F7D358); 
color:#ffffff; 
-moz-box-shadow:0 3px 10px 0 #CCC; 
-webkit-box-shadow:0 3px 10px 0 #ffffff; 
text-shadow:0px 0px 5px #000000; 
		z-index: 1000;
}
.menu li:hover > .sub-menu {
    display: block;
		z-index: 1000;
}
.sub-menu {
    display: none;
    position: absolute;
    min-width: 250px
		z-index: 1000;
}
.sub-menu li:hover {
background-color:#F7D358;   
background: -moz-linear-gradient(#676767, #F7D358);  
background: -o-linear-gradient(#676767, #F7D358);
background: -webkit-linear-gradient(#676767, #F7D358); 
color:#ffffff; 
-moz-box-shadow:0 3px 10px 0 #CCC; 
-webkit-box-shadow:0 3px 10px 0 #ffffff; 
text-shadow:0px 0px 5px #000000; 
		z-index: 1000;
}
.sub-menu .sub-menu {
    top: 0;
    left: 100%;
		z-index: 1000;
}

@font-face { 
  font-family: PacificoRegular; 
    src: url('../fonts/Pacifico-webfont.eot'); 
    src: local("PacificoRegular"), url('../fonts/Pacifico-webfont.ttf'); 
} 


html
{ height: 100%;}

*
{ margin: 0;
  padding: 0;}

body
{ font: normal 80% Arial, Helvetica, sans-serif;
  color: #000;
}

/* tell the browser to render HTML 5 elements as block */
article, aside, figure, footer, header, hgroup, nav, section { 
  display:block;
}

p
{ padding: 0 0 10px 0;
  color: #FFF;
  text-shadow: 1px 1px #000;
  line-height: 1.7em;
  font-size: 100% }

img
{ border: 0;}

h1, h2, h3, h4, h5, h6 
{ font: normal 175% 'PacificoRegular', Arial, sans-serif;
  color: #000000;
  text-shadow: 0px -1px 0px #000;
  letter-spacing: -1px;
  margin: 0 0 10px 0;}

h2
{ font: normal 165% Arial, Helvetica, sans-serif;}

h3
{ font: normal 130% Arial, Helvetica, sans-serif;}

h4, h5, h6
{ margin: 0;
  padding: 0 0 0px 0;
  font: normal 150% Arial, Helvetica, sans-serif;
  color: #FFF;
  line-height: 1.5em;}

h5, h6
{ font: normal 95% Arial, Helvetica, sans-serif;
  color: #888;
  padding-bottom: 15px;}
  
span
{ color: #676767;
  text-shadow: 0px -1px 0px #1D1D1D;}

a, a:hover
{ color: #FFF;
  background: transparent;
  font-weight: bold;
  outline: none;
  text-decoration: underline;}

a:hover
{ text-decoration: none;}

ul
{ margin: 2px 0 22px 30px;
  line-height: 1.7em;
  font-style: normal;
  font-size: 100%;}

ol
{ margin: 8px 0 22px 20px;}

ol li
{ margin: 0 0 11px 0;}

#main, header, #banner, #menubar, #site_content, footer, #content_grey, nav
{ margin-left: auto; 
  margin-right: auto;
  margin-top: auto;
}

#main
{ padding-bottom: 30px;
  background: transparent url(../images/background.jpg) no-repeat; background-position: top; }
  
header
{ height: 120px;}
 
nav
{ height: 50px;}  
  
#menubar
{ width: 940px;
  height: 50px;
  text-align: center; 
  margin: 0 auto;
   background: #F7D358;
  background: -moz-linear-gradient(#676767, #F7D358);
  background: -o-linear-gradient(#676767, #F7D358);
  background: -webkit-linear-gradient(#676767, #F7D358);
  border-radius: 0px 0px 15px 15px;
  -moz-border-radius: 0px 0px 15px 15px;
  -webkit-border: 0px 0px 15px 15px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;}  
  
  #espaco
  {
  display:block;
  }
  
#strapline
{ width: 940px;
  height: 100px;
  padding-bottom: 20px;
  text-align: center; 
   background: #1D1D1D;
  background: -moz-linear-gradient(#676767, #F7D358);
  background: -o-linear-gradient(#676767, #F7D358);
  background: -webkit-linear-gradient(#676767, #F7D358);} 
  
#welcome_slogan
{ width: 940px;
  float: none;
  height: 170px;
  margin: 0;} 
  
#welcome_slogan H3
{ font: normal 125% 'PacificoRegular', Arial, sans-serif;
  letter-spacing: -2px;
  text-shadow: 0px -1px 0px #ffffff;
  color: #ffffff;} 
  
ul#nav
{ margin:0;}

ul#nav li
{ padding: 0 0 0 0px;
  list-style: none;
  margin: 2px 0 0 0;
  display: inline;
  background: transparent;}

ul#nav li a
{ float: left;
  height: 24px;
  margin: 8px 0 0 20px;
  text-shadow: 0px -1px 0px #000;
  padding: 0px 20px 10px 20px;
  background: transparent; 
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;
  text-align: center;
  color: #FFF;
  text-decoration: none;} 
  
ul#nav li.current a
{ color: #FFF;
  background: #1D1D1D;
  background: -moz-linear-gradient(#676767, #1D1D1D);
  background: -o-linear-gradient(#676767, #1D1D1D);
  background: -webkit-linear-gradient(#676767, #1D1D1D); 
  text-shadow: none;}
  
ul#nav li:hover a
{ color: #FFF;
  background: #1D1D1D;
  background: -moz-linear-gradient(#676767, #1D1D1D);
  background: -o-linear-gradient(#676767, #1D1D1D);
  background: -webkit-linear-gradient(#676767, #1D1D1D); 
  text-shadow: none;}

#site_content
{ width: 940px;
  overflow: hidden;
  margin-bottom: 30px;
  background: transparent url(../images/transparent.png) repeat;
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;} 

.sidebar_container
{ float: right;
  margin: 20px 10px 0 10px;
  width: 210px;
  color: #000000;
  padding: 0;}

.sidebar
{ float: left;
  width: 190px;
  padding-left: 10px;
  margin-bottom: 10px;}

.sidebar_item
{ font: normal 100% Arial, Helvetica;
  width: 190px;}

.sidebar h2
{ padding: 5px 0 0 0;
  font: normal 140% 'PacificoRegular', Arial;
  height: 30px;}  

#content
{ width: 680px;
  margin: 0 0 20px 20px;
  float: left;}

.content_item
{ width: 680px;
  margin-top: 20px;
  margin-bottom: 20px;}
  
.content_container
{ width: 330px;
  margin: 20px 10px 0 0;
  float: left;}
  
footer
{ width: 940px;
  height: 50px;
  padding-top: 25px;
  padding-bottom: 20px;
  font-weight: bold;
  text-align: center; 
  text-shadow: 1px 1px #000;
  color: #FFF;
  background: #1D1D1D;
  background: -moz-linear-gradient(#676767, #1D1D1D);
  background: -o-linear-gradient(#676767, #1D1D1D);
  background: -webkit-linear-gradient(#676767, #1D1D1D);
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;}

footer a, footer a:hover
{ text-shadow: 1px 1px #FFF;
  color: #1D1D1D;
  text-decoration: none;
  padding-bottom: 20px;}

footer a:hover
{ text-decoration: underline;}

footer a, footer a:hover
{ text-shadow: 1px 1px #000;
  color: #FFF;
  text-decoration: none;}

footer a:hover
{ text-decoration: underline;}
  
 .readmore a
{ color: #FFF;
  text-shadow: 1px 1px #004C8C;}
 
 .button_small
{ font: normal 110% Arial, Helvetica, sans-serif;
  height: 15px;
  width: 88px;
  padding: 5px 2px 7px 2px;
  background: #1D1D1D;
  background: -moz-linear-gradient(#676767, #1D1D1D);
  background: -o-linear-gradient(#676767, #1D1D1D);
  background: -webkit-linear-gradient(#676767, #1D1D1D);
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;}
  
.button_small a
{ color: #FFF;
  padding-left: 5px;
  text-shadow: 1px 1px #000;}

.form_settings
{ margin: 15px 0 0 0;}

.form_settings p
{ padding: 0 0 4px 0;}

.form_settings span
{ float: left; 
  width: 280px; 
  text-align: left;
  text-shadow: none;
  color: #FFF;
  text-shadow: 1px 1px #000;}
  
.form_settings input, .form_settings textarea
{ padding: 2px; 
  width: 299px; 
  font: 100% arial; 
  border: 1px solid #E5E5DB; 
  background: #FFF; 
  color: #47433F;}
  
.form_settings input[type="checkbox"]
{ padding: 2px 0; 
  width: 15px; 
  font: 100% arial; 
  border: 0; 
  background: #FFF; 
  color: #47433F;
  margin: 28px 0;}

.form_settings .submit
{ font: 100% arial; 
  border: 1px solid; 
  width: 99px; 
  margin: 0 0 0 206px; 
  height: 26px;
  padding: 2px 0 3px 0;
  cursor: pointer; 
  background: #1D1D1D;
  background: -moz-linear-gradient(#676767, #1D1D1D);
  background: -o-linear-gradient(#676767, #1D1D1D);
  background: -webkit-linear-gradient(#676767, #1D1D1D);
  color: #FFF;}

.slideshow
{  width: 680px;
  height: 250px;
  margin-left: 20px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;}  
  
/* styling for the slideshow on the homepage */
ul.slideshow {
  list-style: none;
  width: 680px;
  height: 250px;
  overflow: hidden;
  position: relative;
  margin: 20px 0 0 0;}
  
ul.slideshow li {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  right: 0;}
 
ul.slideshow li.show {
  z-index: 500;}
 
ul img {
  border: none;}
 
#slideshow-caption {
  width: 680px;
  height: 38px;
  position: absolute;
  bottom: 0;
  left: 0; 
  z-index: 500;}
 
#slideshow-caption .slideshow-caption-container {
  padding: 10px 25px 10px 25px; 
  background: transparent url(../images/transparent.png) repeat;  
  z-index: 1000;}
 
#slideshow-caption p {
  padding: 0;
  font: normal 130% arial, sans-serif;
  color: #000000;
  text-shadow: 1px 1px #000;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

MarcosMattos    0

MarcosMattos
Postado

nãp é duplicar é outra coisa nesse sobre o outro deu consegui arruma lo


esse aqui eh pra dar um espaço preciso q o menu fique separados

 

exemplo

botao botao botao botao botao botao

preciso q ele fique dessa maneira por dentro disso tem uma img

 

Olha como ta 2gxiqdy.jpg

quero separa o menu ou baixa mas esse css q peguei pronto ta uma bagunça e eu n manjo de css ^^

Compartilhar este post

Link para o post
Compartilhar em outros sites

destruidoro    0

destruidoro
Postado

não existe varias coisas no seu css por exemplo o menu esta chamando .menu-container não existe isso no seu css vc tem q criar e varias outras div que tem no html e não existe no css, a nao ser que vc não colocou tudo aq

 

Exemplos: crie assim mais coloque as suas margens e larguras

 

.menu-container {
position: relative;
margin: 6666px 6666px 6666px 6666px;
padding: 6666px 166666px 6666px 6666px;
}

 

.menu clearfix

 

tbm nao existe no seu css, existem algumas tags sem fechando no menu. cara aconselho vc dar uma estudada em css pois html sem css não eh nada... recomendo fazer o curso html5 + css do cursoemvideo.com

Compartilhar este post

Link para o post
Compartilhar em outros sites

guilomaker    31

guilomaker
Postado

cria dois <nav> e flota um em left e outro e right

 

no seu cado

 

<div class="menu-container left">

 

</div>

sua logo

<div class="menu-container right">

 

</div>

 

e no css adicione

 

.right {

float:right;

}

.left {

float:left;

}

 

e remova qual quer float do seu menu-container, ai e só você dividir os menus como quiser.

 

tem varias formas de fazer, mais eu faria assim!

Compartilhar este post

Link para o post
Compartilhar em outros sites

destruidoro    0

destruidoro
Postado

antes de vc fazer as mudanças que o guilomaker falo usa o html abaixo tinha 4 erros nele seu content nao estava fechado e 3 tag de menu abertas estava dando erro quando dividi ele aq

 

Vai na do guilomaker que ele manja pakas =D ja me ajudo muito.

<div id="site_content"> 


 <div id="strapline">


<div class="menu-container">
    <ul class="menu clearfix">
<li><a href="?id=inicial">Home</a></li>
<li><a href="?id=novi">Novidades</a></li>
        <li><a href="#">Fifa Stars Cup</a>
            <!-- Nível 1 -->
            <!-- submenu -->
            <ul class="sub-menu clearfix">
 <li><a href="#">Regulamentos e Cronogramas</a></li>
                 <li><a href="?id=galeria" >Galeria de imagens</a></li> 
                <li><a href="#">Fifa Stars Cup 2015</a>
                    <!-- Nível 2 -->
                    <!-- submenu do submenu -->
                    <ul class="sub-menu">
                        <li><a href="#">Temporada 2015</a></li>
                        <li><a href="#">Temporada 2014</a></li>
<li><a href="#">Temporada 2014</a></li>
                    </ul><!-- submenu do submenu -->
                </li>
  
            </ul><!-- submenu -->
  <li><a href="?id=parceiros">Parceiros</a></li> 
<li><a href="?id=sobre">Sobre a FCFDV</a></li>   
   <li><a href="#">rank</a>
            <!-- Nível 1 -->
            <!-- submenu -->
            <ul class="sub-menu clearfix">
 <li><a href="#">Regulamentos e Cronogramas</a></li>
                 <li><a href="?id=galeria" >Galeria de imagens</a></li> 
                <li><a href="#">Fifa Stars Cup 2015</a>
                    <!-- Nível 2 -->
                    <!-- submenu do submenu -->
                    <ul class="sub-menu">
                        <li><a href="#">Temporada 2015</a></li>
                        <li><a href="#">Temporada 2014</a></li>
<li><a href="#">Temporada 2014</a></li>
                    </ul><!-- submenu do submenu -->
                </li>
  
            </ul><!-- submenu -->


    </ul> 




    
</div>
</div>      </div><!--close strapline-->

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito