Visualizzazione dei risultati da 1 a 7 su 7

Discussione: div affiancati

  1. #1

    div affiancati

    Ho questo codice, vorrei affiancare il div content e navigator, ma non ci riesco.
    Qualcuno mi aiuta.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <head>
    <title>Untitled</title>

    <style>
    body,html {
    height:100%;
    margin:0;
    background-color : #FF9933;
    }

    div#box {
    width:600px;
    height:510px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-255px 0 0 -300px;
    background-image : url(images/bgbody.gif);
    }

    div#header {
    width:550px;
    height:95px;
    margin-top : 15px;
    background-image : url(images/header_home.jpg);
    }

    div#container {
    float: left;
    width:300px;
    height:310px;
    margin-top : 10px;
    background-color : #ff0000;
    margin-right: 169px;
    }

    div#footer {
    width:550px;
    height:30px;
    margin-top : 27px;
    background-color : #ff0000;
    }

    div#navigation {
    float: left;
    width:160px;
    height:310px;
    margin-left:10px;
    background-color : #ff9999;
    }

    div#wrapper {
    float:left;
    width:550px;
    }
    </style>
    </head>


    <body>

    <div id="box" align="center">
    <div id="header"></div>
    <div id="wrapper">
    <div id="container"></div>
    <div id="navigation"></div>
    </div>
    <div id="footer"></div>
    </div>

    </body>
    </html>
    lucasweb.it
    web design & development >>>

  2. #2
    Occhio ai margini! Hai impostato un margine sinistro al box #navigation che è anche flottante a sinistra! Quindi IE, causa il solito bug, ti raddoppia quel margine e di conseguenza il box #navigation non riesce più ad essere contenuto nel box #wrapper. Perciò ti va a capo invece di affiancarsi a #container.

    Ti conviene anche inserire un
    appena prima di chiudere il <div> #wrapper e usarlo per "ripulire" il float (assegnagli una classe che faccia il clear: left). Conviene usare un
    invece di assegnare la classe al box #footer (che è esterno al <div> #wrapper) perché così #wrapper assume l'altezza esatta per contenere i due box flottanti #container e #navigation.

  3. #3
    grazie mille, avevo comunque risolto eliminando del tutto il wrapper e sistemando un po il float e i margini.
    lucasweb.it
    web design & development >>>

  4. #4
    Utente di HTML.it L'avatar di maxtn
    Registrato dal
    Jul 2002
    Messaggi
    712
    Aiuto, non riesco a sistemarlo... qualcuno mi da una mano please?
    ho i due div "sx" e "dx" contenuti dal div "corpo", solo con IE mi va a capo il div di destra...

    #corpo{
    width: 840px;
    float:left;
    background-image: url(../images/Sidemenu_1.gif);
    background-repeat: repeat-y;
    }

    #sx{
    width: 570px;
    float:left;
    margin: 22px 18px 0px 22px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: left;
    line-height: 20px!important;
    }

    #dx {
    width: 220px;
    float: left;
    text-align: left;
    }



    questo è il link: http://84.18.151.220
    Ubuntu 10.10 x86_64

  5. #5
    margin + float = IE Bug

    leva il margin al float

  6. #6
    Oppure aggiungi display: inline alle dichiarazioni dei box flottanti che hanno impostato un margine sullo stesso lato del float.

  7. #7
    Utente di HTML.it L'avatar di maxtn
    Registrato dal
    Jul 2002
    Messaggi
    712
    Grazie per i consigli, forse ce l'ho fatta... spero!
    sto facendo il test sui vari browser!
    Ubuntu 10.10 x86_64

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.