Anzeige

Problem mit div Tag in FF

Problem mit div Tag in FF | PSD-Tutorials.de

Erstellt von tombeat, 03.11.2008.

  1. tombeat

    tombeat Filter Vergewalitger >)

    Dabei seit:
    04.06.2007
    Beiträge:
    246
    Geschlecht:
    männlich
    Ort:
    Graz/Puntigam|er Bier
    Software:
    PS CS2, Macromedia DW8
    Problem mit div Tag in FF
    Ich hab schon wiiiieder ein Problem :(
    Ich hab grad mit nem neuen project angefangen, und bin grade noch mit dem layout beschäftigt!
    Dieses Layout schaut wie folgt aus:
    ------------------------------
    || header ||
    ------------------------------
    || login | Navi | Registrieren ||
    ------------------------------
    || navi2 | Content ||
    ------------------------------
    Also zuerst ein div Tag mit dem header, danach einen div Tag in dem noch 3 Div tags mit float left sind (login, navi, registrieren) und danach noch einen div Tag mit wieder 2 divs darin (navi2, content)!
    es funktioniert eigentlich alles, nur im FF ist mein erster navi Tag, also der mittlere div tag der 3er Reihe, total verschoben!
    Im IE6 sowie 7 funktioniert es einwandfrei!
    Hier hab ich mal die CSS datei, und die html Datei, und zum Schluss noch der Link damit ihr euch das selbst ansehen könnt!
    HTML DATEI:
    HTML:
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    5. <title>Turnierfotos</title>
    6. <link href="styles.css" rel="stylesheet" type="text/css" />
    7. </head>
    8. <div id="root">
    9.  <a class="header" href="#"><div id="header">&nbsp;</div></a>
    10.  
    11.  <div id="Teil1">
    12.   <div id="navi-links">
    13.    Login
    14.   </div>
    15.  
    16.   <div id="navi-mitte">
    17.    <ul class="navi">
    18.     <li><a href="#" class="startseite">Startseite</a></li>
    19.     <li><a href="#" class="bilder">Bilder</a></li>
    20.     <li><a href="#" class="preise">Preise</a></li>
    21.     <li><a href="#" class="ueber-uns">&Uuml;ber&nbsp;uns</a></li>
    22.    </ul>
    23.   </div>
    24.  
    25.   <div id="navi-rechts">
    26.    Registrieren
    27.   </div>
    28.  
    29.  </div>
    30.  <div id="Teil2">
    31.   <div id="navi2">
    32.    <ul class="navi2">
    33.     <li>Test1</li>
    34.     <li>Test2</li>
    35.     <li>Test3</li>
    36.     <li>Test4</li>
    37.    </ul>
    38.   </div>
    39.  
    40.   <div id="content">
    41.    <h1>Willkommen</h1>
    42.   </div>
    43.  </div>
    44.  
    45. </div>
    46.  
    47. </body>
    48. </html>
    49.  
    CSS DATEI:
    Code (Text):
    1. #root {
    2.  width:   950px;
    3.  margin-left: auto;
    4.  margin-right: auto;
    5.  margin-top:  10px; }
    6. #header {
    7.  width:   950px;
    8.  height:   150px;
    9.  background:  url(Bilder/header.jpg); }
    10.  
    11.  
    12. #Teil1 {
    13.  width:   950px;
    14.  height:   130px;
    15.  float:   left; }
    16. #navi-links {
    17.  position:  relative;
    18.  float:   left;
    19.  width:   150px;
    20.  height:   130px;
    21.  background:  #c1c1c1;
    22.  font-size:  18px;
    23.  color:   #990000; }
    24. #navi-mitte {
    25.  width:   650px;
    26.  height:   130px;
    27.  float:   left;
    28.  position:  relative;}
    29. #navi-rechts {
    30.  width:   150px;
    31.  height:   130px;
    32.  float:   left;
    33.  position:  relative;
    34.  background:  #c1c1c1;
    35.  font-size:  18px;
    36.  color:   #990000; }
    37.  
    38.  
    39. #Teil2 {
    40.  width:   950px;
    41.  clear:   both; }
    42. #navi2 {
    43.  float:   left;
    44.  width:   150px;
    45.  height:   520px;
    46.  background:  #c1c1c1; }
    47. #content {
    48.  float:   left;
    49.  width:   800px;
    50.  height:   520px;
    51.  background:  url(Bilder/content.jpg); }
    52.  
    53.  
    54.  
    55. .navi {
    56.  list-style:  none;
    57.  margin:   0px; }
    58. .navi li {
    59.  float:   left; }
    60. .startseite {
    61.    text-decoration: none;
    62.  border:   0;
    63.  padding:  0;
    64.  display:   block;
    65.  text-indent: -9999px;
    66.  letter-spacing: -9999px;
    67.  font-size:  0;
    68.  width:   165px;
    69.  height:   130px;
    70.  background:  url(Bilder/startseite.jpg); }
    71. .bilder {
    72.    text-decoration: none;
    73.  border:   0;
    74.  padding:  0;
    75.  display:   block;
    76.  text-indent: -9999px;
    77.  letter-spacing: -9999px;
    78.  font-size:  0;
    79.  width:   160px;
    80.  height:   130px;
    81.  background:  url(Bilder/bilder.jpg); }
    82. .preise {
    83.    text-decoration: none;
    84.  border:   0;
    85.  padding:  0;
    86.  display:   block;
    87.  text-indent: -9999px;
    88.  letter-spacing: -9999px;
    89.  font-size:  0;
    90.  width:   160px;
    91.  height:   130px;
    92.  background:  url(Bilder/preise.jpg); }
    93. .ueber-uns {
    94.    text-decoration: none;
    95.  border:   0;
    96.  padding:  0;
    97.  display:   block;
    98.  text-indent: -9999px;
    99.  letter-spacing: -9999px;
    100.  font-size:  0;
    101.  width:   165px;
    102.  height:   130px;
    103.  background:  url(Bilder/ueber_uns.jpg); }
    104. .startseite:hover {
    105.  background-position: -165px; }
    106. .bilder:hover {
    107.  background-position: -160px; }
    108. .preise:hover {
    109.  background-position: -160px; }
    110. .ueber-uns:hover {
    111.  background-position: -165px; }
    112.  
    http://www.http.com//tombeat.to.funpic.de/turnierfotos/index2.html <<- Hier gehts zur HP
    Hoffe mal das ich nur ne kleinigkeit übersehe!
    Leider hab ich jedesmal wenn ich eine HP beginne zu anfangs probleme mit der positionierung der Divs! :( Vor allem wenn es sich um 3 divs handelt!
    MfG
    Tom
     
    Zuletzt bearbeitet: 03.11.2008
    #1      
  2. cebylon

    cebylon IBM5120-Oldie

    Dabei seit:
    28.07.2008
    Beiträge:
    920
    Geschlecht:
    männlich
    Ort:
    Niederbayern
    Software:
    ArchiCAD/Artlantis/Adobe
    Kameratyp:
    Canon EOS
    Problem mit div Tag in FF
    AW: Problem mit div Tag in FF

    stellst du einen Link hier rein,
    sollte die Seite zu erreichen sein !
     
    #2      
  3. cebylon

    cebylon IBM5120-Oldie

    Dabei seit:
    28.07.2008
    Beiträge:
    920
    Geschlecht:
    männlich
    Ort:
    Niederbayern
    Software:
    ArchiCAD/Artlantis/Adobe
    Kameratyp:
    Canon EOS
    Problem mit div Tag in FF
    AW: Problem mit div Tag in FF

    #navi-mitte {styles.css (Linie 24)
    height:130px;
    position:relative;
    width:800px;
    }
    dann gehts in etwa - aber registrieren ist dann verschoben
     
    #3      
  4. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    Problem mit div Tag in FF
    AW: Problem mit div Tag in FF

    Fehler beim Link ... so gehts besser => Turnierfotos

    Ich werf mal nen Blick drauf

    Tante Edith sagt:

    HTML:
    1.  
    2. .navi {
    3. margin:0;  /* bei 0 werten keine einheit nötig ist ... 0 ist 0 bei em und pixel und ... ;) */
    4. padding:0;  /* einfach as padding auch auf 0 setzen ;) */
    5. }
    6.  
    Einfach padding noch auf "0".
    Listen haben von der Vorgabe her immer margin und padding definiert für die Browser. Solange man nichts anderes vorgibt verwenden sie ihren Standart.
    Solltest du also in der CSS einfach bei ".navi" noch ein "padding 0;" einfügen bist du glücklich ;)
     
    Zuletzt bearbeitet: 03.11.2008
    #4      
  5. tombeat

    tombeat Filter Vergewalitger >)

    Dabei seit:
    04.06.2007
    Beiträge:
    246
    Geschlecht:
    männlich
    Ort:
    Graz/Puntigam|er Bier
    Software:
    PS CS2, Macromedia DW8
    Problem mit div Tag in FF
    AW: Problem mit div Tag in FF

    Jaaa.... danke das hat geklappt^^

    Scheiss Standarts:D
    Schade das es hier kein prestige System gibt, sonst würdest jetzt diiickes Prestige von mir bekommen :p
     
    #5      
x
×
×
teststefan