Problema Layout Compatibilità

danlupo · 2009-08-02T22:34:04+0200

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

sulla stessa macchina con IE8 ottengo questo risultato:

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

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

IE8

Safari (Con un'altezza molto inferiore al richiesto)

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

WpStyle · 2009-08-02T22:52:23+0200

nel css metterei

Codice:

margin:0 auto;
text-align: center;

sia su body che su container

poi come larghezza invece di width:1280px metterei 900px

danlupo · 2009-08-03T08:21:31+0200

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 · 2009-08-03T10:11:41+0200

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 · 2009-08-03T10:32:13+0200

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 · 2009-08-03T19:19:02+0200

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

borgo italia · 2009-08-03T21:19:21+0200

Grazie a tutti e buon lavoro

...lavoro? ora è ora di vacanze:fonzie:

Cerca

Cerca

Problema Layout Compatibilità

danlupo

Utente Attivo

WpStyle

Utente Attivo

danlupo

Utente Attivo

borgo italia

Super Moderatore

borgo italia

Super Moderatore

danlupo

Utente Attivo

borgo italia

Super Moderatore

Discussioni simili