[CSS] Problema con il posizionamento di alcuni blocchi, per favore aiutatemi :-(

Rintrah84 · 18-06-2009, 23:40

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>
        <li><a href="http://www.free-css.com/">Link 1</a></li>
        <li><a href="http://www.free-css.com/">Link 2</a></li>
        <li><a href="http://www.free-css.com/">Link 3</a></li>
        <li><a href="http://www.free-css.com/">Link 4</a></li>
        <li><a href="http://www.free-css.com/">Link 5</a></li>
        <li><a href="http://www.free-css.com/">Link 6</a></li>
        <li><a href="http://www.free-css.com/">Link 7</a></li>
        <li><a href="http://www.free-css.com/">Link 8</a></li>
        <li><a href="http://www.free-css.com/">Link 9</a></li>
        <li><a href="http://www.free-css.com/">Link 10</a></li>
        <li><a href="http://www.free-css.com/">Link 11</a></li>
        <li><a href="http://www.free-css.com/">Link 12</a></li>
        <li><a href="http://www.free-css.com/">Link 13</a></li>
        <li><a href="http://www.free-css.com/">Link 14</a></li>
        <li><a href="http://www.free-css.com/">Link 15</a></li>
      </ul>
    </div>
    
    <div id="SearchBox1">
    	<p> PARAGRAFO </p>
        <p> PARAGRAFO </p>
        <p> PARAGRAFO </p>
        <p> PARAGRAFO </p>
        <p> PARAGRAFO </p>
        <p> PARAGRAFO </p>
        <p> PARAGRAFO </p>
        <p> PARAGRAFO </p>
        <p> PARAGRAFO </p>
        <p> PARAGRAFO </p>
        <p> PARAGRAFO </p>
        <p> PARAGRAFO </p>
        <p> PARAGRAFO </p>
        <p> PARAGRAFO </p>
    </div> <!-- FINE searchBox1 -->
               
            
    </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. <br />
      			Pellentesque egestas. 
    </blockquote>
    
    
    
    <div id="BOX1">			<!-- INIZIO BOX1  -->
    
        <div class="upperbox">
            <span class="tipo">Agriturismi:</span>
            <span class="vedi">Vedi tutti --></span>
        </div>
        
        <div class="col3">				<!-- INIZIO PRIMA COLONNA -->
            <img class = "img_annuncio" src="images/foto/agriturismolacastellina.jpg">
        </div>							<!-- FINE PRIMA COLONNA -->
        
        <div class="col3center">		<!-- INIZIO SECONDA COLONNA -->
            <img class = "img_annuncio" src="images/foto/agriturismolacastellina.jpg">
        </div>							<!-- FINE SECONDA COLONNA -->
        
        <div class="col3">				<!-- INIZIO TERZA COLONNA -->
            <img class = "img_annuncio" src="images/foto/agriturismolacastellina.jpg">
        </div>
        
    </div>				<!-- FINE BOX1  -->
    
    
    <div id="BOX2">			<!-- INIZIO BOX  -->
    
        <div class="upperbox">
            <span class="tipo">Bed & Breakfast:</span>
            <span class="vedi">Vedi tutti --></span>
        </div>
        
        <div class="col3">				<!-- INIZIO PRIMA COLONNA -->
            <img class = "img_annuncio" src="images/foto/agriturismolacastellina.jpg">
        </div>							<!-- FINE PRIMA COLONNA -->
        
        <div class="col3center">		<!-- INIZIO SECONDA COLONNA -->
            <img class = "img_annuncio" src="images/foto/agriturismolacastellina.jpg">
        </div>							<!-- FINE SECONDA COLONNA -->
        
        <div class="col3">				<!-- INIZIO TERZA COLONNA -->
            <img class = "img_annuncio" src="images/foto/agriturismolacastellina.jpg">
        </div>
        
    </div>				<!-- FINE BOX  -->
    
    
    <div id="BOX3">			<!-- INIZIO BOX  -->
    
        <div class="upperbox">
            <span class="tipo">Appartamenti:</span>
            <span class="vedi">Vedi tutti --></span>
        </div>
        
        <div class="col3">				<!-- INIZIO PRIMA COLONNA -->
            <img class = "img_annuncio" src="images/foto/agriturismolacastellina.jpg">
        </div>							<!-- FINE PRIMA COLONNA -->
        
        <div class="col3center">		<!-- INIZIO SECONDA COLONNA -->
            <img class = "img_annuncio" src="images/foto/agriturismolacastellina.jpg">
        </div>							<!-- FINE SECONDA COLONNA -->
        
        <div class="col3">				<!-- INIZIO TERZA COLONNA -->
            <img class = "img_annuncio" src="images/foto/agriturismolacastellina.jpg">
        </div>
        
    </div>				<!-- FINE BOX  -->
    
    
  <div id="testo">
    <p><br  />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>
    <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"> <a href="http://www.free-css.com/">Homepage</a> | <a href="http://www.free-css.com/">contact</a> | &copy; 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a> | Licensed under a <a rel="license" target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a></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

Strumenti
Mostra una versione stampabile Invia questa pagina per email