Inclusione div (HTML e CSS)

Messaggio da **samiel** » lun 22 ott 2007, 18:35

Devo creare un div "content" con sfondo grigio e includervi
una scritta e un'immagine. Questo il CSS:

/*stili per il layout elastico con background*/
html{margin:0; padding:0;}
body{padding:10px; font-family:verdana,arial,sans-serif; font-size:76%; color:#1A2894; background-color:#17237A;}

/*stili generici, su header e footer*/
div#header{height:auto; background-color:white; color:#1A2894;}
div#footer{height:60px; padding:45px 35px; clear:both; background-color:white; color:#1A2894; border-top:thick double #17237A}

/*stili specifici per il layout*/
div#container{width:96%; border:0; margin:auto; background-color: white;}
div#content{width:auto; margin: 0 0 0 150px; padding: 15px; background-color: #F4F4F4; overflow:visible;}
div#wrapper{width:98%; border:0; margin:auto; background-color:white;}
#content img {width:200px; float:right; margin:100px 0 25px 65px;}
#content cite {float:left; width:450px; margin:45px; font-size:180%;}

div#nav_left{height:auto; width:120px; float:left; padding:25px 15px; background-color:white;}

/*stili per la navigazione menu header*/
div#navbar_wrapper {width:98%; height:60px; margin:auto; padding:0; background-color:#17237A;}
div#navbar ul{list-style:none; margin:0; padding:18px; text-align:center;}
div#navbar li{display:inline; margin:3px; padding:0; border:4px;}
div#navbar a{background:white; color:#17237A; margin:0; padding:4px; text-decoration:none;}
div#navbar a:hover{background-color:#C5FFFC; color:#17237A; font-weight:bold;}

/*stili per la navigazione menu di sinistra*/
div#nav_left ul{margin:0; padding: 0; list-style-type: none;}
div#nav_left li{margin:0; padding:0;}
div#nav_left a{color:#A2C2E0; font:bold 1.2em/1.8em verdana,arial,sans-serif; text-decoration:none;}
div#nav_left a:hover{color:#17237A; text-decoration: underline;}
div#nav_left a#activelink{color:#17237A; text-decoration:none;}

/*stili contenuti specifici header*/
h3#head{text-align: center; padding:5px;}
.allinea_sx {float:left; padding-top:8px; padding-left:25px;}
.allinea_dx {float:right; padding-top:8px; padding-right:25px;}

/*stili caratteri*/
.bold{font-weight:bold;}
.italic{font-style:italic;}
.underline{text-decoration:underline;}

Ed ecco l'HTML:

Codice: Seleziona tutto

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Liceo Ginnasio Raimondo Franchetti - Mestre (VE)</title>
  <meta name="GENERATOR" content="Quanta Plus" />
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <link rel="stylesheet" type="text/css" href="layout.css" />
  <!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="ie_win.css" />-->
  <script src="blank.js" type="text/javascript"> </script>

</head>
<body>
    <div id="container">

        <div id="header">
              <div><img class="allinea_sx" src="logo.gif" alt="Logo del Liceo" title="Logo del Liceo" /></div>
              <div><img class="allinea_dx" src="logo.gif" alt="Logo del Liceo" title="Logo del Liceo" /></div>
              <h3 id="head">LICEO GINNASIO STATALE RAIMONDO FRANCHETTI <br />
              Corso del Popolo 82 - 30172 MESTRE VENEZIA <br />
              TEL. 041 5315531 - FAX 041 5328524</h3>
          <div id="navbar_wrapper">
            <div id="navbar">
              <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Chi siamo</a></li>
                <li><a href="#">Contatti</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">POF</a></li>
                <li><a href="#">Progetti</a></li>
                <li><a href="#">Agenda</a></li>
                <li><a href="#">Segreteria</a></li>
              </ul>
            </div><!--navbar-->
          </div><!--navbar_wrapper-->
        </div><!--header-->
        <div id="wrapper">
        <div id="nav_left">
          <ul>
            <li><a id="activelink" href="#">Home</a></li>
            <li><a href="#">Scuolanet</a></li>
            <li><a href="#">Circolari</a></li>
            <li><a href="#">Riservato</a></li>
            <li><a href="#">Newsletter</a></li>
            <li><a href="#">Biblioteca</a></li>
            <li><a href="#">Studenti</a></li>
            <li><a href="#">Link utili</a></li>
            </ul>
          </div><!--navigation-->
 
        <div id="content">
          <cite>Un classico non ha mai finito di dire <br />
            quello che ha da dire.<br /><br />
            Italo Calvino</cite>
          <img src="portone.jpg" alt="Immagine della porta d'ingresso del liceo" title="Immagine della porta d'ingresso del liceo" />
                    </div><!--content-->

          <div id="footer">
            <span class="bold">© Liceo Ginnasio «R. Franchetti» - Mestre (VE) 2008</span> <br />
            Sito progettato e realizzato nel 2007 da Pietro Gavagnin<br />
            Sito riadattato e riscritto nel 2008 da Mauro Sacchetto
          </div>
          </div><!--wrapper-->
          </div><!--container-->
</body>
</html>

Potete però vedere il risultato a questo link:
http://samiel.netsons.org/index.html.
In pratica, il div col testo e l'immagine sono sbalzati fuori
da content e inseriri in wrapper. Eppure...
Attendo correzioni.

Grazie mille
M.

alessiodf · Messaggio da **alessiodf** » lun 22 ott 2007, 19:56

attenzione ad usare i float per immagini e cite e altro tipo i paragrafi... la soluzione sta in:

Codice: Seleziona tutto

#content img {width:200px;  margin:100px 0 25px 65px;}
#content cite { width:450px; margin:45px; font-size:180%;}

senza float.. oppure se li vuoi a tutti i costi, sotto devi mettere (dentro content) un div anche vuoto con clear:both come gia' hai fatto per il layout!

<img src="portone.jpg" alt="Immagine della porta d'ingresso del liceo" title="Immagine della porta d'ingresso del liceo">
<div style="clear:both"></div>

mauro · Messaggio da **mauro** » lun 22 ott 2007, 19:58

Non sono esperto ma non credo sia un tuo errore, hai due elementi che scappano fuori dal parent e stando al w3c non dovrebbero, boh... comunque potresti posizionare cite e img relativamente a content ed evitare di `floattarli', cosi' dovrebbe andare.

Messaggio da **samiel** » lun 22 ott 2007, 20:24

@ alessiodf
1° soluzione: ma così l'immagine (senza float)
si piazza in basso e non a fianco della scritta...

2° soluzione: lasciando ilcodice originale
e inserendo dopo il float
riesco finalmente a risolvere.
Optimum!

@mauro (omonimo!)
In effetti non capisco la ragione
questo comportamento.
Sono lieto di aver risolto,
ma vorrei capire la ragione...

Grazie a entrambi
M.

alessiodf · Messaggio da **alessiodf** » lun 22 ott 2007, 22:56

il motivo? bho!

vel senso che il float deve essere usato con il rispettivo clear poiche' il float fa flottare tutto da li' in poi..

W3school ha scritto:Definition clear

Image and text elements that appear in another element are called floating elements.

The clear property sets the sides of an element where other floating elements are not allowed.

Messaggio da **samiel** » mar 23 ott 2007, 0:25

Sì, verosimilmente il fatto era causato
dalla mancanza del clear. comunque almeno
adesso, se la teoria resta piuttosto oscura,
almeno in pratica funziona.
Ancora grazie
M.