Ottimizzazione codice css

darkf3d3

Ottimizzazione codice css

Ho 9 div, per ogni div è stata creata una classe che gli da: colore di sfondo, float, altezza e margine.

La questione è che l'unico valore che varia per ogni div è il colore di sfondo, c'è modo di assegnare le altre caratteristiche a tutte le div senza doverle necessariamente riscrivere in ogni classe?


.bar-1 {
	background-color: red;
	float: left;
	height: 37px;
	margin-right: 5px;
	}

.bar-2 {
	background-color: yellow;
	float: left;
	height: 37px;
	margin-right: 5px;
	}

.bar-3 {
	background-color: green;
	float: left;
	height: 37px;
	margin-right: 5px;
	}

.bar-4 {
	background-color: blue;
	float: left;
	height: 37px;
	margin-right: 5px;
	}

.bar-5 {
	background-color: white;
	float: left;
	height: 37px;
	margin-right: 5px;
	}

.bar-6 {
	background-color: orange;
	float: left;
	height: 37px;
	margin-right: 5px;
	}

.bar-7 {
	background-color: yellow;
	float: left;
	height: 37px;
	margin-right: 5px;
	}

.bar-8 {
	background-color: blue;
	float: left;
	height: 37px;
	margin-right: 5px;
	}

.bar-9 {
	background-color: green;
	float: left;
	height: 37px;
	}

axxe16

Ciao
Puoi scrivere


.bar-1,.bar-2,.bar-3... {float: left;height: 37px;margin-right: 5px;}
.bar-1 {background-color: red;}
.bar-2 {background-color: yellow;}
...

oppure (io lo preferisco) usare due classi


.bar {float: left;height: 37px;margin-right: 5px;}
.rosso {background-color: red;}
.giallo {background-color: yellow;}

e poi nel div metterai


<div class="bar giallo">...</div>

darkf3d3

Perfetto, era proprio quello che cercavo. Grazie per l'aiuto!

Un'altra cosa: come si fa ad impostare un colore di sfondo differente quando si è nella pagina linkata dalla div?

ES:
3 div (div1: rossa, div2: blu, div3: gialla)

Vorrei far si che quando sono nella pagina linkata da una delle 3 div cambi lo sfondo. Purtroppo non trovo il tag giusto, ho trovato solo: hover e visited ma non vanno bene per quello che devo fare.

axxe16

non puoi "comandare" la pagina di destinazione dal link di partenza. Dovrai agire sul fogli di stile della pagina di arrivo.

Se invece ho capito male la tua domanda e vorresti che in base al link di partenza la medesima pagina cambi il colore di sfondo potresti passare un valore tramite una variabile via get (cioè contenuta nell'url del link) e nella pagina di arrivo creare uno script che cambi dinamicamente lo stile dello sfondo.

ad es.


<a href="pagina.php?colore=rosso">Link rosso</a>

e poi in pagina.php di arrivo che deve essere in PHP (o in ASP o comunuqe un linguaggio di scriptiong lato server, l'esempio che ti faccio è in PHP)


<style type="text/css">
.rosso { background-color:red;}
.verde { background-color:green;}
.blu { background-color:blue;}
.default { background-color:#FFF;}
</style>
<?
if(isset($_GET)) {
	$colore = $_GET;
else 
	$colore = 'default';
}
?>
</head>

<body  class="<? echo $colore ?>">
...
</body>

darkf3d3

Spiego meglio il problema...

Sto personalizzando la barra orizzontale delle categorie di un blog wordpress, attualmente vengono generate dinamicamente in base alle categorie che creo.
Avendo la necessità di modificare la grafica ho deciso di farle diventare statiche (tanto le categorie rimarranno sempre le stesse), in questo modo ho potuto creare un'immagine per ogni categoria.
La questione è che con il tema attuale quando sono all'interno di una categoria, quella categoria ha un colore differente, io vorrei mantenere proprio quella caratteristica, però non so dove andare a vedere nel codice.

Questo è il codice che crea la barra originale:

<?php
                    if(function_exists('wp_nav_menu')) {
                        wp_nav_menu( 'depth=1&theme_location=menu_2&menu_id=nav&container=&fallback_cb=menu_2_default');
                    } else {
                        menu_2_default();
                    }
                    
                    function menu_2_default()
                    {
                        ?>
                        <ul id="nav"><li <?php if(is_home()) { echo ' class="current-cat" '; } ?>><a href="<?php bloginfo('url'); ?>">Home</a></li>    						<?php wp_list_categories('depth=1&hide_empty=0&orderby=name&order=ASC&title_li=' ); ?>		
    					</ul>
                        <?php
                    }

Mentre questo è quello che ho creato io:


				<div class="navcontainer" style="font-size: 18px!important;">
				<a href="category/abbigliamento/"><div class="bar abbigliamento"></div></a>
				<a href="category/casa-e-ufficio/"><div class="bar casaufficio"></div></a>
				<a href="category/eco/"><div class="bar eco"></div></a>
				<a href="category/gadget/"><div class="bar gadget"></div></a>
				<a href="category/extreme-gadget/"><div class="bar extremegadget"></div></a>
				<a href="category/lifestyle/"><div class="bar lifestyle"></div></a>
				<a href="category/retro/"><div class="bar retro"></div></a>
				<a href="category/tecnologia/"><div class="bar tecnologia"></div></a>
				<a href="category/toys/"><div class="bar toys"></div></a>

darkf3d3

Ho risolto aggiungendo una parte di codice php che controlla se la pagina attuale è la categoria selezionata, se la condizione è vera assegna alla div un'altra classe che cambia il colore allo sfondo.

Questo è il codice:

<a href="category/abbigliamento/" title="Abbigliamento"><div class="bar abbigliamento <?php if (is_category('Abbigliamento')) { ?> selezionata<?php } ?>"></div></a>

Idee?