Problema risoluzione e rimpicciolimento finestra browser!!!

[kevin123]

salve a tutti avrei un problema con il mio sito web praticamente quando ho la finestra del browser estesa al massimo il sito si vede bene ma se provo a rimpicciolirla il testo non resta fermo ma segue diciamo la pagina e quindi risulta testo sfasato,come posso risolvere?



ecco il codice css:

#navigation { margin: 0; padding: 0 1em; background: #000; height: 3em; list-style: none; } #navigation > li { float: left; height: 100%; margin-right: 0.5em; padding: 0 1em; } #navigation > li > a { float: left; height: 100%; color: #c60; text-decoration: none; line-height: 3; font-weight: bold; text-transform: uppercase; } #navigation > li > a:hover { color: orange; text-decoration: underline; } #navigation > ul { float: right; height: 100%; margin-right: 0.5em; padding: 0 1em; } #navigation > ul > a { width:500px; float: right; height: 100%; color: #c60; text-decoration: none; line-height: 3; font-weight: bold; } #navigation > ul > a:hover { color: orange; }

ecco il codice html del relativo testo:

<ul id="navigation">[*]Home <li class="sub"> My Mission[*] Contacts[*] Jobs  <ul align="right"> <a align="right">Home drag</a>[/list][/list]

[ratte]

Ciao Kevin! o/

"ha ragione lei"... il testo dei pulsanti deve seguire la dimensione della pagina
Prova a razionalizzare un poco il tuo codice cosi:

<style>
#navigation { margin: 0; padding: 0 1em; background: #000; list-style: none; overflow: hidden; }
#navigation > li { float: left; height: 100%; margin-right: 0.5em; padding: 0 1em; }
#navigation > li > a { float: left; height: 100%; color: #c60; text-decoration: none; line-height: 3; font-weight: bold; text-transform: uppercase; }
#navigation > li > a:hover { color: orange; text-decoration: underline; }
#navigation > ul { float: right; height: 100%; margin-right: 0.5em; padding: 0 1em; }
#navigation > ul > a { width:500px; float: right; height: 100%; color: #c60; text-decoration: none; line-height: 3; font-weight: bold; }
#navigation > ul > a:hover { color: orange; }
#navigation li:last-child { float: right; }
</style> 

<ul id="navigation">[*]Home[*]My Mission[*]Contacts[*]Jobs[*]Home drag[/list]

Dovrebbe andare benino anche con dimensioni molto ridotte della pagina.

[kevin123]

mi dispiace ma seguendo il suo codice il colore nero che c'e sotto le scritte si allarga,questo per via di "height:100%" e le scritte si spostano comunque se rimpicciolisco la finestra non restano ferme..

[ratte]

Yep! Sicuro si, le altezze al 100% della barra vanno cancellate.
Di fatto non mi è chiarissimo quale sia il risultato che vuoi ottenere, sicuro, con una larghezza fissa della barra, le scritte i pulsanti non si muoveranno piu:

<style>
#navigation { margin: 0; padding: 0 1em; background: #000; list-style: none; overflow: hidden; width:900px; } ...
</style>

o/ !

[kevin123]

Grazie a lei ho risolto il problema ora pero ne ho un altro,praticamente non so che larghezza impostare perche c'e una scritta a destra,e se io metto una larghezza piccola la barra con il menu si vedra bene con i pc piccoli ma non con quelli grandi mentre se la metto grandissima la scritta destra non si vedra ma ovviamente andra a posizionarsi alla fine della barra,spero di essermi fatto capire si puo risolvere il problema?

[ratte]

Ahhh.... ehhh... capisco il genere di problematica... la scelta magari sarà anche un po soggettiva, ma dovrebbe dipendere dal resto del layout del tuo sito: se il sito si allarga a tutta pagina dovrebbe farlo anche lei, se il sito ha una larghezza massima allora la lascerei a larghezza fissa con lo spazio a destra per la scritta.

siam qui! o/

[kevin123]

scusi non ho capito la sua risposta, in poche parole si puo risolvere il problema?

[kevin123]

mi sono accorto di avere un altro problema, con chrome è tutto ok ma con firefox se modifico il width firefox mi fa scrollare fino a farmi vedere la scritta destra,io non voglio che accada voglio che le scritte non si spostino se modifico la finestra ma che si adattino a tutte le risoluzioni come faccio?

[ratte]

Ciao di nuovo kevin! Si, sicuramente tutti i problemi sono risolvibili... anche se fossero 2 o piu di 2
Prova a postare l'url della tua pagina o di una copia semplificata della tua pagina (con solo le parti che creano problema) oppure la parte di codice html e css che riguarda quelle aree.

o/ !