• pdellov
    Moderatore •

    Margini automatici e allineamento div

    Premetto che sto imparando a fare web design solo ora e che fino ad adesso ho sempre conosciuto solamente le basi dell'html, facendo qualche layout di base, tutta roba semplicissima..

    Oggi ho iniziato a creare la grafica di un nuovo sito web in XHTML e all'improvviso mi sono "intoppato" sui css: in pratica ho due problemi, che credo chiunque mastichi un minimo di css sappia risolvere senza problemi..

    Problema # 1: Non so perché ma non mi funzionano i margini automatici su determinati elementi... sarà uno dei classici errori da principianti...

    Problema #2: Nel div che ho chiamato body per contenere due box "center" e "sidebar" non riesco a far coesistere sulla stessa linea i due sotto-box, quindi rimane tutto sballato...

    Allego qui sotto il codice HTML e il foglio di stile fatti fino ad ora.
    First_header, logo, menu, sidebar e center sono le cose da guardare.
    First_header, logo e menu hanno il problema di non adattarsi alla risoluzione(per ora come vedete ho fissato padding fisso intorno ai 150px, ma così va bene per la mia risoluzione, per altre non credo).

    Sidebar e center devono essere semplicemente messe accanto una con l'altra..

    **Index.html:
    **[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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Titolo del sito</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="header">
    <p id="first_header">Qua la scritta</p>
    <div id="logo"><a href=""><img src="http://www.giorgiotave.it/forum/images/logo.png" style="border:0;"></a></div>
    </div>
    <div class="menu">
    <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Servizi</a></li>
    <li><a href="">Portfolio & Feedbacks</a></li>
    <li><a href="">Contatti</a></li>
    <li><a href="http://www.">Directory</a></li>
    <li><a href="http://www.">Comunicati Stampa</a></li>
    <li><a href="http://www.">Blog</a></li>
    </ul></div>
    <div id="body">
    <div class="center"><div>now we can</div>
    <div class="sidebar"><div>ciao</div></div>
    </div>
    </div>
    </body>
    </html>
    [/html]**CSS - Foglio di Stile
    **[html]
    body{
    background:url(images/bg.png) repeat-x 0 0 #f9f9f7;
    color:#363636;
    font:normal 11px/18px Arial, Helvetica, sans-serif;
    margin:0;
    padding:0;
    }

    div, h1, h2, h3, h4, h5, h6, form, label, input, span, ul, li, p, a {
    margin:0;
    padding:0;
    }

    #header{
    position:relative;
    margin:0 auto;
    height:100px;
    background:url(images/bg_header.png) repeat-x 0 0;
    color:#000000;}
    #first_header{
    color:#9d9e9e;
    position:relative;
    margin-right:auto;
    margin-left:auto;
    padding: 5px 0 0 155px;
    font-size: 11px;
    }
    #logo{
    padding: 15px 0 0 145px;
    }

    #body {
    width:850px;
    margin: 0px auto;
    border-left-width: 4px;
    border-left-style:solid;
    border-left-color:#d1d2d3;
    border-right-width: 4px;
    border-right-style:solid;
    border-right-color:#d1d2d3;
    background-color:#f9f9f7;
    }

    .center {
    width:550px;
    padding:0 0 0 0;
    }

    .center div{
    padding: 6px 4px 7px 7px;
    }

    .menu{height:32px;background:url(images/bg_menu.gif);
    margin-right:auto;
    margin-left:auto;
    }
    .menu a:active,.submenu a:focus{text-decoration:underline;}
    .menu ul{float:left;z-index:19;padding-left:140px;}
    .menu ul li ul{position:absolute;margin-top:29px;z-index:98;left:-999em;background-color:#f5f5f5;display:block;width:150px;}
    .menu li{float:left;list-style:none;background:url(images/submenu_divider.gif) no-repeat right top;z-index:20; }
    .menu li a{color:#535353;text-decoration:none;font-size:12px;padding:5px 15px 7px 15px;display:block;font-weight:bold;font-family:Geneva, Arial, Helvetica, sans-serif;}
    .menu li a:hover{background:#f8f8f8 url(images/submenu_divider.gif) no-repeat right top;}
    .menu li li a{color:#535353;text-decoration:underline;background:#F8F8F8;border-bottom:1px solid #CCC;border-right:0;display:block;width:120px;text-decoration:none;font-weight:normal;background-image:none;}
    .menu li li a:hover{color:#333;background:url(images/submenu-li-li-hover.gif) repeat-x; display:block;width:120px;border-bottom:1px solid;border-right:0;background-image:none;}
    .menu .active-menu ul{border-left:1px solid;border-right:1px solid;}
    .menu .active-menu{color:#FFF;text-decoration:none;background:#f5f5f5 url(images/submenu_divider.gif) no-repeat top right;}
    .menu .active-menu ul li a:hover{text-decoration:underline;border-right:0;background:url(images/submenu-li-li-hover.gif) repeat-x top;color:#535353;}

    .sidebar {
    width:160px;
    margin: 0px;
    padding: 5px;

    }
    a {
    color: #000000;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    }

    a:hover {
    text-decoration: underline;
    }
    [/html]

    0
  • pdellov
    Moderatore •

    Ho risolto, scusatemi per l'inutile apertura del post..

    0
Effettua l'accesso per rispondere