Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Problema Lista in Orizzontale
 
drugoi7
Jr. Member
 
Total Posts:  13
Joined:  2013-01-19
 

Salve a tutti, sto’ lavorando ad un eCommerce con Magento e si stanno mostrando alla finestra alcune mie ruggini su CSS.
Nello specifico sto’ creando un elenco con immagini delle categorie e sottocategorie del negozio.
Dal punto di vista Server non ho problemi, ma ho problemi a creare una vista decente sul front end.
Bene il codice che ne viene fuori è il seguente:

<ul class="categories">





<
li class="category">
<
class="category-link" href="http://127.0.0.1/gonfiabililog/index.php/tende-e-coperture.html"Tende e Coperture</a>
</
li>

<
ul class="subcategories">
<
div class="subcategories-container"><div class="subcategory-container"><li class="subcategories-link"><a href="http://127.0.0.1/gonfiabililog/index.php/tende-e-coperture/gazebo-stand-igloo.html"><img src="http://127.0.0.1/gonfiabililog/media/catalog/category/2_640x480_1.jpg" title="Gazebo/Stand/Igloo" class="category-img"></a></li><class="subcategory-name">Gazebo/Stand/Igloo</p></div><div class="subcategory-container"><li class="subcategories-link"><a href="http://127.0.0.1/gonfiabililog/index.php/tende-e-coperture/big-tents-cover.html"><img src="http://127.0.0.1/gonfiabililog/media/catalog/category/http_imgload_1.jpg" title="Coperture/Tende" grandi="" class="category-img"></a></li><class="subcategory-name">Coperture/Tende Grandi</p></div><div class="subcategory-container"><li class="subcategories-link"><a href="http://127.0.0.1/gonfiabililog/index.php/tende-e-coperture/sport-cover.html"><img src="http://127.0.0.1/gonfiabililog/media/catalog/category/2012-09-12-09-55-58-623797300_640x478_3.jpeg" title="Coperture" sportive="" class="category-img"></a></li><class="subcategory-name">Coperture Sportive</p></div></div><div class="subcategories-container2"><div class="subcategory-container"><li class="subcategories-link"><a href="http://127.0.0.1/gonfiabililog/index.php/tende-e-coperture/varius-cover.html"><img src="http://127.0.0.1/gonfiabililog/media/catalog/category/chesterfield_6x6_640x436_1.jpg" title="Coperture" varie="" class="category-img"></a></li><class="subcategory-name">Coperture Varie</p></div></div></ul>




<
li class="category">
<
class="category-link" href="http://127.0.0.1/gonfiabililog/index.php/special-inflatables.html"Gonfiabili Speciali</a>
</
li>

<
ul class="subcategories">
<
div class="subcategories-container"><div class="subcategory-container"><li class="subcategories-link"><a href="http://127.0.0.1/gonfiabililog/index.php/special-inflatables/pool-cover.html"><img src="http://127.0.0.1/gonfiabililog/media/catalog/category/visiopool_1.jpg" title="Coperture" piscine="" class="category-img"></a></li><class="subcategory-name">Coperture Piscine</p></div><div class="subcategory-container"><li class="subcategories-link"><a href="http://127.0.0.1/gonfiabililog/index.php/special-inflatables/crystal-cover.html"><img src="http://127.0.0.1/gonfiabililog/media/catalog/category/156077943305671881_PGEYTNfA_c_1.jpg" title="Coperture" cryistal="" class="category-img"></a></li><class="subcategory-name">Coperture Cryistal</p></div><div class="subcategory-container"><li class="subcategories-link"><a href="http://127.0.0.1/gonfiabililog/index.php/special-inflatables/car-cover.html"><img src="http://127.0.0.1/gonfiabililog/media/catalog/category/600_AT1015_016_640x480_1.jpg" title="Garage" gonfiabili="" class="category-img"></a></li><class="subcategory-name">Garage Gonfiabili</p></div></div><div class="subcategories-container2"><div class="subcategory-container"><li class="subcategories-link"><a href="http://127.0.0.1/gonfiabililog/index.php/special-inflatables/screen.html"><img src="http://127.0.0.1/gonfiabililog/media/catalog/category/model_C_1_1.JPG" title="Schermi" gonfiabili="" class="category-img"></a></li><class="subcategory-name">Schermi Gonfiabili</p></div><div class="subcategory-container"><li class="subcategories-link"><a href="http://127.0.0.1/gonfiabililog/index.php/special-inflatables/tunnel.html"><img src="http://127.0.0.1/gonfiabililog/media/catalog/category/tunnel_interno_2_3.jpg" title="Tunnel" class="category-img"></a></li><class="subcategory-name">Tunnel</p></div></div></ul>




<
li class="category">
<
class="category-link" href="http://127.0.0.1/gonfiabililog/index.php/gonfiabili-pubblicitari.html"Gonfiabili Pubblicitari</a>
</
li>

<
ul class="subcategories">
<
div class="subcategories-container"><div class="subcategory-container"><li class="subcategories-link"><a href="http://127.0.0.1/gonfiabililog/index.php/gonfiabili-pubblicitari/inflatable-billboard.html"><img src="http://127.0.0.1/gonfiabililog/media/catalog/category/cartelloni_1.jpg" title="Cartelloni" gonfiabili="" class="category-img"></a></li><class="subcategory-name">Cartelloni Gonfiabili</p></div><div class="subcategory-container"><li class="subcategories-link"><a href="http://127.0.0.1/gonfiabililog/index.php/gonfiabili-pubblicitari/helium-baloon-blimp.html"><img src="http://127.0.0.1/gonfiabililog/media/catalog/category/DSCN9622_1.JPG" title="Palloni" ad="" elio="" e="" dirigibili="" class="category-img"></a></li><class="subcategory-name">Palloni ad Elio e Dirigibili</p></div><div class="subcategory-container"><li class="subcategories-link"><a href="http://127.0.0.1/gonfiabililog/index.php/gonfiabili-pubblicitari/air-dencer.html"><img src="http://127.0.0.1/gonfiabililog/media/catalog/category/Inflatable_20dancer_188x480_1.jpg" title="Air" dancer="" class="category-img"></a></li><class="subcategory-name">Air Dancer</p></div></div><div class="subcategories-container2"><div class="subcategory-container"><li class="subcategories-link"><a href="http://127.0.0.1/gonfiabililog/index.php/gonfiabili-pubblicitari/totem.html"><img src="http://127.0.0.1/gonfiabililog/media/catalog/category/DSCN9655_191x480_1.jpg" title="Totem" class="category-img"></a></li><class="subcategory-name">Totem</p></div><div class="subcategory-container"><li class="subcategories-link"><a href="http://127.0.0.1/gonfiabililog/index.php/gonfiabili-pubblicitari/ground-baloon.html"><img src="http://127.0.0.1/gonfiabililog/media/catalog/category/DSCF3654_360x480_1.jpg" title="Mongolfiere" pubblicitarie="" class="category-img"></a></li><class="subcategory-name">Mongolfiere Pubblicitarie</p></div><div class="subcategory-container"><li class="subcategories-link"><a href="http://127.0.0.1/gonfiabililog/index.php/gonfiabili-pubblicitari/archi.html"><img src="http://127.0.0.1/gonfiabililog/media/catalog/category/arco_esempio_1.jpg" title="Archi" class="category-img"></a></li><class="subcategory-name">Archi</p></div></div></ul>




<
li class="category">
<
class="category-link" href="http://127.0.0.1/gonfiabililog/index.php/cartooon-game.html"Cartoni Giochi</a>
</
li>

<
ul class="subcategories">
<
div class="subcategories-container"><div class="subcategory-container"><li class="subcategories-link"><a href="http://127.0.0.1/gonfiabililog/index.php/cartooon-game/cartoon-inflatable.html"><img src="http://127.0.0.1/gonfiabililog/media/catalog/category/winny_1.jpg" title="Gonfiabili" cartoon="" class="category-img"></a></li><class="subcategory-name">Gonfiabili Cartoon</p></div><div class="subcategory-container"><li class="subcategories-link"><a href="http://127.0.0.1/gonfiabililog/index.php/cartooon-game/costume-inflatable.html"><img src="http://127.0.0.1/gonfiabililog/media/catalog/category/custom_inflatable_chef_1585sma_360x480_1.jpg" title="Costumi" gonfiabili="" class="category-img"></a></li><class="subcategory-name">Costumi Gonfiabili</p></div><div class="subcategory-container"><li class="subcategories-link"><a href="http://127.0.0.1/gonfiabililog/index.php/cartooon-game/plush-mascot-costums.html"><img src="http://127.0.0.1/gonfiabililog/media/catalog/category/mascotte_casamassima_1.JPG" title="Costumi" in="" peluche="" class="category-img"></a></li><class="subcategory-name">Costumi in Peluche</p></div></div><div class="subcategories-container2"><div class="subcategory-container"><li class="subcategories-link"><a href="http://127.0.0.1/gonfiabililog/index.php/cartooon-game/games.html"><img src="http://127.0.0.1/gonfiabililog/media/catalog/category/1_640x196_1.jpg" title="Giochi" class="category-img"></a></li><class="subcategory-name">Giochi</p></div><div class="subcategory-container"><li class="subcategories-link"><a href="http://127.0.0.1/gonfiabililog/index.php/cartooon-game/king-chair.html"><img src="http://127.0.0.1/gonfiabililog/media/catalog/category/S8003026_488x480_1.jpg" title="Troni" class="category-img"></a></li><class="subcategory-name">Troni</p></div><div class="subcategory-container"><li class="subcategories-link"><a href="http://127.0.0.1/gonfiabililog/index.php/cartooon-game/cake.html"><img src="http://127.0.0.1/gonfiabililog/media/catalog/category/torta_1.jpg" title="Torte" class="category-img"></a></li><class="subcategory-name">Torte</p></div></div></ul>




<
li class="category">
<
class="category-link" href="http://127.0.0.1/gonfiabililog/index.php/gonfiabili-acquatici.html"Gonfiabili Acquatici</a>
</
li>

<
ul class="subcategories">
<
div class="subcategories-container"><div class="subcategory-container"><li class="subcategories-link"><a href="http://127.0.0.1/gonfiabililog/index.php/gonfiabili-acquatici/water-item.html"><img src="http://127.0.0.1/gonfiabililog/media/catalog/category/Banana_Boat_1.jpg" title="Oggetti" acquatici="" class="category-img"></a></li><class="subcategory-name">Oggetti Acquatici</p></div></div></ul>

</
ul>

Ho modificato il file di stile in questo modo:

.category-img {
    padding
2px;
    
height:145px;
    
width:145px;
}
.subcategories{
    
list-style-type:none;
    
margin0px;
}

.subcategory-container{
    width
:150px;
    
border-style:outset;
    
border-width:2px;
    
border-color:#0404B4;
    
margin5px;
    
text-aligncenter;
}

.categories{
    width
:470px;
}

.category-link {
    color
#ffffff;
    
font11px/28px VerdanaHelveticasans-serif;
    
text-decorationnone;
    
text-transformuppercase;
}

.subcategories-link {
    float
left;
    
displayinline;
}

.category{
    width
:470px;
    
height28px;
    
text-aligncenter;
    
background-image:url(../images/category.gif);
    
background-repeatno-repeat;
    
background-position:center;
}

.subcategories-container {
    width
:470px;
    
text-aligncenter;
}

.subcategory-name{
    width
:145px;
}

Ma ciò che ne viene fuori è un elenco delle categorie una sotto l’altra.
Io vorrei invece che .subcategories-container e .subcategories-container2 rappresentassero le due righe delle categorie e rappresentassero i .subcategory-container centrati.

Dove sbaglio?

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top