[HTML] Seite verschiebt sich komplett nach rechts...

Dieses Thema im Forum "Webentwicklung" wurde erstellt von GaYlORd, 27. Juli 2007 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 27. Juli 2007
    Seite verschiebt sich komplett nach rechts...

    Sers!

    Hab eine Seite, die auf css basiert.
    Also des layout.

    Im Opera schaut sie so aus wie sie ausseehn soll...
    aber im IE verschiebt die sich eben komplett anch rechts!(s.Bild)
    http://img502.imageshack.us/img502/8018/huion7.jpg
    {bild-down: http://img502.imageshack.us/img502/8018/huion7.jpg}

    Was ich geschrieben habe:

    index.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">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>asdasdasd</title>
     <link rel="stylesheet" href="style.css" type="text/css" /> 
     <!--[if IE]>
     <link rel="stylesheet" href="style_ie.css" type="text/css" /> 
     <![endif]-->
    </head>
    <body>
    <!-- Top -->
    <div id="top_line"></div>
    <div id="top_line2"></div>
    <div id="top_line3"></div>
    <div id="top_line4">gfdg</div>
    <div id="top_line5"></div>
    <div id="top_line6"></div>
    
    <div id="logo"></div>
    <!-- Navi -->
    <div id="navi">
    <div class="shop"><div class="pad">Shop</div></div>
    <div class="suche"><div class="pad">Art.-Nr.: <br /><form action="search.php" method="get">
     <input size="15" type="text" name="search" /><br />
     <input type="submit" value="Suchen" />
    </form></div></div>
    <div class="sub"><div class="pad"><a href="#">&Uuml;bersicht</a></div></div>
    
    <div class="navi"><div class="pad"><a href="#"><b>Messer</b></a></div></div>
    <div class="sub2"><div class="pad"><a href="#">Wurfmesser</a></div></div>
    <div class="sub2"><div class="pad"><a href="#">K&uuml;chenmesser</a></div></div>
    
    <div class="navi"><div class="pad"><a href="#">Outdoor</a></div></div>
    <div class="navi"><div class="pad"><a href="#">Zelte</a></div></div>
    <div class="navi"><div class="pad"><a href="#">Mess- und Optische Geräte</a></div></div>
    <div class="navi"><div class="pad"><a href="#">Dies und Das</a></div></div>
    </div>
    
    </body>
    </html>
    
    style.css
    Code:
    body
    {
    text-align: center;
    font-family: Arial;
    background-color: #e9ecf0;
    }
    .center
    {
    text-align: center;
    }
    #logo
    {
    position: absolute; 
    text-align: center;
    width: 414px; 
    height: 156px; 
    background-image: url(Bilder/logo.gif);
    right: 150px;
    z-index: 3;
    }
    
    #top_line
    {
    position: absolute;
    height: 41px;
    width: 100%;
    background-color: #e9ecf0;
    }
    #top_line2
    {
    position: absolute;
    top: 48px;
    height: 4px;
    width: 100%;
    background-color: #bcbbbc;
    }
    #top_line3
    {
    position: absolute;
    top: 52px;
    height: 5px;
    width: 100%;
    background-color: #8a8887;
    }
    #top_line4
    {
    position: absolute;
    top: 57px;
    height: 83px;
    width: 100%;
    background-color: #a8a9a9;
    text-align: left;
    padding-left: 10px;
    }
    #top_line5
    {
    position: absolute;
    top: 135px;
    height: 5px;
    width: 100%;
    background-color: #8a8887;
    }
    #top_line6
    {
    position: absolute;
    top: 140px;
    height: 4px;
    width: 100%;
    background-color: #bcbbbc;
    }
    #top_line7
    {
    position: absolute;
    top: 144px;
    height: 22px;
    width: 100%;
    background-color: #e9ecf0;
    }
    
    .shop
    {
    border-bottom: 1px dotted #FFF;
    font-size: 20px;
    font-weight: bold;
    background-color: #5494d5;
    color: #e9ecf0;
    }
    
    .suche
    {
    border-bottom: 1px solid #FFF;
    font-size: 11px;
    background-color: #89b0d8;
    color: #FFFAFA;
    text-align: left;
    line-height: 20px;
    }
    
    #navi
    {
    position: absolute;
    width: 147px;
    top: 150px;
    text-align: left;
    }
    
    .navi A
    {
    color: #FFFAFA;
    text-decoration: none;
    }
    
    .navi A:HOVER
    {
    color: #ffd200;
    text-decoration: none;
    }
    .navi
    {
     border-bottom: 1px solid #ffffff;
     font-size: 11px;
     font-weight: normal;
     background-color: #89b0d8;
    }
    
    .sub A
    {
    color: #FFFAFA;
    text-decoration: none;
    }
    
    .sub A:HOVER
    {
    color: #ffd200;
    text-decoration: none;
    }
    .sub
    {
    border-bottom: 1px solid #FFF;
    font-size: 11px;
    font-weight: bold;
    background-color: #5494d5;
    }
    .sub2 A
    {
    color: #FFF;
    text-decoration: none;
    }
    
    .sub2 A:HOVER
    {
    color: #5494d5;
    text-decoration: none;
    }
    .sub2
    {
    border-bottom: 1px solid #FFF;
    font-size: 11px;
    background-color: #c9dbed;
    }
    .pad { padding: 5px 5px 5px 5px; }
    
    style_ie.css
    Code:
    
    #logo
    {
    position: absolute; 
    right: 150px;
    width: 414px; 
    height: 156px; 
    background-image: url(Bilder/logo.gif);
    z-index: 3;
    top: 8px;
    }
    
    #navi
    {
    position: absolute;
    width: 147px;
    top: 165px;
    color: #FFFAFA;
    }
    

    Wie man sieht beginnt die Seite erst im rechten drittel!
    Und unter diesem komischen Oval is es au net richtig.
    Leider geht mein Firefox nimmer, deshbal weiß ich net obs da
    richtig angezeigt wird, ich denk aber mal schon!^^


    gruß und dank

    gl
     
  2. 28. Juli 2007
    AW: Seite verschiebt sich komplett nach rechts...

    servus,
    kleiner tip, wenn du im bild den Titel wegmachst, mach ihn auch im code weg..

    ich werd mal über den code schaun und wenn mir was auffällt sag ich dir bescheid

    ciao
     
  3. 28. Juli 2007
    AW: Seite verschiebt sich komplett nach rechts...

    jo also, leg mal ein allgmeines div um alle

    also:

    Code:
    <body>
    
    <div id="site" class="site_bg">
    
    <!-- Top -->
    <div id="top_line"></div>
    <div id="top_line2"></div>
    <div id="top_line3"></div>
    <div id="top_line4">gfdg</div>
    <div id="top_line5"></div>
    <div id="top_line6"></div>
    
    <div id="logo"></div>
    <!-- Navi -->
    <div id="navi">
    <div class="shop"><div class="pad">Shop</div></div>
    <div class="suche"><div class="pad">Art.-Nr.: <br /><form action="search.php" method="get">
     <input size="15" type="text" name="search" /><br />
     <input type="submit" value="Suchen" />
    </form></div></div>
    <div class="sub"><div class="pad"><a href="#">&Uuml;bersicht</a></div></div>
    
    ...
    
    und dein css (#seite) sieht dann so aus:

    Code:
    #site 
    {
     width: 800px;
     margin: 0px auto;
     padding: 0px 0px 0px 27px;
     position: relative;
    }
    
    .site_bg:after
    {
     content: "."; 
     display: block; 
     height: 0; 
     clear: both; 
    }
    

    gruß blaah
     
  4. 28. Juli 2007
    AW: Seite verschiebt sich komplett nach rechts...

    yo, schreib mal bei deinen css-styles, also die ganzen top-line sachen und "navi" und so

    left: 10px;

    rein. hab das mal ausprobiert und es funktioniert. außer halt bei logo, da solltest du es nicht
    einfügen, weil sonst steht es ja net mehr in der mitte

    hoffe es klappt!

    mfg
     
  5. 28. Juli 2007
    AW: Seite verschiebt sich komplett nach rechts...

    weniger position:abolute; mehr sinnvollen css-code ^^

    bei so aboluten angaben is jeder browser, je nach dem, anderer meinung... veruch das mal ohne diese absoluten angaben zu machen, habs eben probiert, sache von 10min.

    oder du schreibst für IE<=6, IE7, und mozilla eine eigene css.
     
  6. 28. Juli 2007
    AW: Seite verschiebt sich komplett nach rechts...

    wenn ich absolute weg mach, hauts alles völlig naus!^^
    Naja, wollts eben mal mit absoluten positionen machen, dass es anders geht is au klar.

    bei blaahs vorschlag zentriert sich das ganz eher.

    marjots vorschlag ging!^^ Hät mir aber au selbst einfallen können!

    titel in dem code, den ich hier gepostet hab, is net der der auf der seite angezeigt wird!

    gruß und dank an alle

    gl
     
  7. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.