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

Div´s "Wackeln" beim scrollen im FF

F

Fr3gg3L

Neues Mitglied
Hallo,

Bin dabei eine hp zu erstelle, layout ist nur mit div´s,
oben ein festehender Header,
mitte content scrollbar
unten feststehender footer,
im IE 7 sieht alles wunderbar aus (so wie es sein soll zumindest design noch v0.1 :) )
im FF "Wackenl die Div´s sobald ich übergrosse seiten von ausserhalb, zb. iframe, include etc. einfüge

hier mal nen link
http://fr3gg3l.fr.funpic.de/akt/

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL]http://www.w3.org/TR/html4/loose.dtd[/URL]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]XHTML namespace[/url]">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="navi.css">
<link rel="stylesheet" type="text/css" href="foot.css">
<link rel="stylesheet" type="text/css" href="cont.css">
<script type="text/javascript" src="request.js"></script>
<script type="text/javascript" src="scripts/include.js" language="JavaScript"></script>
<script type="text/javascript" src="resize.js"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" src="mouse_over_2.js"></script>
 
</head>
<body><!-- Ad by funpic.de --><noscript><div style="display:none">&nbsp;</div></noscript><script type="text/javascript" src="[URL]http://media.funpic.de/layer.php?bid=39342863"></script[/URL]><!-- End Ad by funpic.de -->
<div id="header"><img src="images/navi_01.gif"></img></div>
<div id="nav">
<div id="nges">
<div id="navil"><img src="images/navi_02.gif"></div>
<div id="nlink1"><a href="javascript:void(0);" onclick="sndReq('getSeite1');"><img src="images/navi1_over.gif" class="button"></a></div>
<div id="nlink2"><a href="javascript:void(0);" onclick="sndReq('getSeite2');"><img src="images/navi2_over.gif" class="button"></a></div>
<div id="nlink3"><a href="javascript:void(0);" onclick="sndReq('getSeite3');"><img src="images/navi3_over.gif" class="button"></a></div>
<div id="nlink4"><a href="javascript:void(0);" onclick="sndReq('getSeite4');"><img src="images/navi4_over.gif" class="button"></a></div>
<div id="nlink5"><a href="javascript:void(0);" onclick="sndReq('getSeite5');"><img src="images/navi5_over.gif" class="button"></a></div>
<div id="nlink6"><a href="javascript:void(0);" onclick="sndReq('getSeite6');"><img src="images/navi6_over.gif" class="button"></a></div>
<div id="nlink7"><a href="javascript:void(0);" onclick="sndReq('getSeite7');"><img src="images/navi7_over.gif" class="button"></a></div>
<div id="nlink8"><a href="javascript:void(0);" onclick="sndReq('getSeite8');"><img src="images/navi8_over.gif" class="button"></a></div>
<div id="navir"><img src="images/navi_11.gif"></div>
<div id="naviu">
<img src="images/navi_12.gif"></div>
</div></div>

  
 <div id="content_container">
  <div id="content">
  <div id="cges">
  <div id="co"><img src="images/ueberschr.gif"></div>
  <div id="cl">wilkommen</div>
  <div id="cr"><script language="javascript" type="text/javascript" charset="iso-8859-1" src="http://www.tsviewer.com/ts_viewer_pur.php?ID=96613&bg=transparent&type=8f8f8f&type_size=11&type_family=1&info=1&channels=1&users=1&js=1&type_s_color=000000&type_s_weight=bold&type_s_style=normal&type_s_variant=normal&type_s_decoration=none&type_s_color_h=525284&type_s_weight_h=bold&type_s_style_h=normal&type_s_variant_h=normal&type_s_decoration_h=underline&type_i_color=000000&type_i_weight=normal&type_i_style=normal&type_i_variant=normal&type_i_decoration=none&type_i_color_h=525284&type_i_weight_h=normal&type_i_style_h=normal&type_i_variant_h=normal&type_i_decoration_h=underline&type_c_color=000000&type_c_weight=normal&type_c_style=normal&type_c_variant=normal&type_c_decoration=none&type_c_color_h=525284&type_c_weight_h=normal&type_c_style_h=normal&type_c_variant_h=normal&type_c_decoration_h=underline&type_u_color=000000&type_u_weight=normal&type_u_style=normal&type_u_variant=normal&type_u_decoration=none&type_u_color_h=525284&type_u_weight_h=normal&type_u_style_h=normal&type_u_variant_h=normal&type_u_decoration_h=none"></script><noscript>Enable JavaScript or visit <a href="[url=http://www.tsviewer.com/index.php?page=ts_viewer&ID=96613">TeamSpeak]Daed ôr Alive [World of Warcraft] TeamSpeak - LIVE view - TSViewer.com[/url] Viewer</a> to display the TeamSpeak server.</noscript></div>
  <div id="cu">unten</div>
  </div>
  
  </div>
 </div>
 
 <div id="footer">
<div id="fges">
<div id="footo"><img src="images/fuss_01.gif"></div>
<div id="footl"><img src="images/fuss_02.gif"></div>
<div id="flink1"><a href="javascript:void(0);" onclick="sndReq('getSeite100');"><img src="images/fuss3_over.gif" class="button"></a></div>
<div id="fbesucher"><img src="images/fuss_04.gif"></div>
<div id="fzaehler"><a href="[url=http://www.meinebesucher.de]Gratis Besucherzähler bei www.meineBesucher.de[/url]" target="_blank" title="Kostenloser Besucherzähler"><img src="[URL]http://www.meinebesucher.de/counter/bild.php?cid=2242&a=b[/URL]" border="0"></a></div>
<div id="fspace"><img src="images/fuss_06.gif"></div>
<div id="flink2"><a href="javascript:void(0);" onclick="sndReq('getSeite101');"><img src="images/fuss7_over.gif" class="button"></a></div>
<div id="footr"><img src="images/fuss_08.gif"></div>
<div id="footu"><img src="images/fuss_09.gif"></div>
</div>
 </div>
 
 
</body>
</html>

und hier die css

Code: 
img
{
background-color:#000000;
border-top: 0px;
border-right: 0px;
border-bottom: 0px;
border-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px; 
}  
a img {
  border: none;
background-color:#000000;
border-top: 0px;
border-right: 0px;
border-bottom: 0px;
border-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px; 
}  
  body
  {
   margin:0;
   padding:0;
   text-align:center;
  }
  #content_container
  {
  padding-top:203px;
  text-align:center; 
  }
  #header
  {
   position:fixed;
   top:0px; left:0px; right:0px;
   background:#efddff;
   text-align:center;
  }
  #nav
  {
   position:fixed;
   top:153px; left:0px; right:0px;
   background:#e9977f;
   text-align:center;
  }
  #navi
  {
   position:fixed;
   top:176px; left:0px; right:0px;
   background:#efefef;
  }
  #footer
  {
   position:fixed;
   bottom:0px; left:0px; right:0px;
   background:#efefef;
   text-align:center;
  }
  * html, * html body
  {
   height:100%;
   overflow:hidden;
  }
  * html #header
  {
   margin:0;
   height:153px;
  }
  * html #nav
  {
   margin:0;
   height:23px;
  * html #nav
  {
   margin:0;
   height:27px;
  }
  * html #content_container 
  {
   height:85%;
   overflow:auto;
  }
  * html #footer 
  {
   height:69px;
  }
#cges
{
background-color:#f77773;
width: 974px;
hight: auto;
margin: 0px auto;
}
#co
{
background-color:#068597;
width: 974px;
hight: 70px;
}
#cl
{
background-color:#0fff35;
width: 400px;
hight: auto;
float: left;
}
#cr
{
background-color:#032df5;
width: 450px;
hight: auto;
float: right;
}
#cu
{
background-color:#068597;
width: 974px;
hight: 50px;
clear: both;
padding-bottom: 69px;
}
#fges
{
background-color:#f77773;
width: 974px;
hight: 69px;
margin: 0px auto;
}
#footo
{
background-color:#068597;
width: 974px;
hight: 13px;
}
#footl
{
background-color:#066335;
width: 27px;
hight: 24px;
float: left;
}
#flink1
{
background-color:#032df5;
width: 134px;
hight: 24px;
float: left;
}
#flink2
{
background-color:#032df5;
width: 161px;
hight: 24px;
float: left;
}
#fbesucher
{
background-color:#032df5;
width: 348px;
hight: 24px;
float: left;
}
#fzaehler
{
background-color:#032df5;
width: 100px;
hight: 24px;
float: left;
}
#fspace
{
background-color:#032df5;
width: 177px;
hight: 24px;
float: left;
}

#footr
{
background-color:#fd8657;
width: 27px;
hight: 24px;
float: right;
}
#footu
{
background-color:#068597;
width: 974px;
hight: 32px;
clear: both;
}
#nges
{
background-color:#f77773;
width: 974px;
hight: 50px;
margin: 0px auto;
}
#navil
{
background-color:#066335;
width: 27px;
hight: 23px;
float: left;
}
#nlink1
{
background-color:#032df5;
width: 115px;
hight: 23px;
float: left;
}
#nlink2
{
background-color:#032df5;
width: 115px;
hight: 23px;
float: left;
}
#nlink3
{
background-color:#032df5;
width: 115px;
hight: 23px;
float: left;
}
#nlink4
{
background-color:#032df5;
width: 115px;
hight: 23px;
float: left;
}
#nlink5
{
background-color:#032df5;
width: 115px;
hight: 23px;
float: left;
}
#nlink6
{
background-color:#032df5;
width: 115px;
hight: 23px;
float: left;
}
#nlink7
{
background-color:#032df5;
width: 115px;
hight: 23px;
float: left;
}
#nlink8
{
background-color:#032df5;
width: 115px;
hight: 23px;
float: left;
}
#navir
{
background-color:#fd8657;
width: 27px;
hight: 23px;
float: right;
}
#naviu
{
background-color:#068597;
width: 974px;
hight: 50px;
clear: both;
}

vieleicht nen bissl lang, aber da ich noch recht unerfahren bin weiss ich nicht welche stelle grad relevant ist.:?

wäre klasse wenn mir da jmd helfen könnte
 
Werbung:
Den Weg, den Du da gehst, ist der denkbar ungünstigste! Warum baust Du die Navigation mit JavaScript auf? Warum nutzt du fast ausschließlich ein HTML-Element, das keine Semantische Bedeutung hat, anstatt die dafür vorgesehenen?

Speziel zu deiner Navi. Hier findest du ein super Tutorial, wie man sowas mit Grafiken gestalten kann: Grafische Navi 1
Da wackelt dann auch nix mehr.

Für den Rest der Seite empfehle ich dir dich mit Semantischem HTML, Imagereplacement etc. auseinander zu setzen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben