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:

Brushtool

Nuovo Utente
6 Ago 2009
3
0
0
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
Autore Titolo Forum Risposte Data
H problemi con l'impaginazione PHP 1
R Problemi Con Impaginazione Form HTML e CSS 5
T problemi con dati menu a tendina HTML e CSS 2
M Upload immagine con javascript problemi con FormData() Javascript 1
A Problemi con move_uploaded_file PHP 7
M Problemi con la stampa dei valori in php PHP 1
L Problemi con il login PHP 2
R Tutto su utf-8 ma ancora problemi con i caratteri speciali in mysql MySQL 1
Z problemi con foreach insert into PHP 10
B javascript per problemi con pdf e Safari Javascript 0
M Problemi con creazione maschere Presentati al Forum 1
M Problemi con query a più tabelle PHP 3
S Problemi delle funzioni eliminate con PHP e MySQL PHP 4
M Problemi con blog Grav CMS (Content Management System) 0
S incoerenza di stampa. problemi con il magenta Photoshop 3
A problemi con paypall Java 1
S Problemi con modulo upload video php (help!) PHP 0
felino [Windows 8.1] Problemi con connessione WiFi Windows e Software 0
E [PHP] problemi nuova riga con fwrite su piattaforma android PHP 5
O [HTML] problemi con la regola "background-attachment: fixed" in EDGE HTML e CSS 0
M [PHP] Problemi con query unione PHP 11
M [PHP] Problemi con select PHP 6
ANDREA20 [HTML] problemi con il footer HTML e CSS 1
D [MS Access] problemi con inserimento campo in una maschera MS Access 6
M [PHP] Problemi con il riconoscimento login. PHP 21
A [WordPress] problemi con xampp WordPress 2
M Problemi con database Apache/2.4.37 (Win32) OpenSSL/1.1.1a PHP/7.3.1 PHP 6
S [PHP] problemi con le sessioni PHP 3
T [PHP] problemi con il browser PHP 0
Andrea_Ventura [HTML] Problemi con effetto hover HTML e CSS 5
M [PHP] Problemi con login facebook PHP 0
Andrea_Ventura [HTML] Problemi con visualizzazione Navigation Bar HTML e CSS 10
andreas88 Creare file .htaccess per risolvere alcuni problemi con il tester SEO SEO e Posizionamento 0
Eugene [Joomla] Problemi con modulo per strutture alberghiere JHotelreservation starter Joomla 6
F [PHP] Problemi di base con bot di telegram PHP 9
M [Photoshop] Problemi con importazione immagini trasparenti in indesign Photoshop 0
E [Photoshop] Problemi con dimensioni immagini Photoshop 12
G [HTML] Problemi con inserimento immagini HTML e CSS 7
L Problemi con Javascript e Mustache Javascript 0
G Invio Mail con PHPMailer, problemi SMTP PHP 7
A [Javascript] problemi con javascrip e posizione GPS html5 Javascript 6
D Due problemi con Photoshop... Photoshop 1
G Problemi con pagina online.php di una chat in php PHP 38
S Problemi con impostazioni php PHP 3
P Problemi con AndroidStudio Sviluppo app per Android 0
S Problemi con Dell Precision T5400 Windows e Software 2
F ciao, sono ferro e ho bisogno di aiuto per problemi con la mail di alice.it Presentati al Forum 1
S [PHP] Problemi con Login e pagina Utente PHP 5
Z problemi con swf e chrome o sistemi portatili Webdesign e Grafica 5
N Problemi connettività con Tp Link EAP 110 Reti LAN e Wireless 0

Discussioni simili