[css] due elementi nella stessa linea, help!!

**NoWhere** · 21-03-2006, 18.43.54

espongo il dramma macchiavellico:

ho uno scheletro di 3 blocchi div [header per i fatti suoi e sotto 2 div, una colonna e un corpo]

dentro il blocco dell'header ho la necessità di inserire 2 elementi: 2 img e una stringa di testo che rispettivamente devono allinearsi le img a sinistra e il testo a destra e devono stare nella stessa linea dentro al div!!!

suggerimenti??
n.b. niente soluzioni con tabelle!!

ecco il codice di riferimento-->

Codice HTML:

<!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">

<head>
  <title>index</title>
  
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
  
  <style type="text/css">
	<!--
	  body { margin: auto; padding: auto; background-color: #CCCC99 }

/* struttura layout */
#container { padding: 0px; margin: 20px 20px 20px 20px; text-align: center }
#header { padding: 0px; margin: auto; text-align: left; border: 2px solid violet; background-image: url(./sfondo.gif); background-repeat: repeat-x }
#sinistra { float: left; width: 200px; padding: 0px; text-align: center; border: 2px solid black }
#destra { margin-left: 220px; width: auto; padding: 0px; text-align: center; border: 2px solid black }
/* struttura layout */

/* nascondo la linea, sicchè comparirà solo in caso di mancato caricamento del css!! */
hr { display: none }
/* nascondo la linea, sicchè comparirà solo in caso di mancato caricamento del css!! */

.Pindex { padding: 10px; margin: auto; text-align: left }
	-->
  </style>
</head>

<body>

<div id="container">
  <!-- header -->
  <div id="header">
	<img src="include/it.jpg" alt="italian version" style="border: 0px; width: 27px; height: 18px" /> <img src="include/uk.jpg" alt="english version" style="border: 0px; width: 27px; height: 18px" />
	| TITOLO DEL SITO
  </div>
  <!-- header -->
  
  <hr />
  
  <!-- sinistra -->
  <div id="sinistra">
	sinistra
    <p>prova</p><p>prova</p><p>prova</p><p>prova</p><p>prova</p><p>prova</p><p>prova</p><p>prova</p>
  </div>
  <!-- sinistra -->
  
  <hr />
  
  <!-- destra -->
  <div id="destra">
	<p class="Pindex">prova testo prova testo prova testo prova testo prova testo prova testo prova testo</p>
  </div>
  <!-- destra -->
</div>

</body>

</html>

21-03-2006, 18.49.40

basta usare float:
nelle img metti style="float:left;" mentre dopo metti un altro div con style="float:right;" cosi che le immagini si sposteranno a sinistra e il testo a destra tutto su una linea.

**funcool** · 21-03-2006, 18.50.15

Guarda questa discussione e questo sito.

**NoWhere** · 21-03-2006, 18.56.21

ora provo il suggerimento di jostock.

fun, quel dito lo conosco molto bene, ma lì non trovo soluzione al mio caso..
provo a leggere anche il 3d che mi hai segnalato e vedo se trovo idee...

per il resto aggiungo che ho già provato ad applicare la stessa soluzione che ho dato per la struttura [id sinistra e destra] ma é come se entra in autocollisione e tutto esce fuori malissimo!! *-*

EDIT:
ma il float:left lo devo dare a tutte e 2 le img o basta solo nell'ultima??!
dandolo solo all'ultima cmq non funonzia.. va fuori dal div dove risiede!!

21-03-2006, 19.03.14

dallo a tutte e due

**NoWhere** · 21-03-2006, 19.09.55

ecco la soluzione di jostock..>
http://faber882.altervista.org/_alte...r882_0002.html

:neutral:

edit: non credo che c'ho molto da prendere da quella discussione.. se poi non vedo qualcos, però indicatemela!! ^^'

21-03-2006, 19.24.00

se nn ho capito male vuoi metterle tutte e due all'interno dell'header, vero?? se sì, nn devi chiudere il </div> dell'header, altrimenti te le mette fuori.
cmq nn ho ben capito se vuoi mettere in quello di sinistra l'immagine con align left e in quello di destra il testo, oppure misti (cioè entrambi [immagini e testo] in tutti e due..)

**NoWhere** · 21-03-2006, 19.32.56

Originalmente inviato da drako1989

se nn ho capito male vuoi metterle tutte e due all'interno dell'header, vero?? se sì, nn devi chiudere il </div> dell'header, altrimenti te le mette fuori.

non devo chiudere il tag div????! skerzi vero??! O_O

Originalmente inviato da drako1989

cmq nn ho ben capito se vuoi mettere in quello di sinistra l'immagine con align left e in quello di destra il testo, oppure misti (cioè entrambi [immagini e testo] in tutti e due..)

é chiaro: voglio inserire dentro il blocco 'header' 2 img e del testo. però voglio allineare nella stessa linea le img a sinistra e il testo a destra!!

EDIT: se non sai la risposta evita di postare a caso.. così facendo 1 non mi aiuti; 2 crei post inutili e basta!!

**funcool** · 21-03-2006, 19.55.41

Guarda qui e dimmi se va bene.

**silverseraph** · 21-03-2006, 20.14.21

Va bene l'esempio di funcool, oppure basta che gli dai il comando display:inline;

esempio:

<div align="left" style="display:inline;">immagini</div> <div align="right" style="display:inline;">testo</div>

Ma non sono sicuro che funzioni, perchè non l'ho provato.

**NoWhere** · 21-03-2006, 20.21.39

beh, fun, così va bene.. però forse causa l'uso del tag span lascia uno spazio di troppo .. lo vedi, subito dopo il testo sotto rimane come un colpo di invio di spazio.. magari vedo come posso rimediare partendo da lì!!
grazie cmq!! ;)

**funcool** · 21-03-2006, 20.23.58

Lo spazio l'ho messo io perché credevo volessi vedere tutto lo sfondo.

**NoWhere** · 22-03-2006, 03.04.10

Originalmente inviato da funcool

Lo spazio l'ho messo io perché credevo volessi vedere tutto lo sfondo.

diciamo che lo spazio aggiunto é un compromesso che volevo evitare, difatti se levo l'height:41 noterai che il blocco div padre se ne va per quel paese senza neanche ingrandirsi verticalmente di un pixelino!! :neutral:
sta qui il 'problema' della tua soluzione...

non esiste un'ennesima soluzione che ovvia a questo 'problema' che faccia in modo di allineare questi elementi dentro il div senza sforare?? '_'

**dementialsite** · 22-03-2006, 13.11.21

Originalmente inviato da NoWhere

diciamo che lo spazio aggiunto é un compromesso che volevo evitare, difatti se levo l'height:41 noterai che il blocco div padre se ne va per quel paese senza neanche ingrandirsi verticalmente di un pixelino!! :neutral:
sta qui il 'problema' della tua soluzione...

Se vuoi risolvere il problema, dovresti usare lo stile min-height. Peccato che Internet Explorer non lo supporti, a meno di non scrivere qualcosa del genere (non mi ricordo esattamente la sintassi):

Codice:

#container { min-height:***; height:expression (this.height > *** ? this.height : ***) }

dove al posto di *** devi mettere la tua altezza ottimale.

Ah, con un foglio di stile del genere, scordati la validazione W3C...

Stammi bene...

**funcool** · 22-03-2006, 13.19.09

Ho cambiato la pagina secondo il suggerimento di dementialsite e comunque credo che sia la stessa cosa del mio. Comunque la pagina è questa.

**dementialsite** · 22-03-2006, 14.09.08

Originalmente inviato da NoWhere

... non esiste un'ennesima soluzione che ovvia a questo 'problema' che faccia in modo di allineare questi elementi dentro il div senza sforare?? '_'

Aspetta, aspetta... vorresti gli elementi dentro al DIV in modo che occupino uniformemente lo spazio, centrandosi in verticale? Prova con lo stile vertical-align:middle, dovrebbe funzionare... ma devi comunque specificare un'altezza (height e non min-height) per il DIV altrimenti non funziona... ottenendo comunque un foglio validabile W3C (senza quindi porcherie "made in Microsoft").

Statemi bene...

P.S. [4 funcool] Ma dove l'avevi inserito il mio codice di prima (adesso credo sbagliato)? Non l'ho mica visto...
P.P.S. Mettere il testo bianco o di un colore visibile anche se è una prova no, eh?

**silverseraph** · 22-03-2006, 15.18.43

E se provassi a fare line-height: xxpx?

**NoWhere** · 22-03-2006, 15.25.36

grazie dell'aiuto, mi sa che tengo l'ultima soluzione!!

22-03-2006, 16.41.09

Ma senza farsi troppi problemi... non ti bastava mettere "lo sfondo" dentro il div... e poi crearne uno alla stessa altezza ma a sinistra per le img ed uno alla stessa altezza sulla destra per le scritte? :P

Discussione: [css] due elementi nella stessa linea, help!!

LinkBack

Strumenti discussione

Display

[css] due elementi nella stessa linea, help!!

Regole di scrittura