XHTMLforum - Problem Mobile wird anders angezeigt!

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Problem Mobile wird anders angezeigt! (http://xhtmlforum.de/showthread.php?t=70157)

Problem Mobile wird anders angezeigt!

Guten Tag,

ich habe ein Problem meine Webseite wird am Computer richtig angezeigt nur auf mobilen Endgeräten nicht da ist der header und das Bild verutscht weiß einer von euch voran das liegen könnte ? Ein Bild ist im Anhang.

Code

Code:

body{

        background-image:url(wood.jpg);

        font-family:Arial, Helvetica, sans-serif;

}



#seite{

        margin-top:-20px;

        width:600px;

        height:800px;

        border:thin 2px;

        background-color:#fff;

        margin:0 auto;

        box-shadow:2px 2px 2px black;

        word-wrap:break-word;



}



#header{

        background-image:url(logo.png); background-repeat:no-repeat;

        width:580px;

        height:80px;

        margin-top:-800px;

        text-align:right;

        margin-left:34.5%;

        padding-right:20px;

        text-shadow:2px 2px 2px #666666;

        padding-top:10px;



}



        



#navi{

        background-image:url(navs.jpg);

        width:600px;

        height:70px;

        margin-top:10px;

        margin:0 auto;

        box-shadow:0px 2px 2px #666666;

        }



/*---Navigation Link---*/        

ul {

        list-style-type: none;

        padding:0;

        margin:0;

        padding-top:25px;

        text-align:center;

        color:#fff;

        text-shadow:4px 4px 4px #DAA520;

        

}





li {

        display: inline;

        margin-left:10px;

        font-size:18px;

        color:#fff;

        padding-right:10px;

}



a:link {

        text-decoration:none;

        color:#fff;

}



a:hover {

        text-decoration:underline;

        color:white;



}



a:visited{

        text-decoration:none;

        color:#FFF;

}



a:active{

        text-decoration:none;

}



p{

        padding-top:20px;

        padding-left:20px;

        padding-right:20px;

        word-wrap:break-word;

}



h1{

        text-align:center;

        padding-top:220px;

        text-shadow:2px 2px 2px #666666;

}



#facebook{

        background-repeat:no-repeat;

        margin-left:-5px;

        width:100px;

        height:100px;

        position:fixed;

        

}



#ich{

        width:200px;

        height:293px;

        background-image:url(ich.jpg); background-repeat:no-repeat;

        margin-left:670px;

        margin-top:300px;

        box-shadow:2px 2px 2px #666666;

}



#footer{

        width:600px;

        height:30px;

        font-size:12px;

        background-color:white;

        margin:0 auto;

        margin-top:10px;

        padding-top:20px;

}

Vielen dank

Es liegt am Margin. Woran auch sonst? :)

Noch drei Hinweise zu später Stunde:
a) Dreh dein Handy beim Foto schießen demnächst richtig herum ;)
b) Sowohl iPad als auch OSX besitzen die Möglichkeit Screenshots zu machen ;)
c) Lass mich nicht die URL zu deiner Seite nicht aus einem Bild rausfrickeln. :D

hey :)

Danke ich finde keinen Fehler beim Margin :?

Und das Bild muss beim verschicken gedreht worden sein :lol:

Das Problem ist sobald ist das mit margin fürs Ipad/handy anpasse stimmt es auf dem PC wiederum nicht :/

Hallo,

es gibt leider nicht eine oder zwei Schräubchen, an denen du drehen kannst um dein Problem zu beheben. Das liegt zudem an anderer Stelle, als du es vermutest, nämlich:

1. Dir fehlt das grundsätzliche Wissen über HTML5 / CSS 3
2. Du gehörst zu den Generation Tabellenlayout, die volle Kontrolle darüber haben will, wie die Seite beim Besucher ankommt und ihm entsprechend Vorschriften machen will.

So wird deine Seite auch nur in deinem Browser bei deiner Bildschirmgröße als Vollbild richtig angezeigt. Sobald du das Fenster verkleinerst oder einen anderen Browser benutzt ist es schon Essig. Solche einfachen Überprüfungen sollten bei der Erstellung einer Seite eigentlich Standard sein.

Also:
1. Grundlagen lernen und verstehen
2. Den HTML-Text semantisch korrekt erstellen
3. Hilfen zur Anzeige mittels CSS3 anbieten

Oder jemanden ranlassen der das kann.

Gruss

MrMurphy

hey :)

Danke für deine Antwort ja ich habe mir schon ein Buch über Html 5 und Css3 bestellt derzeitig mache ich eine Ausbildung als Screendesigner wo ich dies alles noch lernen werde derzeit habe ich mir das alles selber beigebracht.