Problema Cambiamenti Header

RE: Cambiamenti Header

#1
Codice:
        <!DOCTYPE html>
<html lang="it" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Menu a tendina</title>

    <style type="text/css">
        @import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
/* Starter CSS for Menu */
#cssmenu {
  padding: 0;
  margin: 0;
  border: 0px none;
  width: auto
}
#cssmenu ul,
#cssmenu li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu ul {
  position: fixed;
  z-index: 597;
}
#cssmenu ul li {
  float: left;
  min-height: 1px;
  vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}
#cssmenu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
}
#cssmenu ul ul li {
  float: none;
}
#cssmenu ul ul ul {
  top: 0;
  left: 190px;
  width: 190px;
}
#cssmenu ul li:hover > ul {
  visibility: visible;
}
#cssmenu ul ul {
  bottom: 0;
  left: 0;
}
#cssmenu ul ul {
  margin-top: 0;
}
#cssmenu ul ul li {
  font-weight: normal;
}
#cssmenu a {
  display: block;
  line-height: 1em;
  text-decoration: none;
}
/* Custom CSS Styles */
#cssmenu {
  background: #333333;
  border-bottom: 4px solid #1b9bff;
  font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
  font-size: 12px;
}
#cssmenu > ul {
  *display: inline-block;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both
}
#cssmenu ul {
  text-transform: uppercase;
}
#cssmenu ul ul {
  border-top: 4px solid #1b9bff;
  text-transform: none;
  min-width: 190px;
}
#cssmenu ul ul a {
  border-left:1px solid #0082e7; border-right:1px solid #0082e7; border-bottom:1px solid #0082e7; background:#1b9bff; color: #ffffff;
  border-top: 0px none;
  line-height: 150%;
  font-size: 12px; padding-left:20px; padding-right:20px; padding-top:16px; padding-bottom:16px
}
#cssmenu ul ul ul {
  border-top: 0px none;
}
#cssmenu ul ul li {
  position: relative;
}
#cssmenu ul ul li:first-child > a {
  border-top: 1px solid #0082e7;
}
#cssmenu ul ul li:hover > a {
  background: #4eb1ff;
  color: #ffffff;
}
#cssmenu ul ul li:last-child > a {
  -moz-border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -moz-box-shadow: 0 1px 0 #1b9bff;
  -webkit-box-shadow: 0 1px 0 #1b9bff;
  box-shadow: 0 1px 0 #1b9bff;
}
#cssmenu ul ul li:last-child:hover > a {
  -moz-border-radius: 0 0 0 3px;
  -webkit-border-radius: 0 0 0 3px;
  border-radius: 0 0 0 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#cssmenu ul ul li.has-sub > a:after {
  content: '+';
  position: fixed;
  top: 50%;
  right: 15px;
  margin-top: -8px;
}
#cssmenu ul li:hover > a,
#cssmenu ul li.active > a {
  background: #1b9bff;
  color: #ffffff;
}
#cssmenu ul li.has-sub > a:after {
  content: '+';
  margin-left: 5px;
}
#cssmenu ul li.last ul {
  left: auto;
  right: 0;
}
#cssmenu ul li.last ul ul {
  left: auto;
  right: 99.5%;
}
#cssmenu a {
  background: #333333;
  color: #CBCBCB;
  padding: 0 20px;
}
#cssmenu > ul > li > a {
  line-height: 48px;
  font-size: 12px;
}
</style>
</head>
<body>
    <div id="cssmenu">
        <!-- Lista generale -->
        <ul>
            <!-- 1° Elemento    -->
            <li><a href="http://pokemonworldcommunity.altervista.org/">Home</a>
              <ul>
                    <li><a href="http://pokemonworldcommunity.altervista.org/forumdisplay.php?fid=3">Pokèmon World Community</a></li>
                    <li><a href="http://pokemonworldcommunity.altervista.org/forumdisplay.php?fid=14">Mondo Nintendo</a></li>
                  <li><a href="http://pokemonworldcommunity.altervista.org/forumdisplay.php?fid=22">Mondo Pokèmon</a></li>
                  <li><a href="http://pokemonworldcommunity.altervista.org/forumdisplay.php?fid=60">Battling</a></li>
                    <li><a href="http://pokemonworldcommunity.altervista.org/forumdisplay.php?fid=47">Progetti e Hack</a></li>
                  <li><a href="http://pokemonworldcommunity.altervista.org/forumdisplay.php?fid=31">Svago e Passatempi</a></li>
                </ul>
            </li>
            
            <!-- 2° Elemento -->
            <li><a href="http://pokemonworldcommunity.altervista.org/portal.php">News</a></li>
            
            <!-- 3° Elemento: (Sottomenu) -->
            <li>
                <a href="#">Sezioni</a>
                <ul>
                    <li><a href="#">Windows</a></li>
                    <li><a href="#">Sicurezza</a></li>
                    <li><a href="#">Attualità</a></li>
                </ul>
            </li>
            <li><a href="#">Mi presento</a></li>
        </ul>
    </div>
</body>
</html>
<br />
Vedi questo codice, l'ho trovato su un sito per aggiungere dei menù a tendina... Ora sto cambiando completamente l'Header e vorrei far parecchie cose... Infatti se vedi non troverai nè i menu di navigazione, ne il nome del forum... semplicemente perchè l'Header di Square non mi convince più di tanto...
Il mio schema di Header è questo:

BARRA DI RICERCA RAPIDA                    MENU                            WELCOMEBLOCK


(Ovviamente, questa è la parte che interessa il membro, quella più importante; ovvio che c'è il resto dell'Header poi...)

Il problema: come? intanto se metto quel codice per i menù si stravolge la pagina, e lo sfondo diventa strano... Come mai?

Poi vorrei che tutto quello schemino fosse in Position: fixed... Ma il problema è che quando lo faccio si stravolgono le posizioni degli elementi... 

Poi vorrei aggiungere la barra di ricerca rapida che in Square non è disponibile... come la metto?


Altra cosa: vorrei che si vedesse il vero logo impostato nella directory, ma come? E magari quello spazio blu ristretto, è troppo alto; e poi vorrei aggiungerci un'immagine di sfondo li, non quel blu...

Poi ci sono altre cose, ma facciamo una cosa alla volta, non voglio mettervi l'ansia...

Poi ecco il link al mio forum: http://pokemonworldcommunity.altervista.org/ così potete capire meglio... e nel caso vorreste vedere meglio i miei template posso crearvi un'account con accesso all'ACP, ovviamente se me lo richiedete...

Questa è la più grande modifica che aspetto di fare da sempre... ma non ci sono mai riuscito, ci ho provato in ogni modo (a volte facendo casino XD)


Grazie mille... Wink 
 

RE: Cambiamenti Header

#2
AGGIORNATO CON I NUOVI MENU DEL TEMPLATE, NON CAMBIA PRATICAMENTE NNT
 

RE: Cambiamenti Header

#3
praticamente inserendo quel codice, tutti gli altri elementi dell'header sono andati a "puttane"?
 

RE: Cambiamenti Header

#4
@Simone si, vai a vedere nel link come si vede... io vorrei impostarlo con position: fixed, e ovviamente più sopra
 

RE: Cambiamenti Header

#5
@Simone ecco il nuovo codice:
Codice:
        <!DOCTYPE html>
<html lang="it" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Menu a tendina</title>

    <style type="text/css">
        @import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
/* Starter CSS for Menu */
#cssmenu {
  padding: 0;
  margin: 0;
  border: 0px none;
  width: auto
}
#cssmenu ul,
#cssmenu li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu ul {
  position: fixed;
  z-index: 597;
}
#cssmenu ul li {
  float: left;
  min-height: 1px;
  vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}
#cssmenu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
}
#cssmenu ul ul li {
  float: none;
}
#cssmenu ul ul ul {
  top: 0;
  left: 190px;
  width: 190px;
}
#cssmenu ul li:hover > ul {
  visibility: visible;
}
#cssmenu ul ul {
  bottom: 0;
  left: 0;
}
#cssmenu ul ul {
  margin-top: 0;
}
#cssmenu ul ul li {
  font-weight: normal;
}
#cssmenu a {
  display: block;
  line-height: 1em;
  text-decoration: none;
}
/* Custom CSS Styles */
#cssmenu {
  background: #333333;
  border-bottom: 4px solid #1b9bff;
  font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
  font-size: 12px;
}
#cssmenu > ul {
  *display: inline-block;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both
}
#cssmenu ul {
  text-transform: uppercase;
}
#cssmenu ul ul {
  border-top: 4px solid #1b9bff;
  text-transform: none;
  min-width: 190px;
}
#cssmenu ul ul a {
  border-left:1px solid #0082e7; border-right:1px solid #0082e7; border-bottom:1px solid #0082e7; background:#1b9bff; color: #ffffff;
  border-top: 0px none;
  line-height: 150%;
  font-size: 12px; padding-left:20px; padding-right:20px; padding-top:16px; padding-bottom:16px
}
#cssmenu ul ul ul {
  border-top: 0px none;
}
#cssmenu ul ul li {
  position: relative;
}
#cssmenu ul ul li:first-child > a {
  border-top: 1px solid #0082e7;
}
#cssmenu ul ul li:hover > a {
  background: #4eb1ff;
  color: #ffffff;
}
#cssmenu ul ul li:last-child > a {
  -moz-border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -moz-box-shadow: 0 1px 0 #1b9bff;
  -webkit-box-shadow: 0 1px 0 #1b9bff;
  box-shadow: 0 1px 0 #1b9bff;
}
#cssmenu ul ul li:last-child:hover > a {
  -moz-border-radius: 0 0 0 3px;
  -webkit-border-radius: 0 0 0 3px;
  border-radius: 0 0 0 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#cssmenu ul ul li.has-sub > a:after {
  content: '+';
  position: fixed;
  top: 50%;
  right: 15px;
  margin-top: -8px;
}
#cssmenu ul li:hover > a,
#cssmenu ul li.active > a {
  background: #1b9bff;
  color: #ffffff;
}
#cssmenu ul li.has-sub > a:after {
  content: '+';
  margin-left: 5px;
}
#cssmenu ul li.last ul {
  left: auto;
  right: 0;
}
#cssmenu ul li.last ul ul {
  left: auto;
  right: 99.5%;
}
#cssmenu a {
  background: #333333;
  color: #CBCBCB;
  padding: 0 20px;
}
#cssmenu > ul > li > a {
  line-height: 48px;
  font-size: 12px;
}
</style>
</head>
<body>
    <div id="cssmenu">
        <!-- Lista generale -->
        <ul>
            <!-- 1° Elemento    -->
            <li><a href="http://pokemonworldcommunity.altervista.org/">Home</a>
               <ul>
                    <li><a href="http://pokemonworldcommunity.altervista.org/forumdisplay.php?fid=3">Pokèmon World Community</a></li>
                    <li><a href="http://pokemonworldcommunity.altervista.org/forumdisplay.php?fid=14">Mondo Nintendo</a></li>
                   <li><a href="http://pokemonworldcommunity.altervista.org/forumdisplay.php?fid=22">Mondo Pokèmon</a></li>
                   <li><a href="http://pokemonworldcommunity.altervista.org/forumdisplay.php?fid=60">Battling</a></li>
                    <li><a href="http://pokemonworldcommunity.altervista.org/forumdisplay.php?fid=47">Progetti e Hack</a></li>
                   <li><a href="http://pokemonworldcommunity.altervista.org/forumdisplay.php?fid=31">Svago e Passatempi</a></li>
                </ul>
            </li>
            
            <!-- 2° Elemento -->
            <li><a href="http://pokemonworldcommunity.altervista.org/portal.php">News</a></li>
            
            <!-- 3° Elemento: (Sottomenu) -->
            <li>
                <a href="#">Sezioni</a>
                <ul>
                    <li><a href="#">Windows</a></li>
                    <li><a href="#">Sicurezza</a></li>
                    <li><a href="#">Attualità</a></li>
                </ul>
            </li>
            <li><a href="#">Mi presento</a></li>
        </ul>
    </div>
</body>
</html>
<br />

Ora aggiorno anche il primo post...

Ora se vai nel mio forum troverai questa barra... questa cosa è quasi risolta:
vedi quella barra di pochi pixel alta celeste affianco al menu che non scende? ecco, vorrei togliere quella, ma non capisco quale parte del topic toccare...
Poi vorrei fosse centrata la barra, come faccio? grazie mille...
 

RE: Cambiamenti Header

#6
Per quella piccola barra celeste devi andare nel template header. Devi cercare questa parte di codice, dovrebbe stare all'inizio:
Codice:
#cssmenu {
  background: #333333;
  border-bottom: 4px solid #1b9bff;
  font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
  font-size: 12px;
}

Devi rimuovere "border-bottom: 4px solid #1b9bff;"

Per metterlo centrato è troppo complicato perchè andrebbe modificato tutto il codice
 

RE: Cambiamenti Header

#7
@chack1172 va bene, grazie, ma il problema è che agli altri lati dovrei metterere altre cose (puoi vedere lo schema al primo post)...
In che senso tutto il codice? non basta aggiungere un pezzo che centra il tutto? o magari modificare un pezzo che dice di stare a sinistra?
 

RE: Cambiamenti Header

#8
@chack1172 poi nello sfondo blu dove ci sarebbe il logo ho inserito uno sfondo da link del database (/images/square/background.png), e compare ancora lo sfondo blu... puoi vedere se ho sbagliato qualcosa?

Se altri che non sono Admin del forum vogliono controllare sull'ACP cosa è successo, mi mandino un MP così gli creo account admin per vedere... Grazie
 

RE: Cambiamenti Header

#9
UP...
 

RE: Cambiamenti Header

#10
UP... Sto Uppando a tutti i miei Topic per averli nella lista Ultimi Argomenti.
 
  

Vai al forum:


Utenti in questa pagina: 1 Ospite(i)