|
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">
<a 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><p 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><p 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><p 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><p class="subcategory-name">Coperture Varie</p></div></div></ul>
<li class="category">
<a 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><p 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><p 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><p 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><p 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><p class="subcategory-name">Tunnel</p></div></div></ul>
<li class="category">
<a 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><p 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><p 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><p 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><p 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><p 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><p class="subcategory-name">Archi</p></div></div></ul>
<li class="category">
<a 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><p 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><p 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><p 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><p 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><p 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><p class="subcategory-name">Torte</p></div></div></ul>
<li class="category">
<a 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><p 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;
margin: 0px;
}
.subcategory-container{
width:150px;
border-style:outset;
border-width:2px;
border-color:#0404B4;
margin: 5px;
text-align: center;
}
.categories{
width:470px;
}
.category-link {
color: #ffffff;
font: 11px/28px Verdana, Helvetica, sans-serif;
text-decoration: none;
text-transform: uppercase;
}
.subcategories-link {
float: left;
display: inline;
}
.category{
width:470px;
height: 28px;
text-align: center;
background-image:url(../images/category.gif);
background-repeat: no-repeat;
background-position:center;
}
.subcategories-container {
width:470px;
text-align: center;
}
.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?
|
