Problema Layout Compatibilità

danlupo

Utente Attivo
13 Lug 2009
73
0
0
Salve, ho un serio (per me) problema di css.
Ho due PC entrambi con risoluzione 1280x 1024. Uno monta un 17" con windows xp l'altro un 19" con windows vista non serviranno nulla come informazione ma è un quadro generale. :)

Il Risultato migliore (cioè quello ricercato ) lo ottengo sopra al pc con XP / 17" ed è questo

ffpc2.png


sulla stessa macchina con IE8 ottengo questo risultato:

ie8pc2.png


Provando il sito con l'altra macchina ottengo questi risultati:

FF 3.5 (molto simile ma con un'altezza inferiore)
ffpc1.png


IE8
ie8pc1.png


Safari (Con un'altezza molto inferiore al richiesto)
safaripql.png


Vi Allego il codice sia del CSS

Codice:
body, html
{
    margin:0;
    padding:0;
    font-size:16px;

    font-family: Viner Hand ITC;
}
div#container
{

    margin:0;
    padding:0;
    height:800px;
    width:1280px;
    border: none;

}
div#header
{
    margin:0;
    padding:0;
    width:1280px;
    height:100px;
background: url('../images/website/header.png') no-repeat;
    float:left;
    
    }

div#titolo
{
    margin:23px 0 22px 15px;
    width:500px;
    height:55px;
    padding:0;
    float:left;
}
div#header h1{padding:5px 0 0 15px; margin:0; font-family: Forte; font-weight:normal; font-size:48px; color:#f5f5f5; width:200px;}
div#menuo
{
    margin:74px 0 0 10px;
    padding:0;
    height:12px;
    width:370px;
    border-color:white;
    float:right;
}
div#menuo ul {margin:0 0 0 0; padding:0; list-style:none; background-color: transparent;}
div#menuo li,  div#menuo a  {margin:0 0 18px 0; padding:0 3px 0 0; background-color:transparent; color: #f5f5f5; display:inline; font-weight: 300; text-align:right; font-size: 14px; line-height:16px; font-family:'cooper black' }
 div#menuo a:hover {color: #FFCC00;}

div#navigation
{
    margin:0;
    padding:0 ;
    width:260px;
    height:680px;
    float:left;
    background-color:transparent;
    border-right: groove #003399;
}

div#menuv
{
    margin:35px 4px 0 6px;
    width:250px;
    height:315px;

}
div#menuv ul {margin:0 auto; padding:0; list-style:none; background-color: transparent;}
div#menuv li {margin:10px auto; padding:0; background-image: url('../images/website/mx.png'); color: #f5f5f5; height:50px; width:230px; text-align:center; line-height: 50px; font-size:28px; font-family:'cooper black'}
div#menuv a:hover {color: #FFCC00;}
div#gallery
{
    margin:80px 4px 10px 6px;
    width:240px;
    height:200px;
    z-index:1;
    padding:0;
    float:left;
    border: dashed;
    background-color: red;

}
div#gallery a
{
    cursor: default;
}
div#content
{
    margin:10px 5px 0 5px;
    padding: 10px 10px 0 10px;
    float:right;
    width: 980px;
    height:450px;
    background-color:transparent;
    overflow: auto;
border: groove #003399;

}

div#content h1{padding:0 10px 10px 270px; margin:0; font-family: Forte; font-weight:normal; font-size:36px; color:#000; width:auto; text-align:center; }
div#consiglio
{
    margin: 20px 0 0 80px;
    padding:0;
    height:175px;
    width:451px;
    float:left;
    z-index: 4;
    background-color: transparent;
}
div#logo
{
    margin:0 ;
    padding:55px 10px 0 0;
    float:right;
    width:200px;
    height:150px;
    z-index:4;
}
#footer
{
    clear:both;
    margin:0;
    padding:0;
    width:1280px;
    height:50px;
background-image: url('../images/website/header.png');
}
div#contatore
{
    margin:10px auto;
    padding:0;
    width: 185px;
    height:15px;
    float:right;
    background-color: transparent;    
}
div#contatore span
{
    margin:0 auto;
    padding:0;
    font-size:23px;
    font-style: italic;
    color:#f5f5f5;
    text-align:center;
    vertical-align: top;
    
}

div#menuv li, div#menuo li
{
    cursor: pointer;
}
p
{
    margin:0 auto;
    padding:0 10px 0 10px;
    font-family: rockwell;
    font-size:14px;
    color: #000;
    text-align: justify;
    font-weight: normal;
}
a
{
    color: #f5f5f5;
    text-decoration: none;
    font-size:28px;
}

Sia della Pagina PHP

PHP:
<?php
session_start();
include('include/header.inc');
include('scripts/php/counter.php');

?>
</head>
<body>
<div id="container">
    <div id="header">
                <div id="titolo">
            <img src="http://forum.mrwebmaster.it/images/website/title.png" alt="CookingHome" height="55px" width="585spx"/>
        </div>
        <div id="menuo">
            <ul>
                 <li>
                    <a href="http://forum.mrwebmaster.it/html-xhtml-css/index.php?content=chisiamo">
                        Chi Siamo</a>
                </li>
                <li>
                    <a href="http://forum.mrwebmaster.it/html-xhtml-css/index.php?content=dovesiamo">
                        Dove Siamo</a>
                </li>
                <li>
                    <a href="http://forum.mrwebmaster.it/html-xhtml-css/index.php?content=staff">
                        Lo Staff
                    </a>
                </li>
                <li>
                    <a href="http://forum.mrwebmaster.it/html-xhtml-css/index.php?content=contatti">
                        Contatti
                    </a>
                </li>
            </ul>
            </ul>
        </div>        
    </div>
    <div id="navigation">
        <div id="menuv">
            <ul>
                <li>
                    <a href="http://forum.mrwebmaster.it/html-xhtml-css/index.php">
                        Home
                    </a>
                </li>
                <li>
                    <a href="http://forum.mrwebmaster.it/html-xhtml-css/index.php?content=scuola">
                        La Scuola
                    </a>
                </li>
                <li>
                    <a href="http://forum.mrwebmaster.it/html-xhtml-css/index.php?content=menu">
                        I Menu
                    </a>
                </li>
                <li>
                    <a href="http://forum.mrwebmaster.it/html-xhtml-css/index.php?content=gallery">
                    Gallery
                    </a>
                </li>
                <li>
                    <a href="http://forum.mrwebmaster.it/html-xhtml-css/index.php?content=partners">
                    Partners
                    </a>
                </li>
                <li>
                    <a href="http://forum.mrwebmaster.it/html-xhtml-css/index.php?content=onweb">
                    OnWeb
                    </a>
                </li>
            </ul>
        </div>
        <div id="gallery">
            ciao
            <?php
            include('scripts/php/gallery.php');
           ?>
        </div>
    </div>
    <div id="content">
        <?php
if(@$_GET[content]!='')
{
switch (@$_GET[content])
{
    case 'scuola': echo "La Scuola"; 
    break;
case 'menu': echo "I Nostri Menu"; 
    break;
case 'gallery': echo "galleria Fotografia"; 
    break;
    case 'onweb': 


   
    break;
case 'partners': echo "I Nostri Partners"; 
    break;
case 'chisiamo': echo "About Us"; 
    break;
case 'dovesiamo': echo "Dove Siamo"; 
    break;
case 'staff': echo "Lo Staff"; 
    break;
case 'contatti': echo "Contattaci"; 
    break;
default: ('public/ita/home.php');
}

}
?> 
       
    </div>
    <div id="consiglio">
        <img src="http://forum.mrwebmaster.it/images/website/consiglio.png" alt="CookingHome Consiglia" height="175px" width="451px"/>
    </div>
    <div id="logo">
        <img src="http://forum.mrwebmaster.it/images/website/logox.png" alt="CookingHome Logo" height="150px" width="200px"/>
    </div>
    <div id="footer">
                <div id="contatore">
            <?php 
            echo "$html_result <span>Visite</span>";
            ?>
            
        </div>
    </div>
    
</div>

<?php
include('include/footer.inc');
?>

Grazie per l'aiuto:

Non so proprio come fare per farlo funzionare e devo ancora pensare al layout 1024 x 768 :dipser: :dipser: :dipser:

Daniele
 
Ultima modifica:

danlupo

Utente Attivo
13 Lug 2009
73
0
0
Grazie per la Risposta.

I Margini li avevo già provati ad impostare a 0 auto e non cambiava nulla.

Per quanto riguarda la larghezza, mi avevano chiesto un schermata completa!!
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
Per quanto riguarda la larghezza, mi avevano chiesto un schermata completa!!
se vuoi che si adatti a tutte le risoluzioni (goolgle analytics mi dice che il mio sito è visto con 30 tipi di monitor diversi) dovresti fare un layout elastico (molto rognoso a mio parere), il tutto senza considerare che i vari bw spesso interpretano margin e padding in modo diverso.


p.s.
non c'entra con i css, ma evita di includere file di questo tipo
include('include/header.inc');
possono essere pericolosi per la sicurezza
includi file .php
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
ciao, non so se ti può servire, ma ho trovato questo js

HTML:
<script>
<!--
if (window.screen.width == 800)
{
document.write("<link rel='stylsheet' type='text/css' href='800x600.css'>");
}
else if (window.screen.width == 1024)
{
document.write("<link rel='stylsheet' type='text/css' href='1024x768.css'>");
}
else
{
document.write("<link rel='stylsheet' type='text/css' href='else.css'>");
}
//-->
</script>
 

danlupo

Utente Attivo
13 Lug 2009
73
0
0
Ringrazio tutti per le risposte e per i consigli..
Per il CSS dato il poco codice ho rifatto tutto tenendo aperte una schermata di IE8 ed una di FF 3.5 ed utilizzando la formattazione condizionale (o come si chìama).

L'Header.inc l'avevo derivato dalla conoscenza di c++ e da alcuni testi che mi proponevano sempre header.inc e footer.inc.

Grazie a tutti e buon lavoro
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Problema con il layout HTML e CSS 3
S problema di layout HTML e CSS 5
L Problema dimensione layout WordPress 1
A Problema gestione layout con css HTML e CSS 11
F problema con layout fluido HTML e CSS 1
P Layout fisso 3 colonne, problema HTML e CSS 1
F problema tabella layout HTML e CSS 4
lupin3m problema con vista layout HTML e CSS 5
M Problema con Try Catch PHP 0
C problema seo + cerco esperto SEO e Posizionamento 1
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
T PROBLEMA CON SESSIONI PHP 3
A Problema, non so, di scale() o transform, oppure altro? HTML e CSS 0
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
I PROBLEMA: Sostituzione sito XAMPP E-Commerce 0
T problema data 30/11/-1 PHP 0
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Y Problema incolonnamento tabella PHP 7
S problema salvataggio immagini Photoshop 0
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
M Problema con controllo form in real time jQuery 6
D problema php mysql PHP 1
D problema php mysql PHP 1
M Problema Wi-Fi Linux Linux e Software 1
Z Problema di sincronizzazione PAYPAL con PHP PHP 1
Daniele_Carrara Problema Aperture Mailup Email Marketing 5
F PROBLEMA ACCESSO INSTAGRAM Discussioni Varie 2
R Problema connessione db PHP 7
M problema if PHP 2
G Problema con Get page PHP 4
N Problema passaggio variabili tra pagine PHP 4
P Problema con require once PHP 6
P Problema con i package Java 1
A Problema login con Safari PHP 14
F INDESIGN: problema esportazione esecutivo per la stampa con foto B/N Webdesign e Grafica 1
H problema carrello woocommerce PHP 2
S problema con css bootstrap3 HTML e CSS 4
M .load() problema con caricamenti dinamici di js Javascript 0
M Problema su query JOIN in tre tabelle PHP 0
S Problema esportazione tabelle Mysql in Excel PHP 0
G Problema ------- con Query PHP 1
G Problema con Query PHP 1

Discussioni simili