BOX fatto con tabella HTML da trasformare in XHTML

Valeria75

Nuovo Utente
28 Set 2006
29
0
0
Ho un Box creato in HTML

<table cellspacing="0" cellpadding="0" width="200" bgcolor="#ffffff" border="0">
<tbody>
<tr>
<td colspan="3"><img src="Include/SxBar/Sx_Top.jpg" width="200" border="0" /></td>
</tr>
<tr>
<td width="5" rowspan="2" valign="top"><img height="192" src="Include/SxBar/Sx_VerticalSxBar.jpg" width="5" border="0" /></td>
<td width="190"><img height="30" src="Include/SxBar/Sx_TopBar.jpg" border="0" /></td>
<td width="5" rowspan="2" valign="top"><img height="192" src="Include/SxBar/Sx_VerticalDxBar.jpg" width="5" border="0" /></td>
</tr>
<tr>
<td valign="top" align="middle" height="162">
</td>
</tr>
<tr>
<td colspan="3"><img
src="Include/SxBar/Sx_Down.jpg" width="200" border="0" /></td>
</tr>
</tbody>
</table>

A questo punto (ottenuto il risultato che volevo usando una tabella) vorrei passare all'utilizzo dei fogli di stile e XHTML, in pratica dovrei gestire i differenti pezzi i immagini: 2 bordi laterali, uno superiore, uno inferiore, ed il titolo del box... ed avere un'area centrale nella quale inserirò i miei contenuti (immagini, testo...), quest'area usando le tabelle si dimendionava automaticamente, ma con i CSS??

quindi ho queste immagini da gestire:

Bordo superiore
<td colspan="3">
<img src="Include/SxBar/Sx_Top.jpg" width="200" border="0" />
</td>

Bordo laterale
<td width="5" rowspan="2" valign="top">
<img height="192" src="Include/SxBar/Sx_VerticalSxBar.jpg" width="5" border="0" />
</td>

Titolo box
<td width="190">
<img height="30" src="Include/SxBar/Sx_TopBar.jpg" border="0" />
</td>

Bordo laterale
<td width="5" rowspan="2" valign="top"><img height="192" src="Include/SxBar/Sx_VerticalDxBar.jpg" width="5" border="0" />
</td>

Bordo inferiore
<td colspan="3"><img
src="Include/SxBar/Sx_Down.jpg" width="200" border="0" />
</td>

Io ci ho provato:



<div id="APPBox">
<div class="BoxTop"></div>
<div class="BoxSX"></div>
<div class="BoxTitle"></div>
<div class="BoxDX"></div>
<div class="BoxDown"></div>
</div>




#APPBox {
width: 190px;
height: 200px;
}

#APPBox .BoxTop {
background: url(Include/SxBar/Sx_Top.jpg);
height:3px;
line-height:2px;
padding: 0px;
overflow: hidden;
vertical-align: top;
}

#APPBox .BoxDown {
background: url(Include/SxBar/Sx_Down.jpg);
height:6px;
line-height:2px;
padding: 0px;
overflow: hidden;
}

#APPBox .BoxSX {
background: url(Include/SxBar/Sx_VerticalSxBar.jpg) left;
height:150px;
width: 6px;
line-height:50px;
overflow: hidden;
}

#APPBox .BoxDX {
background: url(Include/SxBar/Sx_VerticalDxBar.jpg) right;
height:150px;
width: 8px;
line-height:50px;
overflow: hidden;
}

#APPBox .BoxTitle {
background: url(Include/SxBar/Sx_TopBar_Stats.jpg);
width: 200px;
height:30px;
top: 0;
margin-top: 0;
margin-left: 5px;
}

#APPBox .contenuto {
float:left;
height:28px;
line-height:28px;
/* background:#266390 url(sfumfoot.jpg) top left repeat-y; */
background-image: url(Images/BKGMenu.gif);
background-repeat: repeat-x;
color:#164563;
border-bottom:50px #FFF;
}


ma non riesco a posizionare gli elementi

il titolo (BoxTitle) dovrebbe stare in alto, immediatamente sotto .BoxTop ... invece non si posiziona correttamente (in quanto prima viene posizionato BoxSX poi .BoxTop e successivamente BoxDX ... ma in successione uno dopo l'altro)


Grazie per l'aiuto
 

dead

Utente Attivo
22 Lug 2005
684
0
0
55
Brescia
www.dead.it
Scusa ma a leggere tutto quel codice mi viene mal di testa :(
Posta il link alla pagina dove c'è la tabella che ci diamo un occhiata.

Tieni comunque presente che secondo me stai sbagliando approccio: in generale con xHTML + CSS si da la priorità alla struttura (che sia stabile a tutte le risoluzioni, leggera, accessibile, ecc.) e poi si applica la grafica e lo stile.
Problemi tipo "come faccio a mettere quell'immagine esattamente in quell'angolino?" sono concettualmente scorretti.
 

dead

Utente Attivo
22 Lug 2005
684
0
0
55
Brescia
www.dead.it
Nessun aiutino??? :crying:

Guarda, secondo me basta questo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">

<head>
<style type="text/css"><!--
div#contenitore {width:300px; float:left; background-color:pink;}
div#alto {width:100%; height:10px; background-color:blue;}
div#centro {width:100%; height:300px; background-color:red;}
div#basso {width:100%; height:10px;background-color:black;}
div#testi { position:absolute;top:35px;}
--></style>
</head>

<body>
<div id="contenitore">
<div id="testi">qui metti i tuoi contenuti</div>
<div id="alto"></div>
<div id="centro"></div>
<div id="basso"></div>
</div>
</body>
</html>


solo che invece di tagliare l'immagine in 5 pezzi la tagli solo in 3 fette orizzontali e le metti come background.

A seconda di quello che vuoi fare, il div testi potrebbe anche non servirti e scrivere direttamente nel div centro.

Questa comunque è solo una delle soluzioni possibili. Poi dipende dal resto del contesto, da quello che vuoi metterci dentro, ecc ecc, potrebbero esserci soluzioni anche migliori.
 

sbobby

Utente Attivo
26 Gen 2006
791
0
0
Roma
Bravo dead...Sempre meglio usare dei <div> per la struttura dei propri siti web piuttosto che delle tabelle, che magari sono anche più facili e comode da usare, ma di certo non sono appropriate e accessibili al massimo!!
 
Discussioni simili
Autore Titolo Forum Risposte Data
V Mailchimp - box di testo: cambia da solo il testo inserito Email Marketing 0
M Mailchimp: arrotondare bordi di box testuali Email Marketing 6
Shyson Centrare box css HTML e CSS 2
Z Conteggi BOX per ogni 5 righe PHP 1
G Box con testo casuale WordPress 1
F add box top page HTML e CSS 9
moustache text box + post php con IE si comporta in modo strano PHP 15
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
F classic asp popolare combo box javascript Presentati al Forum 1
S [WordPress] Creare una select box con partita iva e codice fiscale in base a una logica. WordPress 0
P Riproduzione avi file in una picture box da file .dll .ocx ed altri in visual basic 10 express Offerte e Richieste di Lavoro e/o Collaborazione 0
spider81man [PHP] Alert Box per confermare Inserimento o Cancellazione dato. PHP 4
B [HTML] Problema main box di un template HTML e CSS 2
A [Javascript] [HTML] RISOLTO...Allungare un box all'apertura della pagina No Mouse over Javascript 9
O [HTML] form box ricerca HTML e CSS 3
felino TV Box Android: consiglio su quale acquistare Discussioni Varie 0
Matteol92 [HTML] Creare social box senza sovrapposizione HTML e CSS 5
I [HTML] Codice box testo con scrollbar sopra immagine HTML e CSS 1
S [HTML] Box immagine e testo HTML e CSS 1
F come creare un search box coi file .xml dei merchant? XML 0
S Problema drop-down box PHP 22
felino [CSS][Wordpress] Adattare delle immagini alla dimesione del box contenitore HTML e CSS 2
F Quale privacy policy menzionare in un BOX COMMENTI? Leggi, Normative e Fisco 0
D Creare un box ricerca HTML e CSS 5
G Aiuto su combo box di access MS Access 0
V problema con codice Facebook Like box Social Media Marketing 0
C Problema centraggio box div HTML e CSS 2
O Riempire una box di testo dal centro HTML e CSS 1
Akari Honoka html+css box posizione HTML e CSS 1
M allineare due box(div) affiancati HTML e CSS 19
I Login box HTML e CSS 0
G Lasciare inalterati valori campi textarea e combo box PHP 0
filomeni Show Box Supporto Mr.Webmaster 5
felino [Facebook] Like Box e numero di 'face' da visualizzare HTML e CSS 3
M box di ricerca con autocompletamento PHP 1
P Box FB like vuoto PHP 8
S Problema con scrollbar in box in IE HTML e CSS 0
T creare una serie di combobox e text box e che salvano un file di text sul disco si può ? Visual Basic 1
A posizionamento pulsante "apri" per box articoli correlati HTML e CSS 2
V Problema con la Check-box PHP 6
S Effetto box su immagini Javascript 1
L Plugin Wordpress - Box Office per sito di cinema WordPress 1
P box like facebook vuoto con firefox Javascript 0
A [Risolto] Problema con un list box Classic ASP 2
I box con logo con link ad url esterno Joomla 2
ivarello Search Box in google maps Javascript 0
renoir09 wordpress like box WordPress 2
Monital Immagini in seòect box popolata da query PHP 8
G tre box affiancati che non si affiancano HTML e CSS 18
I Modello a scatola 3 box HTML e CSS 4

Discussioni simili