» Menu e Sub Menu

pixmania · 08-01-12, 22:57

Salve a tutto il forum! Mi chiamo Daniela e da molto tempo seguo il sito e il forum di GT e devo dire che ho sempre trovato quello che cercavo. Putroppo oggi ho un porblema con il menu di un sito. Ho cercato nel forum ma non ho torvato nulla di ciò.

Brevemente, il mio problema è questo: ho un menu al quale vorrei applicare un sub menu. Ho fatto comparire il sub-menu in qualche modo, ma, lo vedo solo a metà! Cioè il sub-menu viene nascosto da un DIV presente sotto al menu.

Mi sono espresso bene? Spero...

Credetemi ho fatto 1000 tentativi, dato che non sono una che si arrende facilmente, ma questo problema proprio non riesco a risolverlo. Che dire... mi affido a voi! Anzi, mi butto sulla vostra saggezza.

Vi posto il codice pulito, senza quella schifezza di sub-menu
Ecco il mio HMTL & CSS:

HTML

Codice HTML:

<head>
<meta  http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>

<link href="css/style.css" rel="stylesheet" />

</head>

<body>

    <div id="container">
    
        <div id="header">
            <h1>##</h1>
            <small>########</small>
        </div><!--end header-->
        
        <ul id="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home2</a></li>
                <li><a href="#">Home3</a></li>

QUI DOVREBBE ESSERCI IL SUB MENU :-/

                <li><a href="#">Home4</a></li>
                <li><a href="#">Home5</a></li>
                <li><a href="#">Home6</a></li>
            </ul>
        </ul><!--end nav-->
        
      <div id="banner">
            <h1>Contenuto</h1>
            <p>Contenuto!</p>
        </div><!--end  banner-->
        
        <div id="main">
        
            <div id="primary">
                <h2>Intestazione</h2>
                <p>
                Contenuto!
                </p>
                <br />
                <br />
                <br />
                <br />
                <br />
            </div>
            <!--end primary-->

        </div><!--end main-->
        
    </div><!--end container-->
    
    <div id=”footerWrap”>
        <div id=”footer”>
                      <p id=”footerInfo”>&copy; 2012 | <a href=”#”>#</a></p>
               </div><!-- end footer -->
    </div><!-- end footerWrap-->

</body>
</html>

CSS

Codice HTML:

@charset "utf-8";
/* CSS Document */

html {
    background-color:#EFEFEF;
}

body {
    text-align:center;
     font-family:Arial, Helvetica, sans-serif;
    font-size:100%;
}

a {
    text-decoration:none;
}

a:hover {
    text-decoration:underline;
    /* color:#FFFFFF; */
}

p {
    color:#43433f;
    line-height:21px;
}

h2 {
    color:#363era;
    font-size:30px;
}

li {
     list-style:none;
}

#container {
    margin:auto;
    width:921px;
    text-align:left;
}

#header {
    position:relative;
}

#header h1 {
    text-indent:5px;
}

#header small {
    color:#a3a3a3;
    position:absolute;
    font-size:14px;
    top:.63em;
    left:203px;
}

#nav {
    background-color:#000;
    overflow:hidden;
    height:57px;
    margin:0 0 6px 0;
    padding:0 0 0 31px;
}

#nav li {
    float:left;
    line-height:57px;
}

#nav li:hover {
    float:left;
    line-height:57px;
    background-color:#339933;
}

#nav li a {
    border-right:1px dotted #aab391;
    padding: 0 1em;
    color:#FFFFFF;
}

#banner {
    height:243px;
    border-top:1px solid #4d688d;
    background-color:#4d688d;
    position:relative;
    z-index:2px;
    margin-bottom:-2.8em;
}

#banner h1 {
    margin-left:247px;
    margin-bottom:0px;
    margin-top:46px;
    color:#ececec;
}

#banner p {
    margin-right:226px;
    margin-left:247px;
    color:#ececec;
    font-size:18px;
    margin-top:.8em;
}

#main {
    position:relative;
    background-color:#FFFFFF;
    padding-bottom:2em;
    
}

#primary {
    background-color:#e6e6e6;
}

#primary h2 {
    padding:26px 0 10px 0;
    margin-left:26px;
    margin-right:57px; /* may remove */
    border-bottom:2px dotted #aab391;
}

#primary p {
    padding-left:36px;
}

/* ------------------------------------

content main here 

------------------------------------ */

#footerWrap {
    border-top: 1px solid white;
    background: #32251f;
}

#footer {
    overflow: hidden;
    color: #a68a7d;
    width: 1002px;
    margin: auto;
    text-align: left;
    padding-top: 35px;
    font-size: 11px;
    line-height: 17px;
    text-transform: uppercase;
    border-right: 1px solid #48362d;
    border-left: 1px solid #48362d;
}

#footer p {
    color: #a68a7d;
    font-size: 11px;
}

/* ------------------------------------

#footer #footerLogo {
    float: left;
    background: #291e18;
    width: 348px;
    text-align: center;
    padding-top: 2.5em;
    padding-bottom: 3em;
    margin-right: 32px;
    margin-top: -35px;
    border-right: 1px solid #48362d;
}

------------------------------------ */

#footer strong a, #footer p a {
    color: white;
    font-weight: bold;
}

#footer p#footerInfo {
    float: right;
    padding-right: 45px;
    margin-top: -17px;
}

Quello è il codice pulito, senza quella schifezza di sub-menu. Il sub-menu dovrebbe comparire sotto la voce Home3 ma viene nascosto dal DIV BANNER sottostante.

Vi ringrazio anticipatamente!

Daniela

08-01-12, 22:57	#1 (permalink)
pixmania Banned Data di registrazione: Jan 2012 Ubicazione: Sondrio Messaggi: 1	Menu e Sub Menu Salve a tutto il forum! Mi chiamo Daniela e da molto tempo seguo il sito e il forum di GT e devo dire che ho sempre trovato quello che cercavo. Putroppo oggi ho un porblema con il menu di un sito. Ho cercato nel forum ma non ho torvato nulla di ciò. Brevemente, il mio problema è questo: ho un menu al quale vorrei applicare un sub menu. Ho fatto comparire il sub-menu in qualche modo, ma, lo vedo solo a metà! Cioè il sub-menu viene nascosto da un DIV presente sotto al menu. Mi sono espresso bene? Spero... Credetemi ho fatto 1000 tentativi, dato che non sono una che si arrende facilmente, ma questo problema proprio non riesco a risolverlo. Che dire... mi affido a voi! Anzi, mi butto sulla vostra saggezza. Vi posto il codice pulito, senza quella schifezza di sub-menu Ecco il mio HMTL & CSS: HTML Codice HTML: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento senza titolo</title> <link href="css/style.css" rel="stylesheet" /> </head> <body> <div id="container"> <div id="header"> <h1>##</h1> <small>########</small> </div><!--end header--> <ul id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Home2</a></li> <li><a href="#">Home3</a></li> QUI DOVREBBE ESSERCI IL SUB MENU :-/ <li><a href="#">Home4</a></li> <li><a href="#">Home5</a></li> <li><a href="#">Home6</a></li> </ul> </ul><!--end nav--> <div id="banner"> <h1>Contenuto</h1> <p>Contenuto!</p> </div><!--end banner--> <div id="main"> <div id="primary"> <h2>Intestazione</h2> <p> Contenuto! </p> <br /> <br /> <br /> <br /> <br /> </div> <!--end primary--> </div><!--end main--> </div><!--end container--> <div id=”footerWrap”> <div id=”footer”> <p id=”footerInfo”>*©* 2012 \| <a href=”#”>#</a></p> </div><!-- end footer --> </div><!-- end footerWrap--> </body> </html> CSS Codice HTML: @charset "utf-8"; /* CSS Document / html { background-color:#EFEFEF; } body { text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:100%; } a { text-decoration:none; } a:hover { text-decoration:underline; / color:#FFFFFF; / } p { color:#43433f; line-height:21px; } h2 { color:#363era; font-size:30px; } li { list-style:none; } #container { margin:auto; width:921px; text-align:left; } #header { position:relative; } #header h1 { text-indent:5px; } #header small { color:#a3a3a3; position:absolute; font-size:14px; top:.63em; left:203px; } #nav { background-color:#000; overflow:hidden; height:57px; margin:0 0 6px 0; padding:0 0 0 31px; } #nav li { float:left; line-height:57px; } #nav li:hover { float:left; line-height:57px; background-color:#339933; } #nav li a { border-right:1px dotted #aab391; padding: 0 1em; color:#FFFFFF; } #banner { height:243px; border-top:1px solid #4d688d; background-color:#4d688d; position:relative; z-index:2px; margin-bottom:-2.8em; } #banner h1 { margin-left:247px; margin-bottom:0px; margin-top:46px; color:#ececec; } #banner p { margin-right:226px; margin-left:247px; color:#ececec; font-size:18px; margin-top:.8em; } #main { position:relative; background-color:#FFFFFF; padding-bottom:2em; } #primary { background-color:#e6e6e6; } #primary h2 { padding:26px 0 10px 0; margin-left:26px; margin-right:57px; / may remove / border-bottom:2px dotted #aab391; } #primary p { padding-left:36px; } / ------------------------------------ content main here ------------------------------------ / #footerWrap { border-top: 1px solid white; background: #32251f; } #footer { overflow: hidden; color: #a68a7d; width: 1002px; margin: auto; text-align: left; padding-top: 35px; font-size: 11px; line-height: 17px; text-transform: uppercase; border-right: 1px solid #48362d; border-left: 1px solid #48362d; } #footer p { color: #a68a7d; font-size: 11px; } / ------------------------------------ #footer #footerLogo { float: left; background: #291e18; width: 348px; text-align: center; padding-top: 2.5em; padding-bottom: 3em; margin-right: 32px; margin-top: -35px; border-right: 1px solid #48362d; } ------------------------------------ */ #footer strong a, #footer p a { color: white; font-weight: bold; } #footer p#footerInfo { float: right; padding-right: 45px; margin-top: -17px; } Quello è il codice pulito, senza quella schifezza di sub-menu. Il sub-menu dovrebbe comparire sotto la voce Home3 ma viene nascosto dal DIV BANNER sottostante. Vi ringrazio anticipatamente! Daniela
	Ultima modifica di pixmania : 08-01-12 23:13.

Condividi questo contenuto nei Social Network:		Tweet
Ti stiamo aspettando: Registrati subito e gratis. Entra a far parte di una delle comunità più attive in Italia. Se hai dimenticato i tuoi dati li puoi recuperare subito.

Strumenti di discussione
Visualizza la versione stampabile Invia la pagina tramite email