posizionare un testo

[kikko088]

ciao a tutti, ho un problema con il mio sito, nella home page in alto ho un menu, con 3 voci, tutte e tre a sinistra, io vorrei mettere una voce a destra...come posso fare?ho provato a modificare un po il css ma non essendo molto bravo non ho combinato niente di buono...potreste darmi una mano?

per ora il css è questo:

#top-menu{
padding: 11px 0 10px 0;
background: #000 url(images/bg-navbar.gif) repeat-x;
vertical-align:center;
}

#top-menu li.special{
float:right;
margin-right:0;
text-align:center;
}

#top-menu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

#top-menu ul li{
display: inline;
padding: 0 10px;
font-family: Arial;
font-weight: bold;
text-transform: uppercase;
color: #fff;
}

#top-menu a{
text-decoration: none;
}

#top-menu a:hover{
text-decoration: underline;
}


mentre per il menu ho questo codice:

<div id="top-menu">
<ul>[*]"><?php _e('Home'); ?>[*]Contatti
<li class="special">prova
[/list]
</div>


cosi facendo il link rimane + basso rispetto alle altre voci
kikko088

[Mich_]

Non devi usare il display:inline.

Vedi questa soluzione:

#top-menu{
  padding: 11px 0 10px 0;
  background: #000 url(images/bg-navbar.gif) repeat-x;
  /* vertical-align:center;   -- non si puo` usare fuori dalle tabelle */
}

#top-menu ul{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#top-menu li{
  float: left;
  padding: 0 10px;
  font-family: Arial;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  display: inline;    /* puoi lasciarlo pleonastico per far contento IE */
}
#top-menu li.special{   /* questo va messo DOPO la regola generale */
  float:right;
  margin-right:0;
  text-align:center;    /* non serve, dato che le dimensioni non sono definite */
}

#top-menu a{
  text-decoration: none;
  /* probabilmente ti serve anche: */
  display: block;
  width: 100%; height: 100%;
}
#top-menu a:hover{
  text-decoration: underline;
}

[kikko088]

grazie mille...cosi mi posiziona i link come voglio io ma salta lo sfondo del menu...mi sono accorto che salta quando si aggiunge

#top-menu ul{
margin: 0;
padding: 0;
list-style-type: none;
}


come mai?


kikko088

[Mich_]

ma salta lo sfondo del menu...mi sono accorto che salta quando si aggiunge ...

Non ha molto senso.
E` uno di quei problemi per cui uno si domanda se c'e` qualche errore di sintassi da qualche parte: prova a validare il codice HTML e CSS

[kikko088]

perfetto...ora funziona, bisognava solo sistemare un due cose con i padding...
grazie mille



kikko088

[kikko088]

ancora una cosa però....c'è una regola generale da usare quando si devono mettere due scritte in questo modo?perchè ad esempio non riesco a fare la stessa cosa da un'altra parte, pur usando + o - gli stessi comandi...

.postmetadata{  	
margin: 10px 0 0; 	
padding: 6px 10px; 
font-size: 11px; 	
line-height: 18px; 	
background: #1c1c1c; 	
color: #ccc; 
}  

.postmetadatasx{ 	
float:right; 	
margin-right: 0px; 	
text-align:center; 
}  

.postmetadata a{ 	
color: #de0202; 	
display: block; 	
width:100%; 	
height:100%; 
}

e

<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php if (function_exists('get_cat_icon')) get_cat_icon('class=myicons'); ?>"><?php the_title(); ?></h2>


		
<div class="entry">


					<?php the_content(); ?>

					

				</div>
				<div class="postmetadata">
<?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> &#124; <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); 

?> <?php edit_post_link('Edit', ' &#124; ', ''); ?><div class="postmetadatasx"><?php the_category(', ') ?></div>
				</div>
			</div>

perchè in questo caso mi mette Field under, category ecc l'uno sopra l'altro category (quello di destra) sta a destra ma + in basso ancora?


kikko088

[Mich_]

Devi postare anche il codice HTML, altrimenti non si capisce cosa vuoi ottenere.
Il codice PHP (o ASP) invece lo devi eliminare, dato che non e` possibile per noi conoscere cosa il server mette al suo posto.
La cosa migliore sarebbe che postassi il codice che arriva al browser (click destro -> mostra sorgente).

Comunque, se vuoi semplificare la codifica dei CSS, devi usare la codifica HTML in modo corretto anche dal punto di vista semantico. Nel tuo caso sembra che manchino i tag

(sembra che hai inserito il testo direttametne in un <div>).

[kikko088]

in effetti non ci sono i tag

, di solito lavoravo in locale per fare le prove, ma a questo punto è meglio se metto tutto online cosi potete aiutarmi meglio
il link al sito è www.endurodoc.net e il problema è rispetto al bottone per votare gli articoli con wikio, nella homepage è in fondo agli articoli, sulla destra, si vede perchè è messo male.





kikko088

[Mich_]

Ho visto la pagina.

La prima cosa che salta all'occhio sono gli errori di layout.
1. c'e` uno scroll orizzontale
2. il menu sta in gran parte nella parte nascosta della pagina (occorre scrollare in vert per vederlo).

Questo significa che probabilmente hai inserito in un'unica pagina quello che dovrebbe stare in due.

Dico subito che non so darti la soluzione (non sono un grafico), ma a mio parere ci sono due soluzioni:
- se la cosa piu` importante e` l'immagine (quella che chiami banner, ma che in realta` non e` pubblicita`), allora devi fare due pagine: la prima con l'immagine e un bottone "inizia navigazione"; la seconda con il contenuto vero
- se invece l'immagine non e` cosi` importante, puo` diventare uno sfondo, sopra il quale posizionare il menu e il contenuto.


Poi andando al codice HTML, ci sono altri errori.
Non ho analizzato la head, ma mi pare un po' troppo pesante: da parte mia credo che puoi eliminare una buona parte degli script.
Pero` il menu (che e` un semplice menu, forse a due livelli ma il secondo non funziona) e` formato da una serie di liste innestate (ho contato almeno tre livelli).
Inoltre nel menu fai uso anche di tag <h2>, che complica la marcatura e complica la vita a chi non legge la pagina mediante il canale visivo (non solo persone con handicap, ma anche spider e motori di ricerca).
Vedo anche che usi tag obsoleti (ad esempio <font>): questo potrebbe darti qualche ulteriore sorpresa sia in qualche browser recente, che nel posizionamento con i motori.

In pratica la struttura e` tutta da rivedere e correggere: senza questo e` difficile sistemare il CSS.

Una pagina Web non e` solo quello che vedi nel tuo browser: e` un modo per comunicare.
E la comunicazione ha delle regole (alcune scritte, altre tramandate come un'arte). Se non segui le regole altri non ti capiscono.
E` un po' come parlare in dialetto e pretendere di farsi capire da tutti.

[kikko088]

azz....è messo così male il mio sitarello?? e io che pensavo di aver fatto un buno lavoro visto che ha superato la validazione xhtml....per uno che ne sa pari a 0 di css è possibile correggere gli errori?o ci vogliono anni di studio per poter rimettere un po a posto il sito?




kikko088