Ir para conteúdo

POWERED BY:

Arquivado

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

Silviomc

Menu hozizontal abaixo das imagens

Recommended Posts

Como sei somente o básico de css e não entendi muito bem os tópicos existentes aqui, resolvi então pedir ajuda aos membros. É o seguinte; existem imagens que vão passando lado-a-lado e logo acima tem um menu que está ficando abaixo dessas imagens quando passa o mouse, como resolver isso?

 

Código fonte junto com css pra facilitar:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>modelo de site</title>

   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <link rel="Shortcut Icon" href="images/favicon.ico" type="image/x-icon" />
   <meta name="distribution" content="global" />
   <meta name="robots" content="follow, all" />
   <meta name="language" content="pt-BR" />


   <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="js/dk.carousel.js"></script>


<style type="text/css">
<!--
.ver-img {
padding-top:2px;
width:156px;
background:#D2D2D2;
}

.ver-nome {
color:#036;
width:153px;
background:#D2D2D2;
font-size:12px;
text-align:left;
font-weight:bold;
padding-left:3px;
}

.ver-nome p{
margin:2px 0 2px 0;
text-align:center;
}

*{
  margin:0;
  padding:0;
}

body{
text-align:center;
font-family: Arial, Helvetica, sans-serif;
margin-left:auto;
margin-right:auto;

}

small{
  font-size:10px;
  margin:0;
  padding:0;
}
small a{
  font-size:12px;
  text-decoration:none;
}
small a:hover{
  text-decoration:underline;
}

.alignleft {
float: left; 
   margin-right: 8px;
}
.alignright {
float: right; 
margin-left: 8px;
}

.aligncenter {
text-align: center;
}


.smc-1 {
border: none;
margin-left: auto;
margin-right: auto;
text-align: left;
width: 990px;
}

.smc-1-1 {
background: url(images/banner_principal.jpg) no-repeat left center;
border: none;
clear: both;
float: left;
height: 215px;
padding: 0px;
width: 990px;
}

.smc-1-2 {
border: none;
clear: both;
float: left;
height: 40px;
width: 990px;
background-image: url(images/bg_pagina.jpg);
}

.smc-2 {
background-image: url(images/bg_pagina.jpg);
border: none;
margin-left: auto;
margin-right: auto;
text-align: left;
width: 990px;
margin-top:2px;
}

.smc-2-1 {
border: none;
clear: both;
float: left;
padding: 0px;
width: 208px;
height:100%;
}

.smc-3 {
border: none;
margin-left: auto;
margin-right: auto;
text-align: left;
width: 202px;
}

.smc-3-1, .smc-3-3 {
background: url(images/menu.jpg) no-repeat left center;
border: none;
clear: both;
float: left;
height: 35px;
margin-top:5px;
padding: 0px;
width: 202px;
}

.smc-3-2 {
background-color: #ffffff;
border: none;
clear: both;
float: left;
padding: 0px;
width: 202px;
}

.smc-3-4, .smc-4-1 {
border: none;
clear: both;
float: left;
padding: 0px;
width: 202px;
}

.smc-4 {
border: none;
text-align: left;
width: 202px;
}

.smc-2-2 {
border: none;
float: left;
padding: 0px;
width: 782px;
}

.smc-5, .smc-9 {
border: none;
margin-left: auto;
margin-right: auto;
text-align: left;
width: 773px;
}

.smc-5-1, .smc-9-1 {
background: url(images/box2_topo.jpg) no-repeat left center;
border: none;
clear: both;
float: left;
height: 42px;
margin-top:5px;
padding: 0px;
width: 773px;
}

.smc-5-2, .smc-9-2 {
background-image: url(images/box2_meio.jpg);
border: none;
clear: both;
float: left;
padding-top: 5px;
width: 773px;
}

.smc-5-3, .smc-9-3 {
background: url(images/box2_rodape.jpg) no-repeat left center;
border: none;
clear: both;
float: left;
height: 10px;
padding: 0px;
width: 773px;
margin-bottom:10px;
}

.smc-6 {
border: none;
margin-left: auto;
margin-right: auto;
margin-bottom:5px;
text-align: left;
width: 780px;
}

.smc-6-1 {
border: none;
clear: both;
float: left;
padding: 0px;
width: 436px;
}

.smc-7 {
float: left;
border: none;
text-align: left;
width: 429px;
}

.smc-7-1 {
background: url(images/box1_topo.jpg) no-repeat left center;
border: none;
clear: both;
float: left;
height: 43px;
padding: 0px;
width: 429px;
}

.smc-7-2 {
background-image: url(images/box1_meio.jpg);
border: none;
clear: both;
float: left;
padding: 0px;
width: 429px;
}

.smc-7-3 {
background: url(images/box1_rodape.jpg) no-repeat left center;
border: none;
clear: both;
float: left;
height: 10px;
padding: 0px;
width: 429px;
}

.smc-6-2 {
border: none;
float: left;
padding: 0px;
width: 344px;
}

.smc-8 {
float: left;
border: none;
text-align: left;
width: 337px;

}

.smc-8-1 {
background: url(images/box3_topo.jpg) no-repeat left center;
border: none;
float: left;
clear: both;
height: 43px;
padding: 0px;
width: 337px;
}

.smc-8-2 {
background-image: url(images/box3_meio.jpg);
border: none;
clear: both;
float: left;
padding: 0px;
width: 337px;
}

.smc-8-3 {
background: url(images/box3_rodape.jpg) no-repeat left center;
border: none;
clear: both;
float: left;
height: 10px;
padding: 0px;
width: 337px;
}

.smc-10 {
border: none;
margin-left: auto;
margin-right: auto;
text-align: left;
width: 990px;
}

.smc-10-1 {
background-image: url(images/rodape.jpg);
border: none;
clear: both;
float: left;
padding: 0px;
width: 990px;
}

.titulo-topo {
float: left;
color: #8C0000;
font-weight:bold;
font-size:15px;
padding-top:13px;
height: 29px;
}

.titulo-topo h2{
float: left;
color:#036;
font-weight:bold;
font-size:18px;
height: 29px;
}

.titulo-topo a{
color:#036;
font-weight:bold;
font-size:15px;
padding-top:13px;
height: 29px;
text-decoration:none;
}

.smc-img-esq {
float:left;
width:30px;
margin:10px 2px 0 8px;

}

.smc-meio-conteudo span.border { 
   margin-bottom: 2px; 
height: 20px; 
overflow: hidden;
text-align:center;
width: 100%; 
display: block; 
background: url(images/linha.gif) center repeat-x; 
}

.smc-meio-conteudo h2 {
   font-size:18px; 
color: #036;
text-align:left;
margin-bottom:3px;
}

.smc-meio-conteudo h4 {
   font-size:18px; 
color: #B30000;
text-align:center;
}


.smc-meio-conteudo {
padding:5px 10px 0 8px;
font-size:12px;

}
.smc-meio-conteudo a{
font-weight:bold;
color:#000;
font-size:12px;
text-decoration:none;
}

.smc-meio-conteudo a:hover{
font-weight:bold;
color:#000;
font-size:12px;
text-decoration: underline;
}

.smc-meio-conteudo img{
border: solid 1px #FFF;
background:#FFF;
float:left;
margin-right:2px;
}

.smc-meio-conteudo h1{
font-size:14px;
font-weight:bold;
}

.smc-meio-conteudo h1 a{
color: #036;
font-size:14px;
font-weight:bold;
text-align:left;
text-decoration:none;
}

.smc-meio-conteudo h1 a:hover{
color:#036;
font-size:14px;
font-weight:bold;
text-align:left;
text-decoration: underline;
}

.smc-data {
  color: #999;
  font-size:10px;
  text-align: left;
}

.smc-meio-conteudo p{
padding:2px 0 2px 0;
text-align:left;
color: #5e5c5c;

}

.smc-linha {
border: 1px dotted #999;
margin:5px 0 5px 0;
text-align: center;
height:1px;

}

.smc-meio-conteudo ul {
padding: 0; 
   margin: 0;
}

.smc-meio-conteudo ul li{
margin:3px 0 13px 8px;
font-size:13px;
color:#036;
list-style:inside url(images/seta.jpg);
}

.smc-meio-conteudo ul li a{
margin:0; 
   padding:0;
font-size:14px;
color:#036;
text-decoration: none;

}

.smc-meio-conteudo ul li a:hover {
color:#036;
font-size:14px;
text-decoration:underline;	
}

.smc-menuv-tit {
font-weight:bold;
font-size:14px;
height:30px;
width:189px;
padding:9px 0 0 13px;

}

.smc-data2{
font-size:11px;
color:#FFF;
border:1px #436A6F solid;
background: #436A6F;
}

.smc-data3{
float:left;
font-size:14px;
color:#FFF;
border:1px #848D96 solid;
background: #848D96;
text-align:center;
width:40px;
height:25px;
margin:2px 3px 2px 0;
padding-top:8px;
}

.smc-ultimas {
float:left;
width:746px;
height:40px;
margin:0 0 1px 0;

}

#smc-categoria {
color: #999;
font-size:12px;
}

#smc-paginacao {
width:100%;
text-align:center;
margin:5px 0 20px 0;

}


/* MENU HORIZONTAL */

#navMenu{
float:center;
margin:1px 0 1px 0;
height:40px;
margin-left:3px;
}



#navMenu ul
{
     margin:0;
     padding:0;

}


#navMenu li{
    background:url(images/menu_h.jpg);
	margin-right:1px;
       list-style:none;
       float:left;
       position:relative;
       line-height:40px;
	width:122px;

}

#navMenu a {
font-weight: bold;
color: #FFF;
font-size:13px;
text-decoration: none;
display: block;
padding:  2px 5px;
margin: 0;
}

#navMenu .active a, #navMenu li:hover > a {
background: #722b19;
color: #fff;
margin: 0;
}


#navMenu ul li a
{
       text-align:center;
       font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:13px;
       text-decoration:none;
       height:40px;
       display:block;  
       color:#FFFFFF;
}

#navMenu ul ul
{
       position:absolute;
       visibility:hidden;


}
#navMenu ul li:hover ul
{
       visibility:visible;

}
#navMenu li:hover
{
       background-color:#036;
}


/*     MENU VERTICAL    */

.menu-vertical {
width:190px;
padding:0 5px 0 5px;
}


.menu-vertical ul {

   list-style-type: none;
   margin: 0;
   padding: 0;
   margin-bottom: 8px;

}

.menu-vertical ul li{

   padding-bottom: 2px; /*bottom spacing between menu items*/

}


.menu-vertical ul li a{

color: #000;
background: url(images/seta.jpg) no-repeat center left; 
display: block;
padding: 2px 0;
padding-left: 16px;
text-decoration: none;
border-bottom: 1px dotted #dadada;
font-size:13px;

}

.menu-vertical ul li a:hover {

font-size:13px;
color: #A70303;
background-color: #F3F3F3;

}

#smc-paginacao {
width:100%;
text-align:center;
margin:5px 0 20px 0;

}
-->
   </style>
</head>
<body>
	<div class="smc-1">

		<div class="smc-1-1"></div>
		<div class="smc-1-2">

       <div id="navMenu">
         <ul>

       <li><a href="#" title="Página inicial" alt="Página inicial">Principal</a> 
       </li>
         </ul>


         <ul>


       <li><a href="#">Link 1</a> 
         <ul>
           <li><a href="#">kkkkkkkkkkkkkkk</a></li>
           <li><a href="#">aaaaaaaa</a></li>
           <li><a href="#">kkkkkkkkkkkkkkk</a></li>
           <li><a href="#">aaaaaaaa</a></li>
         </ul>
       </li>
               </ul>

               <ul>

       <li><a href="#">Link 2</a> 
         <ul>
           <li><a href="#">kkkkkkkkkkkkkkk</a></li>
           <li><a href="#">aaaaaaaa</a></li>
           <li><a href="#">kkkkkkkkkkkkkkk</a></li>
           <li><a href="#">aaaaaaaa</a></li>
         </ul>
       </li>
               </ul>

               <ul>

       <li><a href="#">Link 3</a> 
         <ul>
           <li><a href="#">kkkkkkkkkkkkkkk</a></li>
           <li><a href="#">aaaaaaaa</a></li>
           <li><a href="#">kkkkkkkkkkkkkkk</a></li>
           <li><a href="#">aaaaaaaa</a></li>
         </ul>
       </li>

         </ul>

               <ul>

       <li><a href="#">Link 4</a> 
         <ul>
           <li><a href="#">kkkkkkkkkkkkkkk</a></li>
           <li><a href="#">aaaaaaaa</a></li>
           <li><a href="#">kkkkkkkkkkkkkkk</a></li>
           <li><a href="#">aaaaaaaa</a></li>
         </ul>
       </li>
         </ul>

                <ul>

       <li><a href="#">Link 5</a> 
         <ul>
           <li><a href="#">kkkkkkkkkkkkkkk</a></li>
           <li><a href="#">aaaaaaaa</a></li>
           <li><a href="#">kkkkkkkkkkkkkkk</a></li>
           <li><a href="#">aaaaaaaa</a></li>
         </ul>
       </li>
         </ul>

               <ul>


       <li><a href="#">Link 6</a> 
         <ul>
           <li><a href="#">kkkkkkkkkkkkkkk</a></li>
           <li><a href="#">aaaaaaaa</a></li>
           <li><a href="#">kkkkkkkkkkkkkkk</a></li>
           <li><a href="#">aaaaaaaa</a></li>
         </ul>
       </li>
         </ul>

               <ul>

       <li><a href="#">Link 7</a> 
         <ul>
           <li><a href="#">kkkkkkkkkkkkkkk</a></li>
           <li><a href="#">aaaaaaaa</a></li>
           <li><a href="#">kkkkkkkkkkkkkkk</a></li>
           <li><a href="#">aaaaaaaa</a></li>
         </ul>
       </li>
         </ul>


       </div>


         </div>
		<div style="clear: both;"></div>

	</div>

<div class="smc-2"><div class="smc-2-1">	
     <div class="smc-3">
				<div class="smc-3-1">
                   <div class="smc-menuv-tit">
                   Título 1
                   </div>

                   </div>

				<div class="smc-3-2">
                   <div class="menu-vertical">
                    <ul>
       <li class="page_item page-item-31"><a href="#" title="#">LINK 1</a></li>
                     </ul>
                    </div>

                 </div>
				<div class="smc-3-3">

                   <div class="smc-menuv-tit">
                   Título 2
                   </div>

                   </div>
				<div class="smc-3-4"> 
                   <div class="menu-vertical">
                    <ul>
                    <li><a href="#">Link 1 </a></li>

                    <li><a href="#">Link 2 </a></li>
                    <li><a href="#">Link 3 </a></li>
                    <li><a href="#">Link 4 </a></li>
                    <li><a href="#">Link 5 </a></li>
                    </ul>
                    </div>


                 </div>

				<div style="clear: both;"></div>
   </div>
			<div class="smc-4">
				<div class="smc-4-1">
                   Enquete

                   </div>
				<div style="clear: both;"></div>
			</div></div>			
		<div class="smc-2-2">
			<div class="smc-5">

			  <div class="smc-5-1">
                   <div class="smc-img-esq">
                   <img src="images/festa.jpg" width="23" height="25" />
                   </div>
                   <div class="titulo-topo">GALERIAS A<span class="mm">TUAIS </span></div>
                   <div class="controls"> 

                   <a href="#" class="pCarouselPrev"><img src="images/anterior2.jpg" alt="Anteriores" width="28" height="20" /></a>

           <a href="#" class="pCarouselNext"><img src="proximo2.jpg" alt="Próximos" width="28" height="20" /></a>

</div>

                   </div><div class="smc-5-2">
<div class="pCarouselWrapper">

<ul id="pCarousel" class="jcarousel-skin-dk">
<li>
	<div class="wrapper">
       <div class="ver-img">

		<a href="#"><img src="images/festa.jpg" alt="xxxxxxxx" width="150" /></span></a>
           </div>
           <div class="ver-nome">
             FESTA 1
             <p>Local:</p></div>
	</div>
</li>

<li>
	<div class="wrapper">

		<div class="ver-img">
		<a href="#"><img src="images/festa.jpg" alt="xxxxxx" width="150" /></span></a>
           </div>
           <div class="ver-nome">
           FESTA 2
           <p>Local:</p></div>
	</div>
</li>

<li>

	<div class="wrapper">
		<div class="ver-img">
		<a href="#"><img src="images/festa.jpg" alt="xxxxxx" width="150" /></span></a>
           </div>
           <div class="ver-nome">
              FESTA 3
             <p>Local:</p></div>
	</div>
</li>

<li>
	<div class="wrapper">
		<div class="ver-img">
		<a href="#"><img src="images/festa.jpg" alt="xxxxxxxx" width="150" /></span></a>
           </div>
           <div class="ver-nome">FESTA 4 <p>Local</p></div>
	</div>
</li>

<li>
	<div class="wrapper">
		<div class="ver-img">
		<a href="#"><img src="images/festa.jpg" alt="xxxxxxx" width="150" /></span></a>
           </div>
           <div class="ver-nome">FESTA 5 <p>Local</p></div>
	</div>

</li>

<li>
	<div class="wrapper">
		<div class="ver-img">
		<a href="#"><img src="images/festa.jpg" alt="xxxxxxxxxx" width="150" /></span></a>
           </div>
           <div class="ver-nome">FESTA 6 <p>local</p></div>

	</div>
</li>

<li>
	<div class="wrapper">
		<div class="ver-img">
		<a href="#"><img src="images/festa.jpg" alt="xxxxxxx" width="150" /></span></a>
           </div>
           <div class="ver-nome">FESTA 7
             <p>Local</p></div>

	</div>
</li>

<li>
	<div class="wrapper">
		<div class="ver-img">
		<a href="#"><img src="images/festa.jpg" alt="xxxxxxxxxx" width="150" /></span></a>
           </div>
           <div class="ver-nome">FESTA 8
             <p>Local</p></div>

	</div>
</li>

<li>
	<div class="wrapper">
		<div class="ver-img">
		<a href="#"><img src="images/festa.jpg" alt="xxxxxxx" width="150" /></span></a>
           </div>
           <div class="ver-nome">
           FESTA 9              
 <p>Local</p></div>

	</div>
</li>

<li>
	<div class="wrapper">
		<div class="ver-img">
		<a href="#"><img src="images/festa.jpg" alt="xxxxxxxxxxx" width="150" /></span></a>
           </div>
           <div class="ver-nome">
           FESTA 10              
 <p>Local</p></div>

	</div>
</li>

</ul>
</div>
</div>                      
				<div class="smc-5-3"></div>
				<div style="clear: both;"></div>
			</div>

			<div class="smc-6">
				<div class="smc-6-1">

					<div class="smc-7">
						<div class="smc-7-1">
                             <div class="smc-img-esq">
                           <img src="images/notic.jpg" width="23" height="25">
                           </div>
                           <div class="titulo-topo">
                           EM DESTAQUES
                          </div>
                           </div>

						<div class="smc-7-2">
                      <div class="smc-meio-conteudo"> 


                     <a href="#" ><img src="images/sem_imagem.jpg&w=110&h=90&zc=1&q=90" ></a>  

             <h1><a href="#" title="teste numero 4" alt="teste numero 4">teste numero 4</a></h1>

             <span class="smc-data"><i>Data: 10 de março de 2011</i></span>

             <p>texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto text... <a href="#" ><span class="smc-data2">  Leia +  </span></a></p>

                      <span class="border"></span>




                     <a href="#" ><img src="vitaminas-300x121.jpg&w=110&h=90&zc=1&q=90" ></a>  

             <h1><a href="#">Aliquam tincidunt, sapien a facilisis lacinia, eros mi tincidunt lorem...</a></h1>

             <span class="smc-data"><i>Data: 26 de janeiro de 2011</i></span>

             <p>Vestibulum tincidunt aliquam orci in ultricies. Suspendisse arcu est, molestie et mattis a, pretium ut nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia ... <a href="#"><span class="smc-data2">  Leia +  </span></a></p>

                      <span class="border"></span>

                           </div>
                           </div>
						<div class="smc-7-3"></div>
						<div style="clear: both;"></div>

					</div>
				</div>
				<div class="smc-6-2">
					<div class="smc-8">
						<div class="smc-8-1">
                           <div class="smc-img-esq">
                           <img src="images/agenda.jpg" width="27" height="25">
                           </div>
                           <div class="titulo-topo">

                            AGENDA  
                          </div>
                         </div>
						<div class="smc-8-2">


                           <div class="smc-meio-conteudo">
                           <h1><img src="images/seta.jpg" width="12" height="11"> <a href="#" >teste numero 4</a></h1>
                           <span class="smc-data"><i>Publicado em: 03/10/2011 - 02:47hs </i></span>

                           <span class="border"></span>



                           </div>

                           <div class="smc-meio-conteudo">
                           <h1><img src="images/seta.jpg" width="12" height="11"> <a href="#">Aliquam tincidunt, sapien a facilisis lacinia, eros mi tincidunt lorem, non varius ligula elit ac quam.</a></h1>
                           <span class="smc-data"><i>Publicado em: 01/26/2011 - 01:24hs </i></span>

                           <span class="border"></span>

                           </div>

                           <div class="smc-meio-conteudo">
                           <h1><img src="images/seta.jpg" width="12" height="11"> <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h1>
                           <span class="smc-data"><i>Publicado em: 01/26/2011 - 01:09hs </i></span>

                           <span class="border"></span>


                           </div>


                           </div>
						<div class="smc-8-3"></div>

						<div style="clear: both;"></div>
					</div>
				</div>
				<div style="clear: both;"></div>
			</div>

			<div class="smc-9">
				<div class="smc-9-1">
                    <div class="smc-img-esq">
                   <img src="images/notic.jpg" width="23" height="25">

                    </div>
                   <div class="titulo-topo">
                            OUTRAS NOTÍCIAS</div>
                   </div>
				<div class="smc-9-2">
                   <div class="smc-meio-conteudo">       



        <h1 class="smc-ultimas"> <div class="smc-data3">10/03</div>

         <a href="#">teste numero 4</a>

         <p id="smc-categoria">
      <i>Publicado em: Em Destaque </i>
         </p>

         </h1>
         <span class="border"></span>



        <h1 class="smc-ultimas"> <div class="smc-data3">26/01</div>

         <a href="#">Aliquam tincidunt, sapien a facilisis lacinia, eros mi tincidunt lorem, non varius ligula el...</a>

         <p id="smc-categoria">
      <i>Publicado em: Em Destaque </i>
         </p>

         </h1>
         <span class="border"></span>



        <h1 class="smc-ultimas"> <div class="smc-data3">26/01</div>

         <a href="#">Phasellus metus ligula; pharetra quis ullamcorper vel, commodo nec arcu. Cras consectetur la...</a>

         <p id="smc-categoria">
      <i>Publicado em: Em Destaque </i>
         </p>

         </h1>
         <span class="border"></span>



        <h1 class="smc-ultimas"> <div class="smc-data3">26/01</div>

         <a href="#">Quisque at leo eros, sit amet condimentum lectus. Nunc ac lobortis enim! Duis enim enim, acc...</a>

         <p id="smc-categoria">
      <i>Publicado em: Em Destaque </i>
         </p>

         </h1>
         <span class="border"></span>



        <h1 class="smc-ultimas"> <div class="smc-data3">26/01</div>

         <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>

         <p id="smc-categoria">
      <i>Publicado em: Em Destaque </i>
         </p>

         </h1>
         <span class="border"></span>




                   </div>

                   </div>
				<div class="smc-9-3"></div>
				<div style="clear: both;"></div>
			</div>
		</div>
		<div style="clear: both;"></div>
</div><div class="smc-10">

<div class="smc-10-1">
			<div align="center">rodape</div>
 </div>
		<div style="clear: both;"></div>
	</div>
</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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