Esiste un generatore automatico di layout CSS?

**natasha** · 23-10-2008, 12:20

Come sopra: esiste un programma, o un servizio Web, o un'opzione nascosta di qualcosa, che data la struttura dei "div" in forma di tabella (nidificata a piacere, of course...) genera automaticamente gli stili CSS necessari per evitare di impazzire fra clear, both, margini, padding e chi più ne ha più ne metta?

Ah, di "raccolte di layout CSS" (compresa quella, ottima, di HTML.it), ne ho già consultate a bizzeffe.
Ognuna ti dice qualcosa; ma ogni layout, sembra essere una cosa a sè.
Se esiste un generatore automatico, bene; altrimenti, pazienza, si va di clear, both... ed impazzimenti vari.

**Myaku** · 23-10-2008, 12:46

Originariamente inviato da natasha
ma ogni layout, sembra essere una cosa a sè.

perchè effettivamente è così.
Se anche esistesse lo strumento che chiedi, pensi che sarebbe così "intelligente" da sostituirsi all'esperienza di uno sviluppatore, nel capire quale è di volta in volta la soluzione migliore, meglio gestibile e meno complessa?

**Gufo** · 23-10-2008, 13:00

Originariamente inviato da natasha
Come sopra: esiste un programma, o un servizio Web, o un'opzione nascosta di qualcosa, che data la struttura dei "div" in forma di tabella (nidificata a piacere, of course...) genera automaticamente gli stili CSS necessari per evitare di impazzire fra clear, both, margini, padding e chi più ne ha più ne metta?

Ah, di "raccolte di layout CSS" (compresa quella, ottima, di HTML.it), ne ho già consultate a bizzeffe.
Ognuna ti dice qualcosa; ma ogni layout, sembra essere una cosa a sè.
Se esiste un generatore automatico, bene; altrimenti, pazienza, si va di clear, both... ed impazzimenti vari.

Qualche cosa esiste ma genera un codice piuttosto bruttino, ti basta fare una piccola ricerca in rete

**natasha** · 23-10-2008, 13:24

Originariamente inviato da Gufo
Qualche cosa esiste ma genera un codice piuttosto bruttino, ti basta fare una piccola ricerca in rete

Ricerca per quali termini?
Un problema più specifico: voglio un layout così fatto:

- Prima riga: tre colonne; la colonna centrale è divisa in due righe
- Seconda riga: una riga, che occupa tutte e tre le colonne
- Terza riga: tre colonne; la colonna centrale è divisa in tre righe; la prima di queste righe è divisa in due colonne
- Due righe finali, che occupano tutte e tre le colonne.

....che soluzione proporreste?

**Gufo** · 23-10-2008, 14:22

Originariamente inviato da natasha
Ricerca per quali termini?
Un problema più specifico: voglio un layout così fatto:

- Prima riga: tre colonne; la colonna centrale è divisa in due righe
- Seconda riga: una riga, che occupa tutte e tre le colonne
- Terza riga: tre colonne; la colonna centrale è divisa in tre righe; la prima di queste righe è divisa in due colonne
- Due righe finali, che occupano tutte e tre le colonne.

....che soluzione proporreste?

Una cosa così ti può andare?

codice:

<html><head><title>Nuova pagina 1</title><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><style type="text/css">.ts_0 {border: 0px outset black; height: 186px; position: relative; text-align: left; width: 987px;} .ts_1 {height: 42px; left: 2px; padding: 1px; position: absolute; top: 2px; width: 243px;} .ts_2 {height: 19px; left: 249px; padding: 1px; position: absolute; top: 2px; width: 488px;} .ts_3 {height: 42px; left: 741px; padding: 1px; position: absolute; top: 2px; width: 242px;} .ts_4 {height: 19px; left: 249px; padding: 1px; position: absolute; top: 25px; width: 488px;} .ts_5 {height: 19px; left: 2px; padding: 1px; position: absolute; top: 48px; width: 981px;} .ts_6 {height: 65px; left: 2px; padding: 1px; position: absolute; top: 71px; width: 243px;} .ts_7 {height: 19px; left: 249px; padding: 1px; position: absolute; top: 71px; width: 242px;} .ts_8 {height: 19px; left: 495px; padding: 1px; position: absolute; top: 71px; width: 242px;} .ts_9 {height: 65px; left: 741px; padding: 1px; position: absolute; top: 71px; width: 242px;} .ts_10 {height: 19px; left: 249px; padding: 1px; position: absolute; top: 94px; width: 488px;} .ts_11 {height: 19px; left: 249px; padding: 1px; position: absolute; top: 117px; width: 488px;} .ts_12 {height: 19px; left: 2px; padding: 1px; position: absolute; top: 140px; width: 981px;} .ts_13 {height: 19px; left: 2px; padding: 1px; position: absolute; top: 163px; width: 981px;}</style></head><body><div class="ts_0"><div class="ts_1">_</div><div class="ts_2">_</div><div class="ts_3">_</div><div class="ts_4">_</div><div class="ts_5">_</div><div class="ts_6">_</div><div class="ts_7">_</div><div class="ts_8">_</div><div class="ts_9">_</div><div class="ts_10">_</div><div class="ts_11">_</div><div class="ts_12">_</div><div class="ts_13">_</div></div></body></html>

**Gufo** · 23-10-2008, 14:30

Così invece con bordi

codice:

<html>
	<head>
		<title>
			Nuova pagina 1
		</title>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
		<style type="text/css">
			.ts_0 {
	border: 1px outset black;
	height: 202px;
	position: relative;
	text-align: left;
	width: 985px;
}

.ts_1 {
	height: 44px;
	left: 3px;
	padding: 1px;
	position: absolute;
	top: 3px;
	width: 239px;
}

.ts_2 {
	height: 19px;
	left: 248px;
	padding: 1px;
	position: absolute;
	top: 3px;
	width: 486px;
}

.ts_3 {
	height: 44px;
	left: 740px;
	padding: 1px;
	position: absolute;
	top: 3px;
	width: 240px;
}

.ts_4 {
	height: 19px;
	left: 248px;
	padding: 1px;
	position: absolute;
	top: 28px;
	width: 486px;
}

.ts_5 {
	height: 19px;
	left: 3px;
	padding: 1px;
	position: absolute;
	top: 53px;
	width: 977px;
}

.ts_6 {
	height: 69px;
	left: 3px;
	padding: 1px;
	position: absolute;
	top: 78px;
	width: 239px;
}

.ts_7 {
	height: 19px;
	left: 248px;
	padding: 1px;
	position: absolute;
	top: 78px;
	width: 240px;
}

.ts_8 {
	height: 19px;
	left: 494px;
	padding: 1px;
	position: absolute;
	top: 78px;
	width: 240px;
}

.ts_9 {
	height: 69px;
	left: 740px;
	padding: 1px;
	position: absolute;
	top: 78px;
	width: 240px;
}

.ts_10 {
	height: 19px;
	left: 248px;
	padding: 1px;
	position: absolute;
	top: 103px;
	width: 486px;
}

.ts_11 {
	height: 19px;
	left: 248px;
	padding: 1px;
	position: absolute;
	top: 128px;
	width: 486px;
}

.ts_12 {
	height: 19px;
	left: 3px;
	padding: 1px;
	position: absolute;
	top: 153px;
	width: 977px;
}

.ts_13 {
	height: 19px;
	left: 3px;
	padding: 1px;
	position: absolute;
	top: 178px;
	width: 977px;
}
		</style>
	</head>
	<body>
		<div class="ts_0">
			<div class="ts_1">
				
			</div>
			<div class="ts_2">
				
			</div>
			<div class="ts_3">
				
			</div>
			<div class="ts_4">
				
			</div>
			<div class="ts_5">
				
			</div>
			<div class="ts_6">
				
			</div>
			<div class="ts_7">
				
			</div>
			<div class="ts_8">
				
			</div>
			<div class="ts_9">
				
			</div>
			<div class="ts_10">
				
			</div>
			<div class="ts_11">
				
			</div>
			<div class="ts_12">
				
			</div>
			<div class="ts_13">
				
			</div>
		</div>
	</body>
</html>

**natasha** · 23-10-2008, 15:20

Direi che va PIU' che bene

Fatta rigorosamente a mano, scommetto

**natasha** · 23-10-2008, 15:25

Eh no, mi correggo, così non vale!
Hai posizionato i div con position: absolute; ed il calcolo millimetrico dei pixel; così ci arrivavo anch'io!
Basta che metti più di due righe di contenuto in ts_2, e subito deborda....

Eh no, ovviamente, devono anche conservare le posizioni relative!

**Gufo** · 23-10-2008, 15:33

Originariamente inviato da natasha
Eh no, mi correggo, così non vale!
Hai posizionato i div con position: absolute; ed il calcolo millimetrico dei pixel; così ci arrivavo anch'io!
Basta che metti più di due righe di contenuto in ts_2, e subito deborda....

Eh no, ovviamente, devono anche conservare le posizioni relative!

Prova così se va meglio!

codice:

<html>
	<head>
		<title>
			Nuova pagina 1
		</title>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
		<style type="text/css">
			.ts_0 {
	border: 1px outset black;
	height: 202px;
	position: relative;
	text-align: left;
	width: 985px;
}

.ts_1 {
	height: 44px;
	left: 3px;
	padding: 1px;
	position: absolute;
	top: 3px;
	width: 239px;
}

.ts_2 {
	height: 19px;
	left: 248px;
	padding: 1px;
	position: absolute;
	top: 3px;
	width: 486px;
}

.ts_3 {
	height: 44px;
	left: 740px;
	padding: 1px;
	position: absolute;
	top: 3px;
	width: 240px;
}

.ts_4 {
	height: 19px;
	left: 248px;
	padding: 1px;
	position: absolute;
	top: 28px;
	width: 486px;
}

.ts_5 {
	height: 19px;
	left: 3px;
	padding: 1px;
	position: absolute;
	top: 53px;
	width: 977px;
}

.ts_6 {
	height: 69px;
	left: 3px;
	padding: 1px;
	position: absolute;
	top: 78px;
	width: 239px;
}

.ts_7 {
	height: 19px;
	left: 248px;
	padding: 1px;
	position: absolute;
	top: 78px;
	width: 240px;
}

.ts_8 {
	height: 19px;
	left: 494px;
	padding: 1px;
	position: absolute;
	top: 78px;
	width: 240px;
}

.ts_9 {
	height: 69px;
	left: 740px;
	padding: 1px;
	position: absolute;
	top: 78px;
	width: 240px;
}

.ts_10 {
	height: 19px;
	left: 248px;
	padding: 1px;
	position: absolute;
	top: 103px;
	width: 486px;
}

.ts_11 {
	height: 19px;
	left: 248px;
	padding: 1px;
	position: absolute;
	top: 128px;
	width: 486px;
}

.ts_12 {
	height: 19px;
	left: 3px;
	padding: 1px;
	position: absolute;
	top: 153px;
	width: 977px;
}

.ts_13 {
	height: 19px;
	left: 3px;
	padding: 1px;
	position: absolute;
	top: 178px;
	width: 977px;
}
		</style>
	</head>
	<body>
		<div class="ts_0">
			<div class="ts_1">
				
			</div>
			<div class="ts_2">
				
			</div>
			<div class="ts_3">
				
			</div>
			<div class="ts_4">
				
			</div>
			<div class="ts_5">
				
			</div>
			<div class="ts_6">
				
			</div>
			<div class="ts_7">
				
			</div>
			<div class="ts_8">
				
			</div>
			<div class="ts_9">
				
			</div>
			<div class="ts_10">
				
			</div>
			<div class="ts_11">
				
			</div>
			<div class="ts_12">
				
			</div>
			<div class="ts_13">
				
			</div>
		</div>
	</body>
</html>

**Myaku** · 23-10-2008, 15:35

@natasha: quando vai a rielaborare il codice dato da Gufo, mettici il doctype e occhio al charset ... con quello che ti ha impostato potresti avere problemi su S.O. diversi da windows

Discussione: Esiste un generatore automatico di layout CSS?

Strumenti discussione

Ricerca discussione

Visualizza

Esiste un generatore automatico di layout CSS?

Re: Esiste un generatore automatico di layout CSS?

Re: Esiste un generatore automatico di layout CSS?

Re: Re: Esiste un generatore automatico di layout CSS?

Re: Re: Re: Esiste un generatore automatico di layout CSS?

Permessi di invio