Problema Lista in Orizzontale

[generalekamikaz]

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">
 Tende e Coperture


<ul class="subcategories">
<div class="subcategories-container"><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Gazebo/Stand/Igloo</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Coperture/Tende Grandi</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Coperture Sportive</p></div></div><div class="subcategories-container2"><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Coperture Varie</p></div></div>[/list]




<li class="category">
 Gonfiabili Speciali


<ul class="subcategories">
<div class="subcategories-container"><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Coperture Piscine</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Coperture Cryistal</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Garage Gonfiabili</p></div></div><div class="subcategories-container2"><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Schermi Gonfiabili</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Tunnel</p></div></div>[/list]




<li class="category">
 Gonfiabili Pubblicitari


<ul class="subcategories">
<div class="subcategories-container"><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Cartelloni Gonfiabili</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Palloni ad Elio e Dirigibili</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Air Dancer</p></div></div><div class="subcategories-container2"><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Totem</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Mongolfiere Pubblicitarie</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Archi</p></div></div>[/list]




<li class="category">
 Cartoni &amp; Giochi


<ul class="subcategories">
<div class="subcategories-container"><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Gonfiabili Cartoon</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Costumi Gonfiabili</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Costumi in Peluche</p></div></div><div class="subcategories-container2"><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Giochi</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Troni</p></div><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Torte</p></div></div>[/list]




<li class="category">
 Gonfiabili Acquatici


<ul class="subcategories">
<div class="subcategories-container"><div class="subcategory-container"><li class="subcategories-link"><p class="subcategory-name">Oggetti Acquatici</p></div></div>[/list]
[/list]

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?

[generalekamikaz]

Nessuno riesci ad aiutarmi?

[Mich_]

Mi par di capire che il tuo sia un menu (o comunque una cosa dello stesso tipo).

I menu conviene copiarli dai siti specializzati.
Prova a vedere nei "link utili" (a me piace come sono organizzati quelli di CSSplay).

[Henry.Chinaski]

Un float:left ed un display: block?

Guatda QUI

[generalekamikaz]

Ciao, ho risolto creando dei DIV ed aggiungendo l'attributo float:left.
Bene, ora vorrei però che questi div fossero si allineati, ma anche centrati rispetto al loro contenitore.

Il problema di base è che il contenitore prende come larghezza non la stessa di ciò che contiene, ma di tutto lo spazio disponibile, per cui, non potendo definire la larghezza del DIV, non posso aggiungere l'attributo per i margini sinistro e destro. Come posso accentrarli?

.category-img {
padding: 2px;
height:145px;
width:145px;
}

.category-link {
color: #ffffff;
font: 11px/28px Verdana, Helvetica, sans-serif;
text-decoration: none;
text-transform: uppercase;
}

.category{
width:470px;
height: 28px;
text-align: center;
background-image:url(../images/category.gif);
background-repeat: no-repeat;
background-position:center;
}

.subcategory-container{
float:left;
position: relative;
border-styleutset;
border-width:1px;
border-color:#0404B4;
margin: 1px;
text-align: center;

}

.subcategories{

}

.categories{
text-align: center;
}

.subcategories-container{
height: 180px;
}
.subcategories-container2{
height: 180px;
margin: 0 auto;
clear: both;
}

[generalekamikaz]

Up

[daniele95]

hai provato max-width?

[generalekamikaz]

Come dovrei utilizzarlo?

[daniele95]

al div che contiene la lista assegni nelle proprietà css


.esempio
{
max-width: 400px;
}


per approfondire: http://www.w3schools.com/cssref/pr_dim_max-width.asp