Problemi con clear

[SaroHash]

Seguendo un tutorial quì su html.it (http://css.html.it/articoli/leggi/16...sito-xhtmlcss/) e modificando immagini dal mio template sono riuscito ad ottenere qualcosa del genere:

http://radiosuonodigitale.netsons.or...mp/no-css.html

Purtroppo però non capisco molto di css/html e mi sono accorto che il div clearer mi va a creare una brutta linea orizzontale (anche se non troppo visibile..ma purtroppo io sono un perfezionista ) tra la sidebar a destra e l'immagine del footer in basso.



Se elimino il div clearer invece la linea orizzontale non viene creata più...e la sidebar con l'immagine di footer combaciano perfettamente. Però non risulta visibile l'ombra a sinistra della sidebar.

Per maggiore chiarezza posto anche il codice css:

*{
	margin: 0;
	padding: 0;
	}
body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: 'Lucida Grande', Thaoma, Verdana, Arial, Sans-Serif;
	color: #555;
	text-align: center;
	}
#div1 {
	background: url(images/bg.jpg) repeat-x 0 0;
	width:50%;
	height:350px;
	position: absolute;
	z-index:2;
	}
#div2 {
	background: url(images/bg1.jpg) repeat-x 0 0;
	width:50%;
	position: absolute;
	left:50%;
	height:350px;
	z-index:1;
	}
#container {
	background: transparent url(images/bgpage.jpg) repeat-y 100% 0;
	margin: 0 auto;
	width: 782px;
	text-align: left;
	position:relative;
	z-index:3;
	}
#header {
	height: 170px;
	width: 100%;
	background: transparent url(images/bgheader.jpg) no-repeat 0 0;
	}
#logo{
	width: 100%;
	position: relative;
	}
#content {
	float: left;
	width: 595px;
	background: transparent url(images/bgnarrowcolumn.jpg) no-repeat 100% 1px;
	}
#sidebar{
	float: left;
	width: 187px;
	}
#footer {
	margin: 0 auto;
	width: 782px;
	background: #A7A7A7 url(images/bgfoot.jpg) no-repeat 0 0;
	min-height: 70px;
	height: auto !important;
	height: 70px;
	}

#footer p {
	padding: 50px 230px 0 0;
	text-align: right;
	color: #FFF;
	}
#footcontainer{
	clear:both;
	width: 100%;
	min-height: 200px;
	height: auto !important;
	height: 200px;
	background: #A7A7A7 url(images/bgfooter.jpg) repeat-x 0 0;
	}
#clearer{
	clear:both;
	visibility:hidden;
	}

/* items
---------------------------------------------------------*/
.item{
	text-align: justify;
	margin: 0 30px 0 0;
	}
#welcome{
	padding-bottom: 6px;
	border-bottom: 1px solid #ccc;
	}
.item p{
	margin: 10px 0;
	line-height: 1.5em;
	font-size: 1.1em;
	}

/* general
---------------------------------------------------------*/
acronym, abbr{
	cursor: help;
	border-bottom: 1px dashed #999;
	}
a:link, a:visited {
	color: #39f;
	text-decoration: none;
	}
a:hover {
	color: #147;
	text-decoration: underline;
	}
fieldset{
	border: 0;
	}
ul{
	list-style: none;
	}
/*  main navigation
------------------------------------------  */
#nav{
	position: absolute;
	top: 150px;
	right: 0;
	height: 27px;
	background: transparent url(images/right-nav.gif) no-repeat 100% 0;
	}
#nav ul{
	right: 0;
	height: 21px;
	margin-right: 30px;
	background: transparent url(images/left-nav.gif) no-repeat 0 0;
	padding-left: 30px;
	}
#nav li{
	float: left;
	height: 21px;
	background: transparent url(images/bg-nav.gif) repeat-x 0 0;
	}
#nav a{
	float: left;
	height: 21px;
	padding: 0 15px;
	line-height: 21px;
	font-weight: bold;
	font-size: 1.1em;
	}
#nav a:link, #nav a:visited{
color: #4F4F4F;
	}
#nav a:hover{
color: #000;
text-decoration: none;
	}

/* sidebar 
------------------------------------------------------------------------*/
#sidebar{
	font-size: 1.1em;
	color: #fff;
	}
#sidebar a:link, #sidebar a:visited{
	color: #fff;
	}
#sidebar a:hover{
	color: #fff;
	text-decoration: underline;
	}
#sidebar p{
	padding: 15px;
	line-height: 1.4em;
	}
#sidebar ul{
	margin: 10px 15px 0 15px;
	padding-bottom: 15px;
	}
#sidebar h4 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	padding: 10px 15px 0 15px;
	color: #333;
	}
.box{
	padding-bottom: 15px;
	}
#a{
	background: #FF0000 url(images/red-gradient.jpg) repeat-x 0 100%;
	border-top: 1px solid #FF0000;
	}
#b{
	background: #FD4E22 url(images/orange-gradient.jpg) repeat-x 0 0;
	border-top: 1px solid #FD4E22;
	}
#c{
	background: #CAE7ED url(images/cyan-gradient.jpg) repeat-x 0 0;
	min-height: 301px;
	height: auto !important;
	height: 301px;
	border-top: 1px solid #66B8CD;
	}
#c li {
	border-bottom: 1px solid #B4E2FE;
	padding: 5px 0;
	line-height: 1.6em;
	}

/* Headings
---------------------------------------------------------- */
h1 {
	background: transparent url(images/logo.jpg) no-repeat;
	text-indent: -9999px;
	width: 145px;
	height: 168px;
	}
h1 a{
	display: block;
	width: 145px;
	height: 168px;
	text-decoration: none;
	}
h2 {
	font: lighter 1.5em/normal "Trebuchet MS", Arial, sans-serif;
	color: #777;
	}
h3 {
	font-weight: bold;
	color: #666;
	margin: 20px 0 0 0;
	font-size: 1.3em;
	}
#content h3{
	font: 1.3em "Trebuchet MS", Arial;
	color: #527D2A;
	}

#content h2{
	margin-top: 30px;
	margin-bottom: 6px;
	}
h1 a:link, h1 a:visited, h1 a:hover{
	color: #fff;
	text-decoration: none;
	}

/*	content
--------------------------------------------------------*/
#content{
	font-size: 1.2em;
	}
#content ul{
	padding: 15px 0;
}
#content li p{
	font-size: 1em;
	}
	
/*  search form
--------------------------------------------------------*/
	
/* hacks
----------------------------------------------------------------*/
#nav ul{
	float: right; /*hack for ie*/
	display: inline; /* end ie hack */
	}

C'è un modo per evitare questa sorta di "trasparenza" (nonostante il clear sia hidden) sotto la sidebar? a cosa può essere dovuto questo difetto?

[bionicoz]

A me quel layout sembra tutt'altro che perfezionistico, btw usa come clearer un div o un br, al posto dell'hr. Avrebbe inoltre senso attribuire una classe al clearer, piuttosto che un id.
Ciao.

[SaroHash]

Originariamente inviato da bionicoz
A me quel layout sembra tutt'altro che perfezionistico, btw usa come clearer un div o un br, al posto dell'hr. Avrebbe inoltre senso attribuire una classe al clearer, piuttosto che un id.
Ciao.

ti ringrazio il problema è stato risolto..per il resto come avevo accennato, ne so ben poco di css e html..scriverne uno da me non riuscirei x niente...ho solo preso template senza css e css a parte e ho adeguato il tutto al mio canvas in psd. Tutto ciò che trovi lì è fatta dall'autore del tutorial. Io ho provveduto solo alla grafica..e "perfezionismo" (per quanto le mie scarse capacità consentono) va bene per quanto riguarda il livello visivo. Per il resto ne so molto meno di un coder o di un grafico (diciamo solo che prima di questo non avevo mai utilizzato fogli di stile e non sapevo manco usare photoshop )

Grazie comunque per l'aiuto...e per la critica :-)

[fcaldera]

evita del tutto di usare elementi al solo scopo di fare clear dei float
se vuoi essere perfezionista dovresti provare a cercare dei metodi di clearing non strutturali come ad esempio l'easyclearing (fai una ricerca sul forum css/google).

[SaroHash]

Originariamente inviato da bionicoz
A me quel layout sembra tutt'altro che perfezionistico, btw usa come clearer un div o un br, al posto dell'hr. Avrebbe inoltre senso attribuire una classe al clearer, piuttosto che un id.
Ciao.

Mi sa che mi devo ricredere..il problema è rispuntato non appena ho aggiunto contenuti nel content centrale. Dinamicamente mi allunga verso sotto e quella specie di semitrasparenza sulla sidebar in fondo a destra è rispuntata -.-

Ho provato sia con br che con un div. Non cambia.

Ecco quì Link

EDIT: Ho notato un altra cosa. In questa situazione Con questa sorta di semitrasparenza...se però inizio ad aggiungere contenuti nella parte inferiore della sidebar (box azzurro) dove ci sono i link..non appena riesco a riempire fino alla semitrasparenza..questa scompare -.-

Io non ci capisco più niente -.-

[SaroHash]

Aggiornamento:

Per far scomparire la semitrasparenza sono costretto a:

1) Ridurre i contenuti nel content in modo da non farlo allungare verso il basso

2) All'aumento di contenuti nel content per far scomparire la semitrasparenza devo aumentare i contenuti anche nel box azzurro della sidebar.


Adesso mi sorge un dubbio.

Il mio intento era quello di rendere statica la parte dell'intestazione, sidebar e footer, e attraverso il menù di navigazione mostrare i contenuti nel div content.

A meno di metodi alternativi (non sono per niente pratico di html, css, php) pensavo di dover adottare gli iframe (so già che come metodologia di programmazione fa pena) sul content e caricare varie pagine all'interno. Ma per quanto ne so l'iframe ha dimensione fissa e non dinamica che quindi dovrei impostare io.

Non è che mi sto facendo tanti problemi per nulla, dato che poi impostata una dimensione corretta dell' iframe-content sta semitrasparenza non comparirà più?


PS ovviamente accetto consigli per impostare la cosa in maniera diversa ed evitare di utilizzare gli odiosi iframe