Visualizzazione dei risultati da 1 a 7 su 7
  1. #1

    problema div contenitore

    salve a tutti, vorrei avere delle delucidazioni per quanto riguarda il div contenitore, ovvero quel div che contiene tutti gli altri div

    1- come far si che questo div sia attaccato alla parte alta della pagina web? ho provato a impostare top margin e padding a 0 ma non succede niente. l'unica mezza soluzione che mi è venuta è impostare il div con una posizione su absolute e mettere in top 0 px, ma in quel caso il div non sarebbe centrato. (stesso problema per la parte bassa)

    2- non riesco a mettere un colore di sfondo al div a menochè non imposti la lunghezza ma, se dovessi impostarla, il div non aumenterebbe la sua lunghezza automaticamente e quindi se scrivo nella pagina più del dovuto c'è il rischio che il contenuto vada fuori dal contenitore.

    3- come impostare dei bordi laterali che non siano solid, dotted, ecc.. ma che siano immagini ripetute con "repeat y"?


    grazie a tutti per la pazienza e per la cortesia

  2. #2
    Moderatrice di Grafica, Cerco e offro lavoro L'avatar di Myaku
    Registrato dal
    Nov 2006
    Messaggi
    10,349

    Re: problema div contenitore

    premettendo che conoscere almeno la dtd in uso (e magari anche il codice html/css a cui fai riferimento) non sarebbe male ...

    Originariamente inviato da Tabibito
    1- come far si che questo div sia attaccato alla parte alta della pagina web? ho provato a impostare top margin e padding a 0 ma non succede niente. l'unica mezza soluzione che mi è venuta è impostare il div con una posizione su absolute e mettere in top 0 px, ma in quel caso il div non sarebbe centrato. (stesso problema per la parte bassa)
    il primo elemento contenuto in questo div ha applicato un margine? (che sia stato da te definito, o che lo prevede di default e da te non azzerato?)

    2- non riesco a mettere un colore di sfondo al div a menochè non imposti la lunghezza ma, se dovessi impostarla, il div non aumenterebbe la sua lunghezza automaticamente e quindi se scrivo nella pagina più del dovuto c'è il rischio che il contenuto vada fuori dal contenitore.
    hai usato dei float e non hai applicato il clearing?

    3- come impostare dei bordi laterali che non siano solid, dotted, ecc.. ma che siano immagini ripetute con "repeat y"?
    la cosa che mi viene più immediata, senza aver visto il layout: potresti inserire il tuo pattern come immagine di sfondo. gif o png (in questo caso occhio che se consideri anche ie6, dovrai rivedere un attimo la grafica per lui).

  3. #3
    grazie per la risposta, allego il codice sia html che css, tanto è un sito inutilissimo XD

    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=utf-8" />
    <title>Mio sito</title>
    
    <link href="css/master.css" rel="stylesheet" type="text/css" />
    
    </head>
    <body>
    
    <div id="contenitore">
      <div id="header">[img]immagini/logo_principale.png[/img]</div>
      <div id="navigazione">
      	<ul>
        	[*]CHI SIAMO
        	[*]COSA FACCIAMO
        	[*]PRODOTTI
        	[*]CONTATTACI
    	[/list]
      </div>
      <div id="contenuto">
     
          <h1>Benvenuti.</h1>
          <h1> [img]immagini/fiore.jpg[/img]</h1>
          
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta  suscipit augue. Suspendisse potenti. Nunc convallis nisl nec lorem  pellentesque sed pretium est venenatis. Nunc eu augue urna, sed  scelerisque tortor. Integer sollicitudin, quam hendrerit iaculis  ullamcorper, metus magna ullamcorper massa, ut molestie turpis tortor  in purus. Suspendisse potenti. Suspendisse enim turpis, bibendum nec  luctus id, varius eu est. Sed vestibulum augue ac justo commodo  facilisis. Cras vulputate ante vitae sem posuere quis tristique libero  tincidunt. Mauris ullamcorper facilisis erat, sit amet commodo ligula  mollis ac. Curabitur velit nibh, laoreet vitae facilisis ac, volutpat  id ligula. Duis cursus, felis id elementum fermentum, velit orci  pharetra ligula, nec bibendum urna sapien sed mi. Sed diam justo,  laoreet quis aliquet et, commodo eget lorem. </p>
          
    
    Nam faucibus orci ut augue fringilla laoreet. Nulla facilisis mollis  elementum. Donec a felis massa. Sed hendrerit quam ut arcu sodales ac  vestibulum dolor euismod. Maecenas ullamcorper tempus luctus. Cras  accumsan, metus sit amet accumsan venenatis, magna justo lacinia  ligula, in pretium odio ante ut leo. Nam rhoncus hendrerit ornare.  Suspendisse ut augue sodales ipsum placerat hendrerit facilisis vitae  erat. Aenean vitae eros risus. Sed semper, massa ut dignissim euismod,  augue purus egestas massa, vel pulvinar elit libero quis felis. Proin  eget justo eros. Quisque tempor massa in tortor tempus auctor. Proin  justo lacus, accumsan sit amet pretium aliquet, adipiscing ac dolor.      </p>
          
    
    </p>
      </div>
      <div id="footer">Inserire qui il contenuto per  id "footer"</div>
    </div>
    </body>
    </html>




    codice:
    @charset "utf-8";
    /* CSS Document */
    
    
    body,td,th {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 1em;
    	color: #333;
    	line-height: 1.5;
    }
    body {
    	background-color: #222222;
    	background-repeat: repeat-x;
    	background-position: bottom;
    	background-image: url(../immagini/background/bg_body.jpg);
    	background-attachment: fixed;
    	margin-bottom: 0px;
    	padding-bottom: 0px;
    	height: 100%;
    }
    
    #contenitore {
    	width: 80%;
    	margin-right: auto;
    	margin-left: auto;
    }
    #header {
    	height: 93px;
    	width: 97%;
    	float: left;
    	padding-top: 10px;
    	padding-bottom: 10px;
    	padding-left: 3%;
    }
    #navigazione {
    	float: left;
    	width: 22%;
    	background-color: #E0E0E0;
    	height: 300px;
    	margin-top: 20px;
    	margin-right: 1%;
    }
    #contenuto {
    	width: 72%;
    	float: left;
    	background-color: #E0E0E0;
    	padding-right: 2%;
    	padding-left: 2%;
    	margin-top: 20px;
    	margin-left: 1%;
    }
    
    #footer {
    	height: 70px;
    	width: 100%;
    	float: left;
    	background-color: #E0E0E0;
    }
    .img_fiore {
    	float: right;
    	width: 40%;
    	height: auto;
    	margin-left: 10px;
    	padding-left: 10px;
    	margin-top: 15px;
    }
    a {
    	font-weight: bold;
    }
    a:link {
    	color: #036;
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    	color: #036;
    }
    a:hover {
    	text-decoration: underline;
    	color: #903;
    }
    a:active {
    	text-decoration: none;
    	color: #F90;
    }
    #contenitore #navigazione li {
    	background-color: #C3C3C3;
    	font-family: Tahoma, Geneva, sans-serif;
    	border-bottom-width: 1px;
    	border-bottom-style: dotted;
    	border-bottom-color: #333;
    	margin-bottom: 0px;
    	margin-top: 0px;
    	height: 35px;
    	padding-left: 6%;
    	line-height: 35px;
    	font-size: 0.9em;
    }
    #contenitore #navigazione ul {
    	list-style-type: none;
    	margin-top: 0px;
    	padding-top: 0px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	padding-left: 0px;
    }
    
    #form1 {
    	width: 500px;
    	margin-top: 50px;
    	margin-left: 50px;
    }
    #form1 fieldset {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	background-color: #69C;
    	color: #FFF;
    	padding: 20px;
    }
    #form1 fieldset legend {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    	text-transform: uppercase;
    	background-color: #369;
    	padding: 10px;
    }
    #form1 fieldset p #submit {
    	margin-left: 400px;
    }
    /*codice per la lunghezza e la posizione delle barrette bianche dei moduli in cui si scrive il testo inizio*/
    input[type=text] {
    	width:170px;
    }
    #form1 fieldset p #nome   {
    	margin-left: 53px;
    	width: 170px;
    }
    #form1 fieldset p #citta {
    	margin-left: 60px;
    }
    #form1 fieldset p #professione {
    	margin-left: 14px;
    }
    #form1 fieldset p #nome_utente {
    	margin-left: 8px;
    }
    #form1 fieldset p #password {
    	margin-left: 28px;
    	width: 170px;
    }
    /*codice per la lunghezza e la posizione delle barrette bianche dei moduli in cui si scrive il testo fine*/

    edit: ecco la pagina di output http://www.dgenerazione.altervista.org/prova/

  4. #4
    Moderatrice di Grafica, Cerco e offro lavoro L'avatar di Myaku
    Registrato dal
    Nov 2006
    Messaggi
    10,349
    ok, come già detto:
    . hai usato dei float, ma manca il clearing, quindi il contenitore non si espande. Se non si espande, non vedrai quanto imposti come "background" (dovresti poter trovare maggiori info sulla relazione float/clear con una ricerca, qui o in rete, o in una guida di base ai css)
    . azzera i margini e padding di default degli elementi:
    codice:
    * {margin: 0; padding: 0}
    ps. è meglio una dtd strict che una transitional

  5. #5
    il clean in quale div lo devo applicare? in tutti o solo nel contenitore?

  6. #6
    Moderatrice di Grafica, Cerco e offro lavoro L'avatar di Myaku
    Registrato dal
    Nov 2006
    Messaggi
    10,349
    Originariamente inviato da Tabibito
    il clean in quale div lo devo applicare? in tutti o solo nel contenitore?
    clear, non clean.
    e dipende da quale metodo utilizzi, e quali sono gli elementi fluttuati

    Originariamente inviato da Myaku
    dovresti poter trovare maggiori info sulla relazione float/clear con una ricerca, qui o in rete, o in una guida di base ai css
    http://css.html.it/guide/lezione/39/...y-float-clear/
    http://www.quirksmode.org/css/clearing.html
    http://perishablepress.com/press/200...clearfix-hack/

  7. #7
    Utente di HTML.it
    Registrato dal
    Jun 2008
    Messaggi
    59
    ciao
    io lo scriverei così:

    #contenitore {
    position: relative;
    text-align: left;
    display: block;
    width: 80%;
    margin: 0 auto;
    z-index: 0;
    }
    il text-align serve in IE6 per ristabilire l'allineamento a sinistra

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.