Che misure nel CSS ho sbagliato? :(

20-06-2010, 12.15.46

L'URL DELLA PAGINA E' http://greenlogic.altervista.org/Ora...NuovoFile.html :(

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Oratorio di Valdagno</title>
<style type='text/css'>

.wrapper{
   width: 800px;
   margin: 0 auto;
   height: 1200px;
}


.header{
   float: left;
   width: 800px;
   background-color: #f4f4f4;
}



.wrapright{
   float: left;
   width: 100%;
   background-color: #cfcfcf
}



.right{
   margin-left: 147px;
   background-color: #afeeee;
   height: 1200px;
}



.left{
   float: left;
   width: 150px;
   margin-left: -100%;
   background-color: #98fb98;
   height: 1200px;
}



.footer{
   float: left;
   width: 800px;
   background-color: #f4f4f4;
}


body {
   padding: 0px;
   margin: 0px;
}



</style>
</head>
<body>
<div class="wrapper">
    <div class="header">











        <DIV align="center">

<img src="Desarumba_logo2.png">

<br>

<font size=7>

<font face ="French Script MT">

<font color="black"

<text> il sito ufficiale. </text>

</font>

</font>

<br>

</body>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Green Logic</title> 
<style type="text/css"> 
 
.menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(button1.gif); 

position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu1 li {float:left;}
.menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; 

font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; 

cursor:pointer;}
.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu1 li.current a {color:#fff; background:url(button3.gif);}
.menu1 li.current a b {background:url(button3.gif) no-repeat right top;}
.menu1 li a:hover {color:#fff; background:#000 url(button2.gif);}
.menu1 li a:hover b {background:url(button2.gif) no-repeat right top;}
.menu1 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;}
.menu1 li.current a:hover b {background:url(button3.gif) no-repeat right top;}
 
</style> 
</head> 
 
<body> 
<ul class="menu1"> 

<li><a href="http://greenlogic.altervista.org/Home/Home.html"><b>Home</b></a></li> 

<li><a href="http://greenlogic.altervista.org/LaNostraStoria/LaNostraStoria.html"><b>La nostra storia</b></a></li> 

<li><a href="http://greenlogic.altervista.org/Musica/Musica.html"><b>Musica</b></a></li> 

<li><a href="http://greenlogic.altervista.org/Informatica/Informatica.html"><b>Informatica</b></a></li> 

<li><a href="http://greenlogic.altervista.org/Norvegia/Norvegia.html"><b>Norvegia</b></a></li> 

<li class="current"><a href="http://greenlogic.altervista.org/Oratorio/Oratorio.html"><b>Oratorio</b></a></li>

<li><a href="http://greenlogic.altervista.org/CanaleInter/Mediaplayer.php#nogo"><b>Inter</b></a></li>

<li><a href="http://greenlogic.altervista.org/Curiosita/curiosita.html"><b>Progetti e curiosità</b></a></li>

</ul> 





















    </div>
    <div class="wrapright">
        <div class="right">














<font color="#32CD32">
<font size="5">
<font face="Arial">
<b>LA STORIA DELL'ORATORIO</b>

<div align="justify">

<font size="3">
<font color="black">
L'oratorio Don Bosco di Valdagno è sempre stato luogo d'incontro tra i giovani. Molte sono le attività che coinvolgono la maggiorparte dei giovani Valdagnesi. L'oratorio è in una posizione strategica poichè è facilmente raggiungibile ed ha attorno servizi come il cinema teatro Super, Filmusica, il bar dell'Oratorio, una sala musicale prenotabile e diverse stanze per conferenze e studio. L'oratorio ogni anno propone progetti, anche tramite gli scout ed animatori, i quali si trovano ogni sabato pomeriggio impegnati su diverse attività. Importantissimo è il lavoro compiuto dal custode Vincenzo, il quale s'impegna su tutti i fronti meritando il rispetto di tutto l'Oratorio.

 <br>



















        </div>
    </div>
    <div class="left">






<font color="#32CD32">
<font size="5">
<font face="Arial">
<b>LA STORIA DELL'ORATORIO</b>

<div align="justify">

<font size="3">
<font color="black">
L'oratorio Don Bosco di Valdagno è sempre stato luogo d'incontro tra i giovani. Molte sono le attività che coinvolgono la maggiorparte dei giovani Valdagnesi. L'oratorio è in una posizione strategica poichè è facilmente raggiungibile ed ha attorno servizi come il cinema teatro Super,

<br>








    </div> 
    <div class="footer">
        footer
    </div>
</div>
</body>
</html>

**SolitaryExplorer** · 20-06-2010, 17.38.30

In che senso?
Tu cosa volevi realizzare che non ti è riuscito?

20-06-2010, 18.02.31

A me viene questo : http://greenlogic.altervista.org/Ora...NuovoFile.html !!!
Non vedi che il pezzo rosso va anche oltre le misure impostate??? E' strano e non so come mai!!! Per di più il container di destra mostra il suo contenuto mentre la navigation a sinistra è scomparsa come sotto quella pagina rossa!!! Secondo me sono sbagliate delle misure!!
Tu hai capito x caso quali?? Grazie mille per aiuto!!! :)

20-06-2010, 18.31.10

Originalmente inviato da greenlogic

A me viene questo : http://greenlogic.altervista.org/Ora...NuovoFile.html !!!
Non vedi che il pezzo rosso va anche oltre le misure impostate??? E' strano e non so come mai!!! Per di più il container di destra mostra il suo contenuto mentre la navigation a sinistra è scomparsa come sotto quella pagina rossa!!! Secondo me sono sbagliate delle misure!!
Tu hai capito x caso quali?? Grazie mille per aiuto!!! :)

Che browser usi?

IO vedo solo un contenitore nero con tre scritte niente di rosso..

20-06-2010, 18.40.31

No ! E' perchè ho appena cercato di modificare!! dimmi se questo codice è giusto??

SEMBRA LUNGO MA IN VERITA' SONO POCHISSIME COSE !!! TI PREGO!!! AIUTAMI :(

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Oratorio di Valdagno</title>
<style type='text/css'>

.wrapper{
   width: 800px;
   margin: 0 auto;
   height: 1200px;
}


.header{
   float: left;
   width: 800px;
   background-color: #f4f4f4;
}



.wrapright{
   float: left;
   width: 100%;
   background-color: #cfcfcf
}



.right{
   margin-left: 147px;
   background-color: #afeeee;
   height: 1200px;
}



.left{
   float: left;
   width: 150px;
   margin-left: -100%;
   background-color: #98fb98;
   height: 1200px;
}



.footer{
   float: left;
   width: 800px;
   background-color: #f4f4f4;
}


body {
   padding: 0px;
   margin: 0px;
}



</style>
</head>
<body>
<div class="wrapper">
    <div class="header">











        <DIV align="center">

<img src="Desarumba_logo2.png">

<br>

<font size=7>

<font face ="French Script MT">

<font color="black"

<text> il sito ufficiale. </text>

</font>

</font>

<br>



</body>


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Green Logic</title> 
<style type="text/css"> 
 
.menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(button1.gif); 

position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu1 li {float:left;}
.menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; 

font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; 

cursor:pointer;}
.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu1 li.current a {color:#fff; background:url(button3.gif);}
.menu1 li.current a b {background:url(button3.gif) no-repeat right top;}
.menu1 li a:hover {color:#fff; background:#000 url(button2.gif);}
.menu1 li a:hover b {background:url(button2.gif) no-repeat right top;}
.menu1 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;}
.menu1 li.current a:hover b {background:url(button3.gif) no-repeat right top;}

 
</style> 
</head> 
 


<body> 
<ul class="menu1"> 

<li><a href="http://greenlogic.altervista.org/Home/Home.html"><b>Home</b></a></li> 

<li><a href="http://greenlogic.altervista.org/LaNostraStoria/LaNostraStoria.html"><b>La nostra storia</b></a></li> 

<li><a href="http://greenlogic.altervista.org/Musica/Musica.html"><b>Musica</b></a></li> 

<li><a href="http://greenlogic.altervista.org/Informatica/Informatica.html"><b>Informatica</b></a></li> 

<li><a href="http://greenlogic.altervista.org/Norvegia/Norvegia.html"><b>Norvegia</b></a></li> 

<li class="current"><a href="http://greenlogic.altervista.org/Oratorio/Oratorio.html"><b>Oratorio</b></a></li>

<li><a href="http://greenlogic.altervista.org/CanaleInter/Mediaplayer.php#nogo"><b>Inter</b></a></li>

<li><a href="http://greenlogic.altervista.org/Curiosita/curiosita.html"><b>Progetti e curiosità</b></a></li>


</ul> 

<script type="text/javascript">
//<![CDATA[
document.write('<s'+'cript type="text/javascript" src="http://ad.altervista.org/js.ad/size=728X90/r='+new Date().getTime()+'"><\/s'+'cript>');
//]]>
</script>



















    </div>
    <div class="wrapright">
        <div class="right">






            <font color="#32CD32">
<font size="5">
<font face="Arial">
<b>LA STORIA DELL'ORATORIO</b>

<div align="justify">

<font size="3">
<font color="white">
L'oratorio Don Bosco di Valdagno è sempre stato luogo d'incontro tra i giovani. Molte sono le attività che coinvolgono la maggiorparte dei giovani Valdagnesi. L'oratorio è in una posizione strategica poichè è facilmente raggiungibile ed ha attorno servizi come il cinema teatro Super, Filmusica, il bar dell'Oratorio, una sala musicale prenotabile e diverse stanze per conferenze e studio. L'oratorio ogni anno propone progetti, anche tramite gli scout ed animatori, i quali si trovano ogni sabato pomeriggio impegnati su diverse attività. Importantissimo è il lavoro compiuto dal custode Vincenzo, il quale s'impegna su tutti i fronti meritando il rispetto di tutto l'Oratorio.

 <br>







        </div>
    </div>
    <div class="left">






            <font color="#32CD32">
<font size="5">
<font face="Arial">
<b>LA STORIA DELL'ORATORIO</b>

<div align="justify">

<font size="3">
<font color="white">
L'oratorio Don Bosco di Valdagno è sempre stato luogo d'incontro tra i giovani. Molte sono le attività che coinvolgono la maggiorparte dei giovani Valdagnesi. L'oratorio è in una posizione strategica poichè è facilmente raggiungibile ed ha attorno servizi come il cinema teatro Super, Filmusica, il bar dell'Oratorio, una sala musicale prenotabile e diverse stanze per conferenze e studio. L'oratorio ogni anno propone progetti, anche tramite gli scout ed animatori, i quali si trovano ogni sabato pomeriggio impegnati su diverse attività. Importantissimo è il lavoro compiuto dal custode Vincenzo, il quale s'impegna su tutti i fronti meritando il rispetto di tutto l'Oratorio.

 <br>






    </div> 
    <div class="footer">
        footer
    </div>
</div>
</body>
</html>

EDIT
Ti ho messo il codice esatto della pagina ... prova a guardare ora ... vedi il colore grigio che si estende?? Se vedi nel codice non odvrebbe succedere questo!!! e un mistero!!

Il codice va racchiuso tra i tag, in questo caso tra [ html ] [ / html ] (togliendo gli spazi).

**andreafallico** · 20-06-2010, 20.13.13

Rimuovi dalla classe wrapright il float: left;

21-06-2010, 09.06.16

No purtroppo nemmeno togliendo float: left; da wrapright cambia qualcosa. La pagina web infatti rimane invariata come puoi vedere. :( :(

Io ho messo comunque il codice così come tu mi hai consigliato.

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Oratorio di Valdagno</title>
<style type='text/css'>

.wrapper{
   width: 800px;
   margin: 0 auto;
   height: 1200px;
}


.header{
   float: left;
   width: 800px;
   background-color: #f4f4f4;
}



.wrapright{
   width: 100%;
   background-color: #cfcfcf
}



.right{
   margin-left: 147px;
   background-color: #afeeee;
   height: 1200px;
}



.left{
   float: left;
   width: 150px;
   margin-left: -100%;
   background-color: #98fb98;
   height: 1200px;
}



.footer{
   float: left;
   width: 800px;
   background-color: #f4f4f4;
}


body {
   padding: 0px;
   margin: 0px;
}



</style>
</head>
<body>
<div class="wrapper">
    <div class="header">



        <DIV align="center">

<img src="Desarumba_logo2.png">

<br>

<font size=7>

<font face ="French Script MT">

<font color="black"

<text> il sito ufficiale. </text>

</font>

</font>

<br>



</body>


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Green Logic</title> 
<style type="text/css"> 
 
.menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(button1.gif); 

position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu1 li {float:left;}
.menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; 

font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; 

cursor:pointer;}
.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu1 li.current a {color:#fff; background:url(button3.gif);}
.menu1 li.current a b {background:url(button3.gif) no-repeat right top;}
.menu1 li a:hover {color:#fff; background:#000 url(button2.gif);}
.menu1 li a:hover b {background:url(button2.gif) no-repeat right top;}
.menu1 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;}
.menu1 li.current a:hover b {background:url(button3.gif) no-repeat right top;}

 </style> 
</head> 
 

<body> 
<ul class="menu1"> 

<li><a href="http://greenlogic.altervista.org/Home/Home.html"><b>Home</b></a></li> 

<li><a href="http://greenlogic.altervista.org/LaNostraStoria/LaNostraStoria.html"><b>La nostra storia</b></a></li> 

<li><a href="http://greenlogic.altervista.org/Musica/Musica.html"><b>Musica</b></a></li> 

<li><a href="http://greenlogic.altervista.org/Informatica/Informatica.html"><b>Informatica</b></a></li> 

<li><a href="http://greenlogic.altervista.org/Norvegia/Norvegia.html"><b>Norvegia</b></a></li> 

<li class="current"><a href="http://greenlogic.altervista.org/Oratorio/Oratorio.html"><b>Oratorio</b></a></li>

<li><a href="http://greenlogic.altervista.org/CanaleInter/Mediaplayer.php#nogo"><b>Inter</b></a></li>

<li><a href="http://greenlogic.altervista.org/Curiosita/curiosita.html"><b>Progetti e curiosità</b></a></li>


</ul> 

<script type="text/javascript">
//<![CDATA[
document.write('<s'+'cript type="text/javascript" src="http://ad.altervista.org/js.ad/size=728X90/r='+new Date().getTime()+'"><\/s'+'cript>');
//]]>
</script>

    </div>
    <div class="wrapright">
        <div class="right">


            <font color="#32CD32">
<font size="5">
<font face="Arial">
<b>LA STORIA DELL'ORATORIO</b>

<div align="justify">

<font size="3">
<font color="white">
L'oratorio Don Bosco di Valdagno è sempre stato luogo d'incontro tra i giovani. Molte sono le attività che coinvolgono la maggiorparte dei giovani Valdagnesi. L'oratorio è in una posizione strategica poichè è facilmente raggiungibile ed ha attorno servizi come il cinema teatro Super, Filmusica, il bar dell'Oratorio, una sala musicale prenotabile e diverse stanze per conferenze e studio. L'oratorio ogni anno propone progetti, anche tramite gli scout ed animatori, i quali si trovano ogni sabato pomeriggio impegnati su diverse attività. Importantissimo è il lavoro compiuto dal custode Vincenzo, il quale s'impegna su tutti i fronti meritando il rispetto di tutto l'Oratorio.

 <br>

       </div>
    </div>
    <div class="left">

            <font color="#32CD32">
<font size="5">
<font face="Arial">
<b>LA STORIA DELL'ORATORIO</b>

<div align="justify">

<font size="3">
<font color="white">
L'oratorio Don Bosco di Valdagno è sempre stato luogo d'incontro tra i giovani. Molte sono le attività che coinvolgono la maggiorparte dei giovani Valdagnesi. L'oratorio è in una posizione strategica poichè è facilmente raggiungibile ed ha attorno servizi come il cinema teatro Super, Filmusica, il bar dell'Oratorio, una sala musicale prenotabile e diverse stanze per conferenze e studio. L'oratorio ogni anno propone progetti, anche tramite gli scout ed animatori, i quali si trovano ogni sabato pomeriggio impegnati su diverse attività. Importantissimo è il lavoro compiuto dal custode Vincenzo, il quale s'impegna su tutti i fronti meritando il rispetto di tutto l'Oratorio.

 <br>

 </div> 
    <div class="footer">
        footer
    </div>
</div>
</body>

LA PAGINA IN QUESTIONE CON LE MODIFICHE DA TE SUGGERITE E' NEL SEGUENTE INDIRIZZO: http://greenlogic.altervista.org/Ora...NuovoFile.html

**SolitaryExplorer** · 21-06-2010, 10.26.10

Sono un po' tonto io, ma non sto capendo che risultato finale desideri.
Riusciresti a postare un'immagine di come vorresti il sito?
Così penso diverrebbe più facile e rapido spiegarti come fare le cose con il codice migliore e pulito possibile.

21-06-2010, 10.40.42

Allora nn intendo altro che fare due colonne (una di width 150 e l'altra da 650px per un totale di 800px) con header e footer in CSS. Il punto è che la navigation a sinistra dovrebbe essere fluida nel codice messo da me e qulla di destra fissa. Purtroppo però appena metto il testo tutto si scombina. Credo sia un problema di float.
Capito un po'?

http://greenlogic.altervista.org/32132.html
QUESTO SAREBBE L'ESEMPIO, IL PUNTO E' CHE APPENA INSERISCO IL TESTO LA COLONNA A SINISTRA SCOMPARE E SI ESTENDE PER TUTTA LA PAGINA QUALCOS'ALTRO! :(

Discussione: Che misure nel CSS ho sbagliato? :(

LinkBack

Strumenti discussione

Display

Che misure nel CSS ho sbagliato? :(

Regole di scrittura