Tre div su una sola riga

[Aleinux]

Ciao a tutti, non so se sto postando nella sezione giusta, spero di si. Ho un problema che non so risolvere. In CSS mi sono creato tre elementi, due di bordo ed uno centrale, che devono crearmi una specie di bordo. Questi elementi li inserisco nella pagina html all'interno di tre div, ma me livisualizza uno sopra l'altro es:

<div class="sup-sx"></div><div class="sup"></div><div class="sup-dx"></div>

ho provato anche in questo modo:

<table><tr><td class="sup-sx"></td><td class="sup"></td><td class="sup-dx"></td></tr></table>

ma anche se riesco ad ottenere tutto su una line, come voglio, l'elemento centrale mi viene separato dagli altri e piccolissimo. cosa che non rientra nei miei propositi.
Potete aiutarmi? Grazie mille a tutti in anticipo

[Mich_]

Gli elementi si "creano" tramite un linguaggio di marcatura (HTML) e si posizionano tramite un linguaggio di formattazione (CSS).

Comunque il tuo approccio e` contrario alla semantica, e questo porta a difficolta` con i CSS.

In pratica tu hai UN UNICO oggetto (elemento funzionale) che deve essere contornato da due elementi grafici (non funzionali, di abbellimento).
Quindi devi usare un <div>, contornato da qualcos'altro.

Se il contorno e` omogeneo, la cosa piu` semplice e` realizzarlo tramite i bordi (border).
Se invece e` grafico, dato che ancora non sono praticamente usabili i bordi grafici dei CSS3, puoi usare lo sfondo dell'elemento che lo contiene. Pero` per poterti dare un aiuto piu` concreto, e` necessario conoscere molti piu` dettagli, ad esempio cosa andra` dentro il <div>, come e` fatto il bordo, come viene determinata la larghezza dell'oggetto, vincoli sui colori, ecc.

La cosa migliore sarebbe un disegnino schematico che puoi allegare al post.

[Aleinux]

Allora, questo è quello che ottengo usando le tabelle:

<table><tr><td class="inf-sx"></td><td class="inf"></td><td class="inf-dx"></td></tr></table>

[Aleinux]

e questo è quello che ttengo usando i div:

<div class="sup-sx"></div><div class="sup"></div><div class="sup-dx"></div>

quello che vorrei ottenere è una specie di contorno che sta tutto su una linea senza bordi che mi separano le tre immagini.

Scusami, sono poco pratico del forum, per cui ti ho messo le due immagini come allegato ed ho dovuto fare due post

[Mich_]

Pero` per poterti dare un aiuto piu` concreto, e` necessario conoscere molti piu` dettagli, ad esempio cosa andra` dentro il <div>, come e` fatto il bordo, come viene determinata la larghezza dell'oggetto, vincoli sui colori, ecc.

Se la larghezza e` fissa, la cosa piu` semplice e` dare uno sfondo unico, ed usare il padding per spaziare il contenuto.

E` assolutamente sbagliato usare le tabelle, ed e` anche non-corretto usare tre div, perche` introduci elementi che nella semantica non ci sono.

Per poterti aiutare, occorre conoscere cosa deve diventare il tutto.

[Aleinux]

All'interno dei div non deve esserci nulla, mi servono solo per visualizzare le immagini di sfondo. Quelle che puoi vedere negli allegati. Gli angoli hanno dimensione di 25px per 25px, l'elemento centrale deve poter variare in base alla lunghezza della tabella, l'unico vincolo che ho imposto è l'altezza, anche quella di 25px,per il width non ho impostato nulla, perché esso viene richiamato anche in altre parti della pagina html e mi interessa solo che deve potersi adattare automaticamente al pezzo di cornice di cui andrà a far parte. Come colori non ho impostato nulla, perché non voglio colori. La struttura all'interno del css é la seguente:

.sup-sx{
background-image:url(../image/sfondo-cornice-ssx.png);
background-repeat:no-repeat;
width:25px;
height:25px;
}
.sup-dx{
background-image:url(../image/sfondo-cornice-sdx.png);
background-repeat:no-repeat;
width:25px;
height:25px;
}
.sup{
background-image:url(../image/sfondo-cornice-superiore.png);
background-repeat:repeat-x;
height:25px;
width:auto;
}

Quello che voglio realizzare è mettere tutti e tre le classi sulla stessa riga avendo la garanzia che la classe centrale (ossia sup) si adatti in modo dinamico al variare della larghezza di una ipotetica colonna.

[Mich_]

Allora il tuo problema e` equivalente a quello di creare dei bottoni con angoli arrotondati.
Vedi questo link, studialo, e prova ad implementare uan cosa simile:
http://css.html.it/articoli/leggi/22...er-flessibili/
Il tuo caso da un certo punto di vista e` piu` semplice (non hai il link e non hai bisogno di rollover), ma invece l'immagine e` piu` alta e all'interno credo che hai piu` righe, per cui non puoi usare i tag <a> e <span>, come nell'articolo, ma invece userai un <div> e uno <span>.

Come vedi non ci sono tabelle e non ci sono elementi da affiancare.

[Aleinux]

Scusa il ritardo con cui ho risposto. Ho lettoil link che mi hai inviato, e ti ringrazio perché mi è stato utile per un'altra cosa che avevo in mente, però non si adatta al mio problema. quello che mi serve è cercare di usare delle immagini come sfondo e poterle mettere sulla stessa linea. Sai indicarmi qualche articolo che potrei andare a leggere. Grazie mille