creare CSS per inserire testo e immagine per pagina tipo"catalogo"

**iaiasole** · 04-02-2010, 01:27

ciao a tutti
sto cercando di realizzare in html/css il sito mostrato in schema/disegno qui:

http://iaiahtml.blogspot.com/

Vorrei realizzarlo usando i css.
Sono riuscita ad impostare il layout di base:header,content, navigation e footer.

Adesso vorrei impostare il contenuto di content.
Come vedete ho bisogno di distribuire testo/immagine testo/immgine.
Tipo una "tabella".
Ho provato a inserire nel css le "regole" ma non mi funziona.

Infatti si vedono dei quadratini piccolipiccoli e la loro forma aumenta all'aummentare del contenuto che inserisco. Io invece vorrei che avessere una dimensione fissa: impostando una grandezza massima per le foto e una grandezza(numero righe) massima per il testo.
OPPURE ditemi dove posso trovare qualche tutorial fatto bene a riguardo o un posto dove poter "copiare" qualche modello di tabella per css.

grazie a tutti

LA PARTE DI CCS RELATIVA ALLA TABELLA:
table {
table-layout: fixed;
width: 724 px;
border: 5px solid black;/*grandezz a bordo intorno alla tabella*/
border-collapse: separate;
border-spacing: 5px;/*non ho visto niente cambiare*/
padding: 10px; /*non ho visto niente cambiare*/
background : #bbff33;
caption-side : bottom;
background: url(cielo.jpg);
}

LA PARTE HTML (la tabella è ancora vuota)
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

**miki003** · 04-02-2010, 01:34

Non ho capito bene cosa vuoi ottenere!

Vuoi una tabella dove ogni cella abbia un'immagine con un testo a destra dell'immagine?

**iaiasole** · 04-02-2010, 01:59

ciao miki003,

ho postato altre immagine sul mio blog

http://iaiahtml.blogspot.com/

è più o me come hai capito:
in ogni cella principale dovrà esserci del testo(1-3 righe) e un immagine.

Non so se conviene crearne una come nel post 3)
oppure come nel post 4) dove ci sono delle sottotabelle in rosso
oppure come nel post 5) dove c'è una tabella complessiva sempre in verde.

non so qual'è la soluzione più efficace, consigliami tu.

grazie sei gentilissimo/a

**Mich_** · 04-02-2010, 09:45

Attenzione alla semantica.

Quelli non sono dati tabellari: quella e` una lista di oggetti che per situazioni contingenti (la larghezza e altezza dello schermo) viene rappresentata in forma di tabella.

Quindi il tag corretto e` uno dei tag di lista (<ul>,

, <dl>).

In ogni elemento della lista, poi ci sara` un <h2> (supponendo che <h1> sia usato per il titolo della pagina), un <h3> e un <img>.

Quindi la marcatura potrebbe diventare:
codice:
```
<ul>
```
<h2>Titolo 1</h2> <h3>Sottotitolo 1</h3> [img]...[/img] ...

**iaiasole** · 04-02-2010, 15:52

grazie mille!
credo di aver capito.provo a scrive il codice....spero di riuscirci!

**iaiasole** · 04-02-2010, 23:05

grazie Mich_

ho provato a usare il codice che mi suggerivi, ma non sn riuscita a farlo funzionare!

intanto la scrittura

border-width: 0 1px 1px 0;
me la da come errore

e poi le immagini continuano a posizionarsi una sotto l'altra.mai di fianco.

scusa magari è una cosa stupida, ma non sn tanto pratica di html.

e poi volevo chiederti...ma se io poi tale comportamento in un CSS? come si traduce?

grazieeee

<body>
<ul width:760;>
<li float:left; width:144px; height:130px;>
<h2>Titolo 1</h2>
<h3>Sottotitolo 1</h3>
[img]images/QUADRATO-GIALLO.jpg[/img]

....[/list]

**miki003** · 05-02-2010, 00:11

Mah! Usare i div+css per posizionare immagini e testo con la tua esperienza mi sembra piuttosto arduo, sebbene che questo sia il metodo più semantico e logico, io ti consiglierei di continuare con le tabelle fino a che non avrai fatto pratica con css e div. Ti consiglierei inoltre di non mettere il testo e le immagini nella stessa cella, ma di usare una cella per l'immagine e una per il testo, ti viene sicuramente meglio l'allineatura degli elementi.

Bada bene che questo mio consiglio non è perchè sia il più giusto ma è solo perchè credo che tu non abbia ancora l'esperienza per usare la marcatura più corretta.

Ti consiglio nel frattempo di studarti qualche guida

**iaiasole** · 05-02-2010, 01:54

eccomi di nuovo
ho cambiato strada.
Ho impostato il css di un layout a colonna fissa, dove ho messo le immagini di brackground per gli effetti grafici.
Per "incasellare" i dati, ho usato una tabella a celle fisse(credo).
Con la quale vorrei credare un foglio INCLUDE, ho letto di questo TAG, ma non ho trovato info valide a riguardo, quindi sono benvenuti tutti i consigli.

Inoltre ho un problema con la pagina, il FOOTER mi da problemi, rimane staccato dal fondo del CONTENT

Mi aiutate ha trovare lo sbaglio?????PLEASEeeeeeeee

ALLEGO HTML E CSS

HTML

<html>
<head>
<title>Layout Monolitico</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">
<link rel="stylesheet" type="text/css" href="CSS per pagina tipo1_4feb.css" >
<style type="text/css" media="print">
div#container{
width: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1></h1>
</div>
<div id="navigation">
<ul>[*]HOME[*]OFFERTE[*]AFFITTO[*]CONTATTI
[/list]
</div>
<div id="content">
<h2>Tabella offerte</h2>
<table cellspacing="15"; cellpadding="10">
<tr>
<td width="160"; height="144">
[img]images/quadrato-rosso-156x134.jpg[/img]</td>
<td width="160"; height="144">2;</td>
<td width="160"; height="144">3;</td>
<td width="160"; height="144">4;</td>
</tr>
<tr>
<td>testo di 1</td>
<td>testo di 2</td>
<td>testo di 3</td>
<td>testo di 4</td>
</tr>
<tr>
<td width="160"; height="144">
[img]images/quadrato-rosso-156x134.jpg[/img]</td>
<td width="160"; height="144">5</td>
<td width="160"; height="144">7</td>
<td width="160"; height="144">8</td>
</tr>
<tr>
<td>testo di 5</td>
<td>testo di 6</td>
<td>testo di 7</td>
<td>testo di 8</td>
</tr>
<tr>
<td width="160"; height="144">
[img]images/quadrato-rosso-156x134.jpg[/img]</td>
<td width="160"; height="144">10</td>
<td width="160"; height="144">11</td>
<td width="160"; height="144">12s</td>
</tr>
<tr>
<td>testo di 9</td>
<td>testo di 10</td>
<td>testo di 11</td>
<td>testo di 12</td>
</tr>
</table>

</p>

</p>

</p>

</p>

</p>

</p>
</div>
<div id="footer">Resetconsulting.com

© Ilaria Aprile design ilariaaprile@hotmail.com</div>
</div>
<script language="javascript">postamble();</script>
</body></html>

CSS

html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;font-size: 76%;text-align: center}/*è centrato quindi i colonnini di fianco si formano da soli*/
div#container{position: relative; height:100%;width: 760px;margin: 0 auto;text-align: left;/**/
border-left: 2px solid black;border-right: 2px solid #36c}/*distanza dal bordo del container e content*/
/*solid dice che quello spazio è pieno e colorato*/
div#footer{position: absolute;width: 100%;
}

/*stili generici, su header e footer*/
div#header{height: 135px;background: url(images/header-offerte_03.gif))}
h1,h2{margin: 0;padding:0}
h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif}
h2{color: #999;font-size: 1.5em}
div#footer{height: 48px;text-align:center;
background-color: #69c; color: #000}
div#footer a{color: #fff;font-weight: bold;text-decoration: underline; background:url(images/imgfooter.jpg)}

/*stili specifici per il layout*/
div#navigation{height: 41px;background: url(images/navigation4.jpg))}
div#content{height: 717px; background: url(images/images/content4-height-741_03.jpg)}

/*stili per la navigazione*/
div#navigation ul{margin: 0;padding: 0; list-style-type: none;}
div#navigation li{display: inline; margin: 0 0 0 1em;padding: 0} /*nota display: inline*/
div#navigation a{color:#FFCC33;font: normal bold 1.2em/2.5em arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #fff;text-decoration: underline}
div#navigation a#activelink{color: #033;text-decoration: none}

**iaiasole** · 05-02-2010, 01:59

infatti miki003
...ero arrivata alla tua stessa conclusione...meglio tentare la strada più fattibile per il momento.E poi mettermi a studiare seriamente

hai qualche guida da consigliarmi?(quella di html.it l'ho letta tutta questa settimana)
Visto che sei così gentile

....daresti un occhiata al codice nel post che ho appena pubblicato?
grazieeeeeee

**iaiasole** · 05-02-2010, 02:13

nn si vede neanche l'immagine di background dell'header...aaaaaa

Discussione: creare CSS per inserire testo e immagine per pagina tipo"catalogo"

Strumenti discussione

Ricerca discussione

Visualizza

creare CSS per inserire testo e immagine per pagina tipo"catalogo"

problemi con il footer

@miki003

Permessi di invio