Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 19
  1. #1

    elementi menu di uguali dimensioni

    ciao a tutti, ho questo markup:
    Codice PHP:
    <div id="center">
        <
    div id="menu">

            <
    ul>
                [*][
    url="link1.php"]linkcorto[/url]

                [*][
    url="link2.php"]linknupopiulungo[/url]

                [*][
    url="link3.php"]link3[/url]

                [*][
    url="link4.php"]link4[/url]
            [/list]
                                    
        </
    div>
    </
    div
    e il seguente css:
    Codice PHP:
    #center{
    text-align:center;
    border-width:1px
    border-style:solid;
    background:#ffffff;
    margin-bottom:3px;
    }

    #menu {


    }

    #menu ul{
    list-stylenone;
    }

    #menu ul li{
    display:inline;
    }

    #menu a {
    font20px arialhelveticasans-serif;
    background#111111;
    border-width1px;
    border-stylesolid;
    border-color#ccc #888 #555 #bbb;
    padding-bottom:2px;

    non sono molto ferrato sui css,e infatti non riesco a fare assumere ad ogni link la stessa width, cioè ogni rettangolo (linkcorto, linknupopiulungo etc.) assume le dimensioni del testo del link.

    mi date una mano per favore?

    vorrei per esempio che ogni link fosse contenuto in un box di 120px e che i 4 elementi rimanessero centrati orizzontalmente nella pagina.

    grazie.

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Il codice HTML va quasi bene (non e` semanticamente corretto id="center" e c'e` un blocco inutile). Il CSS invece e` tutto da rivedere.

    HTML
    codice:
    <div id="aeamenu">
       <ul id="menu">[*]linkcorto[*]linknupopiulungo[*]link3[*]link4[/list]
    </div>

    Anzitutto per centrare. Immagino devi centrare il blocco "menu" all'interno della sua area.
    Per centrare un oggetto in uno esterno, questo deve avere una dimensione.
    Supponendo che "areamenu" stia direttamente nel body definisco width: 100% in tutti i blocchi che lo contengono.
    I li devono essere affiancati tramite il float. Se li rendi inline, non puoi definirne le dimensioni
    I link devono occupare tutto lo spazio del li. Quindi devono essere di tipo blocco ed avere dimensioni 100%.

    Ecco una bozza: mancano tutte le tue personalizzazioni.
    codice:
    html, body {
      width: 100%;
    }
    #areamenu {
      width: 100%;
      text-align: center;        /* serve solo per IE */
    }
    #menu {
      margin 0 auto;             /* per centrare */
      padding: 0;                  /* pulisce i padding di default */
      list-style-type: none;    /* toglie il punto-elenco */
    }
    #menu li {
      margin: 0;                   /* pulisce i margini di default */
      padding: 0;                  /* pulisce i padding di default */
      border: 1px solid;
      border-color: #ccc #888 #555 #bbb;
      list-style-type: none;    /* toglie il punto-elenco */
      float: left;                    /* affianca i vari blocchi */
      width: 15em;              /* da sistemare a piacere */
    }
    #menu a {
      display: block;           /* per potergli dare le dimensioni */
      width: 100%;            /* deve occupare tutto lo spazio del li */
      height: 100%;
      backgorund: ...;
      color: ...;
      font ...;
    }
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    innanzitutto grazie del tempo che mi hai dedicato e delle spiegazioni che hai postato.

    però non funziona. probabilmente perchè ho omesso di darti informazioni magari importanti ma la cui importanza ignoro.

    il blocco ul dell'intero menù è, come hai supposto, direttamente nel body. è il primo elemento.
    resta però allineato a sinistra.
    i testi dei link vorrei che fossero allineati a loro volta al centro dei rispettivi li.
    a destra del blocco menù poi, si infila il secondo div della pagina, cosa che prima non avveniva. per questo problema ho provato a dare un clear:left; al secondo div ma rimane nella stessa posizione.

    continuo a fare delle prove in modo da iniziare a capire bene come funziona la cosa....

    grazie di nuovo.

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    In effetti alla fine e` necessario un clear, che puoi aggiungere nel blocco successivo, oppure mediante il fab-clearing applicato al #menu e/o al #areamenu (vedi la pillola di fcaldera - usa la ricerca)
    Per quanto riguarda le centrature, dovrebbero essere a posto (una volta sistemato il clearing);
    eventualmente aggiungi un
    text-align: center;
    ai blocchi a
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  5. #5
    centratura testo nei blocchi li:risolto.
    spostamento sotto del div successivo:risolto.

    ma il blocco menu continua a essere allineato a sinistra :master:

  6. #6
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Con quale browser stai testando?
    Puoi postare il link?
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  7. #7
    firefox 2.0

    sono in locale

  8. #8
    questa è la pagina generata da php alla quale sto cercando di applicare quel menù

    Codice PHP:
    <!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>
    <
    title>pool</title>
    <
    script type="text/javascript" src="swfobject.js"></script>

    <script type="text/javascript">

        function displayDiv(index){
        
             divId = "div" + index;
             if (document.getElementById(divId).style.display=="none"){
                    document.getElementById(divId).style.display="block";
                    document.getElementById('btn'+index).value="nascondi"; 
                 } else {
                    document.getElementById(divId).style.display="none";
                    document.getElementById('btn'+index).value="mostra"; 
                 }
        }

    </script>

    <style>
    <!--

    html, body {
      width: 100%;
      background:#EEEEEE;
    }

    #container {
     border-width:1px;
     border-style:solid;
     padding-left:5px;
     padding-right:5px;
     padding-bottom:5px;
     padding-top:5px;
     clear:left;
     }

    #areamenu {
      width: 100%;
      text-align: center;        /* serve solo per IE */
    }

    #menu {
      margin 0 auto;             /* per centrare */
      padding: 0;                  /* pulisce i padding di default */
      list-style-type: none;    /* toglie il punto-elenco */
    }

    #menu li {
      margin: 0;                   /* pulisce i margini di default */
      padding: 0;                  /* pulisce i padding di default */
      border: 1px solid;
      border-color: #ccc #888 #555 #bbb;
      list-style-type: none;    /* toglie il punto-elenco */
      float: left;                    /* affianca i vari blocchi */
      width: 150px;              /* da sistemare a piacere */
    }

    #menu a {
     text-align: center;
      display: block;           /* per potergli dare le dimensioni */
      width: 100%;            /* deve occupare tutto lo spazio del li */
      height: 100%;
      background: #111111; 
      color: #FFFFFF;
      font: 20px arial, helvetica, sans-serif; 
      text-decoration:none;
    }

    div#div1,div#div2 {
     background-color:#DDDDDD; 
     border-width:1px;
     border-style:solid;
     text-align:center;
    }


    -->
    </style> 

    </head>
    <body>

    <div id="aeamenu">
       <ul id="menu">[*][url="link1.php"]linkcorto[/url][*][url="link2.php"]linknupopiulungo[/url][*][url="link3.php"]link3[/url][*][url="link4.php"]link4[/url][/list]

    </div>

    <div id="container">


            
        <div id="init">
            <h3>video presenti nella sezione pool (3)</h3>
            <input id="btn1" type="button" value="mostra" onclick="displayDiv('1')">
            


            [url="vidshandle.php?category=pool&action=insert"]inserisci un nuovo video[/url]

            

    </p>
        </div>

        <div id="div1" style="display:none">

            

    [b]video n.ro 1[/b]</p>

    [b]titolo: [/b]uno</p>            <div id="flashcontent1"></div>
                
                    <script type="text/javascript">        
                    var so = new SWFObject("tryvid.swf", "tryvid", "260", "240", "9", "black");
                    so.addVariable("video", "../poolvids/video00010.flv");
                    so.write("flashcontent1");
                    </script>

                    
            

    [url="vidshandle.php?category=pool&action=modify&id_video=10"]modifica[/url][url="vidshandle.php?category=pool&action=delete&id_video=10"]cancella[/url]</p></p><hr size="1" color="red">

    [b]video n.ro 2[/b]</p>

    [b]titolo: [/b]due</p>            <div id="flashcontent2"></div>
                
                    <script type="text/javascript">        
                    var so = new SWFObject("tryvid.swf", "tryvid", "260", "240", "9", "black");
                    so.addVariable("video", "../poolvids/video00011.flv");
                    so.write("flashcontent2");
                    </script>
                    
            

    [url="vidshandle.php?category=pool&action=modify&id_video=11"]modifica[/url][url="vidshandle.php?category=pool&action=delete&id_video=11"]cancella[/url]</p></p><hr size="1" color="red">

    [b]video n.ro 3[/b]</p>

    [b]titolo: [/b]appena inserito</p>            <div id="flashcontent3"></div>

                
                    <script type="text/javascript">        
                    var so = new SWFObject("tryvid.swf", "tryvid", "260", "240", "9", "black");
                    so.addVariable("video", "../poolvids/video00018.flv");
                    so.write("flashcontent3");
                    </script>
                    
            

    [url="vidshandle.php?category=pool&action=modify&id_video=18"]modifica[/url][url="vidshandle.php?category=pool&action=delete&id_video=18"]cancella[/url]</p></p><hr size="1" color="red">
        </div>
        


            
        <div id="init">
            <h3>news presenti nella sezione pool (5)</h3>

            <input id="btn2" type="button" value="mostra" onclick="displayDiv('2')">
            


            [url="newshandle.php?category=pool&action=insert"]inserisci una nuova news[/url]
            

    </p>
        </div>
        
        <div id="div2" style="display:none">

            

    [b]news n.ro 1[/b]</p>

    [b]data: [/b]29.08.2007</p>

    [b]titolo: [/b]PHP example page that should tell us upload informations</p><p align="left" style="padding-left:5px">[b]testo: [/b]// APPLICATION - PLEASE DON'T MODIFY
    require('UploadProgressManager.class.php');            // The class UploadProgressManager class
    session_start();                        // need a session to be really efficient
    clearstatcache();                        // and maybe a cleared stats
    $UPM = new UploadProgressManager($tmpdir);            // new UploadProgressManager with temporary upload folder
    if(($output = $UPM->getTemporaryFileSize()) === false)        // if UPM class cannot find the temporary file
        $output = '&filesize=undefined';            // the output for LoadVars will be undefined
    else
        $output = '&filesize='.$output;                // else the output will be temporary file size
    header('Content-Length: '.strlen($output));            // now headers to resolve browser cache problems
    header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
    header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');
    header('Cache-Control: no-store, no-cache, must-revalidate');
    header('Cache-Control: post-check=0, pre-check=0', false);
    header('Pragma: no-cache');
    echo $output;                            // and finally the output for LoadVars
    ?></p>

    [url="newshandle.php?category=pool&action=modify&id_news=16"]modifica[/url][url="newshandle.php?category=pool&action=delete&id_news=16"]cancella[/url]</p><hr size="1" color="blue">

    [b]news n.ro 2[/b]</p>

    [b]data: [/b]28.08.2007</p>

    [b]titolo: [/b]news nel mondo del pool</p><p align="left" style="padding-left:5px">[b]testo: [/b]

    $link = mysql_connect('localhost', 'mysql_user', 'mysql_password');
    if (!$link) {
        die('Could not connect: ' . mysql_error());
    }
    mysql_select_db('mydb');

    mysql_query("INSERT INTO mytable (product) values ('kossu')");
    printf("Last inserted record has id %d
    ", mysql_insert_id());

     printf("View Last inserted record id %d
    ", mysql_insert_id());

    Get the last id



    $last_id = mysql_insert_id(); 

    </p>

    [url="newshandle.php?category=pool&action=modify&id_news=15"]modifica[/url][url="newshandle.php?category=pool&action=delete&id_news=15"]cancella[/url]</p><hr size="1" color="blue">

    [b]news n.ro 3[/b]</p>

    [b]data: [/b]27.08.2007</p>

    [b]titolo: [/b]titolo di prova n'ro i per caratte ri @àè^--strani</p><p align="left" style="padding-left:5px">[b]testo: [/b]1)Usa un campo di tipo date.
    &&&&
    2) Per estrarre le ultime 5 basta che fai

    select * from tabella_news order by campo_data desc limit 5

    3) Se la data della news sarà quella odierna basta che imposti nella query di inserimento curdate() senza costringere l'utente ad inserire la data.
    Le date nel db dovranno essere memorizzate nel formato aaaa-mm-gg.
    Poi le visualizzi nel modo che più ti piace.

    es.

    insert into tabella_news (notizia,data) values ('$notizia',curdate() )</p>

    [url="newshandle.php?category=pool&action=modify&id_news=7"]modifica[/url][url="newshandle.php?category=pool&action=delete&id_news=7"]cancella[/url]</p><hr size="1" color="blue">

    [b]news n.ro 4[/b]</p>

    [b]data: [/b]27.08.2007</p>

    [b]titolo: [/b]ciao</p><p align="left" style="padding-left:5px">[b]testo: [/b]1)Usa un campo di tipo date.

    2) Per estrarre le ultime 5 basta che fai

    select * from tabella_news order by campo_data desc limit 5

    3) Se la data della news sarà quella odierna basta che imposti nella query di inserimento curdate() senza costringere l'utente ad inserire la data.
    Le date nel db dovranno essere memorizzate nel formato aaaa-mm-gg.
    Poi le visualizzi nel modo che più ti piace.

    es.

    insert into tabella_news (notizia,data) values ('$notizia',curdate() )</p>

    [url="newshandle.php?category=pool&action=modify&id_news=9"]modifica[/url][url="newshandle.php?category=pool&action=delete&id_news=9"]cancella[/url]</p><hr size="1" color="blue">

    [b]news n.ro 5[/b]</p>

    [b]data: [/b]20.02.2005</p>

    [b]titolo: [/b]In arrivo Macromedia Captive</p><p align="left" style="padding-left:5px">[b]testo: [/b]Macromedia Captivate è l'evoluzione del prodotto Macromedia RoboDemo, nuove funzionalità rivolte al mondo dell'e-learning.</p>

    [url="newshandle.php?category=pool&action=modify&id_news=5"]modifica[/url][url="newshandle.php?category=pool&action=delete&id_news=5"]cancella[/url]</p><hr size="1" color="blue">        
        </div>


    </div>

    </body>
    </html> 

  9. #9
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Non riesco a capire perche` non si centri.
    Prova comunque a dare colori di sfondo diversi a #areamenu ed a #menu, in modo da capirre se il problema e` il width:100% di #areamenu o i margini di #menu.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  10. #10
    era scritto così <div id="aeamenu">... ...ma niente comunque

    poi ho cambiato width a 99% per html e body perchè mi generava sempre la barra di scroll orizzontale...

    per il menu al centro ancora niente...

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.