Problema grafico con le pagine.

24-01-2011, 16.04.08

Salve a tutti, volevo chiedere se era possibile inserire delle etichette del genere per le pagine.

Grazie delle risposte.

24-01-2011, 16.14.56

intendi delle voci su un menù di navigazione?

24-01-2011, 16.18.46

Vorrei ricreare quella barra di navigazione (News, Portfolio...)

Il sito in questione è http://www.123klan.com/blog (se è spam scusami)

24-01-2011, 16.46.44

Puoi creare un menù molto semplice tipo: http://giuseppedesign.altervista.org/menu2/esempio.html

24-01-2011, 16.50.59

Ok, ma per il font? Vorrei inserire lo stesso font, o molto simile, è possibile?

24-01-2011, 16.54.02

Prova un rockwell o rockwell extra bold con spaziatura dei caratteri -50 o -75.

Così a occhio mi pare questo, dovrebbe andarci vicino comunque.

24-01-2011, 16.57.40

Grazie Giuseppe. Quel menù l' hai creato con un widget o un plug-in? Se no, come si crea?

Gentilissimo.

24-01-2011, 17.03.21

No, l'ho creato con un pò di html e css, molto semplice da fare. L'ho caricato e puoi scaricarlo se vuoi Qui.

Puoi vedere informazioni sul meù nel sito wordpress Italia: http://www.wordpress-it.it/wiki/Main/MenuCSS

24-01-2011, 17.26.55

Grazie Giuseppe. Però non capisco dove inserire il codice e come modificare il font, scusami ma sono inesperto.

24-01-2011, 17.50.04

ti consiglio di seguire questa guida per aggiungere un menù personalizzabile di wordpress, altrimenti per aggiungere voci dovrai sempre modificare l'html. Per modificare il font puoi leggere qui: http://www.w3schools.com/css/css_font.asp

24-01-2011, 18.51.50

Sto smanettando da 2 ore e non ne vengo a capo, nemmeno con le tue due guide. Quello che non capisco è: dove inserire il codice di Giuseppe e perchè nonostante il font di quella pagina non sia tra quelli della famiglia io riesca a vederlo, visto che non ce l' ho installato nel computer. E' per caso un' immagine? Se sì, come si mettono le immagini?

24-01-2011, 19.31.41

temo proprio di sì (http://www.123klan.com/v3/images/news_on.gif), ma usare immagini è sempre una pessima idea... rallenta il caricamento delle pagine e le appesantisce. Se segui la guida, crei un menù personalizzato. A fine guida viene indicato come aggiungere una classe CSS al menù. A quel punto ti basta aggiungere nel file style.css del tema

Codice:

.classe_scelta li a {
font-family: font_scelto;
}

24-01-2011, 19.34.54

Ok, ma il font che hanno scelto per quel sito non è tra quelli indicati nelle famose famiglie, ma un altro (probabilmente scaricato da dafont). Io non voglio inserirne uno tra quelli delle famiglie, ma uno non presente. Devo per forza usare le immagini credo.

24-01-2011, 19.45.59

In tal caso temo tu sia costretto ad usare le immagini. Il grosso problema è che all'aggiunta di ogni voce dovrai creare un'immagine apposta. Devi creare una lista del tipo

Codice HTML:

<ul>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
</ul>

impostando i corretti link

28-01-2011, 17.06.41

ciao
sn riuscito ad inserire una barra di navigazione. l'ho inserita sia con una tabella a più colonne che a colonna unica ma i pulsanti rimangono sempre distanziati tra loro. come posso fare per evitarlo? per caso devo inserire anche qualcosa nel foglio di stile?

grazie mille

nello spoiler c'è il codice che ho usato per la barra. grazie.
[SPOILER]

Codice HTML:

<html>
<head>
<title>Untitled-1</title>
<style type="text/css"
@import url ("style.css");
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#fff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('http://img844.imageshack.us/img844/9831/navigazioneon02.gif','http://img824.imageshack.us/img824/7858/navigazioneon03.gif','http://img695.imageshack.us/img695/8974/navigazioneon04.gif')">
<!-- Save for Web Slices (Untitled-1) -->
<table id="Table_01" width="895" height="35"  border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td><img src="http://img836.imageshack.us/img836/7310/navigazione01.gif" width="87" height="40"></td>
        <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('forum','','http://img844.imageshack.us/img844/9831/navigazioneon02.gif',1)"><img src="http://img812.imageshack.us/img812/5941/navigazione02.gif" name="forum" width="95" height="40" border="0"></a></td>
        <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','http://img824.imageshack.us/img824/7858/navigazioneon03.gif',1)"><img src="http://img145.imageshack.us/img145/594/navigazione03.gif" name="contact" width="111" height="40" border="0"></a></td>
        <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Immagine5','','http://img695.imageshack.us/img695/8974/navigazioneon04.gif',1)"><img src="http://img269.imageshack.us/img269/8219/navigazione04.gif" name="Immagine5" width="94" height="40" border="0"></a></td>
        <td><img src="http://img836.imageshack.us/img836/3610/navigazione05.gif" width="470" height="40"></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

[/SPOILER]

-

grazie mille.

Discussione: Problema grafico con le pagine.

LinkBack

Strumenti discussione

Display

Problema grafico con le pagine.

Regole di scrittura