scrolling esagerato...

**franz79** · 08-11-2008, 18:35

Scusate tutti.

Ho realizzato una pagina xhtml+css...

questa qua

Funziona tutto bene, anche con browser diversi... il problema è che mi fa uno scrolling verticale gigantesco e non capisco dove sia l'errore...

posto il codice css:

codice:

BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 20px; FONT: 0.7em Tahoma, Arial, Helvetica, sans-serif; COLOR: #434344; PADDING-TOP: 0px; BACKGROUND: url(img/back.jpg); 
}
FORM {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
H1 {
	FONT-WEIGHT: normal; COLOR: #bd4f21; FONT-FAMILY: Georgia, "Times New Roman", Times, serif
}
H2 {
	FONT-WEIGHT: normal; COLOR: #bd4f21; FONT-FAMILY: Georgia, "Times New Roman", Times, serif
}
H3 {
	FONT-WEIGHT: normal; COLOR: #bd4f21; FONT-FAMILY: Georgia, "Times New Roman", Times, serif
}
P {
	LINE-HEIGHT: 160%
}
BLOCKQUOTE {
	LINE-HEIGHT: 160%
}
OL {
	LINE-HEIGHT: 160%
}
UL {
	LINE-HEIGHT: 160%
}
A {
	COLOR: #286ea0; TEXT-DECORATION: none
}
A:hover {
	COLOR: #286ea0; TEXT-DECORATION: underline
}

#content-main { margin: 0 auto; padding: 0; text-align: left; width: 770px; height: 1170px; BORDER: solid 1px; BORDER-COLOR: #aaabad; BACKGROUND: #ffffff;} 

#titolo {
	BACKGROUND: url(img/headalto.jpg); FLOAT: left; WIDTH: 756px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 33px; BORDER-BOTTOM-STYLE: none
}
#header {
	BACKGROUND: url(img/header.jpg); FLOAT: left; WIDTH: 766px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 209px; BORDER-BOTTOM-STYLE: none
}
#commento {
	FONT: 0.9em Tahoma, Arial, Helvetica, sans-serif; WIDTH: 760px; COLOR: #064ab1; PADDING-TOP: 172px; TEXT-ALIGN: right
}
#briciolepane {
	PADDING-LEFT: 12px; FONT: 11px Tahoma, Arial, Helvetica, sans-serif; COLOR: #414243; PADDING-TOP: 12px; TEXT-ALIGN: left
}
#primopiano {
	BACKGROUND: url(img/boxprimopiano.jpg); FLOAT: left; WIDTH: 575px; HEIGHT: 280px; POSITION: relative; TOP: 0px;
}
#bacheca {
	LEFT: 255px; WIDTH: 350px; BORDER-TOP-STYLE: none; POSITION: relative; TOP: 40px; LEFT: 11px; HEIGHT: 274px; BORDER-BOTTOM-STYLE: none
}
.topbacheca {
	BACKGROUND: url(img/topbacheca.jpg); PADDING-TOP: 4px; HEIGHT: 12px
}
.titolobacheca {
	PADDING-LEFT: 16px; FONT: bold 11px Tahoma, Arial, Helvetica, sans-serif; COLOR: #064ab1
}
.testobacheca {
	PADDING-LEFT: 6px; FONT: 11px Tahoma, Arial, Helvetica, sans-serif; COLOR: #434344; PADDING-TOP: 5px
}
.azionibacheca {
	LEFT: 200px; WIDTH: 160px; PADDING-TOP: 5px; POSITION: relative; HEIGHT: 13px
}
.azionibacheca A {
	COLOR: #286ea0; TEXT-DECORATION: none
}
.azionibacheca A:hover {
	TEXT-DECORATION: underline
}
#navigazione {
	BACKGROUND: url(img/navigazione.jpg); WIDTH: 195px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 358px; BORDER-BOTTOM-STYLE: none; POSITION: relative; TOP: -700px; LEFT: 575px;
}
#menu {
	WIDTH: 172px; POSITION: relative; TOP: 38px; LEFT: -30px;
}
#menu UL LI:hover {
	COLOR: #4a4a24; TEXT-DECORATION: none
}
UL.linklist {
	FONT: 12px Tahoma, Arial, Helvetica, sans-serif; WIDTH: 152px; COLOR: #434344
}
UL.linklist LI {
	LEFT: 0px; WIDTH: 152px; PADDING-TOP: 12px; BORDER-BOTTOM: #cacacb 1px solid
}
UL.linklist LI.ultimo {
	PADDING-TOP: 12px; BORDER-BOTTOM-STYLE: none
}
UL.linklist LI A {
	FONT: 12px Tahoma, Arial, Helvetica, sans-serif; WIDTH: 152px; COLOR: #434344; LIST-STYLE-TYPE: none; TEXT-DECORATION: none
}
UL.linklist LI A:hover {
	FONT: 12px Tahoma, Arial, Helvetica, sans-serif; WIDTH: 152px; COLOR: #3c6fbd; LIST-STYLE-TYPE: none; TEXT-DECORATION: none
}
.sidelink {
	DISPLAY: block; WIDTH: 120px; HEIGHT: 18px
}
.sidelink:hover {
	BACKGROUND: url(img/over.gif) #b5d6f8 no-repeat right top; TEXT-DECORATION: none
}
#sede {
	BACKGROUND: url(img/sede.jpg); LEFT: 250px; WIDTH: 365px; POSITION: relative; TOP: -196px; LEFT: 5px; HEIGHT: 108px
}
.sedetestotop {
	LEFT: 5px; PADDING-TOP: 29px; POSITION: relative
}
.sedetesto {
	LEFT: 5px; PADDING-TOP: 5px; POSITION: relative
}
#boxrt {
	BACKGROUND: url(img/boxrt.jpg); LEFT: 610px; WIDTH: 209px; POSITION: relative; TOP: -304px; LEFT: 365px; HEIGHT: 108px
}
#boxmedia {
	BACKGROUND: url(img/boxmedia.jpg); LEFT: 820px; WIDTH: 194px; POSITION: relative; TOP: -704px; LEFT: 575px; HEIGHT: 137px
}
#navigazioneprofilo {
	BACKGROUND: url(img/navigazioneprofilo.jpg); LEFT: 820px; WIDTH: 187px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; POSITION: relative; TOP: -1799px; LEFT: 574px; HEIGHT: 135px; BORDER-BOTTOM-STYLE: none
}
#menuprofilo {
	PADDING-LEFT: 12px; PADDING-TOP: 28px
}
#menuprofilo UL LI:hover {
	COLOR: #4a4a24; TEXT-DECORATION: none
}
#boxristretta {
	BACKGROUND: url(img/boxristretta.jpg); LEFT: 820px; WIDTH: 194px; POSITION: relative; TOP: -705px; LEFT: 575px; HEIGHT: 46px
}
#boxformristretta {
	LEFT: 825px; WIDTH: 200px; POSITION: relative; TOP: -731px; LEFT: 579px;
}
#boxprogetti {
	BACKGROUND: url(img/boxprogetti.jpg); LEFT: 246px; WIDTH: 293px; POSITION: relative; TOP: -868px; LEFT: 0px; HEIGHT: 247px
}
.progetto {
	BACKGROUND: url(img/progetto.jpg); LEFT: 11px; WIDTH: 273px; PADDING-TOP: 5px; POSITION: relative; TOP: 40px; HEIGHT: 61px
}

.progetto2 {
	BACKGROUND: url(img/progetto.jpg); LEFT: 11px; WIDTH: 273px; PADDING-TOP: 5px; POSITION: relative; LEFT: 11px; TOP: 40px; HEIGHT: 61px
}

.progetto3 {
	BACKGROUND: url(img/progetto.jpg); LEFT: 11px; WIDTH: 273px; PADDING-TOP: 5px; POSITION: relative; LEFT: 11px; TOP: 40px;  HEIGHT: 61px
}

.testoprogetto {
	LEFT: 10px; WIDTH: 200px; POSITION: relative; HEIGHT: 45px
}
.testoprogetto P {
	MARGIN-BOTTOM: 5px
}
.imgprogetto {
	LEFT: 207px; WIDTH: 50px; POSITION: relative; TOP: -45px; HEIGHT: 50px
}
#boxformazione {
	BACKGROUND: url(img/boxformazione.jpg); LEFT: 540px; WIDTH: 281px; POSITION: relative; TOP: -1113px; LEFT: 295px; HEIGHT: 242px
}
#bandaformazione {
	BACKGROUND: url(img/bandaformazione.jpg); LEFT: 6px; WIDTH: 268px; POSITION: relative; TOP: 38px; HEIGHT: 32px
}
.pianoformazione {
	LEFT: 42px; WIDTH: 268px; POSITION: relative; TOP: 10px; HEIGHT: 32px
}
.pianoformazione A {
	COLOR: #6f066b; TEXT-DECORATION: none
}
.pianoformazione A:hover {
	COLOR: #6f066b; TEXT-DECORATION: underline
}
#formazionetesto {
	LEFT: 10px; WIDTH: 257px; POSITION: relative; TOP: 47px; HEIGHT: 180px
}
#formazionetesto P {
	LINE-HEIGHT: 12px
}
#boxcosa {
	BACKGROUND: url(img/boxcosa.jpg); LEFT: 247px; WIDTH: 293px; POSITION: relative; TOP: -1112px; LEFT: 0px; HEIGHT: 213px
}
#separatorecosa {
	BACKGROUND: url(img/separatorecosa.jpg); LEFT: 125px; WIDTH: 6px; POSITION: relative; TOP: 30px; HEIGHT: 167px
}
.testocosatop {
	LEFT: 132px; POSITION: relative; TOP: -145px
}
.testocosatop A {
	TEXT-DECORATION: none
}
.testocosatop A:hover {
	COLOR: #286ea0; TEXT-DECORATION: underline
}
.testocosa {
	LEFT: 132px; POSITION: relative; TOP: -165px
}
.testocosa P {
	MARGIN-BOTTOM: 5px
}
.testocosa A {
	TEXT-DECORATION: none
}
.testocosa A:hover {
	COLOR: #286ea0; TEXT-DECORATION: underline
}

#imgcosa {
POSITION: relative; TOP: -1254px; LEFT: 25px;
}

#boxservizi {
	BACKGROUND: url(img/boxservizi.jpg); LEFT: 540px; WIDTH: 281px; POSITION: relative; TOP: -1406px; LEFT: 295px; HEIGHT: 200px
}
#separatoreservizi {
	BACKGROUND: url(img/separatorecosa.jpg); LEFT: 125px; WIDTH: 6px; POSITION: relative; TOP: 30px; HEIGHT: 165px
}
.testoservizitop {
	LEFT: 132px; POSITION: relative; TOP: -145px
}
.testoservizitop A {
	TEXT-DECORATION: none
}
.testoservizitop A:hover {
	COLOR: #286ea0; TEXT-DECORATION: underline
}
.testoservizi {
	LEFT: 132px; POSITION: relative; TOP: -165px
}
.testoservizi P {
	MARGIN-BOTTOM: 5px
}
.testoservizi A {
	TEXT-DECORATION: non
}
.testoservizi A:hover {
	COLOR: #286ea0; TEXT-DECORATION: underline
}

#imgservizi {
POSITION: relative; TOP: -1537px; LEFT: 316px;
}

#footer {
	BACKGROUND: url(img/footer.jpg); LEFT: 247px; WIDTH: 769px; POSITION: relative; TOP: -1594px; LEFT: 0px; HEIGHT: 30px
}
#credits {
	LEFT: 575px; FONT: 8px Tahoma, Arial, Helvetica, sans-serif; WIDTH: 789px; COLOR: #434344; POSITION: relative; TOP: -1594px; LEFT: 340px; HEIGHT: 30px
}

#marqueecontainer{
position: relative;
TOP: -230px;
LEFT: 370px;
width: 190px; /*marquee width */
height: 200px; /*marquee height */
background-color: white;
overflow: hidden;
padding: 2px;
padding-left: 4px;
}

Spero che possiate aiutarmi a trovare l'errore... ( il codice html potete vederlo direttamente sulla pagina...)

**franz79** · 08-11-2008, 22:21

niente??

**franz79** · 09-11-2008, 20:51

up vi prego aiutatemi

**paxal78** · 09-11-2008, 23:49

ciao...mmm :master:

dunque....mi spiace dirtelo ma sto guardando la pagina con FF2 ed è un disastro...pare che tu abbia parecchio strafatto con i float.

Non ho indagato sullo scrolling ma come prima cosa sarebbe il caso di rimettere mano al css e dargli una sistemata.

Per cominciare definisci un contenitori e gli oggetti del layout.
Mi sembra di capire che il tuo obbiettivo sia un Layout a due colonne...corretto?

**franz79** · 10-11-2008, 09:40

Mi consigli di utilizzare posizionamenti assoluti invece dei relativi?

**paxal78** · 10-11-2008, 09:48

nono...ma io farei così

codice:

<div id="content-main">
   <div id="header"></div>
   <div id="contenuto">
      <div id="sx"></div>
      <div id="dx"></div>
  </div>
   <div id="colonna destra"></div>
</div>

codice:

colonna destra{
 float:right;
 width:150px;
}

contenuto{
 margin-right:150px;
}

sx{
  float:left;
  width:200px;
}
dx{
  margin-left:200px;
}

un cosa del genere...ma non l'ho provato, lo scritto al volo.

**franz79** · 10-11-2008, 10:02

sì, ho capito, ma poi ho da piazzare un casino di box con il testo e le immagini dentro... devo per forza annidare i div... o no?

**paxal78** · 10-11-2008, 10:09

diciamo che (secondo me

) dovresti costruire un albero ed evitare di flottare inutilmente...

per esempio il div "titolo" non ha bisogno di essere flottato in un layout ben costruito.

Discussione: scrolling esagerato...

Strumenti discussione

Ricerca discussione

Visualizza

scrolling esagerato...

Permessi di invio