Ciao a tutti,
mi sono appena registrata al vostro sito;
Sito, molto utile e che utilizzo spesso per imparare a creare siti, da autodidatta!
Ho un problema che non riesco a risolvere,
collegato al restyling e aggiornamento di un sito esistente,
il sito è www.ecoges.eu
Per cercare di risolvere il fastidioso problema di scivolamento dei link della barra,
(dovuto, ho scoperto poi alla proprietà position:absolute!)
Di scivolamento se n'è creato un'altro,
cioè dell'intero contenuto, del box main, da cosa dipende?
Questo il codice:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Sito professionale di consulenze e progettazioni ambientali, difesa del suolo, pianificazione territoriale" >
<meta name="keywords" content="geologia, geotecnica, ambiente, ecologia, environment, geotechnics, geology" >
<meta name="robots" content="index, follow" >
<meta name="author" content=Erica Rosimiro">
<meta charset="UTF-8">
<link href="css/stile.css" rel="stylesheet" type="text/css" media="all"/>
<title>::: eco GES Engineering ::: Presentazione</title>
</head>
<body>
<div id="contenitore"><img src="img/sicurezza02.jpg" width="760" height="156" alt="header">
<div id="header">
</div>
<div id="barra">
<ul id="nav">
<li class="topmenu"><a href="news.htm" title="News"><span>News</span></a>
</li>
<li class="topmenu"><a href="#" title="Risorse"><span>Risorse</span></a>
<ul class="sottomenu">
<li class="sottomenu"><a href="software.htm">Software</a></li>
<li class="sottomenu"><a href="incarichi.htm">Incarichi</a></li>
</ul>
</li>
<li class="topmenu"><a href="#" title="Attività"><span>Attività</span></a>
<ul class="sottomenu">
<li class="sottomenu"><a href="ambiente.htm">Progettazione ambientale</a></li>
<li class="sottomenu"><a href="energie_rinnovabili.htm">Energie rinnovabili</a></li>
<li class="sottomenu"><a href="territorio.htm">Pianificazione territoriale</a></li>
<li class="sottomenu"><a href="sicurezza.htm">Sicurezza e prevenzione incendi</a></li>
<li class="sottomenu"><a href="geotecnica.htm">Geotecnica</a></li>
<li class="sottomenu"><a href="ingegnerianaturalistica.htm">Ingegneria naturalistica</a></li>
<li class="sottomenu"><a href="monitoraggi.htm">Monitoraggi</a></li>
<li class="sottomenu"><a href="riskamianto.htm">Risk assessment suoli e amianto</a></li>
<li class="sottomenu"><a href="galleriafoto.htm">Galleria fotografica</a></li>
</ul>
</li>
<li class="topmenu"><a href="#" title="Contatti"><span>Contatti</span></a>
<ul class="sottomenu">
<li class="sottomenu"><a href="contatti.htm">Compila il modulo</a></li>
</ul>
</li>
<li class="topmenu"><a href="ubicazione.htm" title="ubicazione">Dove siamo</a></li>
</ul>
</div>
<div id="contenitore">
<div id="main">
<h1>PROFILO AZIENDA</h1>
<p >Lo studio associato ECOGES engineering dei dott. geol. Massimo Giaconi, dott. ing. Roberto Vanon e dott. ing. Elisa Fina ...
:</p>
<h3 class="lista_settori">
<dt><a href="ambiente.htm">PROGETTAZIONE AMBIENTALE</a>
<dt><a href="territorio.htm">PIANIFICAZIONE TERRITORIALE</a>
<dt><a href="sicurezza.htm">SICUREZZA E PREVENZIONE INCENDI</a>
<dt><a href="geotecnica.htm">GEOTECNICA E GEOMECCANICA</a>
<dt><a href="riskamianto.htm">RISK ASSESSMENT SUOLI E AMIANTO</a>
<dt><a href="monitoraggi.htm">MONITORAGGI AMBIENTALI</a>
<dt><a href="energie_rinnovabili.htm">ENERGIE RINNOVABILI</a></dt>
</h3><br/>
<h1 class="paragrafo"><dt>Dott. Geol. Massimo Giaconi<br />
</h1>
<p>Iscrizione all'Ordine Geologi Friuli-Venezia Giulia alla posizione n. 334 dal 2002<br />
Tecnico abilitato in acustica dall'anno 2006 decreto amb 936 </p>
</p>
<p><br />
</p>
<h1 class="paragrafo">Dott. Ing. Roberto Vanon <br />
</h1>
Iscrizione all'Ordine Provinciale Ingegneri di Gorizia alla posizione n. 511 A dal 11.07.1994<br />
Abilitazione per coordinatori per la progettazione e per l'esecuzione ai sensi del D.Lgs. n. 494/1996<br />
Iscrizione nell'elenco del Ministero dell'Interno di cui alla legge 7 dicembre 1984 n. 818
</p><br/>
<h1 class="paragrafo">Dott. Ing. Elisa Fina<br />
</h1>
Iscrizione all'Ordine Provinciale Ingegneri di Gorizia alla posizione n. 827 A dal 05.05.2010<br/>
</p>
</div>
</div>
</div> <!--end contenitore-->
<div id="footer">
<p><img src="img/footer.png" alt="footer" /></p>
</div><!--end footer-->
</div><!-- #wrapper (fine)-->
</body>
</html>
E qui il CSS:
body {
margin: 0px;
padding: 0px;
background-color:#F0F0F0; /*#D8D8D8; #cccccc;#E6E6E6;*/
;
}
#contenitore {
margin: auto;
width: 760px;
background-color: #ffffff;
/*border-right-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-right-color: #999;
border-left-color: #999;
border-bottom-width: thin;
/*border-bottom-style: solid;
border-bottom-color: #999;*/
border: 1px solid #CCCCCC;
}
#header {
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-color: #FFFAD1;
}
#main {
position:relative;
z-index: 0;
margin: 0px 0px 0px 0px;
padding-top: 100px;
padding-left: 20px;
padding-right:20px;
padding-bottom: 30px;
color: #000;
line-height: 20px;
background-color: #FFFFFF;
font-family: arial;
font-size: 10.5pt;
}
#footer {
margin: 0px auto;
/* border-top: 1px #000000 solid;*/
text-align: center;
width: 80%;
img src="img/footer.png" ;
}
++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++ monitoraggi
/* boxes img monitoraggi */
.img_sx {
text-transform: capitalize;
box-shadow: 5px 5px 20px #5d016d;
width: 268px;
min-height: 300px;
margin: 20px 0px 20px 20px;
padding: 10px;
border: 1px solid #188a00;
float: left;
}
i {
text-align: center;
}-->*/
++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++
#barra ul {
z-index: 2;
margin: 0px 0px 0px 0px;
padding:0px;
list-style:none;
}
#barra a {
z-index: 2;
LETTER-SPACING: 1px;
text-decoration: none;
color: #000000;
display: block;
text-align: center;
width: 130px;
padding: 10px;
margin: 0px 0px 0px 0px;
font-family: arial;
font-size: 10pt;
font-weight:600;
}
#barra a:hover {
z-index: 2;
color:#000000;
border: 1px #ff0000 solid;
background-color: #FFED00;
}
/*- sottomenu--------------------------- */
li ul {
z-index: 2;
display: none;
}
#barra li ul a {
z-index: 2;
background-color: #fffad1;
}
li:hover ul, li.over ul{
z-index: 2;
display: block;
position: relative;
background: #fff;
border: 0px #00ccff solid;
top: 0em;
left: 0px;
}
#barra .sottomenu a {
z-index: 2;
font-size: 8pt;
text-align: left;
padding: 10px 10px;
width: 130px;
border: 1px;
}
#barra li.sottomenu {
z-index: 2;
float: none;
}
#main{clear:left}
#main .formtext {
border-collapse: collapse;
font: 10pt arial;
font-size: 10.5pt;
text-decoration: none;
color: #FFFFFF;
}
.lista {
text-indent: 20px;
color: #000000;
font: 10.5pt arial;
line-height: 40px;
}
.paragrafo {
padding-left: 10px;
color: #000000;
line-height: 20px;
font-family: arial;
font-size: 10.5pt;
text-align: left;
}
.ecoges {
color: #000000;
line-height: 25px;
font-family: arial;
font-size: 12.5pt;
text-align:center;
}
.occupazioni {
background-color: #fffad1;
border-radius: 20px 20px 20px 20px;
color: #000000;
margin: 3% auto 0;
max-width: 700px;
min-height: 300px;
padding: 3% 5%;
text-align: left;
width: 80%;
}
.tabincarichi {
border-collapse: collapse;
}
.tab1 {
margin: 5px;
padding-right: 20px;
padding-bottom: 20px;
font: 10pt arial;
text-align: left;
vertical-align: top;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333333;
}
.tab2 {
margin: 5px;
padding-right: 20px;
padding-bottom: 20px;
font: 10pt arial;
text-align: left;
vertical-align: top;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333333;
}
.tab3 {
margin: 5px;
padding-right: 20px;
padding-bottom: 20px;
font: 10pt arial;
text-align: left;
vertical-align: top;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333333;
}
.tab4 {
margin: 5px;
padding-right: 20px;
padding-bottom: 20px;
font: 10pt arial;
text-align: left;
vertical-align: top;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333333;
}
.tabbold {
margin: 5px;
padding-right: 20px;
padding-bottom: 20px;
font: bold 10pt arial;
text-align: left;
vertical-align: top;
color:#090;
}
#mountain {
margin: auto;
margin-top: 70px;
width: 700px;
padding: 0px 0px 0px 0px;
border: 1px #000033 solid;
color: black;
background: url(../img/mountain.jpg) top left no-repeat;
}
#entrata {
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
position: absolute;
border: 0px solid #999933;
}
#boxbianco {
position: relative;
margin-left: 5px;
margin-right: 200px;
margin-top: 5px;
margin-bottom: 300px;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
}
#boxlogo {
position: relative;
display: inline;
margin: 0px;
padding: 0px;
}
#servizi {
font-family: time new roman;
color: #009a4c;
font-size: 20pt;
text-align: left;
font-weight: bold;
font-style: oblique;
vertical-align: bottom;
margin-left: 34px;
}
.tabellafoto {
position: relative;
border-collapse: collapse;
margin-right: 0px;
padding-left: 0px;
}
.contenutofoto {
padding-left: 80px;
padding-top: 5px;
padding-bottom: 10px;
padding-right: 25px;
background-color: #FFFFFF;
font-family: arial,serif;
color: white;
font-size: 9pt;
text-align: left;
vertical-align: top;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFFFFF;
}
.contenutocomm {
padding-left: 80px;
padding-top: 5px;
padding-bottom: 10px;
padding-right: 25px;
background-color: #FFFFFF;
font-family: arial, serif;
color: #000000;
font-size: 9pt;
text-align: left;
vertical-align: top;
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #FFFFFF;
}
#contenitore #mainindex .paragrafo {
text-align: center;
background-color: #FFFAD1;
}
.lista_settori {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 25px;
font-weight: bold;
}
.lista_selettori a:visited {
color: #FFED00;
}
.lista_settori a:link {
color: #000000;
text-decoration: none;
}
.lista_settori a:hover {
color: #FFED00;
}
.lista_settori a:active {
color: #00bf78;
}
h2 {
color: #090;
font-size: 22px;
background-color: color: #FFED00;
}
h3 {
color: #090;
font-size: 18px;
}
table .primaRiga {
color: #090;
font-weight: bold;
text-align:center;
}
table {
text-align:center;
}
.ente{text-align:left;}
blockquote {
font-weight: bold;
}
si, i codici sono un pasticcio, a forza di restyling...
si farebbe prima a riscriverli.
...e spero di aver postato nel posto e con le modalità corrette
Grazie in anticipo per l'aiuto!
Rispondi quotando