Posizionamento blocchi errato

**AndreaNobili** · 18-06-2009, 23:38

Ciao,
stò adattando un template ed ho un problema. Se andate quì lo vedete e capite facilmente:
http://www.siatec.net/andrea/archivio/moderna/

Praticamente c'è una prima linea di annunci (identificati dalla scritta Agriturismi) che è ben posizionata.

Poi le altre due file sottostanti non sò perchè ma vengono posizionate più in basso e precisamente alla fine delle scritte nel blocco sinistro (sidebar-a) e non va per niente bene così.
Se vedete nel blocco sinistro ci sono delle scritte PARAGRAFO, ecco più ne metto più scende...

Non mi spiego come mai....mi potete aiutare a risolvere? Vorrei che fosse indipendente dal blocco sinistro ma che dipendesse soltanto da se stesso....spero di essermi spiegato bene...comunque sostanzialmente non voglio che aumentando il numero delle scritte nel blocco sinistro vada più in basso...

HTML:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MODERNA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
  <div id="banner">
    <h1>Your <span style="color: #000;">Company</span> Name</h1>
  </div>
  
  <div id="sidebar-a">
    <h2>Menu</h2>
    <div class="menu">
      <ul>[*]Link 1[*]Link 2[*]Link 3[*]Link 4[*]Link 5[*]Link 6[*]Link 7[*]Link 8[*]Link 9[*]Link 10[*]Link 11[*]Link 12[*]Link 13[*]Link 14[*]Link 15[/list]
    </div>
    
    <div id="SearchBox1">
    	

 PARAGRAFO </p>
        

 PARAGRAFO </p>
        

 PARAGRAFO </p>
        

 PARAGRAFO </p>
        

 PARAGRAFO </p>
        

 PARAGRAFO </p>
        

 PARAGRAFO </p>
        

 PARAGRAFO </p>
        

 PARAGRAFO </p>
        

 PARAGRAFO </p>
        

 PARAGRAFO </p>
        

 PARAGRAFO </p>
        

 PARAGRAFO </p>
        

 PARAGRAFO </p>
    </div> 
               
            
    </div>
    
    
 </div>
 
 

  <div id="content">
    <h2>Welcome to <span style="font-weight:bold; color:#891E18;">Your Site</span> Homepage</h2>
    
    <blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. 	                Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus                lorem turpis sed sapien. 

      			Pellentesque egestas. 
    </blockquote>
    
    
    
    <div id="BOX1">			
    
        <div class="upperbox">
            <span class="tipo">Agriturismi:</span>
            <span class="vedi">Vedi tutti --></span>
        </div>
        
        <div class="col3">				
            [img]images/foto/agriturismolacastellina.jpg[/img]
        </div>							
        
        <div class="col3center">		
            [img]images/foto/agriturismolacastellina.jpg[/img]
        </div>							
        
        <div class="col3">				
            [img]images/foto/agriturismolacastellina.jpg[/img]
        </div>
        
    </div>				
    
    
    <div id="BOX2">			
    
        <div class="upperbox">
            <span class="tipo">Bed &#38; Breakfast:</span>
            <span class="vedi">Vedi tutti --></span>
        </div>
        
        <div class="col3">				
            [img]images/foto/agriturismolacastellina.jpg[/img]
        </div>							
        
        <div class="col3center">		
            [img]images/foto/agriturismolacastellina.jpg[/img]
        </div>							
        
        <div class="col3">				
            [img]images/foto/agriturismolacastellina.jpg[/img]
        </div>
        
    </div>				
    
    
    <div id="BOX3">			
    
        <div class="upperbox">
            <span class="tipo">Appartamenti:</span>
            <span class="vedi">Vedi tutti --></span>
        </div>
        
        <div class="col3">				
            [img]images/foto/agriturismolacastellina.jpg[/img]
        </div>							
        
        <div class="col3center">		
            [img]images/foto/agriturismolacastellina.jpg[/img]
        </div>							
        
        <div class="col3">				
            [img]images/foto/agriturismolacastellina.jpg[/img]
        </div>
        
    </div>				
    
    
  <div id="testo">
    


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. </p>
    

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    </div>
    
</div>
  <div id="footer"> Homepage | contact | &copy; 2007 Anyone | Design by  www.mitchinson.net | Licensed under a Creative Commons Attribution 3.0 License</div>
</div>
</body>
</html>

CSS:

codice:

body {
margin : 0;
padding : 0;
font : 73% "lucida sans", tahoma, "Trebuchet MS", arial, verdana, sans-serif;
color : #555;
background : #f7f7f7;
}

#container {
	width : 99.5%;
	margin-left : auto;
	margin-right : auto;
	padding : 0;
	line-height : 1.5em;
}

#banner {
height : 175px;
padding : 0;
background : #f7f7f7 url(images/header.jpg) no-repeat;
color : #333;
}
#banner h1 {margin : 0;
padding : 5px;
background : transparent;
color : #fff;
}

.menu ul li {
line-height : 1.8em;
margin : 0 10px 0 0;
padding : 0;
list-style-type : square;
color : #476042;
background : inherit;
}
.menu ul li a {
color : #f17c0b;
background : inherit;
}
.menu ul li a:hover {
color : #7ABA2E;
background : inherit;
}
#content {
	padding : 0;
	margin-left : 220px;
	border-left : 1px dashed #333;
	color : #555;
	background-color : #f7f7f7;
}

#content p {
margin : 20px;
}
#sidebar-a {
float : left;
width : 190px;
margin-left : 5px;

padding : 0 5px 0 5px;
color : #666;
background : #f7f7f7;
}

#footer {
clear : both;
padding : 5px;
margin : 0;
background : #476042;
color : #f7f7f7;
}

a {
text-decoration : none;
color : #f17c0b;
background : inherit;
}
a:hover {
text-decoration : underline;
color : #aaa;
background : inherit;
}
a img {
border : 0;
}
.border {
padding : 10px;
margin : 10px;
border : 1px solid #476042;
}
.imgleft {
float : left;
border : 1px solid #90b905;
margin : 5px 10px 10px 15px;
padding : 5px;
}
h1 {
margin : 20px;
padding : 5px;
font-size : 150%;
letter-spacing : 3px;
color : #fff;
background : #476042;
}
h2 {
padding-left : 20px;
font-size : 140%;
text-transform : uppercase;
letter-spacing : 10px;
color : #476042;
background : inherit;
}
h3 {
padding : 5px;
text-transform : uppercase;
font-size : 110%;
color : #fff;
background : #476042;
}
h4 {
padding : 5px;
text-transform : uppercase;
font-size : 110%;
color : #fff;
background : #f17c0b;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}
.clear {
clear : both;
width : 100%;
}
.col3,.col3center {
float: left;
width: 30.5%;
}
.col3center {
margin: 0 3%;
}

.img_annuncio{
	display:block; 
	margin-left:auto; 
	margin-right:auto;
}

.upperbox{
	margin : 20px;
	padding : 5px;
	font-size : 150%;
	letter-spacing : 3px;
	color : #fff;
	background : #476042;
}

.vedi{
	padding-left: 60%;
}

#BOX1{
	margin-bottom: 20px;
	
}

#BOX2{
	margin-bottom: 20px;
	clear: left;
}

#BOX3{
	margin-top: 230px;
	margin-bottom: 20px;
	clear: left;
}

#testo{
	margin-top: 200px;
}

Grazie
Andrea

**milky** · 19-06-2009, 09:27

Ad un'occhiata veloce.... la parra di sinistra flotta... prova a mrttere un clear dopo la chiusura di quel div..
ok... cavolata!!

ho guardato meglio
modificando così

#BOX1{ margin-bottom:30px; }
#BOX2{ margin-bottom: 30px; }
#BOX3{ margin-top: 20px; margin-bottom: 30px; }

è tornato tutto sù!!
ora è solo questione di mettere i giusti margini!!!

**mucu** · 19-06-2009, 09:48

io però vedo che Box2 Box3 hanno un clear: left
prova a toglierlo e dicci

**AndreaNobili** · 19-06-2009, 10:17

Originariamente inviato da milky
Ad un'occhiata veloce.... la parra di sinistra flotta... prova a mrttere un clear dopo la chiusura di quel div..
ok... cavolata!!

ho guardato meglio
modificando così

è tornato tutto sù!!
ora è solo questione di mettere i giusti margini!!!

Ok...dovrei aver risolto facendo così:

codice:

#BOX1{ margin-bottom:200px; }
#BOX2{ margin-bottom: 200px; }
#BOX3{ margin-top: 20px; margin-bottom: 30px; }

...però fammi capire bene una cosa...ad esempio per BOX1 ilmargin-bottom:200px significa che al di fuori del box 1 deve lasciare 200 px sotto prima di iniziare box2?
Ma da dove inizia a calcolarli i pixel? dalla parte superiore o inferiore di box1 o da che cos'altro?

Per favore dammi questo chiarimento che è una cosa su cui mi impicco spesso

Grazie
Andrea

**milky** · 19-06-2009, 10:54

mi ci infreno molte volte pure io...

allora... il margine è lo spazio "esterno" che và da un div all'altro, il padding è lo spazio "interno" che và dal contenuto al div...

quindi a rigor di logica in margin bottom parte dal bordo inferiore del div e và al bordo superiore dell'altro div... Mi sà che t'ho fatto + confusione!!!
Comunque un margin di 200px mi sembra tantino...

**AndreaNobili** · 19-06-2009, 11:00

Originariamente inviato da milky

mi ci infreno molte volte pure io...

allora... il margine è lo spazio "esterno" che và da un div all'altro, il padding è lo spazio "interno" che và dal contenuto al div...

quindi a rigor di logica in margin bottom parte dal bordo inferiore del div e và al bordo superiore dell'altro div... Mi sà che t'ho fatto + confusione!!!
Comunque un margin di 200px mi sembra tantino...

eh infatti questo è quello che sapevo anche io ma questo coso mi ha fatto venire i dubbi proprio per questa storia...

Guarda tu stesso che ora funziona con margin 200

http://www.siatec.net/andrea/archivio/moderna/

Non me losò spiegare neanche io...ed infatti è per questo che mi viene da pensare che in questo caso si potrebbe riferire ad altro...

Ciao
Andrea

**AndreaNobili** · 19-06-2009, 11:00

Originariamente inviato da mucu
io però vedo che Box2 Box3 hanno un clear: left
prova a toglierlo e dicci

Se tolgo quei clear succede un casino...

**milky** · 19-06-2009, 11:22

eh infatti questo è quello che sapevo anche io ma questo coso mi ha fatto venire i dubbi proprio per questa storia... Guarda tu stesso che ora funziona con margin 200 http://www.siatec.net/andrea/archivio/moderna/ Non me losò spiegare neanche io...ed infatti è per questo che mi viene da pensare che in questo caso si potrebbe riferire ad altro... Ciao Andrea

si... funziona.. margin 200px!!!

magari c'è qualcuno che ci spiega meglio?!?!?

ciao
Valentina

Discussione: Posizionamento blocchi errato

Strumenti discussione

Ricerca discussione

Visualizza

[URGENTE] Posizionamento blocchi errato

Permessi di invio