problemi con l'impaginazione

Brushtool

Nuovo Utente
6 Ago 2009
3
0
0
Ciao ragazzi, ho un problema:
ho speso giorni per creare grafica e impaginazione di un sito per tutorial grafici, e dato che mi servono le colonne (sinistra e destra) dinamiche, mi sono rifugiato nel php.

La necessità è che comunque i tutorial sono molto lunghi, se traduco la pagina in html allora la colonna centrale si allunga per tutta la dimensione del testo, che esso siano 1000 righe o 2000 si adatta sempre in funzione di quanto scritto in essa.

Se includo la colonna centrale nello scheletro (non conosco il termine tecnico ma spero di essermi spiegato) attraverso il php, cioè in un file metto l'impaginazione e l'incolonnamento con tutti gli attributi ecc.. e in un altro file metto solamente il contenuto della colonna centrale, poi con il php dovrei unire le due cose.

Quando faccio questa "inclusione" il segmento del background non si ripete. cioè la colonna centrale raggiunge una dimensione e si ferma, il testo quindi viene "sputato" fuori come se appartenesse ad un layer a se stante. Metto qui l'esempio che è più esaustivo di mille mie parole.

Questo è in html:
http://brushtool.altervista.org/indextutto.html

Mentre questo è in php

http://brushtool.altervista.org/manipulation.php

Come si può vedere in basso non rientra più il testo nel bg

PS: sono totalmente autodidatta, ho imparato queste quattro cavolate e le metto senza cognizione di causa. Purtroppo per me non ho amici che possano risolvermi il problema. Però in questo modo il sito è bloccato

Il css è corretto, altrimenti non si vedrebbe bene neanche in html. scrivo qui l'impaginazione, spero possiate aiutarmi, dopo giorni e giorni di grafica e di elaborazione buttare tutto il lavoro sarebbe avvilente

base

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Brushtool</title>
<META NAME="Keyword" CONTENT="Dario, Albagor, Template, templates free, cd rom, banner, grafica gratis, grafica web, web design, Draugdin, brushtool, photoshop, flash, brush tool, artisti, free, gratis, tutorial,  tutorial grafici, webmail, software, asp, java, penna grafica, effetti, testi, photo manipulation, foto ritocchi, fotoritocchi, fashion, foto, biglietti di auguri, web, grafica per web, grafica per siti, disegni,">
<META NAME="Author" CONTENT="Dario">
<link rel="stylesheet" type="text/css" href="css/all.css"  media="screen"/>
<link rel="shortcut icon" href="http://brushtool.altervista.org/favicon.ico" type="image/x-icon" />
	<!--[if lt IE 7]><style media="screen" type="text/css">@import "css/ie6.css";</style><![endif]-->

	
<!-- Fade Script -->
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
//Inizio dell'effetto opaco sui banner

function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
if (which2.style.MozOpacity)
which2.style.MozOpacity=0.3
else if (which2.filters)
which2.filters.alpha.opacity=30
}

function highlightit(cur2){
if (cur2.style.MozOpacity<1)
cur2.style.MozOpacity=parseFloat(cur2.style.MozOpacity)+0.1
else if (cur2.filters&&cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}
//Fine effetto opaco del mouse
</script>


</head>

<body>
<div class="page">
	
	
	<div class="header-wrapper">
	
    <div id="header"> 
      <h1><a href="http://www.brushtool.altervista.org/" title="Brushtool" class="logo">Brushtool</a></h1>
      <div class="header-box"> 
        <ul class="top-nav">
          <li> <span>H</span> <a href="http://brushtool.altervista.org/">Home</a> 
          </li>
          <li> <span>P</span> <a href="http://www.brushtool.altervista.org/products.php">Products</a> 
          </li>
          <li> <span>D</span> <a href="http://www.brushtool.altervista.org/download.php">Download 
            &amp; Utility</a> </li>
        </ul>
        <div class="agb-reg"> 
          <?php include ("$titolo"); ?>
        </div>  <!--Fine agb-reg-->
      </div>   <!--Fine header-box-->
    </div>   <!--Fine header-->
	</div><!--Fine header-wrapper-->
  
  <div class="container-wrapper"> 
    <div class="col-1"> 
      <div class="modul-box-head"></div>
      <div class="modul-box"> 
        <div class="content-left"> 
          <?php include ("$col1prima"); ?>
        </div>
        <div class="modul-box-middle"></div>
		<!--inizio seconda finestra-->
        <!-- Per inserire una nuova finestra copiare nel col1-seconda ed inserirla...-->
        <div class="content-left"> 
		  <?php include ("$col1seconda"); ?>
        </div><!--fine seconda finestra-->
		<!--inizio terza finestra-->
        <div class="modul-box-middle"></div>
        <div class="content-left"> 
		  <?php include ("$col1terza"); ?>
        </div>    <!--content-left fine-->
        <!--...inserire qui i comandi copiati sopra per inserire una nuova finestra-->
      </div>    <!--modul-box fine-->
      <div class="modul-box-foot"></div>
    </div> <!--col-1 fine-->
    <div class="col-2"> 
      <div class="content-box"> 
               <div class="content-box-first-head"> 
          <h3></h3>
                 <div class="inner-box"> 
         <!--sostituire con "inner-box-2" per gli argomenti generali che necessitano di titolo-->

<?php include ("$col2"); ?>

                               </div>
       <!--inner-box-2 fine-->
       </div>   <!--content-box-first-head fine-->


      </div>   <!--content-box fine -->
      <div class="content-box-last"></div>
    </div><!--col-2 fine-->
    <div class="col-3"> 
      <div class="modul-box-head-right"></div>
      <div class="modul-box-right"> 
        <div class="content-right"> 
		  <?php include ("$col3prima"); ?>
          <!--manca il comando fieldset-->
        </div><!--content-right fine-->
        <div class="modul-box-middle-right"></div>
        <div class="content-right"> 
		  <?php include ("$col3seconda"); ?>
		</div><!--content-right fine-->
        <div class="modul-box-middle-right"></div>
        <div class="content-right"> 
			<p class="tiny-txt">Siti affiliati</p><br> 
		</div><!--content-right fine-->
  		<div class="banner-right"> 
		  <?php include ("$col3terza"); ?>
        </div>
        <!--content-right fine-->
        <div class="modul-box-middle-right"></div>
        <div class="counter"> 
<!-- inizio codice vivistats.com -->
<script type="text/javascript" language="JavaScript" src="http://count.vivistats.com/laser.asp?CountId=14567"></script>
<noscript>
<a href="http://it.vivistats.com/"><img src="http://count.vivistats.com/laser.asp?CountId=14567&js=off" border="0" alt="contatore sito"></a>
</noscript>
<!-- fine codice vivistats.com -->
<a href="http://www.easycounter.com/it/">
<img src="http://www.easycounter.com/counter.php?albagor"
border="0" alt="counter"></a>
        </div><!--content-right fine-->
	  </div><!--modul-box fine-->
      <div class="modul-box-foot-right"></div>
    </div><!--col-3 fine-->
  </div><!--Fine container-wrapper-->
    <div class="push"></div>
</div><!--page fine-->
<br class="clearfloat" />

<div class="footer-wrapper">
	<div class="footer">
    	
  <p>&copy; Dario, Albagor - Tutti 
    i diritti riservati. 2009<br />
    <a href="http://brushtool.altervista.org/index.php" target="_blank">Brushtool</a> 
    | <a href="http://www.brushtool.altervista.org/products.php" target="_blank">Products</a> | <a href="http://www.brushtool.altervista.org/download.php" target="_blank">Download e Utility</a></p>

<a href="mailto:[email protected]"" class="dario footer-logo" target="_blank" alt="MAIL"></a>
	</div>
</div>

</body>
</html>


Questo invece è l'incluso condannato Colonna centrale (col2)

Codice:
		   <p><a href="http://brushtool.altervista.org/Tutorial/Photomanipulation/Mysterious.html"><img src="http://brushtool.altervista.org/Tutorial/Photomanipulation/mysterious/Mysterious-hollow.jpg" width="65" height="65" border="0"></a> 
    <h3>Mysterious Hollow:</h3>
  la realizzazione di un paesaggio cimiteriale, un effetto gotico di alta maestria 
  tradotto e lavorato al meglio delle mie capacit&agrave;. Gran bel lavoro di 
  Photo Manipulation</p>
<p><a href="http://brushtool.altervista.org/Tutorial/oob.php"><img src="http://brushtool.altervista.org/Tutorial/Photomanipulation/oob/rana-finito.jpg" width="65" height="65" border="0"></a> 
    <h3>Dentro-Fuori:</h3>
  Un classico esempio di Out Of Bounds seguendo schemi a più livelli. Realizzabile anche con altri programmi differenti da Photoshop.
Una simpatica realizzazione buffa usando come schema un'immagine prelevata da Internet che si adattava alla situazione.</p>

<p><a href="http://brushtool.altervista.org/Tutorial/ranalamp.php"><img src="http://brushtool.altervista.org/Tutorial/Photomanipulation/rana-lampone/rana-lamp-finita.jpg" width="65" height="65" border="0"></a> 
<h3>Rana Lampone:</h3>	

Un effetto di Photomanipulatio che ci permette di trasformare un rospo o qualsiasi altra immagine in un frutto seguendo gli esempi. Il lampone si adatta alle gibbosità del rospo, ma volendo ad ogni soggetto corrisponde un frutto. Provate e scoprite </p>

Il file che collega i due è il seguente Index

Codice:
<title>Brushtool Photomanipulation</title>
<?php
$titolo="titolo.php";
$col1prima="col1-prima.php";
$col1seconda="col1-seconda.php";
$col1terza="col1-terza.php";
$col2="col2-manipulation.php";
$col3prima="col3-prima.php";
$col3seconda="col3-seconda.php";
$col3terza="col3-terza.php";
include("index2.php");
?>

Grazie
 
Ultima modifica:
Ciao, allora i file in php sono quelli che ho postato sopra, il primo è la base, il secondo è il contenuto nella colonna centrale e il terzo è l'index che dovrebbe unire entrambi. ecco qui il codice in css

Codice:
@charset "utf-8";
/* STUFF INIZIO */
html {
	background:#000 url(../img/container-bg.jpg) repeat-y scroll 50% 0;
	height: 100%;
	min-width: 930px;
}
body {
	margin: 0;
	font: 12px Arial, Helvetica, sans-serif;
	color: #160400;
	height: 100%;
	background: url(../img/container-bg.jpg) repeat-y 50% 0;
	min-width: 930px;
}

img {
	border: none;
	display: block;
}

a:focus {outline:none;}

a {
	cursor:pointer;
	color:#006699;
	text-decoration:none;
}

a.highlight {
	color:#7B1300;
	font-weight:bold;
	text-decoration:none;
}

a.highlight:hover {
	color:#7B1300;
	text-decoration:underline;
}

a:hover {
	color:#FFF;
	text-decoration:underline;
}

form {
	margin: 0;
	padding: 0;
}


p.clear {
	margin:0;
	padding:0;
}

p {
	margin:10px;
	padding:0;
}
h2 {
	color:#000;
	font-size:12px;
	margin:10px;
}

h2.red {
	color:#7B1300;
}

h3 {
	color:#336666;
	font-size:14px;
	height:50px;
	line-height:50px;
	margin:0;
	text-align:center;
}
.tabmenu-1 h3,
.tabmenu-2 h3,
.tabmenu-3 h3,
.tabmenu-4 h3 {
	height:34px;
	line-height:34px;
}

h4 {
	color:#7b1300;
	font-size:13px;
	margin:10px;

}

.user-top-nav li.logout,
.user-top-nav li.user,
.stones,
.btn,
.btn:hover,
.col-3 a.headline,
.user-info li,
.nav-left li a,
.modul-box,
.modul-box-foot
{ behavior: url(../img/iepngfix.htc) }

.submit input.btn,
.btn {
	background:url(../img/btn.png);
	border-style:none;
	color:#fcd263;
	cursor:pointer;
	display:block;
	font-weight:bold;
	font-size:12px;
	height:35px;
	line-height:34px;
	margin:0 auto;
	text-align:center;
	width:135px;
}

.submit input.btn:hover,
.btn:hover {
	background:url(../img/btn-hover.png);
	color:#FFF;
}

.tiny-txt {
	color:#003300;
	display:block;
	font-size:11px;
	text-align:center;
}

.tiny-txt a,
a.tiny-txt {
	color:#009900;
}

.tiny-txt a:hover,
a.tiny-txt:hover {
	color:#FFF;
}

.page {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -101px;
}

a.highlight {
	color:#7B1300;
	font-weight:bold;
	text-decoration:none;
}

a.highlight:hover {
	color:#7B1300;
	text-decoration:underline;
}




/* STUFF FINE */

/* HEADER INIZIO */
.header-wrapper {
	background: url(../img/header-bg.jpg) no-repeat scroll 50% 0;
	height:259px;
}

#header {
	height:249px;
	margin:0 auto;
	overflow:hidden;
	position:relative;
	width:930px;
}

.logo {
	background:transparent url(../img/logo.jpg) no-repeat scroll 0 0;
	height:68px;
	left:379px;
	overflow:hidden;
	position:absolute;
	text-indent:-9999px;
	top:51px;
	width:171px;
}

.header-box {
	background:url(../img/reg-box.jpg) no-repeat;
	height:115px;
	margin:134px 0 0 209px;
	overflow:hidden;
	width:514px;
}
.top-nav {
	margin:12px 0 0 15px;
	overflow:hidden;
	padding:0 0 2px;
	width:100%;
}

.top-nav li {
	background:transparent url(../img/list-bg.jpg) no-repeat scroll 0 0;
	color:#fff3d4;
	display:inline;
	float:left;
	font-size:14px;
	font-weight:bold;
	height:34px;
	line-height:34px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	width:162px;
}

.top-nav li:hover {
	background:transparent url(../img/list-bg-hover.jpg) no-repeat scroll 0 0;
}

.user-top-nav,
.top-nav span {
	font-weight:bold;
	line-height:30px;
	padding:0 0 0 13px;

}
.top-nav a {
	color:#f1c75c;
	font-size:11px;
	padding:0 0 0 15px;
}

.top-nav a:hover {
	color:#FFF;
}

.agb-reg {
	margin: 0 0 0 15px;
}

.agb-text {
	color:#E8DF7B;
	height:13px;
	margin:0 0 0 25px;
	width:400px;
}

.agb-text a {
	color:#FF9966;
	font-weight:bold;
	text-decoration:none;
}

.agb-text a:hover {
	color:#FFF;
	font-weight:bold;
	text-decoration:underline;
}
/* HEADER FINE */
/* CONTAINER INIZIO */
.container-wrapper {
	background:url(../img/container-bg.jpg) repeat-y scroll 50% 0;
	margin:0 auto;
	position:relative;
	width:960px;
}
/* COL-1 INIZIO */
.col-1 {
	float:left;
	display:inline;
	position:relative;
	width:182px;
	margin:-52px 0 0;
}
.modul-box {
	background: url(../img/modul-box-bg.png) repeat-y;
	width:182px;
}

.modul-box-orologio {
	width:182px;
	margin:0 0 0 30px;

}

.modul-box-head {
	background:url(../img/modul-box-head.jpg) no-repeat;
	height:24px;
	width:182px;
}

.modul-box-foot {
	background:url(../img/modul-box-foot.png) no-repeat;
	height:51px;
	padding: 0 0 5px;
	width:100%;
}
.nav-left {
	margin:0;
	padding:0 0 0 11px;
}

.nav-left ul {
	margin:0;
	padding:0;
}

.nav-left li {
	height:40px;
	line-height:34px;
	text-align:center;
	width:161px;
}

.content-left {
	margin:0;
	padding:0;
	width:182px;
}



ul.products {
	color:#003300;
	list-style:none;
	margin:0 0 0 10px;
	padding:0;
	width:182px;

}

.products li {
	line-height:20px;
	height:20px;
	padding:0 0 0 15px;
	width:182px;
}

.products li.light {
	background:url(../img/products-cell.jpg) no-repeat;
	height:20px;
	width:182px;
	margin:0 0 0 -10px;
	psdding:0;
}

.modul-box-middle {
	background:url(../img/modul-box-middle.png) no-repeat;
	height:25px;
	width:181px;
}

/* COL-1 FINE */
/* COL-2 INIZIO*/
.col-2 {
	display:inline;
	float:left;
	margin:0 0 0 40px;
	width:539px;
	height:100%;
}

.content-box {
	background:url(../img/content-box-bg.jpg) repeat-y;
	height:100%;
	width:517px;
}

.content-box-first-head {
	background:url(../img/content-box-first-head.jpg) no-repeat;
	padding:0 20px 20px;
	width:478px;
}

.content-box-first-head h3 {line-height:35px;}

.inner-box {
	background:url(../img/inner-box-bg.jpg) no-repeat;
	margin:0 0 15px;
	padding:50px 15px 0;
	position:relative;
	width:470px;
}

.inner-box-2 {
	background:url(../img/inner-box-bg-2.jpg) no-repeat;
	margin:0 0 15px;
	padding:0 15px 0;
	min-height:191px;
	position:relative;
	width:470px;
}

.inner-box-2 h4 {
	position:relative;
	height:23px;
	line-height:23px;
	margin:0;
	padding:23px 0 10px 58px;
	width:233px;
}

.inner-box-ml {
	background:url(../img/inner-box-bg-ml.jpg) no-repeat;
	margin:0 0 15px;
	padding:75px 15px 0 131px;
	min-height:191px;
	position:relative;
	width:470px;
}

.content-box-last {
	background:url(../img/content-box-last.jpg) no-repeat;
	height:30px;
	width:517px;
}

/*COL-2 FINE*/
/*COL-3 INIZIO*/
.col-3 {
	display:inline;
	float:left;
	margin:-52px 0 0 14px;
	position:relative;
	width:182px;
}

.modul-box-right {
	background: url(../img/modul-box-bg-r.png) repeat-y;
	width:182px;
}
.modul-box-head-right {
	background:url(../img/modul-box-head-right.jpg) no-repeat;
	height:24px;
	width:182px;
}

.modul-box-foot-right {
	background:url(../img/modul-box-foot-right.png) no-repeat;
	height:51px;
	padding: 0 0 5px;
	width:100%;
}

.modul-box-middle-right {
	background:url(../img/modul-box-middle-right.png) no-repeat;
	height:37px;
	width:181px;
}

.col-3 a.headline,
.nav-left li a {
	background:url(../img/btn-nav.png) no-repeat;
	display:block;
	color:#F1C75C;
	font-weight:bold;
	height:43px;
	line-height:32px;
	text-align:center;
	text-decoration:none;
	width:161px;
}




.col-3 a:hover.headline,
.nav-left li a:hover {
	background-position:0 -43px;
	color:#FFF;
}

.content-right {
	width: 162px;
	margin:0 0 0 10px;
}

.counter {
	width: 162px;
	margin:0 0 0 50px;
}

.banner-right {
	width: 162px;
	margin:0 0 0 50px;
}
/*COL-3 FINE*/
/* CONTAINER FINE */
/*FOOTER INIZIO*/
.footer-wrapper {
	background:url(../img/footer-bg.jpg) no-repeat scroll 50% 0;
	height:86px;
	width:100%;
	margin:0 auto;
}

.footer {
	color:#7E603B;
	font-size:11px;
	line-height:14px;
	margin:0 auto;
	overflow:hidden;
	padding:0;
	width:600px;
}

.footer p {
	float:left;
	font-size:10px;
	margin:38px 0 0;
	padding:0;
	color:#000000;

}

.footer a {
	font-weight:bold;
	color:#CCFF00;
}

.footer a:hover {
	color:#FFF;
	font-weight:bold;
	text-decoration:underline;
}


.footer-logo {
	background:url(../img/dario-logo.png) no-repeat;
	display:block;
	float:right;
	height:64px;
	margin:40px 0 0;
	width:78px;
}

.footer-logo:hover {
	background:transparent url(../img/dario-logo-hover.png) no-repeat scroll 0 0;
}

.footer, .push {
	height: 86px; /* .push must be the same height as .footer */
}

/*FOOTER FINE*/

.clearfloat {
	clear:both;
	height:0;
}
 

Discussioni simili