boa noite pessoal, eu estou a fazer um site, mas não tenho grandes conhecimentos e vou vendo uns exemplos pela net para tentar fazer alguma coisa.
Neste momento estou com um problema, existem páginas onde eu uso duas listas, uma como menu principal e outra como menu auxiliar e gostava de ter configurações diferentes para as duas listas, mas acontece que alterando uma estrago a outra.
eu tenho o seguinte código
desde já obrigado pela ajuda.
Neste momento estou com um problema, existem páginas onde eu uso duas listas, uma como menu principal e outra como menu auxiliar e gostava de ter configurações diferentes para as duas listas, mas acontece que alterando uma estrago a outra.
eu tenho o seguinte código
- estrutura da páginaCódigo :<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id ="container">
<div id = "header"></div>
<div id='menu'>
<?php include("menuht.html");
?>
</div>
<div id = "space"></div>
<div id = "mainbody"></div>
<div id = "sidebar"><?php include("auxmenu.html");?></div>
<div id = "space"></div>
<div id = "footer"><?php include("footer.php")?></div>
<div id = "space"></div>
</div>
</body> - css da página
- Código :/*css*/
/* a:link
{
text-decoration:none;
color:#FFF;
} */
body{
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
background-image: url("../images/bg1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
font-family: arial, Tahoma, sans-serif;
font-size:14px;
color:#000;
background-position: 50% 50%;
text-decoration: none;
}
.img:hover {
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;
}
#container{
width:800px;
height:400px;
margin-left:auto;
margin-right:auto;
margin-top:11px;
margin-bottom:21px;
}#header{
height:150px;
/* background-color:#ccc; */
}
#menu{
margin-left:auto;
margin-right:auto;
height:40px;
background-image: url("../images/bg_div.png");
}
#space{
height:10px;
clear:both;
}
#mainbody{
padding-top:15px;
width:600px;
height:100%;
float:left;
background-image: url("../images/bg_div.png");
}
#sidebar{
padding-top:15px;
width:200px;
height:100%;
background-image: url("../images/bg_div.png");
float:right;
}
#footer{
padding-top:20px;
background-image: url("../images/bg_div.png");
height:40px;
clear:both;
text-align:center;
font-size:12px;
color:#FFF;
font-weight: bold;
text-decoration: none;
} - página com a construção do menu
- Código :<!doctype html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/menuhtml.css">
</head>
<body>
<nav id="navigation" class="site-navigation" role="navigation">
<ul class="menu">
<li class="menu-item"><a href="index.php">Home</a></li>
<li class="menu-item"><a href="#">Quem Somos</a></li>
<li class="menu-item"><a href="#">Noticias</a></li>
<li class="menu-item"><a href="#">Provas</a>
<ul class="dropdown">
<li class="menu-item sub-menu"><a href="luso.php">Luso Galaico</a></li>
<li class="menu-item sub-menu"><a href="#">Valongo Extreme</a></li>
<li class="menu-item sub-menu"><a href="#">Subida Impossível</a></li>
<li class="menu-item sub-menu"><a href="#">Extreme Ribeira Grande</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Contactos</a></li>
</ul>
</nav>
</body>
</html> - css da página do menu
- Código :.site-navigation {
display: block;
font-family: 'Titillium Web', sans-serif;
font-size: 14px;
font-weight: bold;
/* margin: 40px; */
}
.site-navigation ul {
background: #3498DB;
list-style: none;
margin: 0;
padding-left: 0;
}.site-navigation li {
color: #fff;
background: #2C3539;
display: block;
float: left;
margin: 0 2px 0 0;
padding: 12px;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
.site-navigation li a {
color: #fff;
text-decoration: none;
display: block;
}
.site-navigation li:hover {
@include transition(background, 0.2s);
background: #52a6df;
cursor: pointer;
}.site-navigation ul li ul {
background: #52a6df;
visibility: hidden;
float: left;
min-width: 150px;
position: absolute;
transition: visibility 0.65s ease-in;
margin-top:12px;
left: 0;
z-index: 999;
}
.site-navigation ul li:hover > ul,
.site-navigation ul li ul:hover {
visibility: visible;
}.site-navigation ul li ul li {
clear: both;
padding: 5px 0 5px 18px;
width: 100%;
}
.site-navigation ul li ul li:hover {
background: #74b7e4;
} - código da página auxmenu.htmlCódigo :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
</style>
<link href="css/auxmenu.css" rel="stylesheet" type="text/css">
</head><body>
<div class="sidecontainer">
<div class="social">
<img src="images/facebook.png" width="36" height="36">
<img src="images/youtube.png" width="36" height="36">
</div>
<div class="menuaux">
<ul class="listaauxul">
<li class="listaauxli"><a href="inscrever.php">Regulamento</a></li>
<li class="listaauxli"><a href="inscrever.php">Regulamento Prova</a></li>
<li class="listaauxli"><a href="inscrever.php">Inscrever</a></li>
<li class="listaauxli"><a href="inscritos.php">Lista Inscritos</a></li>
</ul>
</div>
</div>
</body></html> - css da página auxmenu.html
- Código :@charset "utf-8";
/* CSS Document */
.social{
float:right;
padding-right:10px;
}
.menuaux{
padding-top:10px;
clear:both;
color:#FFF;
font-weight: bold;
}
ul {
list-style-type: none;
}
ul li a{
list-style-type: none;
color:#FFF;
}
li:hover a {
color:#000;
}
a:link
{
font-size:14px;
text-decoration:none;
color:#FFF;
font-weight: bold;
}
desde já obrigado pela ajuda.