← HTML + CSS

Ajuda com o meu código CSS

Lida 2050 vezes

Offline

Dav7 
Membro
Mensagens 128 Gostos 8
Troféus totais: 27
Trófeus: (Ver todos)
Tenth year Anniversary Mobile User Windows User Super Combination Combination Topic Starter Level 5 Level 4 Level 3 Level 2

Preciso de ajuda para resolver um problema de CSS que tenho no template do meu blog

o problema está no menu, que neste momento está assim:

http://img217.imageshack.us/img217/6475/34107308.jpg

e noutra template minha (de onde copiei o código) tem este aspecto:

http://img529.imageshack.us/img529/8370/19905268.jpg

agora não percebo porque isto acontece se já copiei o CSS todo e os <div>

coloquei prints para n dizerem que estou a fazer pub ao meu blog :P

coloco aqui também o código CSS:



/*======Header====== */
#header {
    background: #85ACAC url(http://s310.photobucket.com/albums/kk426/magznetwork/revolutionlifestyle/header.png);
    width: 980px;
    height: 120px;
    color: #FFFFFF;
    font-size: 11px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
#header h1 {
    color: #FFFFFF;
    font-size: 36px;
    font-family: Arial, Tahoma, Verdana;
    font-weight: normal;
    margin: 0px;
    padding: 15px 0px 0px 20px;
    text-decoration: none;
}   
#header h1 a, #header h1 a:visited {
    color: #FFFFFF;
    font-size: 36px;
    font-family: Arial, Tahoma, Verdana;
    font-weight: normal;
    margin: 0px;
    padding: 0px;
    text-decoration: none;
}   
#header h1 a:hover {
    color: #FFFFFF;
    text-decoration: none;
}   
#header h3 {
    color: #7A3254;
    font-size: 16px;
    font-family: Arial, Tahoma, Verdana;
    font-weight: normal;
    margin: 0px;
    padding: 0px;
}   
#header .description {
    padding: 0px 0px 0px 20px;
    text-decoration: none;
}
#header p {
    color: #FFFFFF;
    padding: 0px 0px 5px 20px;
    margin: 0px;
    line-height: 20px;
}   
.headerleft {
    width: 460px;
    float: left;
    font-size: 14px;
    margin: 0px;
    padding: 0px;
}   
.headerleft a img {
    border: none;
    margin: 0px;
    padding: 0px;
}
.headerright {
    width: 486px;
    float: right;
    margin: 0px;
    padding: 18px 0px 0px 0px;
    font-weight: bold;
}   
.headerright a img {
    border: none;
    margin: 0px 0px 3px 0px;
    padding: 0px;
    border: 1px solid #FFFFFF;
}   
/*======Navbar====== */
#navbartop {
    background: url(http://www.cemet.biz/demo/eem/images/nav_bg.jpg) repeat-x;
    width: 980px;
    height: 35px;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    color: #FFFFFF;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
}
#navbarleft {
    width: 680px;
    float: left;
    margin: 0px;
    padding: 0px;
}   
#navbarright {
    width: 280px;
    font-size: 11px;
    float: right;
    margin: 0px;
    padding: 6px 0px 0px 0px;
}
#nav {
    margin: 0px;
    padding: 0px;
}   
#nav ul {
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
}
#nav li {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
#nav li a, #nav li a:link, #nav li a:visited {
    color: #495D5C;
    display: block;
    font-size: 16px;
    font-family: Arial, Tahoma, Verdana;
    font-weight: bold;
    text-transform: none;
    margin: 0px;
    padding: 8px 15px 8px 15px;
}
#nav li a:hover, #nav li a:active {
    background: #EBE6D4 url(http://s310.photobucket.com/albums/kk426/magznetwork/revolutionlifestyle/navhov.png);
    color: #495D5C;
    margin: 0px;
    padding: 8px 15px 8px 15px;
    text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #E1DCCA;
    width: 150px;
    color: #495D5C;
    font-size: 14px;
    font-family: Arial, Tahoma, Verdana;
    font-weight: normal;
    text-transform: none;
    float: none;
    margin: 0px;
    padding: 7px 10px 7px 10px;
    border-bottom: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
}
#nav li li a:hover, #nav li li a:active {
    background: #85ACAC;
    color: #FFFFFF;
    padding: 7px 10px 7px 10px;
}
#nav li {
    float: left;
    padding: 0px;
}
#nav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0px;
    padding: 0px;
}
#nav li li {
}
#nav li ul a {
    width: 140px;
}
#nav li ul a:hover, #nav li ul a:active {
}
#nav li ul ul {
    margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
}
#nav li:hover, #nav li.sfhover {
    position: static;
}   
/*======SubNavbar====== */
#subnavbar {
    background: #666666;
    width: 980px;
    height: 24px;
    font-size: 10px;
    font-family: Arial, Tahoma, Verdana;
    color: #FFFFFF;
    margin: 0px;
    padding: 0px;
}   
#subnav {
    margin: 0px;
    padding: 0px;
    float: left;
}   
#subnav ul {
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
}   
#subnav li {
    list-style: none;
    margin: 0px;
    padding: 0px;
}   
#subnav li a, #subnav li a:link, #subnav li a:visited {
    color: #FFFFFF;
    display: block;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    font-weight: bold;
    text-transform: none;
    margin: 0px;
    padding: 5px 13px 5px 13px;
}
#subnav li a:hover, #subnav li a:active {
    background: #85ACAC;
    color: #FFFFFF;
    text-decoration: none;
    margin: 0px;
    padding: 5px 13px 5px 13px;
}   
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
    background: #666666;
    width: 140px;
    float: none;
    margin: 0px;
    font-family: Arial, Tahoma, Verdana;
    font-weight: normal;
    float: none;
    padding: 5px 10px 5px 10px;
    border-bottom: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
}   
#subnav li li a:hover, #subnav li li a:active {
    background: #85ACAC;
    color: #FFFFFF;
    margin: 0px;
    padding: 5px 10px 5px 10px;
}
#subnav li {
    float: left;
    padding: 0px;
}
#subnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0px;
    padding: 0px;
}
#subnav li li {
}
#subnav li ul a {
    width: 140px;
}
#subnav li ul a:hover, #subnav li ul a:active {
}
#subnav li ul ul {
    margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
    left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
    left: auto;
}
#subnav li:hover, #subnav li.sfhover {
    position: static;
}

Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Tens ai alguns erros, o ul vem antes do li, a não ser que tenhas outro ul dentro do li no html, e tens varias vezes a mesma id se podias meter tudo numa só string...
Offline

Dav7 
Membro
Mensagens 128 Gostos 8
Troféus totais: 27
Trófeus: (Ver todos)
Tenth year Anniversary Mobile User Windows User Super Combination Combination Topic Starter Level 5 Level 4 Level 3 Level 2

eu ja reparei nisso, mas o cod não é meu, e ainda não tive coragem de alterar muito porque não tenho a certeza do que posso apagar :S
Offline

tonebiclas 
Membro
Mensagens 29 Gostos 0
Troféus totais: 16
Trófeus: (Ver todos)
Super Combination Combination Level 3 Level 2 Level 1 10 Posts First Post Karma Eighth year Anniversary Seventh year Anniversary

para veres CSS's que não estão a ser utilizados podes usar a extensão "Dust-me Selectors"

essa extensão pesquisa em todas as páginas de um domínio estilos definidos mas não utilizados

cumps ;)
Offline

João Godinho 
Membro
Mensagens 1755 Gostos 2
Troféus totais: 27
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

ve se não falta estes ";" no código CSS, se não tiver ele não funciona.