In una barra menu come sistemare oggetti a diverse altezze e posizioni?

[Alejandro]

Salve continuo il mio restyling tabless del sito.
Ora sto passando al menu.
Ecco come dovrebbe essere.



Non riesco a capire come creare il css per ordinare quei componenti sopra la barra in background.
Non parlatemi per ora di ripetere l'immagine per creare lo sfondo del menu usiamo una singola barra.

Per ora ho creato questo css:

.menu {
    width: 1000px;
    height: 106px;
    background: url(../img/menu.png) no-repeat top left;
}

.menu .content {
    background-color: transparent;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 7pt;
    font-weight: bold;
}

e questo html:

<div class="menu">
	<span class="content"><? include "inc/menu_internal.php"; ?></span>
</div>

[Alejandro]

Nessun aiuto?

[Mich_]

Il codice HTML postato manca del contenuto, quindi e` inutile ai fini della soluzione del tuo problema.
Devi postare il codice completo, come arriva al browser, con tutti gli oggetti inclusi.

Comunque in quel pezzetto c'e` gia` un erorre: non puoi inserire oggetti di tipo blocco dentro uno <span>, e il menu contiene diversi oggetti di tipo blocco.

Il codice HTML deve essere del tipo:

<ul class="menu">[*]Home[*]Recensioni
  ...[/list]

Di conseguenza il CSS postato non ha senso.
Trovi vari menu tra i "link utili", ti conviene partire da uno di quelli.

[Alejandro]

Ciao Mich e buongiorno,
il menu è contenuto nel file menu_internal.php e quindi li deve rimanere non posso usare una soluzione con liste.

Ho iniziato a postare il codice del file php contenente il menu perchè anche quello non so come posizionarlo come nella foto.

Ecco il codice completo html:

<div class="menu">
<form name="formSearch" method="POST" action="searchResults.php">
[img]<?=$SiteURL?>/img/blank.gif[/img]
<span class="content"><? include "inc/menu_internal.php"; ?></span>
		
<span class="search"><input type="text" name="QS" value="<?=$__qs?>" class="baseTextBox searchTextBox" /></span>
				
[img]img/search_button.png[/img]
[img]<?=$SiteURL?>/img/it.png[/img]</a>
[img]<?=$SiteURL?>/img/en.png[/img]</a>
		<input type="hidden" name="ACTION" value="search">
	</form>
</div>

Per questo motivo non posso usare un tutorial standard per i menu. Devo rendere questo menu tabless

[Mich_]

Questo NON e` il codice che arriva al browser.
Non e` possibile sistemare il CSS se non si conosce il codice HTML.

Comunque non so che senso abbia togliere le tabelle, se poi il menu non e` semantico. E` un bel lavoro, ma non serve per lo scopo principale che e` quello di farlo capire a chi non vede la pagina (browser non testuali e motori di ricerca).

Il menu si deve rendere con una lista.

[Alejandro]

Scusa hai ragione ti devo postare il codice originale.

ecco l'html originale con le tabelle:

<div class="menu">
	<form name="formSearch" method="POST" action="searchResults.php">
		<table border="0" width="100%" cellspacing="0" cellpadding="0">
			<tr height="83px">
				<td align="left" valign="top" rowspan="2">	</td>
				<td align="right" valign="bottom" width="100%">
					<input type="text" name="QS" value="<?=$__qs?>" class="baseTextBox searchTextBox" />
				</td>
				<td align="right" valign="bottom">
					[img]img/search_button.png[/img]
				</td>
				<td align="center" valign="bottom">
					<table border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td>[img]<?=$SiteURL?>/img/it.png[/img]</td>
							<td>[img]<?=$SiteURL?>/img/en.png[/img]</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
		<td colspan="3" align="right" valign="top" style="font-size: 7pt;">
					<? include "inc/menu_internal.php"; ?>
				</td>
			</tr>
		</table>
		<input type="hidden" name="ACTION" value="search">
	</form>
</div>

ed il relativo css:

.menu {
    width: 1000px;
    height: 106px;
    background: url(../img/menu.png) no-repeat top left;
}

.menu .content {
    background-color: transparent;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 7pt;
    font-weight: bold;
}

.baseTextBox {
    background-image: url('../img/search_textbox.png');
    background-position: top left;
    background-repeat: no-repeat;
    font-family: Arial, Sans-Serif;
    font-size: 9pt;
    font-weight: bold;
    border: 1px solid #cccccc;
    height: 17px;
    padding-left: 50px;
	vertical-align:top;
}

.searchTextBox {
    width: 168px;
    height: 17px;    
}

.searchButton {

    background-image: url('../img/search_button.png');
    background-position: top left;
    background-repeat: no-repeat;

    width: 51px;
    height: 18px;

    border-style: none;
}

.loginButton {

    background-image: url('../img/login_button.png');
    background-position: top left;
    background-repeat: no-repeat;

    width: 41px;
    height: 18px;

    border-style: none;
}

[Mich_]

Adesso devi spiegare cosa vuoi fare con quel codice.

Comunque e` impossibile sistemare un CSS che rispetti il codice HTML postato: nel codice e` inclusa gran parte della formattazione, e riformattarla con i CSS crea solo conflitti tra le due formattazioni che browser diversi risolvono in modo diverso.

E ancora nel codice postato ci sono pezzi PHP non risolti.

DEVI POSTARE IL CODICE CHE ARRIVA AL BROWSER

[Alejandro]

Io vorrei rendere quel menu tabless esattamente come il resto del sito che STIAMO facendo.

Ecco il codice che arriva al browser:

<div class="menu">
	<form name="formSearch" method="POST" action="searchResults.php">
		<table border="0" width="100%" cellspacing="0" cellpadding="0">
			<tr height="83px">
				<td align="left" valign="top" rowspan="2">
					<a href="http://www.miosito.com">

						
					</a>
				</td>
				<td align="right" valign="bottom" style="padding-left: 6px; padding-right: 6px; padding-top: 6px; padding-bottom: 13px;" width="100%">
					<input type="text" name="QS" value="" class="baseTextBox searchTextBox" />
				</td>
				<td align="right" valign="bottom" style="padding-left: 6px; padding-right: 6px; padding-top: 6px; padding-bottom: 13px;">
					[img]img/search_button.png[/img]
				</td>

				<td align="center" valign="bottom" style="padding-left: 6px; padding-right: 6px; padding-top: 6px; padding-bottom: 13px;">
					<table border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td></td>
							<td></td>
						</tr>
					</table>
				</td>
			</tr>

			<tr>
				<td colspan="3" align="right" valign="top" style="font-size: 7pt; padding-left: 6px; padding-right: 6px; padding-top: 6px; padding-bottom: 13px;">
					HOME |
REVIEWS |
NEWS |
CONTEST |

FORUM |
REGISTER |
ADVERTISE |
TERMS OF USE |
CONTACTS 
				</td>
			</tr>

		</table>
		<input type="hidden" name="ACTION" value="search">
	</form>
</div>

Così sembra molto complicato ma alla fine gli elementi sono solo:
un immagine di backgroun
il file php con il menu testuale
2 immagini bandierine per la lingua
il bottone search
il campo testo del search

solo che non so come far si che vengano posizionati in quella posizione sopra il background.
Forse qui devo suare la position relative e dargli gli assi x ed y per ogni oggetto?

[Alejandro]

NOn era questo il codice che ti serviva?

[Mich_]

Rendere quella pagina tableless, necesita di un'operazione importante sul codice HTML. Il CSS non puo` agire sul codice HTML: puo` solo formattare quello che e` contenuto nell'HTML.

Qualche post sopra, tu dicevi che il codice e` generato dal PHP; questo implica che devi fare modifiche al codice PHP.

Con queste premesse, dovresti chiarire cosa stai chiedendo ora nel forum CSS.