• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Texte verschieben sich auf dem Smartphone

Basti15517

Neues Mitglied
Hallo eine Kurze frage, ich habe eine Seite geschrieben wie auch richtig auf dem Laptop unter, Internet Explorer, Opera und Firefox angezeigt wird.
wenn ich jetzt mit dem Smartphone z.B. iPhone auf die Seite gehe verschieben sich immer die Texte aber auch nur einige.


Kann mir jemand sagen warum und wie es besser geht.
Für weitere Tipps wer ich natürlich auch Dankbar falls jemanden noch etwas auffällt.

es geht Spezial um diesen Code:

Code:
<div id="header_inhalt">
     <p align="left">
            <b>
            Sie suchen einen vertrauensvollen und zuverlässigen Ansprechpartner,</br> 
            wenn es um die Wartung oder die Reparatur Ihres Autos geht?</br> 
            Dann sind Sie bei uns genau richtig!</br> 
              </b>
        </p>
    </div>


#header_inhalt
{
position:absolute;
font-size: 18px;
color:#585858;
top:0px;
margin-top:485px;
margin-left:200px;
text-align: center;            
}

Code:
<body>

<div id="wrapper">

    
    <div id="background_pic">
    <img src="bilder/background.jpg" width="961" height="1339" alt="Bildtext"/>
    </div>
    
                                                                                                                <!-- Header -->
    

    <div id="telefon">
    
            <b>033666 - 33500</b>             
    </div>
    
    
    <div id="email_kontakt">
     <p align="left">
            <b>
            <font color="#000000"><font size="5"><b>Kontakt</b></font><br></font>             
            Haben Sie fragen</br> 
    
            </b>            
        </p>
    </div>
    
    <a id="email_kontakt_button" href="kontakt.html"></a>
        
 <div id="header_inhalt">
     <p align="left">
            <b>
            Sie suchen einen vertrauensvollen und zuverlässigen Ansprechpartner,</br> 

               </b>
        </p>
    </div>
    
    <div id="Udo_text">
     <p align="left">
            <b>
            <u>Udo</u>
              </b>
        </p>
    </div>
    

    
                                                                                                            <!-- content --> 
    
     <a id="reperatur_service" href="leistung"></a>

    
    <div id="reparatur_service_1">
     <p align="left">
            
            In unserer KFZ-Werkstatt</br> 
    
        </p>
    </div>
    
    <a id="tuev_service" href="tuev_service"></a>
    
    <div id="tuev_service_1">
     <p align="left">
        
            Sie Brauchen TÜV und wollen</br> 
          
        </p>
    </div>
    
     <a id="auto_an_und_verkauf" href="http://mobile.de/" target="_blank"></a>
    
    <div id="auto_an_und_verkauf_1">
     <p align="left">
        
            
            bei ihnen melden.</br>
         
        </p>
    </div>
                                                                                                                 <!-- navigation -->  

                                                                                                           
    <a id="home" href="index.html"></a>
    <a id="leistung" href="leistung.html"></a>
    <a id="tuev_service_menue" href="tuev_service.html"></a>
    <a id="gebrauchtwagen" href="http://mobile.de/" target="_blank"></a>
    <a id="kontakt_menue" href="kontakt.html"></a>
  
                                                                                                            <!-- footer --> 
                                                                                                                
    <a id="aktuelle_gebrauchtwagen" href="http://mobile.de/" target="_blank" style="text-decoration:none"> 
     <p align="left">
            
            <b>Aktuelle Gebrauchtwagen</b>             
    </a>
  
         
        </p>
    </div>
    
    <a id="impressum" href="Impressum.html" style="text-decoration:none"> 
     <p align="left">
            
            <b>Impressum</b>             
    </a>

 </div>    
</body>
</html>

Code:
@charset "utf-8";
body
{
 margin:0px auto;
 text-align: left;
 min-width:1339px;
 background-color:#0e0e0e

}


#wrapper
{
position:absolute
float:left;
display: block;
width:1339px; 
margin:0 auto;
}

/* Header */                                                                                            /* Header */

#telefon
{
position:absolute;
float:left;
font-size: 18px;
color:#000;
top:0px;
margin-top:25px;
margin-left:1010px;
text-align:center;            
}

a#home
{
position:absolute;
float:left;
background:url(bilder/hover/home.jpg);
top:0px;
width:61px;
height:31px;
margin-top:66px;
margin-left:580px;
text-align: center;
}

#home:hover
{
background-position: 0px 31px;
}

a#leistung
{
position:absolute;
float:left;
background:url(bilder/hover/leistung.jpg);
top:0px;
width:89px;
height:31px;
margin-top:65px;
margin-left:650px;
text-align: center;
}

#leistung:hover
{
background-position: 0px 29px;
}

a#tuev_service_menue
{
position:absolute;
float:left;
background:url(bilder/hover/tuev.jpg);
top:0px;
width:115px;
height:31px;
margin-top:65px;
margin-left:750px;
text-align: center;
}

#tuev_service_menue:hover
{
background-position: 0px 29px;
}

a#gebrauchtwagen
{
position:absolute;
float:left;
background:url(bilder/hover/gebrauchtwagen.jpg);
top:0px;
width:161px;
height:31px;
margin-top:65px;
margin-left:875px;
text-align: center;
}

#gebrauchtwagen:hover
{
background-position: 0px 29px;
}

a#kontakt_menue
{
position:absolute;
float:left;
background:url(bilder/hover/kontakt.jpg);
top:0px;
width:89px;
height:31px;
margin-top:65px;
margin-left:1040px;
text-align: center;
}

#kontakt_menue:hover
{
background-position: 0px 29px;
}



#background_pic
{
text-align: center;
margin-top:20px;
margin-bottom:20px;
}

#email_kontakt
{
position:absolute;
float:left;
font-size: 16px;
color:#585858;
top:0px;
margin-top:400px;
margin-left:920px;
text-align: center;            
}

a#email_kontakt_button
{
position:absolute;
float:left;
background:url(bilder/hover/email_kontakt_hover.jpg);
top:0px;
width:224px;
height:48.5px;
margin-top:525px;
margin-left:835px;
text-align: center;
}
#email_kontakt_button:hover
{
background-position: 0px 48.5px;
}

#header_inhalt
{
position:absolute;
font-size: 18px;
color:#585858;
top:0px;
margin-top:485px;
margin-left:200px;
text-align: center;            
}

#Mertens_Eckard_KFZ_SERVIE
{
position:absolute;
float:left;
font-size: 18px;
color:#585858;
top:0px;
margin-top:550px;
margin-left:200px;
text-align: center;            
}

/* Web Inhalt */                                                                                            /* Web Inhalt */

a#reperatur_service
{
position:absolute;
float:left;
background:url(bilder/hover/reperatur_service_hover.jpg);
top:0px;
width:300px;
height:45px;
margin-top:640px;
margin-left:190px;
text-align: center;
}
#reperatur_service:hover
{
background-position: 0px 45px;
}

#reparatur_service_1
{
position:absolute;
float:left;
font-size: 18px;
line-height:22px;
color:#585858;
top:0px;
margin-top:848px;
margin-left:225px;
text-align: center;            
}

a#tuev_service
{
position:absolute;
float:left;
background:url(bilder/hover/tuev_service_hover.jpg);
top:0px;
width:300px;
height:45px;
margin-top:635px;
margin-left:455px;
text-align: center;
}
#tuev_service:hover
{
background-position: 0px 45px;
}

#tuev_service_1
{
position:absolute;
float:left;
font-size: 18px;
line-height:22px;
color:#585858;
top:0px;
margin-top:848px;
margin-left:530px;
text-align: center;            
}

a#auto_an_und_verkauf
{
position:absolute;
float:left;
background:url(bilder/hover/auto_an_und_verkauf_hover.jpg);
top:0px;
width:300px;
height:45px;
margin-top:635px;
margin-left:820px;
text-align: center;
}
#auto_an_und_verkauf:hover
{
background-position: 0px 45px;
}

#auto_an_und_verkauf_1
{
position:absolute;
font-size: 18px;
line-height:22px;
color:#585858;
top:0px;
margin-top:848px;
margin-left:845px;
text-align: center;            
}

/* Web footer */                                                                                        /* Web footer */

a#aktuelle_gebrauchtwagen
{
position:absolute;
float:left;
font-size: 30px;
line-height:22px;
color:#585858;
top:0px;
margin-top:1116px;
margin-left:230px;
text-align: center;            
}    

#aktuelle_gebrauchtwagen:hover
{
position:absolute;
float:left;
font-size: 24px;
line-height:22px;
color:#000;
top:0px;
margin-top:1116px;
margin-left:230px;
text-align: center;            
}

#dandb
{
    position: absolute;
    float: left;
    font-size: 14px;
    line-height: 22px;
    color: #666;
    top: 0px;
    margin-top: 1300px;
    margin-left: 820px;
    text-align: center;
}
    
#impressum
{
    position: absolute;
    float: left;
    font-size: 16px;
    color: #666;
    top: 0px;
    margin-top: 1315px;
    margin-left: 600px;
    text-align: center;
}    
#impressum:hover
{
position:absolute;
float:left;
font-size: 16px;
color:#000;
top:0px;
margin-top: 1315px;
margin-left: 600px;
text-align: center;            
}
 
Werbung:
Ich habe den W3C Validator durchlaufen lassen aber, ich verstehe die Fehler nicht die er mir anzeigt...könntest du mir noch mal weiter Helfen.

hier die Fehleranalyse:

end tag for element "br" which is not open (was soll mir das sagen)
<strong>Impressum</strong></br> </br>

end tag for "img" omitted, but OMITTAG NO was specified
<img src="bilder/impressum.jpg" width="961" height="1339" alt="Bildtext">


document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>")inside an inline element (such as "<a>", "<span>", or "<font>").

end tag for "p" omitted, but OMITTAG NO was specified
</a>

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

Zeitgemäßes HTML und der W3C Validator werden dir hier eine Hilfe sein.

Nils aka XraYSoLo
 
Werbung:
1. Breaks schreibt man <br/>, nicht </br>

2. Dein Doctype, den ich nicht kenne, verlangt offensichtlich schließende Tags, daher <img src="..." />

3. <p> (Block) darf nicht in <a> (Inline) verschachtelt werden. Schon 2mal nicht über kreuz (ala <a><p> </a></p>)
 
Zurück
Oben