css questi sconosciuti

[Mas245]

correi fare un nuovo layout al mio sito dovrebbe essere cosi http://www.vincereonline.it/prove/layout.asp logicamente è uno schizzo per farvi vedere è tutto con le tabelle ma lo vorrei fare coi css + belli e leggeri e qui arriva il difficile sicuramente voi maghi della progettazione e grafica lo fareste in 5 secondi ma io che sono un novizio mi chiedo:

posso cerarlo cosi come lo vedete?
come faccio coi css a dire esattamente l'ordine delle celle e la loro grandezza ?
è meglio fare un layout a altezza e grandezza fissa o in %?
punto + importante c'e' un anima pia che mi fa uno schizzo su come impostare i css che poi piano piano me li modifico io o mi faccia capire e mi segua passo passo?

grazie a chi mi darà delle risposte esaudienti

[Fortebraccio]

c'è la guida di HTML.IT sui layout coi CSS.
Dreamweaver ti permette di usare facilmente i CSS: i famosi <div> si chiamano layers e non sono altro che box con posizionamento assoluto.

[Jerry Masslo]

questi:

http://www.inknoise.com/experimental/layoutomatic.php

fanno al caso tuo

in percentuale è meglio, ma ci sono diverse scuole di pensiero

[Mas245]

grazie ad entrambi nonlo sapevo della conversione di dreamveawer se ho difficolta vi faccio sapere

[Mas245]

cominciamo subito vorrei contornare tutti i layer con un bordino ma non riesco ecco il codice:

body { 
	background:#A0C6E5;
	font:80% verdana,helvetica,sans-serif; 
	margin:0; padding:0
}
code { font:80% verdana,helvetica,sans-serif; display:block; margin:0 1em .5em 1em; }
hr { display:none }


body { text-align:center border:1px solid #000}  
#testa { width:750px; height:123px; margin:1em auto; text-align:left }
#corpo { width:750px; margin:1em auto; text-align:left }
#piedipagina { width:732px; margin:1em auto; text-align:left }

/* testa */
#testa { 
	background:#fff; 
	border:1px solid #000; 
	padding: 0; 
}

/* corpo */
#corpo { 
	position:relative; 
	background:#f0f0f0 ; 
	border:1px solid #000; 
}
#corpo-colonna1 { 
	position:absolute; top:0; left:0; 
	width:160px;
	height:200px; 
	padding:1em 0; 
	border:1px solid #000;
}
#corpo-colonna2 { 
	margin:0 200px 0 160px; 
	border-left:1px solid #000; 
	border-right:1px dotted #000; 
	background:#fff; 
	padding:1em 0; 
}
#corpo-colonna3 { 
	position:absolute; top:0; right:0; 
	width:200px; 
	padding:1em 0; 
}

/*pie' di pagina */
#piedipagina { 
	background:#eee; 
	border:1px solid #000; 
	padding:1em 0; 
}

:master:

[Jerry Masslo]

sei sicuro di volere usare i layer?

te lo dico perché dw usa i layer perché a un editor visuale se gli togli le tabelle gli rimangono solo quelli

i layer vanno benissimo quando serve la loro caratteristica di sovrapporsi agli altri elementi della pagina ma quando ciò è al contrario d'impaccio possono sorgere inconvenienti molto gravi, specie al variare del testo e alle sue dimensioni

per fare un layout tabless come il tuo si usa la proprietà float

[Krek_Stealth]

definisci la classe

.bordo {border:solid 2px}

oltre a solid puoi usare dotted,double,dashed, ecc...

inoltre puoi settare colore e spessore di tutti il lati del bordo

[Mas245]

Originariamente inviato da Jerry Masslo
sei sicuro di volere usare i layer?

te lo dico perché dw usa i layer perché a un editor visuale se gli togli le tabelle gli rimangono solo quelli

i layer vanno benissimo quando serve la loro caratteristica di sovrapporsi agli altri elementi della pagina ma quando ciò è al contrario d'impaccio possono sorgere inconvenienti molto gravi, specie al variare del testo e alle sue dimensioni

per fare un layout tabless come il tuo si usa la proprietà float

cosa mi consigli?

con le tabelle si riesce a fare di tutto ma sono pesanti anche se la grafica che uso non è massiccia

grazie dell'aiuto krek

[Jerry Masslo]

ti consiglio il float, nel link che ti ho dato ti fanno quel tipo di layout secondo le tue impostazioni senza ricorrere ai layer

[Mas245]

altro problema percchè per gli ultimi 3 bottoni si comporta in modo differente?
http://www.vincereonline.it/prove/layout.html