menu in css

27-04-2005, 09.06.36

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

27-04-2005, 09.27.36

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

27-04-2005, 09.54.20

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

27-04-2005, 09.55.33

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

ciaooooo!!!!!

27-04-2005, 10.01.52

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

27-04-2005, 15.42.03

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?

27-04-2005, 15.45.36

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

mavericck

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

28-04-2005, 04.30.06

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?

28-04-2005, 08.25.06

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

28-04-2005, 08.56.42

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

28-04-2005, 09.45.41

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

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

28-04-2005, 09.53.09

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

qui ho messo un esempio

mavericck

28-04-2005, 10.08.26

fdiodato.altervista.org/prova.htm

28-04-2005, 10.38.58

togli queste tre righe dal css nella classe div

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

mavericck

28-04-2005, 12.44.24

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?

28-04-2005, 12.49.00

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?

28-04-2005, 12.54.08

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

28-04-2005, 21.14.07

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.

Originalmente inviato da fdiodato

mi vengono delle celle abbastanza distanti tra di loro.

togli il <br> tra ogni cella

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  

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

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

01-05-2005, 11.27.58

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?

01-05-2005, 11.42.23

Originalmente inviato da mavericckweb

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

Appunto, facciamo più attenzione

Ciaooooo!!!!!!!

01-05-2005, 14.06.45

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

)

mavericck

02-05-2005, 05.55.49

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

)

mavericck

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

02-05-2005, 08.18.34

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

Discussione: menu in css

LinkBack

Strumenti discussione

Display

menu in css

Regole di scrittura