problema layout con css

**Rebeltag** · 28-09-2011, 17:49

Avrei bisogno di un consiglio, non sono un esperto del css lo faccio per hobby, ho bisogno di fare una pagina con diverse schede ed ogni scheda deve avere un'immagine al centro e posizionate sui bordi, negli angoli, diversi tipi di informazioni, tipo numero di serie della scheda, data di inserimento, note, ecc, sotto ho messo il codice per una scheda standard.

Il problema è che non riesco a mettere in alto le informazioni allinenado pero un'info sulla destra e l'altra allineata a sinistra. sotto poi vorrei l'effetto del testo che non andasse a finire sotto la parola "note" ma restasse formattato come nell'esempio.

Ho provato usando i css ma non ci sono riuscito ed alla fine sono ricorso alle tabelle, immagino però che sia deprecato ma a parte questo, giusto per curiosità quello che vorrei fare io è possibile farlo con i css oppure no?

Grazie in anticipo per le eventuali risposte

NB per praticità nell'esempio sotto il css è integrato ma normalmente non lo faccio

codice:

<!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"> <head> 	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 	 <style type="text/css"> #container{margin: 0; width: 990px; margin: auto;}  .scheda{border: 1px solid #bf9930; padding: 1%; margin: 2%;}   .image{text-align: center;}   table{width: 100%} .sx{text-align: left; width: 50%;} .dx{text-align: right;width: 50%;} .tp{vertical-align: top;} </style> 	 	<title></title> </head> <body>  <div id="container">  <div class="scheda">  <table> <tr><td class="sx">id scheda</td> <td class="dx">data: 1 gennaio 1980</td></tr> </table>  <div class="image"> 

</p>  titolo immagine centrale</div>  <table> <tr><th class="tp">note: </th> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta consequat lorem, et blandit velit tempus fermentum. Nam vestibulum viverra elit in suscipit. Maecenas id enim sem. Nulla vitae nulla nisl, quis fringilla magna. Nulla mollis, sapien sed placerat dignissim, elit magna ornare nulla, ac posuere arcu odio sed libero.</td> </tr> </table>  </div>  </body> </html>

**ResianTaxidrive** · 28-09-2011, 20:34

coi css puoi fare tutto.
NOn è che si riesca a capire molto dal tuo codice formattato in quel modo. Avresti dovuto inserire degli spazi e far sì che il tutto sia più leggibile.

Cmq per le informazioni allineate a destra e sinistra potresti usare i float:left e float:right; hai provato?

**Rebeltag** · 29-09-2011, 12:13

Originariamente inviato da ResianTaxidrive
coi css puoi fare tutto.
NOn è che si riesca a capire molto dal tuo codice formattato in quel modo. Avresti dovuto inserire degli spazi e far sì che il tutto sia più leggibile.

Cmq per le informazioni allineate a destra e sinistra potresti usare i float:left e float:right; hai provato?

Scusami hai ragione ma credevo che usando i tag CODE lo formattasse da se

Comunque il problema che ho incontrato nel posizionamento del testo sulla destra è che se uso un testo più lungo il box si espande verso destra e quindi esce fuori dalla scheda, mentre per le "note" il rigo successivo al primo andava a finire sotto alla parola note, potrei creare due box e affincarli con float ma se il secondo box diventa più lungo del primo il testo scivola sotto, ecco perchè ho usato le tabelle

codice:

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

<head> 	

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 	 

<style type="text/css"> 

#container{margin: 0; width: 990px; margin: auto;}  
.scheda{border: 1px solid #bf9930; padding: 1%; margin: 2%;}   
.image{text-align: center;}   table{width: 100%} 
.sx{text-align: left; width: 50%;} 
.dx{text-align: right;width: 50%;} 
.tp{vertical-align: top;} 

</style> 	 	

</head> 

<body>  

<div id="container">  

<div class="scheda">  

<table> 
<tr>
<td class="sx">id scheda</td> 
<td class="dx">data: 1 gennaio 1980</td>
</tr> 
</table>  

<div class="image"> 


</p>  titolo immagine centrale
</div>  

<table> 
<tr>
<th class="tp">note: </th> 
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta consequat lorem, et blandit velit tempus fermentum. Nam vestibulum viverra elit in suscipit. Maecenas id enim sem. Nulla vitae nulla nisl, quis fringilla magna. Nulla mollis, sapien sed placerat dignissim, elit magna ornare nulla, ac posuere arcu odio sed libero.</td> 
</tr> 
</table>  
</div>  
</body> 
</html>

**Rebeltag** · 29-09-2011, 20:19

quando uno è pivello

mi ero incartato con i posizionamenti, basta fare un div posizionato in maniera relativa contenente altri due div posizionati in maniera assoluta, quello di destra si imposta right: 0px e funziona tutto bene

ora devo risolvere solo il problema delle note

**Rebeltag** · 29-09-2011, 23:44

Risolto anche il problema con le note, in un div annido un div con float left per la voce "note:" e ci affianco un altro div con un margin left in modo da non sovrappormi alla parola note e i righi successivi si indentano allienandosi al primo :P non si deve usare il posizionamento, domani pubblico il codice

Discussione: problema layout con css

Strumenti discussione

Ricerca discussione

Visualizza

problema layout con css

Permessi di invio