Piacere di conoscervi! E ora il tableless...

[LadyRinoa]

Salve a tutti e piacere di conoscervi!
Sono nuova del forum ma è già da un po' che frequento il sito per i suoi tutorial. Complimenti, sono davvero utilissimi e svolgono perfettamente la loro funzione di supporto per chi è alle prime armi, bravi!
E ora, dopo questa piccola introduzione, vi scasso già con il mio dilemma ancestrale

Sto imparando ad usare Dreamweaver. Sto tentando di creare un layout senza tabelle. Mi hanno consigliato il tableless rispetto al comune layout con le tabelle perchè è molto più pratico, più bello, più organizzato eccetera. Ora però sto odiando il tableless.

Sto tentando di creare il mio portfolio personale (raggiungibile da qui). Il problema, appunto, potete vederlo voi: nonostante armeggi con il CSS e l'HTML e nonostante abbia seguito i numerosi consigli dei vostri tutorial, non riesco a posizionare il div con la scritta bordeaux nel box rosa, mentre quello con la scritta bianca non ne vuole proprio sapere di essere affiancato al box rosa e di restringersi.

Perdonatemi, sono praticamente alle prime armi con Dreamweaver. E' la prima volta che impagino un layout con Dreamweaver, a dire il vero (sì, picchiatemi) ma ci tengo tanto ad imparare e spero che voi tutti possiate aiutarmi. In caso contrario, vi ringrazio ugualmente.

Il risultato dovrebbe essere questo.

Questo è il CSS scritto da me:

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-image: url(sfondo.jpg);
	background-repeat: repeat-x;
	text-align: center;
	color: #FFFFFF;
}

#container {
	width: 653px;
	margin: auto;
	padding: 0;
	background-image: url(background.jpg);
	background-repeat: repeat-y;

}

#header {
	background-image: url(header.jpg);
	background-repeat: no-repeat;
	width: 653px;
	height: 125px;
	margin: auto;
}

#menu {
	background-image: url(navigate.jpg);
	background-repeat: no-repeat;
	width: 653px;
	height: 128px;
	margin: auto;
}

#navigation {
	float: left;
	width: 158px;
	padding: 0;
	margin: 5px;
	text-align: right;
	color: #c72623
}

#content {
	margin-left: auto;
	background-image: url(title.jpg);
	background-repeat: no-repeat;
	width: 653px;
	height: 125px;
	text-align: right;
	margin: auto;
}

#footer {
	clear: both;
	background-image: url(footer.jpg);
	background-repeat: no-repeat;
	width: 653px;
	height: 43px;
	margin: auto;
}

Dove sbaglio?

[simulacron]

Content & navigation vanno affiancati?
float :left in entrambi e clear:left nel footer......

[LadyRinoa]

Ho provato a fare come mi hai consigliato ma esce storto ugualmente...
Ho aggiornato il link di style.css con i comandi da te suggeriti.

[simulacron]

Originariamente inviato da LadyRinoa
Ho provato a fare come mi hai consigliato ma esce storto ugualmente...
Ho aggiornato il link di style.css con i comandi da te suggeriti.

È quasi a posto......
Quell'immagine dei due fiori (belli.....) deve essere per forza così grande?
A occhio....Se la rimpicciolisci un po' content & navigation tornano in pari.
Mi sembra che il pannello di sinistra sia tra 10 e 20 pixel più in basso.
Se riduci l'altezza dell'immagine dei fiori (un po' eccessiva per me) di altrettanto, dovrebbe tornare tutto a posto....

[LadyRinoa]

Azz, proverò, grazie per il consiglio.
Non c'è un modo per mantenere inalterato la dimensione del fiore?

[simulacron]

Originariamente inviato da LadyRinoa
Azz, proverò, grazie per il consiglio.
Non c'è un modo per mantenere inalterato la dimensione del fiore?

Il tuo problema è la mancanza di proporzione tra il fiore e il resto.
Potresti lasciare così il fiore ma devi abbassare il content lasciando una antiestetica piazza sopra di se, nella testata che usualmente non ha un'altezza maggiore di 150, talvolta 200 pixel.
Riempire 200px non è affare da poco, soprattutto se non vuoi iperaffollarli.
Quel fiore è grande per quell'header (la testata di di cui sopra): se riuscissi a farlo stare entro i 150px di cui s'è detto, penso che avresti anche meno problemi d'impaginazione.

[LadyRinoa]

Ok, sei stato fin troppo gentile. Seguirò i tuoi consigli e ti terrò aggiornato!
Grazie di tutto

[simulacron]

OK......