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

Seite verschiebt sich in den unterschiedlichen Browsern

Basti15517

Neues Mitglied
Hallo meine Seite Lars Pohland - Zander Guiding - Boddenangeln auf Zander verschiebt sich im Firefox aber in Opera und im IE ist sie pass genau, kann man da was tun?

und gibt es eine Möglichkeit die seite fürs Handy zu optimieren denn gehe ich mit dem Handy IPhone auf die Seite wird der Iframe von den News total langgezogen.

HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>Lars Pohland - Zander Guiding - Boddenangeln auf Zander</title>
<meta name="description" content="Lars Pohland, LarsenFishing, Meeresangeln in der Ostsee, Guiding Touren, Angeln im Bodden, in der Ostsee und in der Nordsee, Fishingequipment, Unterk&uuml;nfte, Videos und Bildergalerien, Angebote, Kontakt und News"/>
<meta name="keywords" content="lars, pohland, larsenfishing, meeresangeln, ostsee, guide, tour, hecht, dorsch, lachs, heilbutt, pollock, leng, kveite, fishing, angeln, equipment, unterkunft"/>
<meta name="author" content="Sebastian Ackermann"/>
<meta name="publisher" content="larsenfishing.com"/>
<meta name="copyright" content="copyright 2008-2012 by larsenfishing.com"/>
<meta name="robots" content="index, follow, all, noodp"/>
<meta name="revisit" content="2 days"/>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="script-type" content="text/javascript"/>
<meta http-equiv="style-type" content="text/css"/>
<meta http-equiv="window-target" content="_top"/>
<meta http-equiv="expires" content="0"/>

    <link href="style.css" type="text/css" rel="stylesheet" />

    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
</head>

<body>

    <div id="header">
</div>

    <div id="fussleiste">
</div>

    <div id="bild_1">
    <p><strong></strong><br /><a href="img/bild_1_groß.png" rel="lightbox"><img src="img/bild_1.jpg" width="222" height="140" alt="" /></a></p>
</div>

    <div id="bild_2">
    <p><strong></strong><br /><a href="img/bild_2_groß.png" rel="lightbox"><img src="img/bild_2.jpg" width="222" height="140" alt="" /></a></p>
</div>

    <div id="bild_3">
    <p><strong></strong><br /><a href="img/bild_3_groß.png" rel="lightbox"><img src="img/bild_3.jpg" width="222" height="140" alt="" /></a></p>
</div>

    <div id="bild_4">
    <p><strong></strong><br /><a href="img/bild_4_groß.png" rel="lightbox"><img src="img/bild_4.gif" width="222" height="140" alt="" /></a></p>
</div>

    <div id="bild_5">
    <p><strong></strong><br /><a href="img/bild_5_groß.png" rel="lightbox"><img src="img/bild_5.jpg" width="222" height="140" alt="" /></a></p>
</div>

    <div id="bild_6">
    <p><strong></strong><br /><a href="img/bild_6_groß.png" rel="lightbox"><img src="img/bild_6.gif" width="137" height="175" alt="" /></a></p>
</div>

<div id="kontaktformular">
<form action="kontakt.php" method="post">
                <h3> Sie haben Fragen? Schreiben Sie uns doch!</h3>
                Name: <input name="name" size="50">
                <br><br/>
                E-Mail: <input name="email" size="50">
                <br><br/>
                Betreff: <input name="betreff" size="50">
                <br><br/>
                Ihre Nachricht: <br />
                <textarea name="text" cols="56s" rows="18"></textarea><br />
                <input name="submit" type="submit" value="absenden">
                <div style="float:right;font-size: 50%; text-align: right">
                <div style="clear:both;"></div>
</form>
</div>

<div id="iframe_1">
<iframe src="http://basti15517.bplaced.net/" name="Larsenfishing News" scrolling="Auto" frameborder="800px" height="470" width="600">

            <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:</p>

</iframe>
</div>

    <div id="news_text">
          <h2>Aktuelle news und Fangmeldung hier...</h2>
</div>

    <a id="button_impressum" href="impressum.html"></a>


    <a id="menue_button_home" href="index.html"></a>


    <a id="menue_button_anfahrt" href="anfahrt.html"></a>


    <a id="menue_button_news" href="news.html"></a>


    <a id="menue_button_bilder" href="bilder.html"></a>


    <a id="menue_button_kontakt" href="kontakt.html"></a>

    <a id="menue_button_hotline" href="kontakt.html"></a>

</body>
</html>


CSS:
Code:
body
{
 margin:0px auto;
 text-align: center;
 min-width:1400px;

}
#header
{
        width: 1400px;
        height: 514px;
        background: url(img/header.gif);
        margin: 0px auto;
        text-align: center;
}

#fussleiste
{

    width: 1400px;
    height: 132px;
    background: url(img/fussleiste.jpg)no-repeat;
    position: relative;
    top: 790px;
    right: 0px;
    margin: 0px auto;
    text-align: center

}

#bild_1
{
    top: -120px;
    right: 480px;
    position: relative;
    width: 222px ;
    height: 132px;
    margin: 0px auto;
    text-align: center;

}

#bild_2
{
    top: -268px;
    right: 200px;
    position: relative;
    width: 222px ;
    height: 132px;
    margin: 0px auto;
    text-align: center;

}

#bild_3
{
    top: -415px;
    left: 200px;
    position: relative;
    width: 222px ;
    height: 132px;
    margin: 0px auto;
    text-align: center;

}

#bild_4
{
    top: -562px;
    left: 500px;
    position: relative;
    width: 222px ;
    height: 132px;
    margin: 0px auto;
    text-align: center;

}

#bild_5
{
    top: -420px;
    left: 17px;
    position: relative;
    width: 201px ;
    height: 129px;
    margin: 0px auto;
    text-align: center;

}

#bild_6
{
    top: -350px;
    left: 10px;
    position: relative;
    width: 116px ;
    height: 164px;
    margin: 0px auto;
    text-align: center;

}

#kontaktformular
{
    width: 500px ;
    height: 300px;
    position: relative;
    top: -830px;
    left: 355px;
    margin: 0px auto;
    text-align: center
}

#news_text h2
{
 text-align: justify;
 position: relative;
 top: -720px;
 right: 700px;

}


#iframe_1 {
 text-align: justify;
 width: 200px;
 height: 200px;
 background: #CCCCCC;
 position: relative;
 top: -450px;
right: 800px;

}

 .abstand_iframe{
 padding: 10px;
 }



 .scrollbereich {
 overflow: auto;
 width: 180px;
 height: 180px;
 }

a#button_impressum
{
display: block;
width: 170px;
height: 35px;
background  :url(img/impressum.jpg)no-repeat;
position: relative;
top: -100px;
right: 370px;
margin: 0px auto;
text-align: center;
}

#button_impressum:hover
{
background-position: 0px -35px;
}

a#menue_button_home
{
display: block;
width: 60px;
height: 22px;
background  :url(img/home.jpg)no-repeat;
position: relative;
top: -1520px;
right: 150px;
margin: 0px auto;
text-align: center;
}

#menue_button_home:hover
{
background-position: 0px -22px;
}

a#menue_button_anfahrt
{
float: left;
width: 110px;
height: 22px;
background  :url(img/anfahrt.jpg)no-repeat;
position: relative;
top: -1750px;
left: 40px;
margin: 0px auto;
text-align: center;
}

#menue_button_anfahrt:hover
{
background-position: 0px -22px;
}

a#menue_button_news
{
float: left;
width: 80px;
height: 22px;
background  :url(img/news.jpg)no-repeat;
position: relative;
top: -1750px;
left: 40px;
margin: 0px auto;
text-align: center;

}
#menue_button_news:hover
{
background-position: 0px -22px;
}

a#menue_button_bilder
{
float: left;
width: 100px;
height: 22px;
background  :url(img/bilder.jpg)no-repeat;
position: relative;
top: -1750px;
left: 40px;
margin: 0px auto;
text-align: center;

}

#menue_button_bilder:hover
{
background-position: 0px -22px;
}

a#menue_button_kontakt
{
float: left;
width: 110px;
height: 22px;
background  :url(img/kontakt.jpg)no-repeat;
position: relative;
top: -1750px;
left: 40px;
margin: 0px auto;
text-align: center;

}
#menue_button_kontakt:hover
{
background-position: 0px -22px;
}

a#menue_button_hotline
{
float: left;
width: 355px;
height: 40px;
background  :url(img/hotline.jpg)no-repeat;
position: relative;
top: -1100px;
right: 650px;
margin: 0px auto;
text-align: center;

}
#menue_button_hotline:hover
{
background-position: 0px -40px;
}
 
Werbung:
Verzichte auf die vielen relativen Positionierungen, die bringen die Browserengines total durcheinander. Selbst Opera und IE zeigen es vermutlich nur durch Glück so an wie Du es erwartest.
 
Hallo,

also ich habe gerade die woche 4 Seiten optimiert für Mobile, darunter auch ältere von mir.
Deine wird so nie was, da einfach die grundlogik/schema fehlt wie @threadi schon schrieb mit der positionierung.

Selbst beim IE wird das bei mir nicht aktzeptabel angezeigt und die hälfte fehlt.

Hau wech die positionssuppe.

Cheffchen
 
Werbung:
vielen dank erst mal für eure Antwort
ich hatte es mir schon fast so gedacht das es an der Positionierung liegt aber wie soll ich es ändern ?
 
Du müsstest es ohne Positionierung (keine relative, keine absolute, keine fixierte) machen. Abstände mit margin festlegen (keine zu großen und auf negative verzichten), nebeneinander liegende Elemente mit float bestimmen.
 
Du müsstest es ohne Positionierung (keine relative, keine absolute, keine fixierte) machen. Abstände mit margin festlegen (keine zu großen und auf negative verzichten), nebeneinander liegende Elemente mit float bestimmen.
Danke erst mal für deine Schnelle antwort und das du dir die zeit nimmst,

das wer jetzt mein alter code:
display: block;
width: 170px;
height: 35px;
background :url(img/impressum.jpg)no-repeat;
position: relative;
top: -100px;
right: 370px;
margin: 0px auto;
text-align: center;

wie müsste jetzt der neue aussehen, nur das ich mal ein bsp. habe.

beste grüß
Basti15517
 
Werbung:
Zurück
Oben