Colonna dx allineamento a sx e viceversa! Help!

**Scellino02** · 02-04-2007, 18:23

Ciao a tutti, non riesco ad allineare allo stesso modo che in IE dei div con relarivi contenuti all'interno di FF ...

Provo a postarvi le due printscreen per rendervi l'idea!

Questo è quello che vedo in IE(che è come lo vorrei io):

e questo è quello che vedo in FireFox:

Mi date qualche consiglio?

il div della colonna sinistra è ha anche il text-align:right; così

div#colonnasinistra {
text-align:right;
float:left;
width:250px;
background-color: #99FF99;
}

**Mich_** · 03-04-2007, 09:06

Non riesco ad apprezzare le differenze tra le due immagini: vedo solo un piccolo margine diverso, che puo` dipendere da vari fattori, che possono stare in uno qualsiasi dei blocchi che racchiudono quello di cui hai postato il CSS.

E` noto che il box model di IE (quirks mode) e` diverso da quello degli altri browser.

Se puoi postare il link alla pagina ci possiamo guardare, altrimenti serve:
- il DOCTYPE usato
- il codice HTML + CSS di tutti i blocchi coinvolti e quelli che li contengono

PS: quando posti codice, usa i corretti VBcode, eventualmente usando i bottoni # o PHP sopra l'area di inserimento testo.

**Scellino02** · 03-04-2007, 09:55

Ciao, il DOCTYPE della pagina è questo.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Mentre il box che secondo me non prende l'allineamento a destra è questo:

codice:

div#colonnasinistra {
	text-align:right;
	float:left;
	width:250px;
	background-color: #99FF99;
}

Altri elementi che potrebbero avere qualcosa che non va secondo me sono il div del titoletto fondo grigio e testo verde e moi le varie voci del menù che alla fine è un elenco all'interno di un altro div

codice:

.titolomenu {
	cursor:pointer;
	background-image:url(images/BgTitleVideo.gif);
	background-repeat:no-repeat;
	margin-top:3px;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
	padding-top:4px;
	border-width:0px;  
	width:230px;
	height:23px;
	font-size:12px;
	font-family:Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-decoration:none;
	text-align:left;
	color:#2f7530;
}
.menu_int{
	background-image:url(images/Icon.gif) 0 8px no-repeat;
	width: 230px;
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#000000;
	border:0px solid #999999;
	text-align:right;
}

Mi dai qualche dritta? ...io ho letto qualche guida di base sui css ma ancora non sono pratico, secondo me ho bisogno di capire bene come funzionano gli allineamenti all'interno dei div... per ora, come mentalità, sono ancora molto legato/condizionato da anni di uso delle tabelle.
Ora però ho eliminato tutte le table e inserito div e in qualche modo devo venirne fuori.

Grazie 1000 per l'aiuto ehh!

**Mich_** · 03-04-2007, 10:20

Manca ancora il codice HTML. Il CSS da solo dice poco.

Ricorda comunque che per usare i CSS con efficacia e semplicita` e` essenziale che la marcatura (=codice HTML) sia fatta secondo le regole semantiche: ogni elemento uno ed un solo tag, e iltipo del tag deve rispecchiare il significato semantico del contenuto.

**Scellino02** · 03-04-2007, 11:01

Mich_ questo è il codice del div che da problemi...

codice:

<div id="colonnasinistra">
  <div class="titolomenu" onclick="SwitchMenu('sub1')"><span class="TitleVerde12">TV</span></div>
  <div class="menu_int" id="sub1">
    <ul>[*]Spot Divani &amp; Divani [*]Sigla Persone [*] Sigla Primo Piano [*]Sigla TG Web [*]Freak Snow [*]Spot Terminio Motori [/list]
  </div>
  <div class="titolomenu" onclick="SwitchMenu('sub3')"><span class="TitleVerde12">Animazioni</span></div>
  <div class="menu_int" id="sub3">
    <div>
      <ul>[*]Collection Fabbrica [*]Bumper Radio Italia TV 1[*] Bumper Radio Italia TV 2[*]Bumper Radio Italia TV 3[*]Quando finisce cos&igrave; [/list]
    </div>
  </div>
  <div class="titolomenu" onclick="SwitchMenu('sub5')"><span class="TitleVerde12">Moda</span></div>
  <div class="menu_int" id="sub5">
    <div>
      <ul>[*]Alba Galasso [/list]
    </div>
  </div>
</div>

...prima era nidificato, si trovava all'interno di un altro div e ho provato anche ed isolarlo, ma non cambia nulla, in FF non prende l'allineamento a destra come si vede nell'immagine postata su...

Spero di risolvere presto...
Grazie ancora per le risposte.

**Mich_** · 03-04-2007, 11:35

Ma cosa deve essere allineato a destra?
il text-align allinea il testo, ed eventuali oggetti inline, non oggetti di tipo blocco.

Ma andiamo con ordine: il tuo codice e` sovrabbondante di oggetti. Questo complica molto il CSS, e complica anche il lavoro del browser.

Vedi questa riformulazione:

codice:

<div id="colonnasinistra">
  <h2> TV</div>
  <ul class="menu_int" id="sub1">[*]Spot Divani & Divani [*]Sigla Persone [*] Sigla Primo Piano [*]Sigla TG Web [*]Freak Snow [*]Spot Terminio Motori [/list]
  <h2><a>Animazioni</div>
  <ul class="menu_int" id="sub3">[*]      Collection Fabbrica [*]      Bumper Radio Italia TV 1[*]      Bumper Radio Italia TV 2[*]      Bumper Radio Italia TV 3[*]      Quando finisce così [/list]
  <h2><a onclick="SwitchMenu('sub5')">Moda</a></div>
  <ul class="menu_int" id="sub5">[*]      Alba Galasso [/list]
</div>

Poi occorre considerare quali oggetti devi spostare a destra. i <div> i <ul> e i[*] sono tutti oggetti di tipo blocco, che quindi non sono sensibili al text-align del blocco che li contiene (IE fa eccezione)
In linea di massima devi usare i margini: per un allineamento a destra:
margin: 0 0 0 auto;
Ma in generale dovrai anche definire la larghezza del blocco contenitore, altrimenti questo sara` il piu` stretto possibile, vanificando lo spostamento a destra.

Per l'allineamento a sinistra:
margin: 0 auto 0 0;
ma molte volte non serve, dato che e` il default.

**Scellino02** · 03-04-2007, 11:52

Mich_ proverò il tuo codice, però nel frattempo mi spieghi un po come funziona l'allineamento fatto con margin: 0 auto 0 0; o con margin: 0 0 0 auto; ...vale sempre il discorso top right bottom left?
e poi come mai si usa mettere auto? e agli "0", invece, perchè non specifichi una unità di misura tipo px? in questo caso non serve?

Grazie ancora!

**Mich_** · 03-04-2007, 15:14

Esatto, vale il discorso top right bottom left.
Dove e` zero il margine e` nullo, dove e` auto viene sistemato dal browser in base alle dimensioni disponibili (lo spazio restante viene suddiviso in modo uniforme tra tutti gli auto, se ce n'e` piu` di uno).

Dove il valore e` 0 non e` necessario specificare la dimensione (0px o 0em o 0mm e` sempre la stessa misura).

**Scellino02** · 03-04-2007, 15:20

Sei sempre strapreciso! ...ti ringrazio infinitamente!

Discussione: Colonna dx allineamento a sx e viceversa! Help!

Strumenti discussione

Ricerca discussione

Visualizza

Colonna dx allineamento a sx e viceversa! Help!

Permessi di invio