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

GaYlORd · 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

Anzeige

marjot · 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

blaah · 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

marjot · 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

Murdoc · 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.

GaYlORd · 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

Nützliche Suchen

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

Videos zum Themenbereich