The John Doe CSS Explosion

[John Doe]

Let's Go Fluid!!

allora, rendiamo il nostro sitozzo un po' più appetibile
Allora, abbiamo creato un layout fixed, ovvero con tutte le dimensioni specificate...
proviamo ora a renderlo fluido. Prima rendiamo fluido sull'orizzontale.

La cosa è semplicissima. Senza toccare l'html, basta specificare il width in percentuali.

Mettiamo il width del #wrap a 90%, im mondo che rimanga un po' di spazio con lo sfondo.
Il top invece gli mettiamo il width:100%;, perchè essendo dentro wrap e avendo wrap il position:relative, e top position absolute, la larghezza di top è relativa al div wrap. Noi gli diciamo di essere largo quanto wrap.
Allo stesso modo la somma delle larghezze di left e content deve fare 100%, e mettiamo rispettivamente 20% e 80%

body{
	background:black;
	margin:0px;
}

#wrap{
	position:relative;
	margin: 0 auto;
	width: 90%;
	height: 100%;
}

#top{
	background:blue;
	top:0px;
	width:100%;
	height:120px;
}

#content{
	position:absolute;
	background:white;
	width:80%;
	top:120px;
	left:20%;
	height:600px;
}

#left{
	position:absolute;
	background:red;
	width:20%;
	top:120px;
	height:600px;
}

Vedete quando si restringe la finestra, si restringe anche il layout

[Fost]

tu dici che il top ha position absolute ma non lo scrivi, non dovrebbe essere static così?

se si specifica il layout non cambia ma se poi ipoteticamente si va ad aggiungere qualcosa la situazione combiarebbe giusto?

[John Doe]

Originariamente inviato da Fost
tu dici che il top ha position absolute ma non lo scrivi, non dovrebbe essere static così?

giusto un po' come prima quando il layout era in alto a sinistra statico... che il div top abbia static o absolute non cambia in questo caso... magari se si omette absolute non importa l'attributo top:0px che è superfluo in quanto ignorato dallo static

se si specifica il layout non cambia ma se poi ipoteticamente si va ad aggiungere qualcosa la situazione combiarebbe giusto?

eh si... se cambi il layout...cambia

[Fost]

una domanda forse un po' strana, io quando ho fatto qualcosa di html ricordo che si usavano i frameset e i frame così da non dover ricaricare ogni volta tutta la pagina ma solo il frame interessato, ora qui per quanto riguarda le dtd i frame non si usano in quanto stiamo usando la dtd strict però non ho ben capito come funziona, cioè io ho la mia pagina con il suo stile dettato dal css, quando io clicco su un link che fa riferimento ad una pagine simile che faccio?gli attacco lo stesso css della precedente oltre al suo specifico?

tnks

[John Doe]

in generale si, usi la stessa struttura e poi il contenuto lo fai variare da pagina a pagina
ovviamente il css è sempre lo stesso e rimane in cache.
La parte layout dell'html è molto breve come avrai visto...
cmq poi alla fine penso che dirò anche qualcosa a riguardo

i frame a me non sono mai piaciuti... confondono il codice e i motori di ricerca.

ora che vi piacerebbe sapere?

[Vulcano23]

Originariamente inviato da John Doe
i frame a me non sono mai piaciuti... confondono il codice e i motori di ricerca.

Aggiungiamoci anche i problemi a creare i bookmark

[Fost]

inanzitutto grazie per le risposte

siccome mi son preso bene, ho deciso di fare il sito della mia ex classe delle superiori(siamo sempre stati molto uniti e ci ritroviamo spesso ), ho necessità di mettere delle foto sul sito, volevo chiedere se esisteva un modo per far vedere l'anteprima senza dover creare una copia dell'immagine rimpicciolita ma semplicemente utilizzando l'originale

[John Doe]

mmm fare si potrebbe anche fare... ma.. costringi tutti quanti a scaricarsi l'immagine grande anche se non la vuole vedere...

[Fost]

ah quindi non è possibile far fare un anteprima senza scaricarsi l'immagine grande, vabè vorrà dire che farò le immaginette piccole....che sbatta però

tnks

[edit] noto ora nelle prove che sto facendo che i caratteri come èéàòù non vengono convalidati dal w3c

nessuno ha una lista con il codice da implementare per le suddette lettere?

[Fost]

scusate la domanda che potrebbe essere banale ma siccome non ho capito e non riesco a trovare un esempio di come gestre i fogli di sile in internet fatto su 2 o più pagine simili chiedo

quando ho 2 pagine quanti fogli di stile devo fare?uno per pagina oppure uno per tutto il sito?

tnks

[John Doe]

le lettere accentate , l' & il % lo stesso < e > « « ¹²³¼½¬{[]}` son tutti caratteri speciali...
non ho una lista completa, io uso bluefish e ce l'ha dentro... però se la cerchi la trovi
per dirtene un paio

non breaking space : & nbsp;
è: & egrave;
é: & eacute;
à: & agrave;
&: & amp;
<: & lt;
>: & gt;
ù: & ugrave;

togli lo spazio tra la & e il resto, mi è toccato metterlo che sennò non vedevi nulla perchè vengono trasformati

fai una ricerca su special tags o qualcosa di simile...


poi per il discorso due pagine: come ho detto prima, fai un css solo e lo linki a tutte le pagine che fai che ovviamente hanno la stessa struttura di base simile

[Fost]

grazie mille john

in questi giorni mi sono impegnato e ho fatto questo

http://quintainfoa.altervista.org/index.html

i colori sono molto provvisori

il codice è questo

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 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>
	<meta name="generator" content="ViM" />
	<meta name="author" content="Fost" />
	<meta name="copyright" content="5 info A" />
	<link href="./style.css" rel="stylesheet" type="text/css" media="screen" />
	<title> 5 info A - 2004 </title>
</head>

<body>

	<div id="wrap">
	<div id="content">
		<div class="menu"> Aggiornamento del 30/03/05 </div>
			<div class="news"> Aggiunta del logo e sistemanzione del menu</div>
		<div class="menu"> Aggiornamenti precedenti </div>
			<div class="news"> Aggiornamenti e sistamazioni varie </div>
	</div>
	<div id="left">
		<div class="menu"> Men&ugrave; </div>
			<div class="subMenu">
				<a href="index.html"> Home page </a>
				<br />
				<a href="Praga/index.html"> Foto Praga </a>
			</div>

	</div>
	<div id="logo"></div>
	<div id="banner"> <p align="right"> <script language="javascript" type="text/javascript">
document.write('<script language="javascript" src="http://ad.altervista.org/alternet.ad?c=19&f=1&'+new Date().getTime()+'"><\/s'+'cript>');
</script> </p> </div>

	</div>
</body>

</html>

style.css

body{
	background: withe;
	margin-top: 30px;
}

#banner{
	position: absolute;
	align: right;
	margin-right: 0px;
	width: 80%;
	left: 20%;
}

.title{
	font-size: 24px;
	font-type: italic;
	background-color: black;
}

#wrap{
	position: relative;
	margin: 0px auto;
	width: 90%;
	height: 100%;
}

#logo{
	position: absolute;
	background-image: url("immagini/logo-5ia.jpg"); 
	background-repeat: no-repeat;
	background-position: left;
	top: 0px;
	width: 20%;
	height: 120px;
}

#content{
	position: absolute;
	margin-left: 20px;
	background: white;
	width: 80%;
	height: 480px;
	left: 20%;
	top: 120px;
}

.news{
	background: #00C3C3;
	padding-top: 10px;
	padding-bottom: 10px;
	border-style: solid;
	border-color: blue;
	border-top-width: 0px;
	border-right-width: 6px;
	border-bottom-width: 0px;
	border-left-width: 6px;
}



#left{
	position: absolute;
	background: red;
	width: 20%;
	height: 480px;
	top: 120px;
}

.menu{
	width: 100%;
	font: bold italic 20px 'Times New Roman';
	color: white;
	background-color: black;
}

.subMenu{
	width: 70%;
	margin: 5px auto;
	
}

qualsiasi tipo di miglioramento possibile( e ce ne saranno parecchi immagino) o consiglio generale sarà ben accetto

la pagina che vedete è l'unica pagina funzionante, le foto di praga ancora non ci sono

[Fabio_Mecchia]

Ciao,
innanzitutto complimenti per la guida, veramente utile e ben fatta.
Secondo me i css sono una gran cosa ma hanno un unico grosso difetto : quella gran m.... di IE , non e' praticamente possibile fare layout un pelo piu' complessi senza dover ricorrere a migliaia di hack/java script e altre amenita' per poter visualizzare correttamente il sito.
Sto realizzando un mio sito personale e sto impazzendo per poterlo fare con un' impaginazione totalmente basata sui css senza l'uso delle tabelle. Su Opera, mozzilla ,firefox , il browser di mia nonna in cariola e' tutto perfetto ma appena apro IE .... grrr che nervoso, il sito sembra essere stato frullato prima di venir visualizzato.

Scusate lo sfogo ma ho appena rivisto il mio sito con IE

Ciao
Fabio

[Fost]

mah sinceramente ho già in mente cosa fare, praticamente obblighererò tutti i miei ex compagni di classe a installarsi un browser serio se vogliono vedere il mio sito, altrimenti a me non cambia nulla

di ie proprio me ne sbatto visto che il mio sito non è qualcosa di "veramente pubblico"

[John Doe]

Originariamente inviato da Fabio_Mecchia
Ciao,
innanzitutto complimenti per la guida, veramente utile e ben fatta.
Secondo me i css sono una gran cosa ma hanno un unico grosso difetto : quella gran m.... di IE , non e' praticamente possibile fare layout un pelo piu' complessi senza dover ricorrere a migliaia di hack/java script e altre amenita' per poter visualizzare correttamente il sito.
Sto realizzando un mio sito personale e sto impazzendo per poterlo fare con un' impaginazione totalmente basata sui css senza l'uso delle tabelle. Su Opera, mozzilla ,firefox , il browser di mia nonna in cariola e' tutto perfetto ma appena apro IE .... grrr che nervoso, il sito sembra essere stato frullato prima di venir visualizzato.

Scusate lo sfogo ma ho appena rivisto il mio sito con IE

Ciao
Fabio

beh, usando l'1% di quel che si potrebbe fare, senza troppi hack, IE alla fine lo vede.. Appena l'ho finito ti faccio vedere un sito che sto facendo ora pure CSS senza nessun tipo di hack per IE
cmq, la versione 7 è alle porte, dovrebbe risolvere il problema dei png.. e molti con CSS. Certo ne introdurrà 500000 altri ma sticazzi...

[John Doe]

fost per quanto riguarsa il sito che hai fatto lo guado domani con calma, cmq una cosa: non ti basare sul fatto che il bianco su win lo vedi come sfondo predefinito...

[Fost]

azz....questa non la sapevo grazie john, sistemo subito

però lo vedi abbastanza diversamente da me , cioè il left(rosso) io lo vedo molto più stretto, di poco più largo dell'immagine sopra

p.s. tra l'altro l'ho "aggiornato" e c'ho messo la famosa prima pagina che dice di non vederlo con ie tutta da sistemare, era una prova

[edit] mi sono accorto ora che non avevo tralasciato di mettere lo sfondo a bianco ma avevo scritto bianco come withe

[gasfax]

se nn metti il colore tanti browser impostano di default 50% Grigio.. .. per rimanere su un Transitional potresti anche mettere nel body un bgcolor (John nn mi uccidere.. ma purtroppo è così finchè tutti nn seguiranno rigorosamente gli standard )... così i browser non css compilanti si adeguano (anche perchè se metti una gif trasparente col 50% grey si vedono tutti i punti chiari e sta no schifo )

[John Doe]

fost

qua:

#banner{
position: absolute;
align: right;

align non esiste come attributo. Se vuoi allineare il testo a destra usa text-align

inoltre se sviluppi su linux ti consiglio bluefish per l'xhtml/php/javascript e cssed per i CSS http://cssed.sourceforge.net/

[Pent]

Vorrei sapere quali sono i comandi per modificare il colore dei link....e dei link visitati....e dove devo insere questi comandi.....grazie!