Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it
    Registrato dal
    May 2006
    Messaggi
    446

    problema con margine div

    Ho un problema con il layout del mio sito. L'idea era quella di fare un rettangolo centrale con uno sfondo blu scuro e creare intorno una specie di cornice rosa.
    Ho pensato di fare un div più grande di dimensioni 830*... (altezza dovrebbe essere variabile a seconda del contenuto) e uno più piccolo al suo interno di circa 800* (altezza anche qui variabile).
    Per staccarlo dal contenitore di 15 px in tutti i lati ho provato diversi sistemi:
    - dare al contenitore piccolo margin 15
    - dare position relative e top, left, right, bottom 15

    .....ma niente...se funziona, non appena inserisco il contenuto si sballa tutto (primo caso)

    Il mio problema è che lo sfondo del div esterno è una texture, altrimenti avrei risolto semplicemente mettendo un bordo a quello più piccolo...

    Inoltre con la soluzione margin se provo a dare del padding oppure a dare del margin a p contenuti impazzisce tutto....

    Quindi ricapitolando avrei bisogno di sapere:
    - qual è il sistema migliore per ottenere quello che voglio?
    - come faccio ad adattare i due div al contenuto senza quindi dover dare un'altezza fissa e mantenendo i 15 px di margine?
    -se provo a creare due colonne all'interno del div più piccolo (ho usato due div con float left) mi impazzisce tutto...

    Grazie

  2. #2
    Utente di HTML.it L'avatar di Irene80
    Registrato dal
    Dec 2007
    Messaggi
    178
    Hai provato a dare un padding al contenitore più grande?

    Irene

    p.s. se posti il codice chi è più esperto di me ti può aiutare

  3. #3
    Utente di HTML.it
    Registrato dal
    May 2006
    Messaggi
    446
    grazie per la tua risposta...purtroppo ho già provato a dare il padding ma senza ottenere i risultati sperati...cmq ecco il codice:

    html:
    codice:
    <!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=iso-8859-1" />
    <title></title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    
    <script type="text/JavaScript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>
    
    <body background="images/bg-page.jpg" onload="MM_preloadImages('images/home-on.gif','images/bb-on.png')">
    <div id="top">
    <div id="menu">
    [img]images/home-off.png[/img][img]images/bb-off.png[/img][img]images/dove-off.png[/img][img]images/prezzi-off.png[/img][img]images/contattaci-off.png[/img]
    </div> 
    </div> 
    <div id="container">
    <div id="cornice">
    <div id="cont-int">
      <p style="margin:15px;">ciao</p>
      <div id="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
      <div id="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </div>
    </div>
    </div> 
    
    
    </body>
    </html>
    css:
    codice:
    body{
    font-size: 12px;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    text-align: justify;
    color:#FFFFFF;
    }
    
    #container {
    width:830px; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:20px;
    }
    
    img {border: none;}
    
    focus { outline: 0;}
    a {color: #fff; text-decoration: none;}
    a:hover {color: #fff; text-decoration: none;}
    
    #cornice { 
    width: 800px;
    background-image:url(images/bg-cornice.jpg); 
    padding:15px;
    }
    
    #cont-int{
    width:800px; 
    position: relative; 
    top:0; 
    margin-top:-15px; 
    margin-bottom:-15px;
    height:auto; 
    height:100%; 
    min-height:100%;  
    background-image:url(images/bg-cont.jpg);
    }
    
    #cont-int p{
    margin-left:10px;
    /*margin-top:10px;*/
    }
    
    #top{
    margin-top:10px;
    display:block; 
    width:830px; 
    height:100px; 
    margin-left:auto; 
    margin-right:auto;
    }
    
    #top img {
    margin-right:20px;
    }
    
    #menu{
    margin-left:auto; 
    margin-right:auto;
    }
    
    #left{
    float:left;
    width:360px;
    padding:5px;
    }

  4. #4
    Utente di HTML.it
    Registrato dal
    May 2006
    Messaggi
    446
    ps: c'è un errore nel codice: ci sono i due div che hanno id left...fate conto che uno abbia id left e l'altro left2....

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 © 2026 vBulletin Solutions, Inc. All rights reserved.