• T
    User Newbie •

    [CSS] Problemi con float e clear

    Salve a tutti, mi sto letteralmente litigando con i float ed i clear su firefox ed explorer...
    Ho una semplice pagina contenuta in un livello con un menù in alto, un logo a destra ed uno slogan con un'altro loghetto sotto il menu a sinistra.
    Il problema sta nel fatto che su firefox il menù si posiziona più per sinistra e su explorer invece il logo si mette sotto il menu.
    Dovrei mettere anche il div logo2 a qualche pixel sotto lo slogan... appena lo faccio mi sparisce mezza roba su di un browser....
    Ecco gli screenshot allegati:
    Explorer
    image
    Firefox
    image
    Questo è il codice html che ho ```
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Documento senza titolo</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="bbody">

    <div id="logo2"></div>
    <h2 id="slogan">Slogan del sito</h2>
    <div id="menu">aaa | bbb | ccc</div>
    </div>
    </body>
    </html>

    e questo il codice css```
body &#123;
	padding&#58; 0px;
	margin&#58; 0px;
	width&#58; 100%;
	height&#58; 100%;
&#125;

#bbody &#123;
	width&#58;955px;
	height&#58; 100%;
	border&#58;1px solid black;
  margin-left&#58; auto;
	margin-right&#58; auto; 
&#125;

#logo&#123;
  float&#58;right;
  width&#58;200px;
  height&#58;173px;
  border&#58;1px solid yellow;
  background-color&#58; black;
&#125;
#logo2&#123;
  clear&#58; right;
  border&#58;1px solid yellow;
  width&#58; 175px;
  height&#58; 82px;
  background-color&#58; gray;
  /*margin-top&#58; -20px;*/
&#125;

#slogan&#123;
  width&#58; 450px;
  height&#58; 20px;
  border&#58;1px solid black;
  background-color&#58; green;
  margin-top&#58; -220px;
&#125;

#menu &#123;

  border&#58;1px solid blue;
	width&#58;100%;
	height&#58; 25px;
	margin-top&#58; -80px;
  text-align&#58; center;
  background-color&#58; red;
&#125;

    Grazie a tutti in anticipo!

    0
  • T
    User Newbie •

    Salve a tutti, mi sto letteralmente litigando con i float ed i clear su firefox ed explorer...
    Ho una semplice pagina contenuta in un livello con un menù in alto, un logo a destra ed uno slogan con un'altro loghetto sotto il menu a sinistra.
    Il problema sta nel fatto che su firefox il menù si posiziona più per sinistra e su explorer invece il logo si mette sotto il menu.
    Dovrei mettere anche il div logo2 a qualche pixel sotto lo slogan... appena lo faccio mi sparisce mezza roba su di un browser....
    Ecco gli screenshot allegati:
    Explorer
    image
    Firefox
    image
    Questo è il codice html che ho ```
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Documento senza titolo</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="bbody">

    <div id="logo2"></div>
    <h2 id="slogan">Slogan del sito</h2>
    <div id="menu">aaa | bbb | ccc</div>
    </div>
    </body>
    </html>

    e questo il codice css```
body &#123;
	padding&#58; 0px;
	margin&#58; 0px;
	width&#58; 100%;
	height&#58; 100%;
&#125;

#bbody &#123;
	width&#58;955px;
	height&#58; 100%;
	border&#58;1px solid black;
  margin-left&#58; auto;
	margin-right&#58; auto; 
&#125;

#logo&#123;
  float&#58;right;
  width&#58;200px;
  height&#58;173px;
  border&#58;1px solid yellow;
  background-color&#58; black;
&#125;
#logo2&#123;
  clear&#58; right;
  border&#58;1px solid yellow;
  width&#58; 175px;
  height&#58; 82px;
  background-color&#58; gray;
  /*margin-top&#58; -20px;*/
&#125;

#slogan&#123;
  width&#58; 450px;
  height&#58; 20px;
  border&#58;1px solid black;
  background-color&#58; green;
  margin-top&#58; -220px;
&#125;

#menu &#123;

  border&#58;1px solid blue;
	width&#58;100%;
	height&#58; 25px;
	margin-top&#58; -80px;
  text-align&#58; center;
  background-color&#58; red;
&#125;

    Grazie a tutti in anticipo!

    0
  • massy
    Moderatore •

    Ciao e benvenuto nel nostro forum 🙂

    Ho dato uno sguardo velocissimo al codice e devo dire che mi son perso abbastanza. Ad esempio non capisco perché il menu l'hai messo sotto ed hai dovuto portarlo sopra con un margine negativo.

    Io fossi in te metterei:

    1. un div con il menu in alto senza specificare la larghezza e mettendo un margine a destra di 200 px.
    2. metterei l'immagine a destra, con posizione assoluta. (al limite usa il float:right con un clear nel div successivo, vedi te quale preferisci)
    3. h2

    una cosa grezza tipo questa:

    #logo&#123;
  position:absolute;
  right&#58;0;
  top&#58;0;
  border&#58;1px solid yellow;
  background-color&#58; black;
&#125;
#logo2&#123;
  clear&#58; right;
  border&#58;1px solid yellow;
  width&#58; 175px;
  height&#58; 82px;
  background-color&#58; gray;
&#125;

#slogan&#123;
  width&#58; 450px;
  height&#58; 20px;
  border&#58;1px solid black;
  background-color&#58; green;
&#125;

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Documento senza titolo</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="bbody">
    <div id="menu">aaa | bbb | ccc</div>

    <h2 id="slogan">Slogan del sito</h2>
    <div id="logo2"></div>
    </div>
    </body>
    </html>

     :ciauz:
    0
  • massy
    Moderatore •

    Ciao e benvenuto nel nostro forum 🙂

    Ho dato uno sguardo velocissimo al codice e devo dire che mi son perso abbastanza. Ad esempio non capisco perché il menu l'hai messo sotto ed hai dovuto portarlo sopra con un margine negativo.

    Io fossi in te metterei:

    1. un div con il menu in alto senza specificare la larghezza e mettendo un margine a destra di 200 px.
    2. metterei l'immagine a destra, con posizione assoluta. (al limite usa il float:right con un clear nel div successivo, vedi te quale preferisci)
    3. h2

    una cosa grezza tipo questa:

    #logo&#123;
  position:absolute;
  right&#58;0;
  top&#58;0;
  border&#58;1px solid yellow;
  background-color&#58; black;
&#125;
#logo2&#123;
  clear&#58; right;
  border&#58;1px solid yellow;
  width&#58; 175px;
  height&#58; 82px;
  background-color&#58; gray;
&#125;

#slogan&#123;
  width&#58; 450px;
  height&#58; 20px;
  border&#58;1px solid black;
  background-color&#58; green;
&#125;

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Documento senza titolo</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="bbody">
    <div id="menu">aaa | bbb | ccc</div>

    <h2 id="slogan">Slogan del sito</h2>
    <div id="logo2"></div>
    </div>
    </body>
    </html>

     :ciauz:
    0
Effettua l'accesso per rispondere