allineamento menù css e html

[elias90]

Ciao ragazzi, sto cercando di fare il mio primo sito in html e css.

Ho un problema, nella creazione della barra del menù mi succede questo.

Il menù compare a scaletta invece di stare tutto su linea orizzontale

Questo è il parte del codice html

<div id="menu">

	<div id="logo">
		</div>
	<div id="home">
		</div>
	<div id="home2">
		</div>
	<div id="servizi">
		</div>
	<div id="servizi2">
		</div>
	<div id="portfolio">
		</div>
	<div id="porfolio2">
		</div>
	<div id="contatti">
		</div>
	<div id="contatti1">
		</div>				

					</div>

E questa è la parte css.

#menu {
	margin: auto;
	height: 70px;
	width: 800px;
	background-color: ;
}

#logo {


height: 58px;


width: 222px;


background-image: url(../img/logo2.png);


}

#home{

margin-top: 0px;

margin-left: 227px;

height: 66px;

width: 143px;

background-image: url(../img/menu/home2.png);

}

#servizi {

margin-left: 370px;

height: 66px;

width: 143px;

background-image: url(../img/menu/servizi.png);

}

#portfolio {

margin-left: 517px;

height: 66px;

width: 143px;

background-image: url(../img/menu/portfolio.png);

}

#contatti {

margin-left: 660px;

height: 66px;

width: 143px;

background-image: url(../img/menu/contatti.png);

}

Come posso risolvere il problema e mettere tutto in linea orizzontale?

Grazie in anticipo...

[pix]

i div di default vanno a capo.

per evitarlo, devi mettere nel css

float:left;

per ognuno dei sotto-div di #menu

il margine a quel punto non serve più e puoi toglierlo.

[elias90]

IL risultato, dopo aver fatto quello che mi hai detto tu è questo

Senza togliere i margin left.

Togliendoli succede questo:

Quindi il problema rimane...

[pix]

metti

display: block;

float: left;

per ognuno dei seguenti:

#logo

#home

#servizi

#portfolio

#contatti

[elias90]

risultato:

CODICE

#menu {
	margin: auto;
	height: 70px;
	width: 800px;
	background-color: ;
}

#logo {

display: block;

float:left;

height: 58px;

width: 222px;

background-image: url(../img/logo2.png);


}

#home{

display: block;

float:left;

height: 66px;

width: 143px;

background-image: url(../img/menu/home2.png);

}

#servizi {

display: block;

float:left;

height: 66px;

width: 143px;

background-image: url(../img/menu/servizi.png);

}

#portfolio {

display: block;

float:left;

height: 66px;

width: 143px;

background-image: url(../img/menu/portfolio.png);
}

#contatti {

display: block;

float:left;

height: 66px;

width: 143px;

background-image: url(../img/menu/contatti.png);


}

[pix]

riguardando l'html iniziale.....ci sono anche tutti i "2"... (home2, servizi2...)

è per quello che si incasina tutto.

a che ti servono? per il rollover?

[pix]

comunque, di solito questo tipo di menù si fa con le liste:

http://www.mrwebmaster.it/css/articoli/menu-orizzontale-effetto-rollover_334.html

[elias90]

Ho tolto quello che mi hai detto...

<div id="menu">

	<div id="logo">

	<div id="home">
		</div>
	<div id="servizi">
		</div>
	<div id="portfolio">
		</div>
	<div id="contatti">
		</div>

					</div>

ma non cambia nulla. Perchè?

Quindi solo facendo come dice nel link che mi hai postato tu può andare?...altrimenti no?

[elias90]

si ok ci sono riuscito! mancava chiudere il div dopo logo!

[pix]

Ho tolto quello che mi hai detto...

<div id="menu">

	<div id="logo">

	<div id="home">
		</div>
	<div id="servizi">
		</div>
	<div id="portfolio">
		</div>
	<div id="contatti">
		</div>

					</div>

ma non cambia nulla. Perchè?

Quindi solo facendo come dice nel link che mi hai postato tu può andare?...altrimenti no?

più o meno è la stessa cosa, ma di solito si usano le liste per fare i menù con i css.

bene, vedo che comunque hai risolto

[elias90]

Ecco il risultato.

Grazie mille sei stato gentilissimo, ora devo solo capire come si toglie quello spazio che ce tra il menu e la gallery, troppo per i miei gusti.

[gambrinus]

nn ho visto il codice in particolare ma cmq avrai impostato sicuramente un margin-top alla gallery e quindi te la sposta verso il basso...in ogni caso al posto fare tutti quei div ti conviene fare i menù come ti è stato suggerito attraverso l'utilizzo di liste

tag <ul>

<li>home</li>

ecc ecc

in sto modo riesci sicuramente a controllare meglio il menu

secondo suggerimento se vuoi lavorare bene in html e css ti conviene suddividere bene lo spazio di lavoro con i div ad esempio fai un contenitore menù che ti contiene tutte le voci del menù imposti lo stesso il float left o right ma in qst modo eviti ke ti si incasini tutto e il codice rimane più pulito

[elias90]

nn ho visto il codice in particolare ma cmq avrai impostato sicuramente un margin-top alla gallery e quindi te la sposta verso il basso...in ogni caso al posto fare tutti quei div ti conviene fare i menù come ti è stato suggerito attraverso l'utilizzo di liste

tag <ul>

<li>home</li>

ecc ecc

in sto modo riesci sicuramente a controllare meglio il menu

secondo suggerimento se vuoi lavorare bene in html e css ti conviene suddividere bene lo spazio di lavoro con i div ad esempio fai un contenitore menù che ti contiene tutte le voci del menù imposti lo stesso il float left o right ma in qst modo eviti ke ti si incasini tutto e il codice rimane più pulito

Grazie del consiglio, infatti sono andato molto avanti e sono riuscito a risolvere tutti i problemi tranne quello del menù, ossia, se devo fare la lista poi non deve conterene un link su cui cliccarci? io al posto di scrivere il nome della pagina volevo metterci solamente un'immagine, è possibile? ancora non me ne sono occupato sono andato avanti con il sito facendo altre cose...

[gambrinus]

allora se procedi con la creazione di menu tramite liste nn ordinate devi poi formattare i link tramite css e subclassi avrai ad esempio

<div class="menu">
<ul>
    <li><a href="#">home</a></li>
    <li><a href="#">portfolio</a></li>
    .... 
    ....
</ul>
</div>

e nei css

.menu{width:
          height:
            ...
}

.menu ul li{padding:0;
                  margin:0;
                  list-style:none;
                 display:inline;
}

.menu ul li a:link{width:
                             height:
                             display:block;
                             ecc....
}

.menu ul li a:hover{width:
                                 height:
                                display:block;
                                ecc....
}

andrai a cambiare nn so o l'immagine o colore font e grandezza nella fase hover rispetto a quella del link normale

qst è sicuramente la maniera più veloce e semplice per fare un menù

spero di essere stato chiaro

[elias90]

ho capito pero volevo farti notare una cosa, nel codice che hai scritto tu...

<div class="menu">

<ul>

<li><a href="#">home</a></li>

<li><a href="#">portfolio</a></li>

....

....

</ul>

</div>

ho evidenziato in rosso quello che volevo farti vedere, se io faccio cosi e vado a vedere il risultato trovero scritto proprio home e portfolio in questo caso cliccabili, MA, io non voglio questo io ho creato i bottoni con gia scritte le diverse pagine a cui fanno riferimento e vorrei che trovare il modod di rendere il bottone cliccabile, capito ora?

[pix]

devi usare delle background-image e mettere display:block per i tag "a", sia normale che hover.

l'immagine di background puoi usarla diversa per il link normale e per l'hover in modo da ottenere l'effetto al passaggio del mouse.

facendo così, puoi eliminare le scritte cliccabili "home" e "portfolio", e non scrivere niente.

forse ricordo male....ma non te l'avevo già spiegato un'altra volta questo?

[gambrinus]

devi usare delle background-image e mettere display:block per i tag "a", sia normale che hover.

l'immagine di background puoi usarla diversa per il link normale e per l'hover in modo da ottenere l'effetto al passaggio del mouse.

facendo così, puoi eliminare le scritte cliccabili "home" e "portfolio", e non scrivere niente.

forse ricordo male....ma non te l'avevo già spiegato un'altra volta questo?

in questo caso dovrai però creare una classe specifica per ogni voce del menù da applicare ai vari <li>

[pix]

in questo caso dovrai però creare una classe specifica per ogni voce del menù da applicare ai vari <li>

no, deve crearla per i tag "a" (con relativo hover).

se invece, elias, (come sarebbe auspicabile per motivi di SEO) separi la "scritta" del link dal background grafico, puoi creare una sola classe per i link, applicare uno stile al testo e scrivere <a>QUI DENTRO</a> la descrizione testuale del pulsante.

[gambrinus]

si scusa ho sbagliato a scrive....

sicuramente il menù fatto come da un pò di post gli stiamo suggerendo è la soluzione migliore imho

cmq per ogni chiarimento sempre a disposizione pix tu invece a qnt ho capito sei un esperto SEO le keywords vengono ancora riconosciute dai motori di ricerca?altri suggerimenti per l'indicizzazione? so ke è un argomento complesso

[pix]

si scusa ho sbagliato a scrive....

sicuramente il menù fatto come da un pò di post gli stiamo suggerendo è la soluzione migliore imho

cmq per ogni chiarimento sempre a disposizione pix tu invece a qnt ho capito sei un esperto SEO le keywords vengono ancora riconosciute dai motori di ricerca?altri suggerimenti per l'indicizzazione? so ke è un argomento complesso

come si dice "tutto fa brodo", ma come saprai sono un'arma a doppio taglio e vanno usate con parsimonia scegliendole accuratamente.

per il resto, se non hai un diretto concorrente "da battere" ti do il consiglio che sembra banale ma che non lo è ed è sempre il migliore: fai un buon sito, dal punto di vista dell'utilizzatore finale.

Tanti contenuti possibilmente relativi ad un unico argomento, ben organizzati, suddivisi su più pagine.

Se invece hai un concorrente da battere, oltre a quanto sopra vanno applicati decine e decine di piccoli accorgimenti che possono aiutare ad "amplificare" il lavoro precedente.

Una piccola (ma non troppo) parte del tempo va dedicata anche alla link popularity.

[gambrinus]

si se nn sbaglio avevi già dato un occhiata al mio sito ( un semplice portfolio) ammonendomi per il mio inglese ....e per qualche immagine troppo pesante ( ancora devo capirne il motivo avendo esportato tutte le immagini per il web a 72dpi ) cmq grazie l'argomento SEO mi affascina abbastanza e potrebbe diventare anche il mio argomento di tesi ( detto cosi può sembrare noioso ma penso si abbastanza interessante l'argomento di diffusione ed indicizzazione del web )... grazie per i suggerimenti:dance:

[pix]

ah già è vero

stiamo andando un po' OT, comunque le immagini a cui mi riferivo le hai salvate in png che come il gif è lossless e non è molto adatto alle fotografie sul web.

dovresti usare il jpg, provando vari livelli di compressione per mantenere un buon livello di qualità visiva ma abbassando drasticamente la dimensione del file (direi che un 70% di compressione dovrebbe andare).

[elias90]

devi usare delle background-image e mettere display:block per i tag "a", sia normale che hover.

l'immagine di background puoi usarla diversa per il link normale e per l'hover in modo da ottenere l'effetto al passaggio del mouse.

facendo così, puoi eliminare le scritte cliccabili "home" e "portfolio", e non scrivere niente.

forse ricordo male....ma non te l'avevo già spiegato un'altra volta questo?

no, non credo lo avevi spiegato a me...comunque scusa la mia ignoranza ma....sinceramente non ci ho capito molto...eheh neanche per quello che avete scritto in seguito...

non è che potreste spiegarmelo dall'inizio quello che devo fare??

scusatemi tanto........

[pix]

no, non credo lo avevi spiegato a me...comunque scusa la mia ignoranza ma....sinceramente non ci ho capito molto...eheh neanche per quello che avete scritto in seguito...

non è che potreste spiegarmelo dall'inizio quello che devo fare??

scusatemi tanto........

vabbé, sto invecchiando....

allora, ad esempio, nel css:

div#menubox {
width: 400px;
height: 30px;
}

#lista-orizz-menu {
list-style:none;
overflow:hidden;
width:400px;
height: 30px;
margin:0;
padding:0; 
}

#lista-orizz-menu li{
float:left;
}

.link {
background-image:url(/percorso/nomefile.ext); 
background-repeat:no-repeat;
width:100px;
height:30px;
display:block;
font-family: Arial;
font-size: 16px;
color: #000;
text-decoration:none;
}

.link:hover {
background-image:url(/percorso/nomefile_hover.ext); 
background-repeat:no-repeat;
width:100px;
height:30px;
display:block;
font-family: Arial;
font-size: 16px;
color: #fff;
text-decoration:none;
}

e nella pagina html:

<div id="menubox">
<ul id="lista-orizz-menu">
	<li><a href="link1.html" class="link">Uno</a></li>
	<li><a href="link2.html" class="link">Due</a></li>
	<li><a href="link3.html" class="link">Tre</a></li>
	<li><a href="link4.html" class="link">Quattro</a></li>
</ul>
</div>

questo ti crea un menù orizzontale con 4 bottoni larghi 100 pixel e alti 30 ciascuno, tutti e quattro graficamente uguali (in base alle immagini di background che hai scelto) e con sovrapposta la scritta (UNO, DUE, TRE oppure QUATTRO).

cambiando dimensioni, immagini, colori, font e scritte puoi personalizzarlo come vuoi.

[elias90]

vabbé, sto invecchiando....

allora, ad esempio, nel css:

div#menubox {
width: 400px;
height: 30px;
}

#lista-orizz-menu {
list-style:none;
overflow:hidden;
width:400px;
height: 30px;
margin:0;
padding:0; 
}

#lista-orizz-menu li{
float:left;
}

.link {
background-image:url(/percorso/nomefile.ext); 
background-repeat:no-repeat;
width:100px;
height:30px;
display:block;
font-family: Arial;
font-size: 16px;
color: #000;
text-decoration:none;
}

.link:hover {
background-image:url(/percorso/nomefile_hover.ext); 
background-repeat:no-repeat;
width:100px;
height:30px;
display:block;
font-family: Arial;
font-size: 16px;
color: #fff;
text-decoration:none;
}

e nella pagina html:

<div id="menubox">
<ul id="lista-orizz-menu">
	<li><a href="link1.html" class="link">Uno</a></li>
	<li><a href="link2.html" class="link">Due</a></li>
	<li><a href="link3.html" class="link">Tre</a></li>
	<li><a href="link4.html" class="link">Quattro</a></li>
</ul>
</div>

questo ti crea un menù orizzontale con 4 bottoni larghi 100 pixel e alti 30 ciascuno, tutti e quattro graficamente uguali (in base alle immagini di background che hai scelto) e con sovrapposta la scritta (UNO, DUE, TRE oppure QUATTRO).

cambiando dimensioni, immagini, colori, font e scritte puoi personalizzarlo come vuoi.

OK!, ma se io volessi togliere le scritte uno due tre quattro, lo posso fare e non metterci nulla? i bottoni funzionerebbero uguale? dato che le scritte delle relative pagine, home, portfolio, contatti ecc sono gia direttamente sul file png. non so se mi sono spiegato bene!

[pix]

in tal caso la classe "link" non può essere la stessa per tutti i pulsanti (senò verrebbero uguali).

devi creare quindi:

.link1 { ... }

.link1:hover { ... }

.link2 { ... }

.link2:hover { ... }

.link3 { ... }

.link3:hover { ... }

e così via, nelle quali cambi solo la background-image (ed eventualmente le dimensioni).

ovviamente come nome delle classi puoi meter quello che vuoi.

la lista diventerà quindi:

<ul id="lista-orizz-menu">

<li><a href="link1.html" class="link1"></a></li>

<li><a href="link2.html" class="link2"></a></li>

<li><a href="link3.html" class="link3"></a></li>

<li><a href="link4.html" class="link4"></a></li>

</ul>

[elias90]

in tal caso la classe "link" non può essere la stessa per tutti i pulsanti (senò verrebbero uguali).

devi creare quindi:

.link1 { ... }

.link1:hover { ... }

.link2 { ... }

.link2:hover { ... }

.link3 { ... }

.link3:hover { ... }

e così via, nelle quali cambi solo la background-image (ed eventualmente le dimensioni).

ovviamente come nome delle classi puoi meter quello che vuoi.

la lista diventerà quindi:

<ul id="lista-orizz-menu">

<li><a href="link1.html" class="link1"></a></li>

<li><a href="link2.html" class="link2"></a></li>

<li><a href="link3.html" class="link3"></a></li>

<li><a href="link4.html" class="link4"></a></li>

</ul>

Infatti stavo facendo delle prove e ho pensato proprio a fare così, grazie mille guarda davvero sei stato tropppppo gentile!

Ps. ultima domandina eheh! se invece di orizzontale lo volessi verticale, cosa dovrei cambiare?

[pix]

dovrebbe bastare togliere il float:left; dallo stile dei list items ( li ).

comunque se elimini gli stili per "ul" e "li" torna sicuramente verticale (che è la condizione di default per le liste).

[elias90]

Ok, ho capito.

Ho eseguito tutte le modifiche.

ecco il risultato...un piccolo problemino...COSA SONO QUEI SPAZI BIANCHIIIII...non capisco i codici sono completamente uguali per ogni link, dato che ho fatto copia e incolla e cambiato l'img di backrground...

guarda...

le immagini sono tutte delle stesse dimensioni e sono ritagliate pare pare, non ci sono spazi lasciati, ho controllato piu volte anche con photoshop

Fatto ho risolto, anche se le immagini erano larghe 144 pixel infatti per le prime due non c'erano problemi, ho dovuto mettere 1 pixel in meno nelle ultime due per aggiustarlo, vabè, almeno ho risolto ANCOR GRAZIE GRAZIE GRAZIE!

[gambrinus]

dai allora ora aspettiamo di vederlo online presto