Toggle sidebar
  • Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Problema risolto menu si accavallo sopra intestazione head

A

annachiara82

Nuovo utente
Autore del topic
12 Novembre 2014
38
0
Miglior risposta
0
salve sto creando un mio sito ho un problema che il menu' si accavalla sopra l'itestazione (head) sto creando il sito in html5 con menu html5 e css. come mai non riesco a capire

questo e il codice html
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
2e1uext.jpg
 
Ultima modifica da un moderatore:
sposto in assistenza tecnica , inoltre nel head non va body
Struttura base :

Codice:
Perfavore, Entra oppure Registrati per vedere i codici!

l'immagine si sovrappone perché va messa dopo il menù
 
Ultima modifica:
TBH ha detto:
sposto in assistenza tecnica , inoltre nel head non va body
Struttura base :

Codice:
Perfavore, Entra oppure Registrati per vedere i codici!

l'immagine si sovrappone perché va messa dopo il menù
Clicca per espandere...


volevo dire header scusa. non ho capito come l'immagine va messa dopo il menù.non ho cpaito bene

- - - Aggiornato - - -

nessuno risponde?

- - - Aggiornato - - -

Nessuno mi sa spiegare perche'? nessuno mi risponde?

- - - Aggiornato - - -

non ho capito tbh. hai detto che l'immaggine si sovrappone perche' va messa dopo il menu.quella e l'intestazione poi sotto va il menu' che ho costruito in html/css
 
annachiara82 ha detto:
volevo dire header scusa. non ho capito come l'immagine va messa dopo il menù.non ho cpaito bene

- - - Aggiornato - - -

nessuno risponde?

- - - Aggiornato - - -

Nessuno mi sa spiegare perche'? nessuno mi risponde?

- - - Aggiornato - - -

non ho capito tbh. hai detto che l'immaggine si sovrappone perche' va messa dopo il menu.quella e l'intestazione poi sotto va il menu' che ho costruito in html/css
Clicca per espandere...
Ha detto tutto TBH.
Sbagli l'impostazione che dovrebbe essere così:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
 
grazie per la risposta. mi potresti spiegare cosa avevo sbagliato perché vedo il codice uguale a quello mio. Gentilmente mi spieghi bene l'impostazione che ho sbagliato?
Grazie....
ho controllato il codice è identico a quello scritto da me
 
Ultima modifica:
Da quello che vedo nel tuo codice sembra essere tutta "sballata" l'impostazione dei tag <html> <head></head> <body> </body></html>.
 
allora ricapitoliamo vi incollo il codice che ho creato
<!DOKTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="it">
<meta charset="utf-8">
<title> benvenuti</title>
<script src="http//:html5 shiv.googlecode.com/svn/trunk/html5" js></script>
<style>
#header{
background-image:url(intestazione.jpg);
color:black;
text-align:center;
padding:5px;
}
#section{
width:1087px;
float:left;
padding:10px;
border-style:solid;
border-width:1px;
background:url(nuvole.jpg);
}
body { background: url(sfondobody.jpg); }

</style>
<link rel="stylesheet" type="text/css" href="stile.css">
</head>
<body>
<div id="header" style="height: 54px">
<img src="posturologia.jpg" height="125" align="left" width="145"><h1 style="height: 126px"> prova</h1>
</div>

<div <ul class="menu">
<li class="primo"><a href="home.htm"/a> HOME </li>
<li class="secondo"><a heref="chisono.htm"/a> CHI SONO </li>
<li>PRESTAZIONI
<ul class="sub-menu">
<li>111</li>
<li>22222</li>
<li class="ultimo-sub">444444</li>
</ul>
</li>
<li>CONTATTI <a href="contatti.htm"/a></li>
</div>

<div id="section">
<p>Testo</p>
</div>

</body>
</html>

il problema che non ci sono spazi e tutto si accavalla il menu' sopra l'intestazione e section dove inizia il testo non riesco a far rimanere lo spazio (in poche parole tutto attaccato)
vi faccio vedere l'immagine:
286uwlv.jpg


- - - Aggiornato - - -

annachiara82 ha detto:
allora ricapitoliamo vi incollo il codice che ho creato
<!DOKTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="it">
<meta charset="utf-8">
<title> benvenuti</title>
<script src="http//:html5 shiv.googlecode.com/svn/trunk/html5" js></script>
<style>
#header{
background-image:url(intestazione.jpg);
color:black;
text-align:center;
padding:5px;
}
#section{
width:1087px;
float:left;
padding:10px;
border-style:solid;
border-width:1px;
background:url(nuvole.jpg);
}
body { background: url(sfondobody.jpg); }

</style>
<link rel="stylesheet" type="text/css" href="stile.css">
</head>
<body>
<div id="header" style="height: 54px">
<img src="posturologia.jpg" height="125" align="left" width="145"><h1 style="height: 126px"> prova</h1>
</div>

<div <ul class="menu">
<li class="primo"><a href="home.htm"/a> HOME </li>
<li class="secondo"><a heref="chisono.htm"/a> CHI SONO </li>
<li>PRESTAZIONI
<ul class="sub-menu">
<li>111</li>
<li>22222</li>
<li class="ultimo-sub">444444</li>
</ul>
</li>
<li>CONTATTI <a href="contatti.htm"/a></li>
</div>

<div id="section">
<p>Testo</p>
</div>

</body>
</html>

il problema che non ci sono spazi e tutto si accavalla il menu' sopra l'intestazione e section dove inizia il testo non riesco a far rimanere lo spazio (in poche parole tutto attaccato)
vi faccio vedere l'immagine:
286uwlv.jpg
Clicca per espandere...

c'e' qualcuno che mi spiega come mai succede questo. rivedo e rivedo il codice non trovo nessun errore.
Grazie Annachiara
 
annachiara82 ha detto:
allora ricapitoliamo vi incollo il codice che ho creato
<!DOKTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="it">
<meta charset="utf-8">
<title> benvenuti</title>
<script src="http/:html5 shiv.googlecode.com/svn/trunk/html5" js></script>
<style>
#header{
background-image:url(intestazione.jpg);
color:black;
text-align:center;
padding:5px;
}
#section{
width:1087px;
float:left;
padding:10px;
border-style:solid;
border-width:1px;
background:url(nuvole.jpg);
}
body { background: url(sfondobody.jpg); }

</style>
<link rel="stylesheet" type="text/css" href="stile.css">
</head>
<body>
<div id="header" style="height: 54px">
<img src="posturologia.jpg" height="125" align="left" width="145"><h1 style="height: 126px"> prova</h1>
</div>

<div <ul class="menu">
<li class="primo"><a href="home.htm"/a> HOME </li>
<li class="secondo"><a heref="chisono.htm"/a> CHI SONO </li>
<li>PRESTAZIONI
<ul class="sub-menu">
<li>111</li>
<li>22222</li>
<li class="ultimo-sub">444444</li>
</ul>
</li>
<li>CONTATTI <a href="contatti.htm"/a></li>
</div>

<div id="section">
<p>Testo</p>
</div>

</body>
</html>

il problema che non ci sono spazi e tutto si accavalla il menu' sopra l'intestazione e section dove inizia il testo non riesco a far rimanere lo spazio (in poche parole tutto attaccato)
vi faccio vedere l'immagine:
286uwlv.jpg


- - - Aggiornato - - -



c'e' qualcuno che mi spiega come mai succede questo. rivedo e rivedo il codice non trovo nessun errore.
Grazie Annachiara
Clicca per espandere...

potresti postare il contenuto di stile.css ? ^^
 
.menu li{
display: block;
float: left;
width: 276.2px;
height: 50px;
line-height: 50px;
text-align: center;
color: #2C3E50;
border-right: 1px solid #2C3E50;
background: -webkit-linear-gradient(top, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
background: -moz-linear-gradient(top, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
background: -o-linear-gradient(top, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
background: -ms-linear-gradient(top, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);

}
.menu li:hover{
cursor: pointer;
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%);
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%);
background: -o-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%);
background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%);
color: slateGrey;
}
.primo{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.secondo{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.terzo{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}

.sub-menu{
visibility: hidden;
}
.menu li:hover .sub-menu{
visibility: visible;
}
.sub-menu li{
border-top: 1px dotted #2C3E50;
}
.sub-menu li:hover{
width: 145px;
background: -webkit-radial-gradient(center, ellipse cover, #f7fbfc 10%, #add9e4 100%);
background: -moz-radial-gradient(center, ellipse cover, #f7fbfc 10%, #add9e4 100%);
background: -o-radial-gradient(center, ellipse cover, #f7fbfc 10%, #add9e4 100%);
background: -ms-radial-gradient(center, ellipse cover, #f7fbfc 10%, #add9e4 100%);
transition: all 0.1s ease 0s;
-webkit-transition: all 0.1s ease 0s;
-moz-transition: all 0.1s ease 0s;
-o-transition: all 0.1s ease 0s;
-ms-transition: all 0.1s ease 0s;
}
.ultimo-sub{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

#menu li {display:inline;}
 
@annachiara82 ma l'immagine deve andare prima del menu ? se si basta eliminare dal header lo stile o porlo maggiore dello spazio occupato dall'immagine ^^

n.b si scrive Doctype
 
Allora il menu come si vede in figura se ne ca sopra l intestazione header invece deve stare sotto all intestazione. Poi il testo se ne ca sotto a menu invece vorrei ke il div del contenuto deve andare piu sotto.
 
annachiara82 ha detto:
Nessuno mi risponde?
Clicca per espandere...

nel post precedente t'ho già descritto soluzione devi eliminare lo style inline oppure impostarlo maggiore dell'altezza circa 300px. Io ti consiglio di eliminarlo ^^

n.b è presente anche quest'errore in questo modo il div section è contenuto in a
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
 
Ultima modifica:
allora ho cancellato nel file css. come detto da lei #menu li {display:inline;}
poi ho corretto nel div del menu' il rigo contatti come detto da lei.
mi rimane sempre tutto attaccato il menu' sopra ad impostazioni e section dove devo inserire contenuto rimane attaccato sotto a menu. non riesco a dare spazi:emoji_slight_frown: :emoji_slight_frown: :emoji_slight_frown: :emoji_slight_frown:

- - - Aggiornato - - -

sono riuscita a risolvere il problema da sola non era come diceva lei. il problema era impostare al css margin-top.
Cmq grazie di tutto per la gentilezza
Annachiara
 
annachiara82 ha detto:
allora ho cancellato nel file css. come detto da lei #menu li {display:inline;}
poi ho corretto nel div del menu' il rigo contatti come detto da lei.
mi rimane sempre tutto attaccato il menu' sopra ad impostazioni e section dove devo inserire contenuto rimane attaccato sotto a menu. non riesco a dare spazi:emoji_slight_frown: :emoji_slight_frown: :emoji_slight_frown: :emoji_slight_frown:

- - - Aggiornato - - -

sono riuscita a risolvere il problema da sola non era come diceva lei. il problema era impostare al css margin-top.
Cmq grazie di tutto per la gentilezza
Annachiara
Clicca per espandere...

ma io mi riferivo a questo per quanta riguarda l'intestazione del sito :

Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
la parte in rosso non serviva.
il margin-top serviva per distanziare il testo dal menù ^^,sposto tra i problemi risolti
 
Ultima modifica:
Devi accedere o registrarti per rispondere qui.
 
 
Top
Indietro