contenitori laterali

**piccolanomade** · 01-04-2008, 17:15

Ciao a tutti.
Premetto che non ho mai lavorato con i CSS... a parte qualcosina di base.
Parto dal sito: www.incasviaggi.it (non è per fare pubblicità è solo x cercare di spiegarmi)
come si vede il contenuto essenziale è centrato alla pagina lasciando delle righe sfumate ai lati... ora vorrei rendere utili quegli spazi inserendo dei banner.
ma a parte togliendo lo sfondo a righe come posso fare??
i banner in totale sono 4, 2 per lato le dimensioni sono presso chè uguali di tutti e 4.

il fatto di inserirlo nel css è xè così si ripete per tutte le pagine senza mettere mano a tutto.

Non ho la minima idea da che parte partire.

Se potete aiutarmi ve ne sarò infinitamente grata.

**piccolanomade** · 01-04-2008, 17:30

il codice del mio .css attualmente è questo:

codice:

body {
	margin: 0;
	padding: 0 10%;
	background:#fff url("../Immagini/sfondo.png") center bottom repeat fixed;
	color: #000;
	/*font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;*/
	font-style: normal;
	font-size: small;
	font-family: Comic Sans MS;
	text-align: left;
}

.container
{
	width: 100%;
	margin-left:auto;
	margin-right:auto;
}

.corpo,.noBackImage {
	height: 400px;
	border-top: 1px solid #6699FF;
	border-left: 1px solid #6699FF;
	border-right: 1px solid #6699FF;
	border-bottom: 0px solid #6699FF;
	background: url("../Immagini/paper.gif") left top repeat;*/
}


#colonna-1 {
	float:left;
	width: 200px;
	margin:0;
    margin-left: 10px;
	position: relative; 
	background: transparent;
	color: #000;
	z-index: 10;
}

.colonna-2 p {
	margin-left:auto;
	margin-right:auto;
	text-align: right;    
}

#pie-di-pagina 
{
	margin:0;
	padding:0;
	height:30px;
	background: #6699FF;
	border-top: 1px solid #6699FF;
	border-left: 1px solid #6699FF;
	border-right: 1px solid #6699FF;
	border-bottom: 1px solid #6699FF;
	
}

#pie-di-pagina p
{
	margin:0;
	padding:0;
	float:left;
	margin-left:10px;
	text-align: center;
}



#colonna-1, .colonna-2,#pie-di-pagina {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

    
#pscroller1
{
	width: 190px;
	height: 100px;
	top: 0px;
	left: 0px;
	border: 1px solid black;
	padding: 5px;
	background-color: lightyellow;
}

.someclass{ }

#intestazione {
	margin-top:5px;
	margin-left: auto;
	margin-right: auto;
	padding:0;
	color: #000;
	width:100%;
	border:0;
}

#intestazione .arrotondato,#intestazione .arrotondato .aux1 /*Angolo Superiore Sinistro*/
{
	border:0;
	margin:0;
	padding:0;
	background: url("../Immagini/sfondo.intestazione.left.2.gif") left top no-repeat;	
}

#intestazione .arrotondato .aux1 /*Angolo Superiore Destro*/
{
	background: url("../Immagini/sfondo.intestazione.right.2.gif") right top no-repeat;	
}

#intestazione .arrotondato .aux2 /*Centrale ripetuto*/
{	
	margin-left: 30px;
	margin-right: 30px;
	padding-top: 0px;
	/*padding-left: 13em;*/
	background: url("../Immagini/sfondo.intestazione.center.2.gif") left top repeat-x;	
}

.writingZone, .writingZoneIndex
{
	border: 1px dotted transparent;
	width: 550px;
	height: 392px;
	margin-left: 240px;
	margin-right: 30px;
	margin-top: 15px;
	background: url("../Immagini/MachuPicchuSfondo550.png") left top no-repeat;
}

.writingZoneIndex
{
	background: url("../Immagini/MachuPicchuIndex550.png") left top no-repeat;
}

.scrollingContent
{
	border:1px red;
	overflow:auto;
	height: 360px;
	margin-top: 10px;
	margin-left: 15px;
	margin-right: 15px;
	
	color: #333399;
	font-size: medium;
}
.scrollingContent p, .scrollingContent span, .scrollingContent ul,.scrollingContent table
{
	
}

/* TABLES */

.commonTable
{
	margin-top: 20px;
	margin-left: 15px;
	
}
	
.commonTable td,.tariffe td
{
	text-align:left;
	border: 1px solid Navy;
}

.commonTable th
{
	font-size: 16px;
	font-weight: bold;
	border: 1px solid Navy;
}

.tariffe
{
	margin-left: 5%;
}

.tariffe td + td
{
	text-align:right;
}

.scrollingContent span
{
	font-size: 18px;
	font-weight: bold;
}
/*END TABLES*/

.tableAdmin
{
	border-collapse:collapse;
}

.tableAdmin td
{
	border: 1px solid blue;
}

.tableAdmin th
{
	border: 1px solid red;
	background-color: orange;
}


span.cID {
	display:block;
	float:left;
	padding:.2em .5em;
	border: 2px solid #900;
	background:#FFF;
	color:#000;
	margin: 0 0.5em 0 0;
	font:bold 1.2em "Courier New", Courier, monospace;
}

.homeImage
{
    margin-left: 14px;
    margin-top: 10px;    
}

.BSotto {
	border-bottom: 1px solid Black;
}

.testo {
	color: #333399;
	font-size: medium;
}

.styleNews {
	color: black;
	font-size: x-small;
	text-align:left;
}

.InObbli {
	background: #FFFFD7;
}

**Tux7000** · 02-04-2008, 10:22

Dato che lavori con PHP forse ti viene più comodo fare una inclusione lato server.
Ad esempio: crei la pagina destra.php e sinistra.php, ci metti i codici dei banner e fai una inclusione:

Codice PHP:


<?php

include('destra.php');

?>

Codice PHP:


<?php

include('sinistra.php');

?>

Ciao.

**piccolanomade** · 03-04-2008, 13:29

indipendetemente dalle include... io avrei la necessità di capire come fare per inserire dei div al posto delle righe sfumate...
esempio di codice:

css

codice:

body {
	margin: 0;
	padding: 0 10%;
	/*background:#fff url("../Immagini/sfondo.png") center bottom repeat fixed;*/
	color: #000;
	/*font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;*/
	font-style: normal;
	font-size: small;
	font-family: Comic Sans MS;
	text-align: left;
}

.banner {
	/*margin-left: 0px;
	position: absolute;
	top: 163;*/	
	width: 120px;
	height: 300px;	
	border: 1px solid #0000;
}
			
.container
{
	width: 100%;
	margin-left:auto;
	margin-right:auto;
}

.corpo,.noBackImage {
	height: 400px;
	border-top: 1px solid #6699FF;
	border-left: 1px solid #6699FF;
	border-right: 1px solid #6699FF;
	border-bottom: 0px solid #6699FF;
	background: url("../Immagini/paper.gif") left top repeat;*/
}

una pagina di esempio è:

codice:

<body>
	<div class="banner">
				<script type="text/javascript">
				var uri = ecc..... ecc........
				</script>
	</div>
    <div class="Container">
        <?php require($_CONFIG['title']);?>
        <div class="corpo"> 
            <?php require($_CONFIG['colonnaSX']);?>
            <div class="colonna-2">
            	
            	<div class="writingZone">
                    <div class="scrollingContent">
                    	<div align="center" valign="center">
                              CONTENUTO
                        
		</div>
                    </div>
                </div>
            	
              
            </div>
        </div>
        <?php require($_CONFIG['footer']);?>
    </div>
   <div class="banner">
				<script type="text/javascript">
				var uri = ecc.......ecc.......
				</script>
	</div>
</body>

così mi viene 1° div banner, sotto il div Container e sotto ancora il 2° div banner. io invece vorrei metterli uno di seguito all'altro.
come faccio?

**Tux7000** · 03-04-2008, 13:52

Per metterli uno di fianco all'altro devi usare i float

Esempio:

codice:

#bannersx
{
width: 100px;
height: 200px;
float: left;
background:#999;
}

#bannerdx
{
width: 100px;
height: 200px;
float: right;
background:#999;
}

#corpocentrale
{
width: 300px;
height: 200px;
background:#fc0;
float: left;
}

#clearfloat
{
clear: both;
}

Applicandolo al tuo codice html

codice:

<body>

<div id="bannersx">

Ciao</p></div>

<div id="corpocentrale">

Salve</p></div>

<div id="bannerdx">

Arrivederci</p></div>

<div id="clearfloat">

Bye</p></div>

</body>

Ciao.

**piccolanomade** · 03-04-2008, 14:56

... ehhhhhhhheemmmmmmmm...

qualcosina ho risolto, ma non del tutto.
Cioè con i float il 1° banner sta dove deve stare, la parte centrale inizia subito a lato, ma l'itestazione e il footer si "allungano" fino a fine pagina e il 2° banner finisce sotto, come in figura:

nn so cosa più cosa modificare... ho fatto vari tentativi... ma nulla...

il conteiner contiene tutto intestazione, corpo e footer, infatti avevo pensato di metterlo lì il float ma così il risultato è come prima. 1° banner, sotto parte centrale, sotto 2° banner.

l'intestazione ha seguente codice:

codice:

<div id="intestazione">
    <div class="arrotondato">
	    <div class="aux1">
            <div class="aux2">
            	<table border=0 width="90%">
            		<tr>
            			<td rowspan="2" align="center"> 
            				[img]Immagini/logo_incas_new.gif[/img] 
             		 	</td>
		              <td rowspan="2" align="left"> 
		              	<?php echo $label['affiliato']; ?> BRAVO-NET
		              	<?php echo "
".$label['rivenditore']."di: 
"; ?> - ZEROMOBILE 
		              		
- Guida Express
              		</td>
              		<td rowspan="2" align="center"> 
              			<div class="styleNews">
	            				<script type="text/javascript">
									    	new pausescroller(pausecontent, "pscroller1", "someclass", 3000)
									    </script>
									  </div>
             		 	</td>
             		 	<td align="right">
             		 		[img]Immagini/lingue.inglese.gif[/img] 
		                [img]Immagini/lingue.italiano.gif[/img] 
		                
		              </td>
		            </tr>
		            <tr>
									<td align="right">
	
									</td>
								</tr>
		          </table>
            </div>
	    </div>
	</div>
</div>

e il footer quest'altro:

codice:

<div id="pie-di-pagina">
    <p style="float:left">
        <a href="serviziAutonoleggio.php?lang=<?php echo $lang; ?>">
            [img]Immagini/icon.car.2.gif[/img]" onmouseover="showFooterLabel('<?php echo $label['autonoleggio']; ?>')" onmouseout="showFooterLabel('')"/>
        </a>
    </p>
	<p style="float:left">
        <a href="cercaOfferta.php?lang=<?php echo $lang; ?>">
            [img]Immagini/icon.offerte.2.gif[/img]" onmouseover="showFooterLabel('<?php echo $label['offerte']; ?>')" onmouseout="showFooterLabel('')"/>
        </a>
    </p>
	<p style="float:left">
        <a href="serviziTickets.php?lang=<?php echo $lang; ?>">
            [img]Immagini/icon.world.1.gif[/img]" onmouseover="showFooterLabel('<?php echo $label['biglietteria']; ?>')" onmouseout="showFooterLabel('')"/>
        </a>
    </p>
    <p style="float:left;margin-top:5px" id="footerLabel">
    </p>
    <p style="font-size:x-small;float:right;margin-top:-5px;margin-right:5px;margin-bottom:0px;text-align:right">    
        <?php //echo $label['visitors']; ?>
          
  
	 <script  type="text/javascript" language="javascript"> 	  
		 var s_sid = 36759;var st_dominio = 4; 
		 var cimg = 2006;var cwi =112;var che =35; 
	 </script> 
	 <script  type="text/javascript" language="javascript" src="http://s10.histats.com/js9.js"></script> 
	 <noscript>
		<a href="http://www.histats.com/it/" target="_blank"> 
		</a> 
	 </noscript> 
	  
	  

    </p> 
    <p style="font-size:11px;float:right;margin-right:50px;text-align:left" id="dati"> Incas Viaggi di Cagliari Stefano 
 P.Iva 05400140967 / Cod.Fisc CGLSFN78M17F205N
    </p>   
</div>

il css. a parte la modica dei banner sx e dx è come il primo che ho postato (2° post)
Grazie 1000issime

**piccolanomade** · 03-04-2008, 18:40

che fatica!!!!
però modifica qui modifica là... ce l'ho fatta.

In definitiva ho messo i float ai banner, al contenitore e al corpo (mi lascia perplessa il fatto che l'intestazione e il footer (all'interno, come il corpo, del contenitore) non vogliano il float) BOHHHHH

oltre a quello la dimensione del footer e dell'intestazione civuole fissa in px.... lapercentuale non gli piace.... e nn ho ancora capito xè!

Cm grazie molte a Tux7000, mi hai aiutata moltissimo!!!
Thank's

Discussione: contenitori laterali

Strumenti discussione

Ricerca discussione

Visualizza

contenitori laterali

il .css

Permessi di invio