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.046
150
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.046
150
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
F Problema pulsante cerca record su access Database 0
I Sto progettando nuovi siti utilizzando bootstrap e devo dire funziona bene, l'unico problema e la maschera -moz- HTML e CSS 0
K Problema form update PHP 2
O problema con dvr dahua xvr5116 IP Cam e Videosorveglianza 0
S Problema nel ciclare un json Javascript 0
G Problema con Xampp Web Server 1
andrea barletta Problema con miniature comandi Photoshop 0
I problema con alice Posta Elettronica 0
K Problema Inner join PHP 1
F firefox problema http Linux e Software 0
N Problema con position absolute e overflow HTML e CSS 4
E Problema jquery Success jQuery 2
L Problema con inner join PHP 11
K [php] Problema con inner join PHP 4
E problema selezione sfumata Photoshop 2
K [PHP] Problema con variabili concatenate. PHP 1
A Problema filtro fluidifica Photoshop Photoshop 1
H Problema Bordi Scontorno Photoshop 1
O problema con query PHP 4
R Problema installazione Realtek WiFi USB rtl8821 Reti LAN e Wireless 1
I problema con 2 account Posta Elettronica 1
L problema collegamento file css con html HTML e CSS 1
Y Problema percorso file in rete PHP 1
N Problema SEO "L'URL non si trova su Google" SEO e Posizionamento 4
E Problema accesso a file con app sviluppata con MIT APP INVENTOR 2 Sviluppo app per Android 0
P Problema acquisizione clienti Webdesign e Grafica 1
F NetBeans problema creazione progetto Java Windows e Software 0
M Problema con Try Catch PHP 0
C problema seo + cerco esperto SEO e Posizionamento 11
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
R problema con else PHP 0
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

Discussioni simili