Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Problem mit div Tag in FF“

tombeat

Filter Vergewalitger >)

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:
<!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>Turnierfotos</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="root">
 <a class="header" href="#"><div id="header">&nbsp;</div></a>
 
 <div id="Teil1">
  <div id="navi-links">
   Login 
  </div>
 
  <div id="navi-mitte">
   <ul class="navi">
    <li><a href="#" class="startseite">Startseite</a></li>
    <li><a href="#" class="bilder">Bilder</a></li>
    <li><a href="#" class="preise">Preise</a></li>
    <li><a href="#" class="ueber-uns">&Uuml;ber&nbsp;uns</a></li>
   </ul>
  </div>
 
  <div id="navi-rechts">
   Registrieren
  </div>
 
 </div>
 <div id="Teil2">
  <div id="navi2">
   <ul class="navi2">
    <li>Test1</li>
    <li>Test2</li>
    <li>Test3</li>
    <li>Test4</li>
   </ul>
  </div>
 
  <div id="content">
   <h1>Willkommen</h1>
  </div>
 </div>
 
</div>
 
</body>
</html>
CSS DATEI:
Code:
#root {
 width:   950px;
 margin-left: auto;
 margin-right: auto;
 margin-top:  10px; }
#header {
 width:   950px;
 height:   150px;
 background:  url(Bilder/header.jpg); }
 
 
#Teil1 {
 width:   950px;
 height:   130px;
 float:   left; }
#navi-links {
 position:  relative;
 float:   left;
 width:   150px;
 height:   130px;
 background:  #c1c1c1;
 font-size:  18px;
 color:   #990000; }
#navi-mitte {
 width:   650px;
 height:   130px;
 float:   left;
 position:  relative;}
#navi-rechts {
 width:   150px;
 height:   130px;
 float:   left;
 position:  relative;
 background:  #c1c1c1;
 font-size:  18px;
 color:   #990000; }
 
 
#Teil2 {
 width:   950px;
 clear:   both; }
#navi2 {
 float:   left;
 width:   150px;
 height:   520px;
 background:  #c1c1c1; }
#content {
 float:   left;
 width:   800px;
 height:   520px;
 background:  url(Bilder/content.jpg); }
 
 
 
.navi {
 list-style:  none;
 margin:   0px; }
.navi li {
 float:   left; }
.startseite {
   text-decoration: none; 
 border:   0; 
 padding:  0; 
 display:   block;
 text-indent: -9999px;
 letter-spacing: -9999px;
 font-size:  0; 
 width:   165px;
 height:   130px;
 background:  url(Bilder/startseite.jpg); }
.bilder {
   text-decoration: none; 
 border:   0; 
 padding:  0; 
 display:   block;
 text-indent: -9999px;
 letter-spacing: -9999px;
 font-size:  0;
 width:   160px;
 height:   130px;
 background:  url(Bilder/bilder.jpg); }
.preise {
   text-decoration: none; 
 border:   0; 
 padding:  0; 
 display:   block;
 text-indent: -9999px;
 letter-spacing: -9999px;
 font-size:  0;
 width:   160px;
 height:   130px;
 background:  url(Bilder/preise.jpg); }
.ueber-uns {
   text-decoration: none; 
 border:   0; 
 padding:  0; 
 display:   block;
 text-indent: -9999px;
 letter-spacing: -9999px;
 font-size:  0;
 width:   165px;
 height:   130px;
 background:  url(Bilder/ueber_uns.jpg); }
.startseite:hover {
 background-position: -165px; }
.bilder:hover {
 background-position: -160px; }
.preise:hover {
 background-position: -160px; }
.ueber-uns:hover {
 background-position: -165px; }
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:

cebylon

IBM5120-Oldie

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
 

jackprince

xHTML & CSS Junkie

AW: Problem mit div Tag in FF

Fehler beim Link ... so gehts besser =>

Ich werf mal nen Blick drauf

Tante Edith sagt:

HTML:
.navi {
margin:0;  /* bei 0 werten keine einheit nötig ist ... 0 ist 0 bei em und pixel und ... ;) */
padding:0;  /* einfach as padding auch auf 0 setzen ;) */
}
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:

tombeat

Filter Vergewalitger >)

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.156
Beiträge
2.581.859
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben