Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it L'avatar di XBarboX
    Registrato dal
    Dec 2008
    Messaggi
    121

    Centrare ul con float: left

    Ciao a tutti,
    ho un problema che non riesco a risolvere
    Praticamente ho fatto un menu drop-down in puro css per il mio blog wordpress.
    E' venuto bene ma il problema è che non è allineato a sinistra e non in centro come vorrei.
    Metto un immagine per farvi capire: http://imageshack.us/photo/my-images/812/49924508.jpg/
    Ho provato di tutto ma non ci riesco!
    Ecco qui il codice css:
    codice:
    .container-menu-top{
      width: 100%;
      background-color: #127bbd;
    }
    
    #menu-top{
    	margin: 0px;
    	padding: 0px;
    	margin-top: 15px;
    	clear: both;
    }
    #menu-top ul{
    	margin: 0px;
    	padding: 0px;
    }
    #menu-top li{
    	position: relative;
    	float: left;
    	list-style: none;
    	margin: 0;
    	padding:0;
    	z-index: 5;
    }
    #menu-top li a{
    	height: 33px;
    	display: block;
    	text-decoration: none;
    	text-align: left;
    	line-height: 30px;
    	background-color: #127bbd;
    	color: white;
    	padding-left: 15px;
    	padding-right: 15px;
    	font-family: Tetre;
    	font-size: 24px;
    }
    #menu-top ul li{
    	width: 200px;
    	z-index: 10
    }
    #menu-top li a:hover{
    	background-color: #2582bc;
    }
    #menu-top ul{
    	display: none;
    	position: absolute;
    	top: 33px;
    }
    #menu-top li:hover ul{
    	display: block;
    }
    #menu-top ul ul{
    	visibility: hidden;
    	top: 0px;
    	left: 200px;
    }
    #menu-top ul li:hover ul{
    	visibility: visible;
    }
    Questo è il codice html in generale:
    codice:
    <div class="container-menu-top">
    <ul id="menu-top">[*]....[*]<ul>[*]....[*]....[/list][/list]
    </div>

  2. #2
    Utente di HTML.it L'avatar di marty89
    Registrato dal
    Apr 2011
    Messaggi
    107
    Ciao, una cosa che potresti fare è quella di dare al div con classe "container-menu-top" al posto di width: 100%, la larghezza effettiva del menu e poi lo centri con margin: 0 auto.

  3. #3
    Utente di HTML.it L'avatar di XBarboX
    Registrato dal
    Dec 2008
    Messaggi
    121
    Ho provato a fare come mi hai detto:
    codice:
    .container-menu-top{
      	background-color: #127bbd;
    	height: 1px; //L'ho messa solo per vedere come viene visualizzato in realtà
    	margin: 0 auto;
    }
    e mi esce fuori questo: http://imageshack.us/photo/my-images/64/asdziy.jpg/

    Come si nota il container-menu-top è sempre largo al 100% e non capisco il perchè.
    Per fare un altro test ho provato a dargli una larghezza fissa tipo 1000px;
    codice:
    .container-menu-top{
      	background-color: #127bbd;
    	height: 1px;
    	margin: 0 auto;
    	width: 1000px;
    }
    E mi esce fuori una cosa più decente:
    http://imageshack.us/photo/my-images/847/asdtad.jpg/

    Quindi il problema ora si sposta nel dare la larghezza corretta al container.
    Solo che non ci riesco!
    Ho provato con width: auto ma non funziona!

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.