script per generazione immagine da template

[Chandler]

ci siamo quasi
Adesso vedo l'immagine correttamente, ma il bg nero come caiser si toglie?

[Mattia]

Nel CSS dovresti assegnare lo sfondo grigio al body e non solo a #projects.

[Chandler]

molto bene, ci sono riuscito!!
adesso però non riesco a staccare di più il "dottoressa" dalla foto...
gli ho assegnato la classe firma e gli ho dato un padding-top ma non ha funzionato... cosa mi consigli di fare?
inoltre mi piacerebbe cambiare il colore del titolo h5 con lo stesso colore #666 della firma.

[Mattia]

Per aumentare lo spazio della scritta della dottoressa, prova a dargli un margin-top invece che il padding. Inoltre dovresti mettere l'immagine dentro a un div oppure renderla un blocco (con display: block).

Per il colore del testo dell'h5, basta che gli assegni in CSS:

Codice:

color: #666;

[Chandler]

niente da fare, non mi funziona ne col display:block su img, ne con margin-top su .firma...

[Mattia]

Dovevi fare entrambe le cose. Una non escludeva l'altra.

[Chandler]

avevo anche provato entrambi...che ti pare!

[Mattia]

Io vedo lo spazio in alto.

[Chandler]

Scusami, non ho capito...

[Mattia]

Quando ti ho scritto il messaggio ho fatto una prova e vedevo lo spazio tra l'immagine e la scritta della dottoressa.

[Chandler]

Dunque, in safari e chrome lo vedo uguale (senza lo spazio tra immagine e dicitura), mentre su firefox vedo la scritta spaziata ma sopra il fascione nero che avevo rimosso dal css... (ho vuotato le cache ma nn cambia nulla)

[Mattia]

Visto che, a quanto pare, non hai scritto tu né il codice CSS né quello HTML, forse ti conviene rifarlo da zero perché ci sono alcuni errori nell'HTML (probabilmente dovuti a cancellazioni di codice) e il CSS ha più istruzioni di quelle utilizzate nella pagina. Se non sai quello che fa il codice, diventa impossibile correggerlo.

[Chandler]

il codice è preso da un template che ho trovato online... però arrivato a questo punto non muoio dalla voglia di rifare tutto dall'inizio... ergo cercherò di ripulire il codice CSS. Tu mi confermi che pulendo correttamente il codice dovrebbe funzionare già correttamente?

[Mattia]

Ripulendo il codice CSS non ti posso confermare che magicamente tutto funzionerà correttamente, ma sarà più facile verificare cosa modificare.
Anche il codice HTML generato contiene degli errori (puoi verificarlo qui copiando la sorgente della pagina dopo che hai inviato il form).

[Chandler]

Ciao! Sono riuscito a ripulire il codice css, adesso è così:

Codice:

/*!
*  Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
*  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
@font-face{font-family:'FontAwesome';src:url("../fonts/fontawesome-webfont.eot?v=4.1.0");src:url("../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0") format("embedded-opentype"),url("../fonts/fontawesome-webfont.woff?v=4.1.0") format("woff"),url("../fonts/fontawesome-webfont.ttf?v=4.1.0") format("truetype"),url("../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular") format("svg");font-weight:normal;font-style:normal}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}
html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0;font-size:13px;line-height:1.231;background:#F7F7F5}body,button,input,select,textarea{font-family:sans-serif;color:#222}a{color:#00e}a:hover{color:#06e}a:focus{outline:thin dotted}a:hover,a:active{outline:0}b,strong{font-weight:bold}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle;display:block}form{margin:0}
button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal;*overflow:visible}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}input[type="checkbox"],input[type="radio"]{box-sizing:border-box}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top;resize:vertical}input:invalid,textarea:invalid{background-color:#f0dddd}.greyBg{background-color:#F7F7F5}html{-webkit-font-smoothing:antialiased}html,body{margin:0;padding:0}body{font-family:"Open Sans",sans-serif}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
header,footer,article,nav,section{display:block}h1{font-size:44px;line-height:44px;color:#4e4e4e;font-weight:300;margin:0;padding:0}p{color:#4e4e4e;font-size:16px;line-height:1.7;font-weight:200}h3 a,h3 a:link,h3 a:visited{text-decoration:none;color:#4e4e4e}h3 a:hover{text-decoration:underline}span.title{font-size:24px;font-weight:300}a{text-decoration:none;color:#666666;outline:0;style:one}a:link,a:visited{color:#666666}a:hover{color:#7acbe4}ul{margin:0;padding:0}ul li{margin:0;padding:0;list-style-type:none}#intro{position:fixed;height:100%;width:100%;z-index:1250;background-color:#FFF}#intro .logo{position:absolute;left:50%;top:50%;margin-top:-35px;margin-left:-35px;z-index:400}.header{min-height:150px;position:relative;overflow:hidden;height:600px}
header{z-index:501;font-family:"Open Sans",sans-serif;position:fixed;top:40px}header .headerContainer{position:relative}header .headerContainer:hover .navigation__toggle{background-color:#1a1c1a}
.teaser{display:block;width:100%;clear:both;position:relative;margin-bottom:50px;float:left}.teaser a{overflow:hidden;display:block;height:100%;width:100%;position:relative;background-repeat:no-repeat;background-size:100% 100%;background-position:center center}.teaser figure{margin:0;width:70%;overflow:hidden;position:relative;max-height:470px;max-width:900px}.teaser figure .award{position:absolute;top:0;left:0;width:156px;height:auto;z-index:99}.teaser img{width:auto\9;height:auto;max-width:100%;width:100%;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}.teaser .teaser-details{position:relative;align-self:center;text-align:left;padding-top:6%;width:25%}.teaser .teaser-details .container,.teaser .teaser-details p{margin-top:20px;font-size:16px}.teaser .teaser-details h3{font-size:20px;margin:0px 0px 3px 0px;color:#4e4e4e}.teaser .teaser-details h5{font-size:23px;margin:0px;font-weight:bold}.teaser .teaser-details h5 a,.teaser .teaser-details h5 a:link,.teaser .teaser-details h5 a:visited{color:#4e4e4e !important}.teaser.left figure{float:left;margin:2% 0% 0 0;position:relative}.teaser.left figure img{float:right}.teaser.left figure:after{right:-1px;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(136,183,213,0);border-right-color:#F7F7F5;border-width:20px;margin-top:-20px;z-index:100}.teaser.left .teaser-details{position:relative;align-self:center;text-align:left;padding-top:6%;width:25%;float:left;margin-left:25px}.teaser.right figure{float:right;margin:2% 0 0 0%;right:0}.teaser.right figure img{float:left}.teaser.right figure:after{left:-1px;top:30%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(136,183,213,0);border-left-color:#F7F7F5;border-width:20px;margin-top:-20px;z-index:100}.teaser.right figure.award:after{top:200px}.teaser.right .teaser-details{text-align:right;padding-top:3%;width:26%;float:right;margin-right:25px}.teaser.landscape figure a:after{padding-top:55.5%;display:block;content:''}.teaser.square{width:70%}.teaser.square figure{width:60%;max-width:470px}.teaser.square figure a:after{display:block;content:''}.teaser.square figure a{max-width:500px}.teaser.square.left{float:left;margin-left:10%}.teaser.square.left figure a{float:right}.teaser.square.right{float:right;margin-right:10%}.teaser.square.right figure a{float:left}.teaser.square .teaser-details{width:35%}
@media (max-width: 1200px){#projects .inner{width:90%}.teaser{margin-bottom:20px}}@media (max-width: 1000px){.our-work li{width:18% !important}.teaser-details .desc p{font-size:14px}
.socialBox{text-align:left !important}.socialBox .inner{width:80% !important}.socialBox .desc{text-align:left !important}}.aboutPage .inner{margin:auto}.aboutPage #colorMask,.aboutPage .colorFill{position:absolute;width:100%}.aboutPage .colorFillContainer{bottom:-75px;position:absolute;height:100px;width:100%}.aboutPage #colorFill{z-Index:50;height:100px;bottom:70px;width:100%}.aboutPage .colorFillBox{position:absolute;height:70px;top:29px;width:100%;background-color:#7acbe4}.aboutPage #colorMask{z-Index:51;height:85px;bottom:-2px}section{position:relative}section.start{padding-top:0px;margin-top:0px}section.start .inner{margin-bottom:120px;margin-top:70px;max-width:1200px}
@media only screen and (max-width: 1500px){.aboutPage .colorFillContainer{bottom:-70px;height:40px}.aboutPage #colorFill{height:100px;bottom:70px}.aboutPage .colorFillBox{height:70px;top:29px}.aboutPage #colorMask{height:35px}@media only screen and (max-width: 1000px){.aboutPage .our-capabilities .inner .intro{width:80% !important}.aboutPage .our-capabilities ul.triple{width:80% !important}.aboutPage .our-capabilities ul{width:100% !important;font-size:14px !important}.aboutPage .our-capabilities .intro{text-align:left !important}.aboutPage .our-capabilities h2,.aboutPage .our-capabilities h5,.aboutPage .our-capabilities ul,.aboutPage .our-capabilities li,.aboutPage .our-capabilities p{text-align:left !important}.aboutPage .aboutPage .about-demodern .colRight{width:100% !important}.aboutPage .we-work{text-align:left !important}.aboutPage .we-work li{margin-bottom:0px !important}.aboutPage .we-work .inner{margin-top:50px}.aboutPage .we-work .inner ul.triple li{width:80% !important}.aboutPage .we-work .inner ul.triple img{display:none}.aboutPage .we-work .inner ul.triple li p{width:100% !important}.aboutPage .managers .inner{width:80% !important}.aboutPage .come-on-letstalk{text-align:left !important}.aboutPage .come-on-letstalk .inner{text-align:left !important}}body.jobsPage .inner{width:70%;max-width:960px}body.jobsPage h1 .gender{display:none}body.jobsPage #colorMask,body.jobsPage .colorFill{position:absolute;width:100%}body.jobsPage .colorFillContainer{bottom:-75px;position:absolute;height:100px;width:100%}body.jobsPage #colorFill{z-Index:50;height:100px;bottom:70px;width:100%}body.jobsPage .colorFillBox{position:absolute;height:70px;top:29px;width:100%;background-color:#7acbe4}body.jobsPage #colorMask{z-Index:51;height:85px;bottom:0px}body.jobsPage .get-in-touch h3{font-size:28px}section{width:100%;padding:50px 0;overflow:hidden;text-align:center;position:relative}
p.intro{font-size:18px}section.managers a.no-change{color:#4e4e4e;text-decoration:none}section.managers a.no-change:hover,section.managers a.no-change:active{color:#4e4e4e;text-decoration:none}.lbl{margin-right:10px}h2{font-size:36px;font-weight:200;margin-top:0;margin-bottom:30px;color:#4e4e4e}h2.case-title{font-weight:800}h3{color:#4e4e4e;font-weight:300;font-size:44px;margin:0 0 30px 0}h4{font-size:24px;font-weight:300}h5{color:#666;font-size:21px;font-weight:300}.white{color:white}.bold{font-weight:600}.italic{font-style:italic}.intro{margin:0 auto;width:60%;text-align:center}
@media only screen and (max-width: 700px){.footersvg{display:none}}@media only screen and (min-device-width: 320px) and (max-device-width: 480px){#isMobile{display:block}}@media only screen and (max-width: 320px){#isMobile{display:block}}@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){#isTablet{display:block}}@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){#isTablet{display:block}}@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait){#isTablet{display:block}}#oldBrowser{text-align:center;position:fixed;top:0px;left:0px;width:100%;height:30px;background-color:#333;border-bottom:1px solid #000;color:#999;line-height:30px;font-family:"Open Sans",sans-serif;font-size:18px;z-index:1000}
.firma{color:#666;margin-top:10px}
/*# sourceMappingURL=screen.css.map */

mentre la pagina templates.php è così:

Codice:

<?php

error_reporting(E_ALL);

// form per l'inserimento immagine
  define('UPLOAD_DIR', './uploads/');

    $immagine = '';
    if(isset($_FILES['upload']))
    {
        $file = $_FILES['upload'];
        if($file['error'] == UPLOAD_ERR_OK and is_uploaded_file($file['tmp_name']))
        {
            move_uploaded_file($file['tmp_name'], UPLOAD_DIR.$file['name']);
        $immagine = UPLOAD_DIR.$file['name'];
        }
    }
    ?>
<html>
<head>
<title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="screen.css?c=2" media="screen" type="text/css" />
    <link rel="stylesheet" href="print.css?c=2" media="print" type="text/css"  />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'>
</head>
<body class="homepage homepage block">
<section class="latest-outcome waypoints greyBg">
        <div class="inner">

        </div>
    </section>


    <section id="projects" class="lines">
        <div class="inner"><br /><br /><br />
    <article class="teaser <?php if (isset($_POST['posizione']) && $_POST['posizione'] == 1) : ?>left<?php else : ?>right<?php endif;?> square">
        <figure  class="js-animate">
                    <img src="<?php echo $immagine;?>" class="mainImg" alt="cover" />
                <div class="firma"><b><br>Dott.ssa Fabrizia Minciullo</b> - Dietista e Biologa nutrizionista</div>
        </figure>

        <div class="teaser-details js-animate">
                <h3><?php echo htmlspecialchars($_POST['titoletto']);?></h3>
                <h5><?php echo htmlspecialchars($_POST['titolo']);?></h5>
            <div class="container">
                <div class="desc"><p>
                <p><?php echo htmlspecialchars($_POST['testo']);?></p></p></div></a>
            </div> <br /><br /><br />

        </div>

          </article>
  
            <div class="clear"></div>
            </div>

        </div>
    </section>



</body>
</html>

Adesso da firefox la vedo correttamente mentre da Chrome e Safari no.
Inoltre vorrei capire come poter far ridimensionare le immagini che carico: attualmente qualsiasi immagine (seppur di 3000px) me la adatta nel formato output, invece mi piacerebbe che si vedesse un po' più grande (come nell'immagine che avevo allegato al mio primo post).
Dici che così riusciamo ad arrivare ad una soluzione?

Grazie

[Mattia]

Nel CSS ci sono sicuramente delle cose in più, perché non ti servono le media query visto che la dimensione della pagina sarà unica.
Per quanto riguarda i problemi di Safari e Chrome, al momento non sono importanti, perché conta come verrà vista la pagina dallo script che trasformerà il codice HTML e CSS in PDF.
Se non ho capito male (il CSS compatto è un po' difficile da leggere), l'immagine prende la larghezza del tag figure che a sua volta è largo al 70%. Per aumentare la larghezza dell'immagine, devi aumentare quella del figure.

[Chandler]

Ciao Mattia, ho scremato ulteriormente il CSS ed ordinato rispetto a quando era compatto:

Codice:

/*!
*  Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
*  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
@font-face{font-family:'FontAwesome';src:url("../fonts/fontawesome-webfont.eot?v=4.1.0");src:url("../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0") format("embedded-opentype"),url("../fonts/fontawesome-webfont.woff?v=4.1.0") format("woff"),url("../fonts/fontawesome-webfont.ttf?v=4.1.0") format("truetype"),url("../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular") format("svg");font-weight:normal;font-style:normal}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}
html{
    font-size:100%;overflow-y:scroll;                        -webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%}
body{
    margin:0;
    font-size:13px;
    line-height:1.231;
    background:#F7F7F5}
body,button,input,select,textarea{
    font-family:sans-serif;
    color:#222}
a{color:#00e}
a:hover{color:#06e}
a:focus{outline:thin dotted}
a:hover,a:active{outline:0}
b,strong{font-weight:bold}
img{
    border:0;
    -ms-interpolation-mode:bicubic;
    vertical-align:middle;
    display:block}
form{margin:0}
button,input,select,textarea{
    font-size:100%;
    margin:0;
    vertical-align:baseline;
    *vertical-align:middle}
    button,input{
        line-height:normal;
        *overflow:visible}
button,input[type="button"],input[type="reset"],input[type="submit"]{
    cursor:pointer;
    -webkit-appearance:button}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box}
input[type="search"]{
    -webkit-appearance:textfield;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{
    border:0;
    padding:0}
textarea{
    overflow:auto;
    vertical-align:top;
    resize:vertical}
input:invalid,textarea:invalid{
    background-color:#f0dddd}
.greyBg{background-color:#F7F7F5}
html{-webkit-font-smoothing:antialiased}
html,body{margin:0;padding:0}
body{font-family:"Open Sans",sans-serif}
*{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box}
header,footer,article,nav,section{display:block}
h1{
    font-size:44px;
    line-height:44px;
    color:#4e4e4e;
    font-weight:300;
    margin:0;
    padding:0}
p{
    color:#4e4e4e;
    font-size:16px;
    line-height:1.7;
    font-weight:200}
h3 a,h3 a:link,h3 a:visited{
    text-decoration:none;
    color:#4e4e4e;
    font-weight:lighter}
h3 a:hover{
    text-decoration:underline;
    font-weight:lighter
}
span.title{
    font-size:24px;
    font-weight:300}
a{
    text-decoration:none;
    color:#666666;
    outline:0;
    style:one}
a:link,a:visited{color:#666666}
a:hover{color:#7acbe4}
ul{margin:0;padding:0}
ul li{
    margin:0;
    padding:0;
    list-style-type:none}
#intro{
    position:fixed;
    height:100%;
    width:100%;
    z-index:1250;
    background-color:#FFF}
#intro .logo{
    position:absolute;
    left:50%;
    top:50%;
    margin-top:-35px;
    margin-left:-35px;
    z-index:400}
.header{
    min-height:150px;
    position:relative;
    overflow:hidden;
    height:600px}
header{
    z-index:501;
    font-family:"Open Sans",sans-serif;
    position:fixed;
    top:40px}
header .headerContainer{position:relative}
header .headerContainer:hover .navigation__toggle{background-color:#1a1c1a}
.teaser{
    display:block;
    width:100%;
    clear:both;
    position:relative;
    margin-bottom:50px;
    float:left}
.teaser a{
    overflow:hidden;
    display:block;
    height:100%;
    width:100%;
    position:relative;
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-position:center center}
.teaser figure{
    margin:0;
    width:70%;
    overflow:hidden;
    position:relative;
    max-height:470px;
    max-width:900px}
.teaser figure .award{
    position:absolute;
    top:0;
    left:0;
    width:156px;
    height:auto;
    z-index:99}
.teaser img{
    width:auto\9;
    height:auto;
    max-width:100%;
    width:100%;
    vertical-align:middle;
    border:0;
    -ms-interpolation-mode:bicubic}
.teaser .teaser-details{
    position:relative;
    align-self:center;
    text-align:left;
    padding-top:6%;
    width:25%}
.teaser .teaser-details .container,.teaser .teaser-details p{
    margin-top:20px;
    font-size:16px}
.teaser .teaser-details h3{
    font-size:20px;
    margin:0px 0px 3px 0px;
    color:#4e4e4e;
    font-weight:lighter}
.teaser .teaser-details h5{
    font-size:23px;
    margin:0px;
    font-weight:bold;
    color:#4e4e4e}
.teaser .teaser-details h5 a,.teaser .teaser-details h5 a:link,.teaser .teaser-details h5 a:visited{color:#4e4e4e !important}
.teaser.left figure{
    float:left;
    margin:2% 0% 0 0;
    position:relative}
.teaser.left figure img{float:right}
.teaser.left figure:after{
    right:-1px;
    top:50%;
    border:solid transparent;
    content:" ";
    height:0;
    width:0;
    position:absolute;
    pointer-events:none;
    border-color:rgba(136,183,213,0);
    border-right-color:#F7F7F5;
    border-width:20px;
    margin-top:-20px;
    z-index:100}
.teaser.left .teaser-details{
    position:relative;
    align-self:center;
    text-align:left;
    padding-top:6%;
    width:25%;
    float:left;
    margin-left:25px}
.teaser.right figure{
    float:right;
    margin:2% 0 0 0%;
    right:0}
.teaser.right figure img{float:left}
.teaser.right figure:after{
    left:-1px;
    top:30%;
    border:solid transparent;
    content:" ";
    height:0;
    width:0;
    position:absolute;
    pointer-events:none;
    border-color:rgba(136,183,213,0);
    border-left-color:#F7F7F5;
    border-width:20px;
    margin-top:-20px;
    z-index:100}
.teaser.right figure.award:after{top:200px}
.teaser.right .teaser-details{
    text-align:right;
    padding-top:3%;
    width:26%;
    float:right;
    margin-right:25px}
.teaser.landscape figure a:after{
    padding-top:55.5%;
    display:block;
    content:''}
.teaser.square{width:70%}
.teaser.square figure{
    width:60%;
    max-width:470px}
.teaser.square figure a:after{display:block;
content:''}
.teaser.square figure a{max-width:500px}
.teaser.square.left{float:left;margin-left:10%}
.teaser.square.left figure a{float:right}
.teaser.square.right{float:right;margin-right:10%}
.teaser.square.right figure a{float:left}
.teaser.square .teaser-details{width:35%}
.firma{color:#666;margin-top:10px}
/*# sourceMappingURL=screen.css.map */

Il problema è che in figure ho provato a modificare il 70% di cui mi accennavi, ma senza ottenere cambiamenti...
forse col codice così è più semplice da capire...

Grazie

[Mattia]

Per prima cosa ti ho ripulito il codice di "templates.php", perché c'erano nelle cose inutili e il codice HTML conteneva degli errori.

Codice PHP:

<?php
error_reporting(E_ALL);

// form per l'inserimento immagine
define('UPLOAD_DIR', './uploads/');

$immagine = '';
if(isset($_FILES['upload']))
{
    $file = $_FILES['upload'];
    if($file['error'] == UPLOAD_ERR_OK and is_uploaded_file($file['tmp_name']))
    {
        move_uploaded_file($file['tmp_name'], UPLOAD_DIR.$file['name']);
        $immagine = UPLOAD_DIR.$file['name'];
    }
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="screen.css" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300" rel="stylesheet" type="text/css" />
</head>
<body>
<article class="teaser <?php if (isset($_POST['posizione']) && $_POST['posizione'] == 1) : ?>left<?php else : ?>right<?php endif;?>">
    <figure>
        <img src="<?php echo $immagine;?>" alt="cover" />
        <div class="firma"><b>Dott.ssa Fabrizia Minciullo</b> - Dietista e Biologa nutrizionista</div>
    </figure>
    <div class="teaser-details">
        <h3><?php echo htmlspecialchars($_POST['titoletto']);?></h3>
        <h5><?php echo htmlspecialchars($_POST['titolo']);?></h5>
        <div class="container">
            <p><?php echo htmlspecialchars($_POST['testo']);?></p>
        </div>
    </div>
</article>
</body>
</html> 


Nel CSS continuano a esserci cose in più che non servono (per esempio, all'inizio viene incluso un font che non viene utilizzato). Forse ti conviene fare un file CSS nuovo e aggiungerci pian piano una cosa alla volta così da verificare quali vengono utilizzate effettivamente.

[Chandler]

ok, adesso ho ripulito il css così:

Codice:

/*!
*  Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
*  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
body{
    margin:0;
    font-size:13px;
    line-height:1.231;
    background:#F7F7F5}
body,button,input,select,textarea{
    font-family:sans-serif;
    color:#222}
b,strong{font-weight:bold}
img{
    border:0;
    -ms-interpolation-mode:bicubic;
    vertical-align:middle;
    display:block}
textarea{
    overflow:auto;
    vertical-align:top;
    resize:vertical}
.greyBg{background-color:#F7F7F5}
html{-webkit-font-smoothing:antialiased}
html,body{margin:0;padding:0}
body{font-family:"Open Sans",sans-serif}
h1{
    font-size:44px;
    line-height:44px;
    color:#4e4e4e;
    font-weight:300;
    margin:0;
    padding:0}
p{
    color:#4e4e4e;
    font-size:16px;
    line-height:1.7;
    font-weight:200}
ul{margin:0;padding:0}
ul li{
    margin:0;
    padding:0;
    list-style-type:none}
.header{
    min-height:150px;
    position:relative;
    overflow:hidden;
    height:600px}
header{
    z-index:501;
    font-family:"Open Sans",sans-serif;
    position:fixed;
    top:40px}
.teaser figure{
    margin:0;
    width:70%;
    overflow:hidden;
    position:relative;
    max-height:470px;
    max-width:900px}
.teaser img{
    width:auto\9;
    height:auto;
    max-width:100%;
    width:100%;
    vertical-align:middle;
    border:0;
    -ms-interpolation-mode:bicubic}
.teaser .teaser-details h3{
    font-size:20px;
    margin:0px 0px 3px 0px;
    color:#4e4e4e;
    font-weight:lighter}
.teaser .teaser-details h5{
    font-size:23px;
    margin:0px;
    font-weight:bold;
    color:#4e4e4e}
.teaser.right figure{
    float:right;
    margin:2% 0 0 0%;
    right:0}
.teaser.right .teaser-details{
    text-align:right;
    padding-top:3%;
    width:26%;
    float:right;
    margin-right:25px}
.firma{color:#666;margin-top:10px}
/*# sourceMappingURL=screen.css.map */

adesso l'immagine però è aderente al bordo DX e la firma non si vede (già da prima che pulissi il css).

Ah e cazzo mi sono perso il triangolino bianco che accompagnava il testo all'immagine. Lo so, sono totalmente fuso.

[Mattia]

Per quanto riguarda lo spazio, prova a riaggiungere la classe "square" sia al tag article che nel codice CSS.
Per quanto riguarda il triangolo, devi recuperare il CSS di .teaser.left figure:after e .teaser.right figure:after.

[Chandler]

ok, adesso tutto è tornato più o meno a posto.
Restano da sistemare:
- la grandezza dell'immagine
- inoltre confrontando l'immagine di inizio post co quello che c'è adesso, titoletto, titolo e testo sono sempre in alto mentre dovrebbero essere centrati.

ti riallego l'immagine d'esempio per capire cosa intendo.

[Mattia]

Visto che l'obiettivo finale non è una pagina HTML, ma un'immagine, forse ti conviene fare una tabella di due celle (una con l'immagine e una con il testo). In questo modo è più facile centrare verticalmente gli elementi e avere meno problemi di supporto delle regole CSS nella trasformazione in PDF e poi in immagine.

[Chandler]

Sinceramente non so, a questo punto, cosa sia più opportuno fare...dimmi te magari dandomi anche delle istruzioni più specifiche

[Mattia]

Secondo me, è meglio usare una tabella per i motivi che ti ho scritto nel messaggio precedente.
Non sai come si costruisce una tabella in HTML? Ecco una guida...

[Chandler]

No più che altro mi faceva strano perché le tabelle ormai sono deprecate. Comunque, come dici tu, essendo destinata alla creazione di una immagine va bene così.

Quindi, ricapitolando, adesso la pagina template.php è così:

Codice:

<?php
error_reporting(E_ALL);

// form per l'inserimento immagine
define('UPLOAD_DIR', './uploads/');

$immagine = '';
if(isset($_FILES['upload']))
{
    $file = $_FILES['upload'];
    if($file['error'] == UPLOAD_ERR_OK and is_uploaded_file($file['tmp_name']))
    {
        move_uploaded_file($file['tmp_name'], UPLOAD_DIR.$file['name']);
        $immagine = UPLOAD_DIR.$file['name'];
    }
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="screen.css" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300" rel="stylesheet" type="text/css" />
</head>
<body>
<article class="teaser <?php if (isset($_POST['posizione']) && $_POST['posizione'] == 1) : ?>left<?php else : ?>right<?php endif;?> square">
<table border="0">
    <tr>
       <td>
    <figure>
        <img src="<?php echo $immagine;?>" alt="cover" />
        <div class="firma"><b>Dott.ssa Fabrizia Minciullo</b> - Dietista e Biologa nutrizionista</div>
    </figure></td>
       <td><div class="teaser-details">
        <h3><?php echo htmlspecialchars($_POST['titoletto']);?></h3>
        <h5><?php echo htmlspecialchars($_POST['titolo']);?></h5>
        <div class="container">
            <p><?php echo htmlspecialchars($_POST['testo']);?></p>
        </div>
    </div></td>
   </tr></table>
    
</article>
</body>
</html>

corretto?

[Mattia]

Il codice corretto dovrebbe essere questo (non l'ho testato). Ci sono due versioni della tabella nell'if: la prima è quella con l'immagine a sinistra e la seconda è quella con l'immagine a destra.
Sicuramente si è perso qualcosa eliminando il tag article che è diventato inutile e bisognerebbe modificare il codice CSS in modo da eliminarlo (per esempio, dove c'è ".teaser figure" diventa "figure"). Inoltre le larghezze delle celle devi assegnarle ai td.

Codice PHP:

<?php
error_reporting(E_ALL);

// form per l'inserimento immagine
define('UPLOAD_DIR', './uploads/');

$immagine = '';
if(isset($_FILES['upload']))
{
    $file = $_FILES['upload'];
    if($file['error'] == UPLOAD_ERR_OK and is_uploaded_file($file['tmp_name']))
    {
        move_uploaded_file($file['tmp_name'], UPLOAD_DIR.$file['name']);
        $immagine = UPLOAD_DIR.$file['name'];
    }
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="screen.css" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300" rel="stylesheet" type="text/css" />
</head>
<body>
<?php if (isset($_POST['posizione']) && $_POST['posizione'] == 1) : ?>
    <table border="0">
        <tr>
            <td>
                <figure>
                    <img src="<?php echo $immagine;?>" alt="cover" />
                    <div class="firma"><b>Dott.ssa Fabrizia Minciullo</b> - Dietista e Biologa nutrizionista</div>
                </figure>
            </td>
            <td>
                <div class="teaser-details">
                    <h3><?php echo htmlspecialchars($_POST['titoletto']);?></h3>
                    <h5><?php echo htmlspecialchars($_POST['titolo']);?></h5>
                    <div class="container">
                        <p><?php echo htmlspecialchars($_POST['testo']);?></p>
                    </div>
                </div>
            </td>
        </tr>
    </table>
<?php else : ?>
    <table border="0">
        <tr>
            <td>
                <div class="teaser-details">
                    <h3><?php echo htmlspecialchars($_POST['titoletto']);?></h3>
                    <h5><?php echo htmlspecialchars($_POST['titolo']);?></h5>
                    <div class="container">
                        <p><?php echo htmlspecialchars($_POST['testo']);?></p>
                    </div>
                </div>
            </td>
            <td>
                <figure>
                    <img src="<?php echo $immagine;?>" alt="cover" />
                    <div class="firma"><b>Dott.ssa Fabrizia Minciullo</b> - Dietista e Biologa nutrizionista</div>
                </figure>
            </td>
        </tr>
    </table>
<?php endif;?>
</body>
</html> 


[Chandler]

Ah ok, non avevo capito dovessero essere due tabelle distinte, ma due celle della stessa tabella.
Ad ogni modo ho modificato la pagina come hai detto e questo è il risultato:

Codice:

<?php
error_reporting(E_ALL);

// form per l'inserimento immagine
define('UPLOAD_DIR', './uploads/');

$immagine = '';
if(isset($_FILES['upload']))
{
    $file = $_FILES['upload'];
    if($file['error'] == UPLOAD_ERR_OK and is_uploaded_file($file['tmp_name']))
    {
        move_uploaded_file($file['tmp_name'], UPLOAD_DIR.$file['name']);
        $immagine = UPLOAD_DIR.$file['name'];
    }
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="screen.css" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300" rel="stylesheet" type="text/css" />
</head>
<body>
<?php if (isset($_POST['posizione']) && $_POST['posizione'] == 1) : ?>
    <table border="0">
        <tr>
            <td>
                <figure>
                    <img src="<?php echo $immagine;?>" alt="cover" />
                    <div class="firma"><b>Dott.ssa Fabrizia Minciullo</b> - Dietista e Biologa nutrizionista</div>
                </figure>
            </td>
            <td>
                <div class="teaser-details">
                    <h3><?php echo htmlspecialchars($_POST['titoletto']);?></h3>
                    <h5><?php echo htmlspecialchars($_POST['titolo']);?></h5>
                    <div class="container">
                        <p><?php echo htmlspecialchars($_POST['testo']);?></p>
                    </div>
                </div>
            </td>
        </tr>
    </table>
<?php else : ?>
    <table border="0">
        <tr>
            <td width="200">
                <div class="teaser-details">
                    <h3><?php echo htmlspecialchars($_POST['titoletto']);?></h3>
                    <h5><?php echo htmlspecialchars($_POST['titolo']);?></h5>
                    <div class="container">
                        <p><?php echo htmlspecialchars($_POST['testo']);?></p>
                    </div>
                </div>
            </td>
            <td width="1000">
                <figure>
                    <img src="<?php echo $immagine;?>" alt="cover" />
                    <div class="firma"><b>Dott.ssa Fabrizia Minciullo</b> - Dietista e Biologa nutrizionista</div>
                </figure>
            </td>
        </tr>
    </table>
<?php endif;?>
</body>
</html>

mentre questo è il css (sicuramente sbagliato):

Codice:

/*!
*  Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
*  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
body{
    margin:0;
    font-size:13px;
    line-height:1.231;
    background:#F7F7F5}
body,button,input,select,textarea{
    font-family:sans-serif;
    color:#222}
b,strong{font-weight:bold}
img{
    border:0;
    -ms-interpolation-mode:bicubic;
    vertical-align:middle;
    display:block}
textarea{
    overflow:auto;
    vertical-align:top;
    resize:vertical}
.greyBg{background-color:#F7F7F5}
html{-webkit-font-smoothing:antialiased}
html,body{margin:0;padding:0}
body{font-family:"Open Sans",sans-serif}
h1{
    font-size:44px;
    line-height:44px;
    color:#4e4e4e;
    font-weight:300;
    margin:0;
    padding:0}
p{
    color:#4e4e4e;
    font-size:16px;
    line-height:1.7;
    font-weight:200}
ul{margin:0;padding:0}
ul li{
    margin:0;
    padding:0;
    list-style-type:none}
.header{
    min-height:150px;
    position:relative;
    overflow:hidden;
    height:600px}
header{
    z-index:501;
    font-family:"Open Sans",sans-serif;
    position:fixed;
    top:40px}
figure{
    margin:0;
    width:70%;
    overflow:hidden;
    position:relative;
    max-height:470px;
    max-width:900px}
.teaser img{
    width:auto\9;
    height:auto;
    max-width:100%;
    width:100%;
    vertical-align:middle;
    border:0;
    -ms-interpolation-mode:bicubic}
.teaser .teaser-details h3{
    font-size:20px;
    margin:0px 0px 3px 0px;
    color:#4e4e4e;
    font-weight:lighter}
.teaser .teaser-details h5{
    font-size:23px;
    margin:0px;
    font-weight:bold;
    color:#4e4e4e}
.teaser.left figure:after{
    right:-1px;
    top:50%;
    border:solid transparent;
    content:" ";
    height:0;
    width:0;
    position:absolute;
    pointer-events:none;
    border-color:rgba(136,183,213,0);
    border-right-color:#F7F7F5;
    border-width:20px;
    margin-top:-20px;
    z-index:100}
.teaser.right figure{
    float:right;
    margin:2% 0 0 0%;
    right:0}
.teaser.right figure:after{
    left:-1px;
    top:30%;
    border:solid transparent;
    content:" ";
    height:0;
    width:0;
    position:absolute;
    pointer-events:none;
    border-color:rgba(136,183,213,0);
    border-left-color:#F7F7F5;
    border-width:20px;
    margin-top:-20px;
    z-index:100}
.teaser.right .teaser-details{
    text-align:right;
    padding-top:3%;
    width:26%;
    float:right;
    margin-right:25px}
.teaser.square{width:70%}
.teaser.square figure{
    width:60%;
    max-width:470px}
.teaser.square figure a:after{display:block;
content:''}
.teaser.square figure a{max-width:500px}
.teaser.square.left{float:left;margin-left:10%}
.teaser.square.left figure a{float:right}
.teaser.square.right{float:right;margin-right:10%}
.teaser.square.right figure a{float:left}
.teaser.square .teaser-details{width:35%}
.firma{color:#666;margin-top:10px}
/*# sourceMappingURL=screen.css.map */

attualmente, con queste impostazioni, si sono perse le formattazioni di titolo e titoletto e la freccia tra testo ed immagine.
Ho settato la larghezza della cella dell'immagine a 1000 px, ma non so se questa cosa risolve il "ridimensionamento/adattamento" corretto delle immagini, ma più che alto mi sa che le taglia spudoratamente (qualora fossero immagini più larghe di 1000 px)

[Mattia]

Ho inserito due tabelle, ma ne esce solo una alla volta (quella con l'immagine a sinistra o quella con l'immagine a destra).
Devi inserire la larghezza delle celle anche nella prima tabella.
Nel CSS devi togliere tutti i ".teaser" e partire dal selettore successivo. Per esempio, ".teaser .teaser-details h3" diventa ".teaser-details h3".

[Chandler]

e nel caso dei ".teaser.right" e ".teaser.left"?

io avrei fatto così, dimi se è giusto:

Codice:

/*!
*  Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
*  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
body{
    margin:0;
    font-size:13px;
    line-height:1.231;
    background:#F7F7F5}
body,button,input,select,textarea{
    font-family:sans-serif;
    color:#222}
b,strong{font-weight:bold}
img{
    border:0;
    -ms-interpolation-mode:bicubic;
    vertical-align:middle;
    display:block}
textarea{
    overflow:auto;
    vertical-align:top;
    resize:vertical}
.greyBg{background-color:#F7F7F5}
html{-webkit-font-smoothing:antialiased}
html,body{margin:0;padding:0}
body{font-family:"Open Sans",sans-serif}
h1{
    font-size:44px;
    line-height:44px;
    color:#4e4e4e;
    font-weight:300;
    margin:0;
    padding:0}
p{
    color:#4e4e4e;
    font-size:16px;
    line-height:1.7;
    font-weight:200}
ul{margin:0;padding:0}
ul li{
    margin:0;
    padding:0;
    list-style-type:none}
.header{
    min-height:150px;
    position:relative;
    overflow:hidden;
    height:600px}
header{
    z-index:501;
    font-family:"Open Sans",sans-serif;
    position:fixed;
    top:40px}
figure{
    margin:0;
    width:70%;
    overflow:hidden;
    position:relative;
    max-height:470px;
    max-width:900px}
img{
    width:auto\9;
    height:auto;
    max-width:100%;
    width:100%;
    vertical-align:middle;
    border:0;
    -ms-interpolation-mode:bicubic}
.teaser-details h3{
    font-size:20px;
    margin:0px 0px 3px 0px;
    color:#4e4e4e;
    font-weight:lighter}
.teaser-details h5{
    font-size:23px;
    margin:0px;
    font-weight:bold;
    color:#4e4e4e}
.left figure:after{
    right:-1px;
    top:50%;
    border:solid transparent;
    content:" ";
    height:0;
    width:0;
    position:absolute;
    pointer-events:none;
    border-color:rgba(136,183,213,0);
    border-right-color:#F7F7F5;
    border-width:20px;
    margin-top:-20px;
    z-index:100}
.right figure{
    float:right;
    margin:2% 0 0 0%;
    right:0}
.right figure:after{
    left:-1px;
    top:30%;
    border:solid transparent;
    content:" ";
    height:0;
    width:0;
    position:absolute;
    pointer-events:none;
    border-color:rgba(136,183,213,0);
    border-left-color:#F7F7F5;
    border-width:20px;
    margin-top:-20px;
    z-index:100}
.right .teaser-details{
    text-align:right;
    padding-top:3%;
    width:26%;
    float:right;
    margin-right:25px}
.square{width:70%}
.square figure{
    width:60%;
    max-width:470px}
.square figure a:after{display:block;
content:''}
.square figure a{max-width:500px}
.square.left{float:left;margin-left:10%}
.square.left figure a{float:right}
.square.right{float:right;margin-right:10%}
.square.right figure a{float:left}
.square .teaser-details{width:35%}
.firma{color:#666;margin-top:10px}
/*# sourceMappingURL=screen.css.map */

ovviamente manca ancora la freccia e il tutto andrebbe centrato...

[Mattia]

Prova ad assegnare alla prima tabella la classe "left" e alla seconda la classe "right".