Ciao a tutti,
mi sono appena registrata al vostro sito;
Sito che utilizzo spesso per imparare, anch'io da autodidatta
a creare un siti...
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, ancora più evidente,
cioè dell'intero contenuto, del box main, perchè, 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">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;
}
#main {width: 760px;
clear: both
}
#footer {
margin: 0px auto;
/* border-top: 1px #000000 solid;*/
text-align: center;
width: 80%;
img src="img/footer.png" ;
}
i {
text-align: center;
}-->*/
++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++
/* blocco principale */
#barra {
z-index: 2;
position: absolute;
text-decoration: none;
color: #fff;
}
#barra ul {
z-index: 2;
margin: 0px 0px 0px 0px;
padding:0px;
list-style:none;
}
/* lista principale */
#barra li.topmenu {
z-index: 2;
position: relative;
width: 150px;
margin: -4px 0px 0px 0px;
padding: 0px;
float: left;
background-color: #fff59b;
border: 1px outset #FFFFFF;
}
#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;
}
/*li:hover ul, li.hover ul{
z-index: 2;
display: block;
position: absolute;
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;
}
.tabformtext {
padding-left: 10px;
color: #000000;
font: 10.5pt arial;
vertical-align: top;
}
.tabformtextdes {
padding-left: 20px;
color: White;
font: 10.5pt arial;
vertical-align: top;
text-align: left;
}
.tabformtextcod {
padding-left: 20px;
padding-bottom: 5px;
color: White;
font: 10.5pt arial;
vertical-align: middle;
text-align: left;
}
/*#storia{
padding-left: 10px;
color: #000000;
line-height: 20px;
font-family:sans-serif;
font-size: 12pt;
text-align: arial;*/
}
.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 {
/*border:1px solid #FFED00;*/
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;
}
#sia {
position: relative;
display: inline;
margin-left: 5px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
font-family: time new roman;
color: #000000;
font-size: 54pt;
text-align: left;
font-weight: lighter;
border: solid 0px;
border-color: black;
padding-left: 0px;
padding-top: -5px;
padding-bottom: 0px;
padding-right: 0px;
vertical-align: top;
}
.linksia:hover {
text-decoration: none;
color: black;
}
.linksia {
text-decoration: none;
color: black;
}
#consulting {
font-family: time new roman;
color: #009a4c;
font-size: 40pt;
text-align: left;
font-weight: lighter;
position: absolute;
display: inline;
margin-left: -170px;
margin-right: 0px;
margin-top: 85px;
margin-bottom: 0px;
vertical-align: bottom;
border: solid 0px;
border-color: black;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
text-decoration: none;
}
.linkconsulting:hover {
text-decoration: none;
color: #009a4c;
}
.linkconsulting {
text-decoration: none;
color: #009a4c;
}
#riga {
font-family: time new roman;
color: #FFFFFF;
font-size: 10pt;
text-align: left;
}
#riga1 {
font-family: time new roman;
color: #009a4c;
font-size: 10pt;
text-align: left;
}
#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;
}
.linkaipin {
text-decoration: none;
color: white;
}
.linkaipin:hover {
text-decoration: none;
color: Lime;
}
.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
Quando accade?
!!
astebin.com/uFYbEeaL e il css: pastebin.com/2amybp1r
