Visualizzazione dei risultati da 1 a 5 su 5

Discussione: strani margini

  1. #1
    Utente di HTML.it
    Registrato dal
    Oct 2012
    Messaggi
    6

    strani margini

    Salve a tutti sono Matteo e vi volevo inanzitutto ringraziare perchè grazie alle vostre guide mi sono appassionato all'universo del we design.
    Premetto studio da poco più di una settimana i vari linguaggi html css etc quindi ho ancora tante lacune e tanti altri mondi da scoprire.. non vedo l'ora!
    Esercitandomi ho provato a fare qualche layout di pagina. I risultati bene o male ci sono, però sull' ultimo progetto a cui stavo lavorando, non capisco perchè, affinchè venga ordinato il menù laterale debba applicare un margine negativo. vi copio il testo del css. Aspetto una vostra risposta e perchè no qualche suggerimento anche offtopic! Grazie


    /* CSS Document */

    html,body {
    margin: 0px;
    padding: 0px;
    background-color: #000;
    }

    #contenitore {
    width: auto;
    margin:0 auto;

    }

    /* testata */
    #testata {
    width: 590px;
    height: 40px;
    margin: 30px 20% 0 20%;
    padding: 0 0 10px 10px;
    background-image:url(sfondo.gif);
    background-repeat:repeat-y;
    }

    #testata h1 {

    color:#FFF;
    float:left;
    font-size:24px;
    text-align:left;
    text-transform:uppercase;
    font-weight:bold;
    font-family:"MS Serif", "New York", serif;
    }
    #testata h2 {
    color:#000;
    float:right;
    font-size:18px;
    text-align:left;
    text-transform:uppercase;
    font-weight:bold;
    font-family:"MS Serif", "New York", serif;
    font-weight: -10px;
    padding-right: 30px;
    }

    /* menu a sinistra */

    #menu {
    margin:100px 0 0 -170px;
    width: 150px;
    height: 400px;
    float: left;
    font-family: Verdana, Geneva, sans-serif;
    font-size:14px;
    border: 1px solid black;
    background-color:#666;
    border: 1px solid red;
    }

    #menu ul {

    display:list-item;
    list-style:none;
    padding: 15px 35px 40px 20px;
    }

    #menu li {
    padding: 10px 10px 10px 10px;
    border-bottom: 2px groove;
    }
    ul a {
    color:#FFF;
    text-decoration:none;

    }

    ul a:hover {
    color: #F60;
    background-color:#333;
    }


    /* contenuto */

    #contenuto {
    width: 400px;
    height: 400px;
    margin: 100px 0 0 590px;
    border: 1px solid red;
    padding: 5px 5px 0 5px;
    background-color:#666;
    }

    #contenuto .sottotitolo {
    padding-left: 3px;
    width:auto;
    height: 18px;
    background-color:#F60;
    border: 1px solid #F00;
    font-family: Arial, Helvetica, sans-serif;
    text-align:left;
    color:#FFF;
    font-size:12px;
    }

    #contenuto .data {
    float:right;
    font-size: 10px;
    font-style:italic;
    padding: 5px 5px 0 0 ;

    }

    #contenuto .post {
    font-size:14px;
    font-weight:100;
    padding: 5px 0 0 5px;
    text-align:left;
    }


    /* footer */

    #footer {
    width: 600px;
    height: 100px;
    margin: 5px 0 0 380px;
    padding: 10px 10px 10px 10px;
    border: 1px solid red;
    background-color:#666;
    }


    #footer a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#FFF;
    text-decoration:none;
    }

  2. #2
    Moderatore di Annunci siti web L'avatar di Cesar
    Registrato dal
    Dec 2001
    Messaggi
    3,446
    puoi inserire anche l'html?

  3. #3
    Utente di HTML.it
    Registrato dal
    Oct 2012
    Messaggi
    6
    eccolo !

    <!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" />
    <link rel="stylesheet" href="index.css" type="text/css" />
    <title>Untitled Document</title>
    </head>

    <body>
    <div id="contenitore">
    <div id="testata"> <h1> Titolo sito </h1> <span> <h2> sotto titolo non css </h2> </span> </div>
    <div id="menu">
    <ul>[*] link [*] link2 [*] link4 [*] link3 [/list]
    </div>
    <div id="contenuto"> <div class="sottotitolo"> sottotitolo </div>
    <span class="data"> 13 Ottobre 2012</span> </br>
    </br>
    <span id="post"> Questo è il primo eventuale e forse ultimo post di questa dimostrazione </span>






    <div class="sottotitolo"> sottotitolo 2 </div>
    </div>
    <div id="footer"> link1

    link1


    link1 </div>
    </div>
    </body>
    </html>

  4. #4
    Ciao Matteo!

    Il tuo CSS è molto bello... ricco di commenti, ordinato... secondo me: hai un futuro come programmatore di CSS 8)
    Anche le regole vanno benino! In gran parte, ora, credo che il tuo problema sia il float:left del #menu per cui, questo, non occupa più lo spazio che gli è assegnato ed il #contenuto collassa a sinistra... di conseguenza devi poi dare a #menu un margine negativo a sinistra, perchè #contenuto "gli si infila sotto" 8)

    Giusto? Bah... spero di si... comunque, riparti da 0 con il tuo layout posizionando i div principali prima che abbiano "le cose dentro" in modo che tutto sia + semplice e chiaro.
    Hai il div #contenitore e questa è una gran cosa, ma nel tuo codice, ora, non è sfruttato a dovere... prova a ripartire da qui:

    codice:
    <head>
    
    <style type="text/css">
    
    #contenitore {
    width: 550px;
    margin:0 auto;
    }
    
    /* testata */
    #testata {
    width: 100%;
    background-color:#00FFFF;
    }
    
    /* menu a sinistra */
    
    #menu { 
    width: 150px;
    float:left;
    background-color:#0000FF;
    }
    
    /* contenuto */
    
    #contenuto {
    width: 400px;
    float:right;
    background-color:#FFFF00;
    }
    
    /* footer */
    
    #footer {
    width: 100%;
    clear:both;
    background-color:#009933;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="contenitore">
    
    <div id="testata">testata</div>
    
    <div id="menu">menu</div>
    
    <div id="contenuto">contenuto
    
    p</p>
    
    p</p>
    
    p</p></div>
    
    <div id="footer">footer</div>
    
    </div>
    </body>
    </html>
    ...dovresti risolvere 8)

    o/ !

  5. #5
    Utente di HTML.it
    Registrato dal
    Oct 2012
    Messaggi
    6
    grazie mille per il complimento e per l'intervento !Per quanto riguarda il mio futuro da programmatore beh penso che la mia carriera si fermerà ancor prima di iniziare in quanto vedevo php e java script e i canvas e penso che non ho abbastanza materia grigia per affrontarli. Mentre l'analisi che hai fatto per i css è azzeccatissima in quanto il contenuto si posizionava a sinistra del menu . ora provo con i tuoi consigli grazie mille !

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.