Problema con DIV!!!

**dwb** · 31-10-2007, 13:53

Ho un layout e questo problema:

Come potete vedere, il DIV che contiene la scritta Valid CSS ecc si accavalla se quello soprastante scende, io vorrei fare in modo che non succeda questo e che rimanga al di sotto di tutto, senza accavallamenti, come posso fare?

Questa è la parte di css che controlla il DIV Footer:

codice:

#footer {
	width : 800px;
	clear : none;
	color : #333;
	border : 1px solid #4e7fb6;
	margin : 0 0 10px 0;
	text-align : center;
	display : inline;
	float : left;
	padding-top : 5px;
	padding-bottom : 5px;
	position: static;
	left: 102px;
	top: 909px;

**Myaku** · 31-10-2007, 14:30

dovresti postare il codice completo.
Comunque, ad una prima occhiata, se il tuo layout è un semplice due colonne, dovresti dare il float sui box affiancati, mentre al footer gli dai il clear

Cyà

**dwb** · 01-11-2007, 13:55

Il codice completo del css intendi?

**H5N1_Aviaria** · 01-11-2007, 15:52

CSS + (X)HTML.
come si fa altrimenti a sapere #cosaSono a cosa corrisponde?!?

**dwb** · 02-11-2007, 16:52

Ecco il css:

codice:

* { 
padding : 0;
margin : 0;
} 
body { 
font-family : Arial, Helvetica, sans-serif;
font-size : 13px;
} 
img { 
padding : 5px;
border : 1px solid #caff7a;
} 
img.floatTL { 
float : left;
margin-right : 10px;
margin-bottom : 0;
margin-top : 10px;
margin-left : 10px;
} 
img.floatTR { 
float : right;
margin-left : 7px;
margin-bottom : 0;
margin-top : -2px;
margin-right : 10px;
} 
p { 
text-align : justify;
padding : 5px;
color : #666;
font-size : 1.1em;
} 
#wrapper { 
margin : 0 auto;
width : 800px;
} 
#header { 
color : #333;
width : 800px;
height : 142px;
float : left;
margin : 10px 0 5px 0;
background-image : url(images/headerbg.png);
background-repeat : no-repeat;
} 
.logo h1#lineone { 
font-size : 2em;
font-weight : lighter;
font-family : helvetica, arial, sans-serif;
padding-top : 40px;
padding-left : 155px;
color : #99ff32;
border : none;
top : 0;
left : 14px;
letter-spacing : -1px;
} 
.logo h1#lineone span { 
color : #0066ff;
} 
.logo h2#linetwo { 
padding-left : 155px;
font-size : 0.9em;
font-family : helvetica, arial, sans-serif;
text-transform : none;
top : 25px;
left : 14px;
color : #0066ff;
} 
.logo h2#linetwo a { 
color : #0066ff;
text-decoration : none;
} 
#navigation { 
float : left;
width : 800px;
height : 36px;
color : #333;
margin : 0 0 5px 0;
background-image : url(images/navbarbg.jpg);
background-repeat : no-repeat;
} 
#navigation { 
background-color : #1f00ca;
} 
#navigation ul { 
font-family : Arial, Helvetica, sans-serif;
font-weight : bold;
color : #0066ff;
text-align : center;
margin : 0;
padding-bottom : 5px;
padding-top : 10px;
padding-left : 0;
} 
#navigation ul li { 
display : inline;
} 
#navigation ul li a { 
padding : 5px 10px 5px 10px;
color : #004ab2;
text-decoration : none;
border-left : 1px solid #004ab2;
border-right : 1px solid #004ab2;
margin-right : -5px;
} 
#navigation ul li a:hover { 
color : #fffffe;
} 
#leftcolumn {
	color : #333;
	border : 1px solid #4e7fb6;
	margin : 0 5px 5px 0;
	height : auto;
	width : 215px;
	float : left;
} 
#leftcolumn h3 { 
padding-left : 5px;
padding-top : 3px;
padding-bottom : 8px;
font-size : 1.4em;
font-weight : lighter;
color : #4e7fb7;
letter-spacing : -1px;
} 
#leftcolumn ul { 
padding : 3px 0 8px 0;
} 
#leftcolumn li { 
line-height : 18px;
background : #fff;
list-style : square;
padding-left : 0;
margin-left : 21px;
color : #4e7fb6;
} 
#leftcolumn a { 
text-decoration : none;
color : #4e7fb8;
} 
.news { 
margin-left : 5px;
width : 205px;
padding-bottom : 10px;
} 
.news p { 
margin-top : 0;
padding-left : 5px;
border : 1px solid #6172f4;
background-color : #bfd5f9;
} 
.news b { 
color : #577c81;
} 
.news em { 
line-height : 10px;
color : #0f2bff;
} 
.news h2 { 
font-family : "arial", helvetica, sans-serif;
font-size : 1.2em;
margin-top : 5px;
margin-left : 5px;
margin-bottom : 10px;
color : #679499;
} 
#rightcolumn {
	float : right;
	border-bottom : 1px solid #4e7fb6;
	height : auto;
	width : auto;
	display : inline;
	background-image : url(images/rcbg.png);
	background-repeat : repeat-y;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 5px;
	margin-left: 0;
} 
#rightcolumn h2 { 
background-image : url(images/kantun.png);
background-repeat : no-repeat;
background-position : 0 1px;
padding-left : 10px;
padding-top : 5px;
font-size : 1.3em;
color : #4e7fb7;
} 
#rightcolumn h4 { 
padding-left : 5px;
padding-top : 6px;
font-size : 1.3em;
color : #4e7fb7;
border-bottom : 2px solid #4e7fb7;
margin-left : 10px;
margin-right : 10px;
} 
#box { 
margin-top : 5px;
margin-bottom : 10px;
} 
#box p { 
font-size : 1em;
} 
#box a { 
text-align : right;
float : right;
color : #99ff33;
font-weight : bolder;
} 
.content_right { 
margin : 0 auto;
display : inline;
float : right;
width : 275px;
text-align : justify;
margin-right : 5px;
padding-left : 5px;
padding-bottom : 5px;
padding-right : 5px;
padding-top : 2px;
line-height : 1.5em;
} 
.content_left { 
margin : 0 auto;
padding : 5px;
display : inline;
float : left;
width : 275px;
text-align : justify;
line-height : 1.5em;
} 
.content_left h3 { 
padding-left : 5px;
font-size : 1.1em;
margin-bottom : 5px;
font-family : Arial, Helvetica, sans-serif;
color : #515b7b;
} 
.content_right h3 { 
font-size : 1.1em;
margin-bottom : 2px;
margin-top : 5px;
font-family : Arial, Helvetica, sans-serif;
color : #515b7b;
} 
#footer {
	width : 800px;
	clear : both;
	color : #333;
	border : 1px solid #4e7fb6;
	margin : 0 0 10px 0;
	text-align : center;
	display : inline;
	float : left;
	padding-top : 5px;
	padding-bottom : 5px;
	position: inherit;
	left: 102px;
	top: 909px;
} 
#footer p { 
font-size : 0.8em;
text-align : center;
} 
#footer a { 
color : #173aff;
text-decoration : none;
}

Ecco l'(X)HTML:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>IrpiniaViva.it</title>
<link rel="stylesheet" type="text/css" href="style.css" /></head>

<body>

   
<div id="wrapper">
   
         
         <div id="header">
		<div class="logo">
		<h1 id="lineone">TITOLO(LOGO)</h1> 
		</div>	   
		 </div>
		 
		 
		 
                       <div id="navigation">
                         <ul>[*]Canale 1
                          [*]Canale 2[*]Canale 3[*]Canale 4[*]Canale 5[/list]
  </div>
		 
		 
		 
		 <div id="leftcolumn">
		 
		       <h3>NOTIZIE DI RILIEVO</h3>
		<ul>	
		[*]Notizia 1
		[*]Notizia 2
		[*]Notizia 3
		[*]Notizia 4
		[*]Notizia 5
						
		[/list]
		       <h3>SOMMARIO</h3>
                <div class="news">
    

Brano interno 1</p>
    

Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova</p>
    


    

Brano interno 2</p>
    

Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova</p>
    

    

Brano interno 3</p>
    

Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova</p>
           </div>
		 
		        <div class="news">
                  

Brano interno 1</p>
		          

Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova</p>
		          

                  

Brano interno 2</p>
		          

Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova Prova</p>
		          

               
           </div>
		 </div>
		 
		 
		 
		 <div id="rightcolumn">
		       
	          <h2>L'editoriale</h2>	
                  

Questo giornale vuole essere uno strumento di libera espressione. Non riceve nessun tipo di finanziamento ed &egrave; completamente libero da ogni forma di strumentalizzazione. Tutti color che vi scrivono e vi vorranno scrivere lo faranno nella totale libert&agrave; di opinione e nel rispetto delle leggi che regolano l'editoria e la libert&agrave; di stampa.</p>	 
	          <h4>Lorem Ipsum</h4>
                  <div id="box">

                  <div class="content_left">
                    <h3>Articolo 1</h3>


                    [img]images/img1.jpg[/img]
                    

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis.</p>
                   continua

                 </div>

                 <div class="content_right">
                  <h3>Articolo 2</h3>

                   [img]images/img1.jpg[/img]
                   

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis.</p>
                   continua
                 </div>
                 </div>
                 <div id="space"></div>	
	          <h4>La retta ragione</h4>	


Aristotele sosteneva che ci fosse una propensione all'aggregazione fra gli animali, che egli definiva politici, come le api, le formiche, ecc. I quali pur essendo privi della ragione posseduta solo dall'uomo, tendono a far convergere tutte le proprie risorse verso un fine comune. L'uomo non rientra in tale contesto, sebbene dotato di ragione, la quale esprime grazie al suo linguaggio, essa diviene non un arma, bens&igrave; il suo opposto. L'uomo ignaro di tanto potere, continua ad essere usurato dalle passioni; La paura della sopraffazione e la brama di potere continuamente lo disarmano. 

                  </p>
                  

Dov'&egrave; dunque il progresso?

                  Dov'&egrave; quindi l'evoluzione?</p>
           <div></div>
                  
                  

</p>
                  

</p>
                  

</p>
                  

</p>
                  

</p>
                  



                    

                  </p>
  </div>
		 
		 
		 
<div id="footer">
	

Valid CSS :: Valid XHTML  Copyright &copy; 2007 by ***.it</p> 
</div>

		 
</div>
   


     
</p>
   


      </p>
</body>
</html>

**H5N1_Aviaria** · 02-11-2007, 22:02

codice:

#rightcolumn {
	border-bottom : 1px solid #4e7fb6;
	height : auto;
	width : auto;
	display : block;
	background-image : url(images/rcbg.png);
	background-repeat : repeat-y;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 5px;
	padding-left: 215px;
}

Gli elementi block con attributo float e gli elementi inline non si adattano all'altezza del contenuto.
Inoltre è sconsigliabile usare

</p> per andare a capo.
Usa, invece,

**dwb** · 03-11-2007, 11:15

Grazie!

Il footer invece come devo impostarlo?

**H5N1_Aviaria** · 03-11-2007, 11:26

A me sembra andare bene così.

**rub...un mito** · 04-11-2007, 00:55

aviaria sono quello ke hanno bannato masterdany...il mi osito valid xhmtl e css

aiutami x quel layout...

**fcaldera** · 04-11-2007, 14:37

Originariamente inviato da rub...un mito
aviaria sono quello ke hanno bannato masterdany...il mi osito valid xhmtl e css

aiutami x quel layout...

Rebelia ti ha avvisato che dopo il secondo ban non si può tornare

O ti adatti alle regole di questo forum O non vi partecipi.

La tua età NON E' una scusante se non conosci il regolamento del forum. E' in rilievo ed è la discussione presente in cima a tutti i forum. Penso che a 13 anni tu sia perfettamente in grado di leggerlo e capirlo.

Mi ripeto per l'ultima volta dopodichè, per non fare torto alla tua intelligenza (visto che sei stato avvisato almeno 5 volte abusando ampiamente della pazienza del sottoscritto e degli admin e credo che chiunque avrebbe capito), non ti darò più alcun avviso per cercare di salvarti ma mi limiterò a chiedere la tua esclusione definitiva.

Discussione: Problema con DIV!!!

Strumenti discussione

Ricerca discussione

Visualizza

Problema con DIV!!!

Permessi di invio