menu in css

Ho un menu per frame fatto con tabella (sfondo bianco) e celle (sfondo azzurro: ne veniva fuori una cornice bianca grazie allo sfondo bianco della tabella). Il link del menu fatto con tabella e celle e` http://fdiodato.altervista.org/menu.htm. Il risultato e`: http://fdiodato.altervista.org/indice.htm. Ho deciso di eliminare tabella e celle e di fare tutto con css, ma non sono capace. Ho usato il selettore <div> al posto di <table>. Le parole non sono piu` allineate a centro pagina (credo sia necessario per il frame) come prima, ma vanno a sinistra. E inoltre non sono piu` allineate verticalmente (una sotto l`altra) ma alla rinfusa. Infine mettendo lo sfondo bianco al div mi esce tutto bianco. ma io vorrei l`azzurro con margini bianchi per ogni parola del menu. Quindi come si fa? Quali sono i selettori e i valori da usare? Grazie.
Francesco

prova così:

questo in un file css che richiami

Codice:

div.cella { background-color: #0099CC; text-align: center; border: 1px solid #FFFFFF; width: 100px; } body { background-color: #0099CC; }

e ogni elemento della tabella lo racchiudi in
<div class="cella">elemento</div>

mavericck

Sto facendo cosi`:

<body>

<div>
<div class="cella">Home</div>
<div class="cella">Curriculum</div>
<div class="cella">Articoli e altro</div>

ma credo di stare sbagliando qualcosa. Le scritte non vanno una sotto l`altra. Cosa manca? Grazie mille!
Francesco

<div class="cella">Home</div><br>
<div class="cella">Curriculum</div><br>
<div class="cella">Articoli e altro</div><br>

ciaooooo!!!!!

se vuoi, puoi racchiudere poi tutti gli elementi in un'altro div in modo da posizionarlo come vuoi nella pagina con gli attributi position

mavericck

Allora, ho fatto il seguente codice:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>www.fdiodato.tk</title>
<base target="_parent">
<style>
body {
background-color: #1679AA;
}
a {
font-style: normal;
text-decoration: none;
color: #FFFFFF;
font-family: Verdana;
font-size: 13;
}

</style>
<link rel=stylesheet href="stile.css" type="text/css">
</head>

<body>

<div>
<div class="cella">Home</div><br>
<div class="cella">Curriculum</div><br>
<div class="cella">Articoli e altro</div><br>
<div class="cella"> <a href="http://www.phpbbserver.com/phpbb/index.php?c=2&mforum=fdiodato&sid=787b1e53b147c5e7 98010b619c6d765f">
Annunci</a></div><br>
<div class="cella"> <a href="giochiita.htm">Forum</a></div><br>
<div class="cella"><a href="linkita/link.php">Giochi</a></div><br>
<div class="cella"><a href="linkita/formsito.php">Link</a></div><br>
<div class="cella"><a class="cella" href="http://www.phpbbserver.com/phpbb/index.php?c=4&mforum=fdiodato&sid=a8c23a2017e76d90 c0df551ad0f62299">
Inserisci link</a></div><br>
<div class="cella">Guestbook</div><br>
<div class="cella">Banner</div><br>
<div class="cella">Contattami</div><br>
</div>

<FORM ACTION="http://search.freefind.com/find.html" METHOD="GET" target="_self">
<font size=1 face="arial,helvetica" >
<INPUT TYPE="HIDDEN" NAME="id" VALUE="61013345">
<INPUT TYPE="HIDDEN" NAME="pageid" VALUE="r">
<INPUT TYPE="HIDDEN" NAME="mode" VALUE="ALL">
       &nbsp ;
<input type="radio" name="t" value="s" CHECKED> Cerca nel sito
<input type="radio" name="t" value="w">Cerca nel web<br>
       &nbsp ;
<INPUT TYPE="TEXT" NAME="query" SIZE="15"><small>
<INPUT TYPE="SUBMIT" VALUE=" Cerca "><br>
       &nbsp ;
</small>powered by <A HREF="http://www.freefind.com">
FreeFind</A></font></FORM>
</body>

</html>

Nel foglio di stile esterno ho, tra le altre cose:
a {
font-size: xx-small;
font-family: Verdana;
color: blue
}

body {
background-color: white;
border-color: #1679AA;
border-top-width: 40px;
border-style: solid;
border-right-width: 10;
}

div {
text-align: center;
position: absolute;
top: 1em;
right: 10%;
}
div.cella {
background-color: #1679AA;
text-align: center;
border: 1px solid #FFFFFF;
width: 100px;
}

Il penoso risultato e` qua: http://fdiodato.altervista.org/indice.htm.
Credo ci sia contrasto tra foglio di stile interno e quello esterno. Il foglio di stile interno non dovrebbe avere la meglio su quello esterno n ogni caso?

"la meglio" sarebbe mettere solo il css esterno, prevenendo eventuali conflitti

mavericck

ps: tronca un po di quei &bnsp; che sconquassano il forum

Ho tolto il css interno ma il problema persiste.
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>www.fdiodato.tk</title>
<base target="_parent">
<link rel=stylesheet href="stile.css" type="text/css">
</head>

<body class="blu">

<div>
<div class="cella">Home</div><br>
<div class="cella">Curriculum</div><br>
<div class="cella">Articoli e altro</div><br>
<div class="cella"> <a href="http://www.phpbbserver.com/phpbb/index.php?c=2&mforum=fdiodato&sid=787b1e53b147c5e7 98010b619c6d765f">
Annunci</a></div><br>
<div class="cella"> <a class="link" href="giochiita.htm">Forum</a></div><br>
<div class="cella"><a class="link" href="linkita/link.php">Giochi</a></div><br>
<div class="cella"><a class="link" href="linkita/formsito.php">Link</a></div><br>
<div class="cella"><a class="link" href="http://www.phpbbserver.com/phpbb/index.php?c=4&mforum=fdiodato&sid=a8c23a2017e76d90 c0df551ad0f62299">
Inserisci link</a></div><br>
<div class="cella">Guestbook</div><br>
<div class="cella">Banner</div><br>
<div class="cella">Contattami</div><br>
</div>

Nel foglio di stile ho aggiunto:

a.link {
font-style: normal;
text-decoration: none;
color: #FFFFFF;
font-family: Verdana;
font-size: 13;
}
body.blu {
background-color: #1679AA;
}

Quale potrebbe essere il problema? Perche` appare solo la voce "contattami"? Dove finiscono le altre?

allora procediamo poco a poco

1) ci sono ancora definizioni di stile inline e sono messe prima di <html>,eliminale perchè sono ripetute nel css esterno

2) togli la classe div, perchè è inutile usata in quel modo

mavericck

allora l'ho rifatto del tutto

html nella pagina

Codice:

<div class="container"> <div class="cella">prova1</div> <div class="cella">prova2</div> <div class="cella">prova3</div> <div class="cella">prova4</div> <div class="cella">prova5</div> </div>

codice nel css

Codice:

body { background-color: #1679AA; } div.container { margin-left: 30px; } div.cella { border: 1px solid #FFFFFF; width: 70px; color: #FFFFFF; text-align: center; }

mavericck

Per il body ho usato la classe
body.blu {
background-color: #1679AA;
}

Come puoi vedere, il risultato e` sempre molto penoso.

io non vedo nessuna modifica al codice, ma qual è la pagina che stai modificando?

qui ho messo un esempio

mavericck

fdiodato.altervista.org/prova.htm

togli queste tre righe dal css nella classe div

position: absolute;
top: 1em;
right: 10%;

mavericck

A me le impostazioni del div servono per un`altra pagina. Per questo ho creato una classe div. Non funziona?
P.S. COme fai a vedere cosa ho nella pagina web e nel foglio di stile?

In ogni caso, provando come mi hai detto, mi vengono delle celle abbastanza distanti tra di loro. Inoltre il motore di ricerca che ho sotto il menu in qualche modo mi fa comparire la barra di scorrimento orizzontale. Forse perche` non e` allineato col menu. Come dovrei allinearlo?

Ho notato anche che "annunci" mi viene piu` piccolo e blu...

Citazione:

Originalmente inviato da fdiodato

A me le impostazioni del div servono per un`altra pagina. Per questo ho creato una classe div. Non funziona?

assegnare proprietà al div generico non ha senso in quanto poi vengono applicate ad ogni div della pagina col risultato che ben conosci, piuttosto crea una nuova classe.

Citazione:

Originalmente inviato da fdiodato

mi vengono delle celle abbastanza distanti tra di loro.

togli il <br> tra ogni cella

Citazione:

Originalmente inviato da fdiodato

il motore di ricerca che ho sotto il menu in qualche modo mi fa comparire la barra di scorrimento orizzontale. Forse perche` non e` allineato col menu.

mettilo all'interno del div "container" e togli quella marea di  

Citazione:

Originalmente inviato da fdiodato

"annunci" mi viene piu` piccolo e blu...

è così perchè è un link mentre gli altri sono solo testi semplici, per modificare la visualizzazione del link modifica la classe .a

Citazione:

Originalmente inviato da fdiodato

P.S. COme fai a vedere cosa ho nella pagina web e nel foglio di stile?

[/QUOTE]

con viewsource, e seguendo il relativo link al css

mavericck

Eccolo! Non riuscivo piu` a trovare questa discussione! Grazie mille.
Quindi mi pare di capire che se uso delle classi div e` inutile mettere un semplice div nel foglio di stile per eventuali altre pagine perche` da` solo fastidio. Cioe` se creo una classe per un elemento, allora per questo elemento devo solo riferirmi tramite classi, non posso usarlo piu` semplicemente. Vero?

Citazione:

Originalmente inviato da mavericckweb

...ps: tronca un po di quei &bnsp; che sconquassano il forum

Appunto, facciamo più attenzione

Ciaooooo!!!!!!!

Citazione:

Originalmente inviato da fdiodato

e` inutile mettere un semplice div nel foglio di stile per eventuali altre pagine perche` da` solo fastidio. Cioe` se creo una classe per un elemento, allora per questo elemento devo solo riferirmi tramite classi, non posso usarlo piu` semplicemente. Vero?

esatto, una classe per ogni TIPO di elemento, e quanto più riesci ad ottimizzare il css meglio è (in modo da non utilizzare una classe diversa per ogni più piccolo elemento del sito altrimenti ti viene fuori un css da 1Mb :mrgreen: )

mavericck

Citazione:

Originalmente inviato da mavericckweb

esatto, una classe per ogni TIPO di elemento, e quanto più riesci ad ottimizzare il css meglio è (in modo da non utilizzare una classe diversa per ogni più piccolo elemento del sito altrimenti ti viene fuori un css da 1Mb :mrgreen: )

mavericck

Cosa intendi per "ottimizzare"? Cosa dovrei fare per non utilizzare una classe diversa per ogni elemento? Di nuovo grazie.
Francesco

cerca il più possibile di creare alcune classi con proprietà abbastanza generiche utilizzabili più volte, e classi specifiche solo per un elemento, solo quando strettamente necessario

mavericck