ripetere immagine in verticale in una cella laterale

**MicheleCOS** · 08-03-2022, 12:54

Buongiorno a tutti.
Chiedo scusa per l'ignoranza ed anche se ripeto temi già discussi ma cercando nel forum non ho trovato nulla che mi ha aiutato (sicuramente per colpa mia).

Sto creando una pagina web con una struttura tabellare di questo tipo (ogni colore è una cella, diciamo)

Nella colonna di destra vorrei che l'immagine con la striscia bianca si ripetesse sull'asse verticale per tutto lo spazio che ha, partendo dall'alto ma ovviamente lo mette al centro del suo spazio.
Riporto il codice che ho scritto

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>esempio_pagina_web</title>
<body width="device-width">
<table cellspacing="0" cellpadding="0" rules="none">
 <tr>
     <td colspan="3"><img align="center" src="testata.gif"/></td>
 </tr>
 <tr width="device-width">
     <td valign="top"><img src="in_alto_sx.gif" alt="data box"/></td>
     <td><img align="center" src="main_central.gif"/></td>
     <td height="100%"><img src="dx_repeat.gif" img-valign="top" img-repeat="repeat-y"/></td>
 </tr>
 <tr>
     <td colspan="3"><img align="center" src="linea_fondo.gif"/></td>
 </tr>
</table>
</body>
</html>

e mi esce solo questo:

Vi chiedo aiuto, grazie anticipatamente

**Vincent.Zeno** · 08-03-2022, 13:28

prima cosa controlla la marcatura della pagina: manca la chiusura del tag head.

gli attributi img-repeat, img-valign non mi pare esistano, dove li hai trovati?
con l'attributo width="device-width" credo tu voglia ottenere una pagina responsiva, ma non è questo il metodo.
consulta questo manuale:
https://www.w3schools.com/css/css_rwd_viewport.asp

quello che vuoi fare lo puoi realizzare solo come background:

codice:

CSS
td.right {
background-image: url("dx_repeat.gif");
background-repeat: repeat-y;
}

HTML
<td class="right" ></td>

**MicheleCOS** · 08-03-2022, 14:39

Innanzitutto grazie.
Beh, non volevo propriamente fare una pagina responsiva ma solo che si adattasse sui soli desktop ma ad ogni dimensione di monitor e browser.
Poi, non volevo collegarlo al css esistente perché devo modificare solo questa pagina e non voglio modificare il css ma poi ho pensato che possono coesistere più css, vero?
Ho tentato la modifica ma non abbiamo fatto un passo avanti, devo aver sbagliato qualcosa.

ho scritto questo:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>esempio_pagina_web</title>
<link href="stilnuovo2022.css" rel="stylesheet" type="text/css">
<body width="device-width">
<table cellspacing="0" cellpadding="0" rules="none">
 <tr>
	 <td colspan="3"><img align="center" src="testata.gif"/></td>
 </tr>
 <tr width="device-width">
	 <td valign="top"><img src="in_alto_sx.gif" alt="data box"/></td>
	 <td><img align="center" src="main_central.gif"/></td>
	 <td class="right"></td>
 </tr>
 <tr>
	 <td colspan="3"></td>
 </tr>
</table>
</body>
</html>

nel css ho messo solo:

codice:

@charset "utf-8";td.right {
background-image: url("dx_repeat.gif");
background-repeat: repeat-y;
}
/* CSS Document */

**MicheleCOS** · 08-03-2022, 14:43

la linea di fondo manca perché mi è sfuggita parte del codice ma a parte quella tutto rimane invariato rispetto a quest'ultima immagine

**Vincent.Zeno** · 08-03-2022, 16:37

a parte il disordine, a parte che se non dichiari <head> il css va a monte...
che cos'è "la linea di fondo"?

poi ti do un'esempio di come impostare questa pagina

**MicheleCOS** · 08-03-2022, 17:22

Originariamente inviata da Vincent.Zeno

a parte il disordine, a parte che se non dichiari <head> il css va a monte...
che cos'è "la linea di fondo"?

poi ti do un'esempio di come impostare questa pagina

L'esempio non si vede.
La linea di fondo è il nome che ho dato alla sezione di chiusura della tabella, quella in rosso spento con scritta bianca.
Ho provato ad inserire il tag <head> ma non è cambiato nulla, anche spostandone la chiusura in varie zone.

Ora sono messo così:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>pagina_esercizio</title>
<link href="stilnuovo2022.css" rel="stylesheet" type="text/css">
<body width="device-width">
<table cellspacing="0" cellpadding="0" rules="none">
 <tr>
	 <td colspan="3"><img align="center" src="testata.gif"/></td>
 </tr>
 <tr width="device-width">
	 <td valign="top"><img src="in_alto_sx.gif" alt="data box"/></td>
	 <td><img align="center" src="main_central.gif"/></td>
	 <td class="right"></td>
 </tr>
 <tr>
	 <td colspan="3"><img align="center" src="linea_fondo.gif"/></td>
 </tr>
</table>
</body>
</head>
</html>

oppure

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>pagina_esercizio</title>
<link href="stilnuovo2022.css" rel="stylesheet" type="text/css">
	</head>
<body width="device-width">
<table cellspacing="0" cellpadding="0" rules="none">
 <tr>
	 <td colspan="3"><img align="center" src="testata.gif"/></td>
 </tr>
 <tr width="device-width">
	 <td valign="top"><img src="in_alto_sx.gif" alt="data box"/></td>
	 <td><img align="center" src="main_central.gif"/></td>
	 <td class="right"></td>
 </tr>
 <tr>
	 <td colspan="3"><img align="center" src="linea_fondo.gif"/></td>
 </tr>
</table>
</body>
</html>

Non cambia nulla, so che c'è confusione, è proprio quella che sto cercando di redimere

**MicheleCOS** · 08-03-2022, 17:28

no redimere... dirimere

comunque la funzione di modifica messaggio non funziona, mi sembra...

**Vincent.Zeno** · 08-03-2022, 18:04

L'esempio non si vede.

comunque la funzione di modifica messaggio non funziona, mi sembra...

non l'ho ancora postato...
aspettavo che prima tu rispondessi.

quando non funziona è grazie all'eccessiva efficienza del firewall, non posso farci granché...

esempio ripulito (ovviamente lo stile attribuito alla tabella lo puoi spostare nel css esterno):

codice:

CSS
@charset "utf-8";


td.right {
background-image: url("image1.jpeg");
background-repeat: repeat-y;
}


HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>pagina_esercizio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="stilnuovo2022.css" rel="stylesheet" type="text/css">
</head>


<body>
<table cellspacing="0" cellpadding="0" rules="none" style="width:100%; height: 350px;">
 <tr>
	 <td colspan="3"><img src="testata.gif" alt="..." ></td>
 </tr>
 <tr>
	 <td valign="top" style="width: 15%"><img src="in_alto_sx.gif" alt="data box" ></td>
	 <td style="width:70%"><img src="main_central.gif" alt=".." ></td>
	 <td class="right" style="width: 15%">gkhg</td>
 </tr>
 <tr>
	 <td colspan="3"><img src="linea_fondo.gif" alt="." ></td>
 </tr>
</table>
</body>
</html>

**MicheleCOS** · 09-03-2022, 20:35

Dunque, io ho applicato il tuo codice alla mia pagina ma non ho tenuto ciò che volevo.
L'immagine nella colonna a sx si ripete ma non ha un allineamento soddisfacente, anche la colonna di sinistra non è propriamente adiacente alla main centrale e tutto fuoriesce dal browser in visualizzazione non zoomata e se zoomo avanti e dietro le porzioni non rimangono attaccate.

Precedentemente ero riuscito, non so come, ad ottenere una cosa che desidero moltissimo ossia il fatto che la "testata" (ossia la prima riga della tabella) occupava tutta la larghezza del browser ed anche zoomando avanti o dietro questo non cambiava nulla. Questo, purtroppo, accade solo per la prima riga e non capisco perché! Ecco il codice:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PRIMApagina</title>
<link href="stilnuovo2022_2.css" rel="stylesheet" type="text/css">
<body width=device-width>
<table>
 <tr bordercolor="#120C0C" border="1" ><img align="center" width="100%" height="100%" src="testata.gif" />
 </tr>
 <tr bordercolor="#120C0C"; border="1" >
	 <td><img src="in_alto_sx.gif" alt="data box"/></td>
	 <td><img align="center" src="main_central.gif" /></td>
	 <td class="right"></td>
 </tr>
</table>
</body>
</html>

Per il codice che mi hai girato, ovviamente ho provato a cambiare le %li, ad aggiungere proprietà al viewport etc ma nulla...

Direi, se non ti/vi disturba troppo, di andare per ordine. Innanzitutto questa pagina è visualizzabile solo su computer desktop e non sarà mai raggiungibile da smartphone etc. La domanda ora è: come faccio a mantenere questa caratteristica fissa ed a schermo pieno su tutta la tabella e non solo sulla prima riga?

**Vincent.Zeno** · 09-03-2022, 21:02

scusa ma che ti correggo a fare il codice di base se poi ripeti gli errori, gravi, cha hai fatto all'inizio?
anzi, ne aggiungi di nuovi...

ok che vuoi un layout fisso (ora lo so), quindi basava rimuovere

codice:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ora parli della colonna di sinistra, prima era quella di destra...

nella prima riga hai omesso la cella: non puoi

Discussione: ripetere immagine in verticale in una cella laterale

Strumenti discussione

Ricerca discussione

Visualizza

ripetere immagine in verticale in una cella laterale

Tag per questa discussione

Permessi di invio