Aiuto nel posizionamento

[Mich_]

Non sono riuscito a vedere differenze tra le due immagini.

Non ho capito la necessita`/scopo di tutto quel codice HTML, e comunque e` inserito con i tag sbagliati, per cui non si capisce l'innestamento dei vari oggetti (prova a correggerlo [bottone modifica in fondo ad ogni post], usando il [ code ] al posto del [ quote ]).

[Kaos50x]

Originariamente inviato da Mich_
Non sono riuscito a vedere differenze tra le due immagini.

Non ho capito la necessita`/scopo di tutto quel codice HTML, e comunque e` inserito con i tag sbagliati, per cui non si capisce l'innestamento dei vari oggetti (prova a correggerlo [bottone modifica in fondo ad ogni post], usando il [ code ] al posto del [ quote ]).

La differenza stà ke la prima è come si presenta la pagina; mentre nella seconda sono evidenziate le tabelle e come le vorrei

Riposto html

	<table id="layout" cellpadding="0" cellspacing="0" align="center">
	 <tr>
	  <td colspan="5">[img]layout_1.jpg[/img]
	  </td>
	 </tr>
	 <tr>
	  <td width="32">
	  </td>
	  <td>
	   <table id="menù" cellpadding="0" cellspacing="0">
	    <tr>
	     <td>
	     </td>
	    </tr>
	    <tr>
	     <td>
	     </td>
	    </tr>
	   </table>
	  </td>
	  <td width="6">
	  </td>
	  <td>
	   <table id="news" cellpadding="0" cellspacing="0">
	    <tr>
	     <td>[img]layout_2.jpg[/img]
	     </td>
	    </tr>
	    <tr id="border">
	     <td>
	     </td>
	    </tr>
	   </table>
	  </td>
	  <td width="32">
	  </td>
	 </tr>
	</table>

Questo è il CSS

/* Layout */
/**********/
#layout {
	width: 725px;
}

#menù {
	width: 183px;
	border-left: 2px solid #aaaaaa;	
	border-right: 2px solid #aaaaaa;	
	background-color: #35577b;
}

#news {
	width: 472px;
	background-color: #35577b;
}

#border {
	border-left: 2px solid #aaaaaa;
	border-right: 2px solid #aaaaaa;
}

Cmq tutto quel codice serve a dare gli spazi giusti alla tabella per allinearla all' immagine(per le tabelle ho seguito il consiglio di federix)
Cmq io voglio solo sapere ora come faccio ad attaccare il bordo della tabella con l' immagine di sopra! (nn ci deve essere lo spazio nero..
Spero ke questa volta ci sia riuscito..

[Mich_]

Mi spiace, ma non riesco a seguire il tutto.

Il fatto e` che usi tag semanticamente sbagliati, per cui non sono in grado di sistemare il CSS.
Come dire che stai usando le tecniche che si usavano 10 anni fa, ma allora non c'erano i CSS e tutto era molto piu` "grezzo", per cui non c'era la ricerca della perfezione (ad esempio non era pensabile di inviare immagini cosi` dettagliate, solo per abbellire un sito).

Quello che mi par di vedere e` un layout a due colonne, in cui quella a sinistra contiene il menu e quella a destra il contenuto.
La colonna a sinistra ha un'immagine di sfondo posizionata in alto, cui segue un'immagine che si ripete lungo l'asse y, senza spazi tra i due.
la colonna a dx invece ha un blocco in alto e un blocco in basso.
Lo sfondo rosso che si intravvede puo` essere un'immagine di sfondo del body.

Per tutto cio` non servono le tabelle, ma una corretta impostazione dei blocchi.
Tra i "link utili" trovi vari esempi di layout da cui puoiprendere esempio.

[Kaos50x]

Originariamente inviato da Mich_
Mi spiace, ma non riesco a seguire il tutto.

Il fatto e` che usi tag semanticamente sbagliati, per cui non sono in grado di sistemare il CSS.
Come dire che stai usando le tecniche che si usavano 10 anni fa, ma allora non c'erano i CSS e tutto era molto piu` "grezzo", per cui non c'era la ricerca della perfezione (ad esempio non era pensabile di inviare immagini cosi` dettagliate, solo per abbellire un sito).

Quello che mi par di vedere e` un layout a due colonne, in cui quella a sinistra contiene il menu e quella a destra il contenuto.
La colonna a sinistra ha un'immagine di sfondo posizionata in alto, cui segue un'immagine che si ripete lungo l'asse y, senza spazi tra i due.
la colonna a dx invece ha un blocco in alto e un blocco in basso.
Lo sfondo rosso che si intravvede puo` essere un'immagine di sfondo del body.

Per tutto cio` non servono le tabelle, ma una corretta impostazione dei blocchi.
Tra i "link utili" trovi vari esempi di layout da cui puoiprendere esempio.

Ti passo il link del sito da cui ho preso spunto peril layout Questo è il link da dove ho preso spunto
Comunque l' html, lo studiato su questo sito, allora saranno poco aggiornati gli argomenti.
Cmq si la tabella a sinistra è il menù, e dovrebbe stare attaccata all' immagine di sopra(l' ho impostata in modo da avere il bordo solo a destra e a sinistra) mentre quella a destra sono le news e dovrebbe stare allineata(in altezza) con la tabella menù(sinitra)..(la tabella deve avere tutti e quattro i bordi.. ma deve avere quella immagine ke fa i bordi arrotondati attaccata al di sopra.)

Spero di aver chiarito, e viringrazio x l' interessamento

[Kaos50x]

Scusate il doppio post ma nessuno può aiutarmi?
E' + di una settimana ke mi sono bloccato, e stò impazzendo

[Mich_]

In questo sito ci sono varie guide, tra cui anche di quelle vecchie (in parte superate).

Ma quello che volevo dire e` che io sono anni che non progetto siti fatti con le tabelle; e la cosa e` piuttosto complessa.
Dato che non e` una pratica interessante, non sono in grado (non ho voglia) di metterci mano.

Il sito da cui hai preso spunto e` in effetti fatto con le tabelle, a cui poi hanno aggiunto dei pezzetti di CSS a posteriori: la cosa non e` il massimo della chiarezza e neppure il modo migliore di lavorare, ed in effetti tu hai problemi a capire e copiare.

Nel post precedente, ti suggerivo un modo alternativo di impostare il problema: se riparti da zero e prendi spunto dagli esempi di "layout" che ci sono tra i "link utili", io credo che hai molte piu` probabilita` di arrivare ad un risultato ed in maniera molto piu` semplice.

[Kaos50x]

Infatti ora ho ricominciato il lavoro...
E siccome nn avevo + niente per la testa ho provato con i div span; lo spazio dal bordo posso provare a darlo con il padding.
Ora è da vedere csa ne può uscire.
Com'è come idea?
Per una volta ci ho azzeccato?
Poi appena finisco il prototipo, o trovo un problem posto.
ok?
Ti prego di rispondere a tutte le domande!
Ciao e grazie dell' interessamento

[Mich_]

Di solito le divisioni della pagina si rendono con i <div>;
<span> serve per piccole porzioni di testo: infatti <span> ha display:inline, mentre <div> ha display:block (di default).

Il padding si comporta in modo diverso tra IE e gli altri, per cui non e` consigliabile: se si puo` si usa il margin.

Coem dicevo sopra, ti conviene partire da modelli "moderni" (li trovi nei "layout" dei "link utili"): ad esempio sul sito di constile, cerca il modello che si adatat meglio a quello che vuoi fare, e copia il markup e il CSS.

[Kaos50x]

Originariamente inviato da Mich_
Di solito le divisioni della pagina si rendono con i <div>;
<span> serve per piccole porzioni di testo: infatti <span> ha display:inline, mentre <div> ha display:block (di default).

Il padding si comporta in modo diverso tra IE e gli altri, per cui non e` consigliabile: se si puo` si usa il margin.

Coem dicevo sopra, ti conviene partire da modelli "moderni" (li trovi nei "layout" dei "link utili"): ad esempio sul sito di constile, cerca il modello che si adatat meglio a quello che vuoi fare, e copia il markup e il CSS.

Infatti ho usato i margin!! mi ero sbaglaito a dire padding
Il layout sembra andare a perfezione anke con il ridinsionamento;
Però ankora una cosa nn capisco ora posto immy html e css.. in modo da farti capire

html

	<div class="img">
	</div>
	<div id="layout">
	 <span class="menù">
	[*]ciao
	  
	 </span>
	 <span class="spazio">
	 </span>
	 <span class="news">
	  

 quuuuuuuuuuuuuestooooooooooooooooooooooooooooooooo è la tabellla neeeeeeeeeeeeeeeeeeeeeeeee
ciaooo
	  </p>
	 </span>
	</div>

CSS:

 body {
	background-color: #000000;
	font: Tahoma, Verdana 5px #000000;
	border: 0px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	scrollbar-face-color: black;
	scrollbar-highlight-color: white;
	scrollbar-3dlight-color: white;
	scrollbar-darkshadow-color: black;
	scrollbar-shadow-color: orange;
	scrollbar-arrow-color: orange;
	scrollbar-track-color: black;
}	

.img {
	background-image:url(layout_1.jpg);
	background-repeat: no-repeat;
	height: 245px;
	margin: 0px 0px 0px 259px;
}

#layout {
	width: 661px;
	background-color: #35577b;
	margin: 0px 0px 0px 291px;
}

.menù {
	width: 183px;
	height: 150px;
	border-left: 2px solid #aaaaaa;
	border-right: 2px solid #aaaaaa;
	padding: 40px 0px 0px 10px; 
}

.spazio {
	width: 6px;
	height: 150px;
	background-color: #000000
}

.news {
	width: 472px;
	height: 150px;
	border-left: 2px solid #aaaaaa;
	border-right: 2px solid #aaaaaa;
	padding: 10px 0px 0px 10px;
}

però c'è un problema:
nel contenitore delle news in cima vorrei mettere qst immy (bordo) mantenendo però il bordo laterale del contenitore.. come faccio?
Qst è come si presenta adesso!
pg web
questo è come la vorrei cioè con il bordo delle news arrotondato
layout come lo vorrei
GRazie ancora

[Mich_]

Non ho letto tutto, mi sono fermato al HTML e ho visto degli orrori.

- class="img" nome gia` usato dal DOM: conviene cambiarlo
- un menu fatto con uno span: e` assurdo (e anche sbagliato)
- dei tag[*] non inclusi in un <ul> o altro
- dei nomi che contengono caratteri speciali (accenti): non sai come reagiranno i vari browser
- dei tag di tipo blocco dentro tag di tipo inline (

dentro <span>
- uno spazio fatto con uno <span> (la semantica non funziona)