[CSS] Sito scalabile...

**zell** · 14-02-2007, 23:36

Salve, vi spiego il mio problema

di solito creo sito in questa maniera...apro photoshop, creo un'immagine totale di sfondo fissa...poi con CSS etc, posiziono gli oggetti (testi, link) su questa immagine...

ovviamente l'immagine non è scalabile (più fissa di così si muore) quiindi mi sono messo in testa di fare un sito che si adatta alla risoluzione che uno lo guarda...

detto questo...io ho fatto in questo modo....la pagina html:

codice:

<html>
<head>
	<title> Chariots Of Fire </title>
	<link rel="stylesheet" type="text/css" href="style.css"/>
	<link rel="stylesheet" type="text/css" href="link.css"/>
	<link rel="stylesheet" type="text/css" href="image.css"/>
</head>
<body>
	
	<table>
		<tr colspan="2">
			<td class="altosin"></td>
			<td class="alto">
			</td>
		</tr>
	</table>
	<table>
		<tr colspan="3">
			<td class="sin"></td>
			<td class="cen"></td>
			<td class="des"></td>
		</tr>
	</table>
		<table>
		<tr colspan="3">
			<td class="sintot"></td>
			<td class="centot"></td>
			<td class="destot">
				[img]images/cosplay.jpg[/img]
			</td>
		</tr>
	</table>

	
	<div>
		Home
		Guestbook
		Staff
		Progetti
		Link
		Cosplay
		Cagate incatalogabili
	</div>
</body>
</html>

mentre il CSS:

codice:

/* CSS relativi all'index */

table {
	width: 100%;
	background-color: white; 
	border-collapse:	collapse;
}

.altosin{
	background-image: url(images/altosin.jpg); 
	width: 601px;
	height: 121px;
}

.alto{
	background-image: url(images/alto.jpg); 
	width: *;
	height: 121px;
}

.sin{
	background-image: url(images/censin.jpg); 
	width: 206px;
	height: 25px;
}
.cen{
	background-image: url(images/cen.jpg); 
	width: *;
	height: 25px;
}
.des{
	background-image: url(images/des.jpg); 
	width: 200px;
	height: 25px;
}

.sintot{
	background-image: url(images/sfondo.jpg); 
	width: 206px;
	height: 700px;
}
.centot{
	background-color: #90bcd7;
	width: *;
	height: 25px;
}
.destot{
	background-image: url(images/sfondod.jpg); 
	width: 183px;
	height: 700px;
}

a {
	background-image: url(images/tastoa.jpg); 
	width: 110px;
	height: 20px;
	color: white;
	text-align: center;
	text-decoration: none;
}

a:hover{
	background-image: url(images/tastob.jpg); 
	color: black;
}

l'altro CSS ci sono definiti i link ma è molto banale...

quindi in pratica ho creato lo sfondo con una tabella e ho posizionato le immagini di sfondo nelle varie colonne/righe della tabella...

è una soluzione valida? mi sono inventato qualcosa del tutto inutile? c'è un modo più semplice o diverso o migliore per ottenere lo stesso risultato?

http://chariots.altervista.org/new/index.php
il sito in questo è questo quì sopra (che io ora vedo 'uguale' sia a risoluzione 1024x768 che a 1280x1024...

inoltre avrei un altro dubbio...io ho una buona parte del sito (che come si vede dal link devo ancora fare :P) praticamente fissa (i link in alto, il titolo) e poi vorrei mettere una musica di sottofondo (dall'omonima canzone del sito)...ma se faccio tante pagine uguali che si linkano tra loro poi il suono riparte da zero...e le immagini vanno ricaricate tutte...di usare i frame non ho voglia...però non posso simulare l'iframe con l'overflow:auto...perchèio ho bisogno realmente di una nuova pagina (però non vorrei ricaricare alcune cose)...come faccio?? è possibile??

spero in un vostro aiuto
scusate se ho scritto troppo ^^

Daniele

**zell** · 15-02-2007, 14:02

nessuno??

**Leilond** · 15-02-2007, 14:20

Semanticamente non è corretto. Le tabelle non dovrebbero mai essere usate per "posizionare gli oggetti" ma per rappresentare dati "tabellari" (dati identificabili in righe/colonne). Per il posizionanemento degli elementi dovresti sempre usare le proprietà float, position, clear eccetera eccetera

In pratica, dal punto di vista semantico, l'html postato è totalmente incongruente
Ti consiglio la guida Layout dei siti con i CSS di HTML.it
Da gli spunti che servono per studiare le cose giuste

So che con le tabelle SEMBRA più facile, ma col tempo e con un po' di pazienza si impara che non solo con i CSS è più corretto e rispettoso nei confronti di chi non ha un browser "standard" (come i lettori di schermo per non vedenti) ma è anche più semplice e "controllabile"

**zell** · 18-02-2007, 01:24

ok grazie per l'aiuto
mi sono letto la guida che mi hai detto

e ora sto facendo un sito posizionando gli elementi direttamente con i CSS...
però ho ancora due dubbi:

1) se per esempio in ogni pagina voglio mettere delle news...quindi in ogni pagina pagina.php avrò il div extras contenente le news...però se posso voglio aggiornare le news dovrò cambiare tutte le pagine php...è corretto mettere tipo un include("news.php"); e poi cambio solo la pagina news.php??? oppure per esempio google s'arrabbia?? o c'è un modo alternativo per risolvere questo problema??

2) stessa problema di sopra...ma con la musica, se metto un midi di sottofondo al sito, poi quando uno cambia pagina il midi ripartirà dall'inizio...

grazie a chi mi aiuterà

**Donald** · 18-02-2007, 01:54

So che non sto rispondendo alla tua domanda, però giusto un consiglio. Sei sicuro che la musica di sottofondo sia assolutamente necessaria per il tuo sito? In generale credo che la musica in sottofondo sia una delle cose più fastidiose che uno può trovare aprendo un sito.

Considera che molte persone navigano ascoltando musica, e quando entreranno nella tua pagina la tua canzone si sovrapporrà creando un effetto molto sgradevole. Non parliamo poi di chi non se lo aspetta ed è in una situazione in cui non può fare rumore (ad esempio in una biblioteca o accanto a qualcuno che dorme): si arrabbierà soltanto e lascerà il tuo sito. Ancora peggio se tutti si mettessero a fare come te, di modo che appena uno apre due pagine diverse si trova queste musiche di sottofondo che cozzano...

Quando lo provi a casa tua, vedendo solo il tuo sito, magari dà un bell'effetto, ma non è detto che sia gradevole in tutte le situazioni. Se un utente vuole la musica, di solito è capace di accendere un player e mettere qualcosa di sottofondo.

**zell** · 18-02-2007, 11:40

basta mettere la possibilità di togliere la musica eh...se uno sta ascoltando la musica sul suo pc, mette No Musica e amen...

sì è abbastanza necessaria ^^

**Leilond** · 18-02-2007, 13:04

Originariamente inviato da zell
ok grazie per l'aiuto
mi sono letto la guida che mi hai detto

e ora sto facendo un sito posizionando gli elementi direttamente con i CSS...
però ho ancora due dubbi:

1) se per esempio in ogni pagina voglio mettere delle news...quindi in ogni pagina pagina.php avrò il div extras contenente le news...però se posso voglio aggiornare le news dovrò cambiare tutte le pagine php...è corretto mettere tipo un include("news.php"); e poi cambio solo la pagina news.php??? oppure per esempio google s'arrabbia?? o c'è un modo alternativo per risolvere questo problema??

2) stessa problema di sopra...ma con la musica, se metto un midi di sottofondo al sito, poi quando uno cambia pagina il midi ripartirà dall'inizio...

grazie a chi mi aiuterà

Il problema 1) non esiste. I motori di ricerca, come gli utenti, vedono solamente l'html risultante, ignorando totalmente quello che avviene "lato server". Una pagina può essereun html statico, una pagina php, asp, jsp, o quel che vuoi... se il risultato è lo stesso, il motore di ricerca neanche se ne accorge...

Il problema 2 invece è un altro... non mettere musica di sottofondo

**zell** · 18-02-2007, 14:38

grazie per il punto 1...

per il punto 2...beh ho necessità di mettere la musica...sul sito di html ho trovato questo:

codice:

				
				<applet code="ClipControl.class">
					<param name="clip" value="file.au"></param>
					<param name="bgcolor" value="#ffffff"></param>
					<param name="fgcolor" value="#000000"></param>
					<param name="oninit" value="load"></param>
					<param name="onstart" value="play"></param>
					<param name="noplay" value="false"></param>
					<param name="noloop" value="false"></param>
					<param name="nostop" value="false"></param>
					<param name="noload" value="false"></param>
					<param name="boxplay" value="false"></param>
					<param name="boxloop" value="false"></param>
					<param name="boxstop" value="false"></param>
					Il tuo browser non supporta Java oppure la console Java non è attiva
				</applet>

ora...funziona solo con i file .au...ho provato a mettere un file .mp3 ma non funziona...
cosè un file .au??? è possibile sostituirlo in un'altra maniera?

Discussione: [CSS] Sito scalabile...

Strumenti discussione

Ricerca discussione

Visualizza

[CSS] Sito scalabile...

Permessi di invio