Firefox: Problem mit divs - horizontale Ausrichtung

SELF-Forum

Problem mit divs - horizontale Ausrichtung

Firefox
– Informationen zu den Bewertungsregeln

Moin,

Ich möchte auf dieser Seite eine Navigation einbauen - mit einem div blättert man zurück und mit dem anderen nach vor.

Mir ist es bereits gelungen ein div in Funktion zu bringen mit welchem man vorwärts blättert (Nächstes Fahrzeug>>)und welches ich horizontal mittig zentrieren konnte.

Danach (betrifft diesen Quelltext) wollte ich einen zweiten div einbauen mit welchen man dann auch zurück blättern kann.

Dieser sollte links neben dem div "Nächstes Fahrzeug>>>" stehen wobei beide horizontal in der mitte mit einem kleinen Abstand voneinander zentriert sein sollen.

Dabei bin ich leider kläglich gescheitert, ebenso beim Versuch den div "<<zürück" am linken Rand und den div "Nächstes Fahrzeug>>" am rechten Rand auszurichten da hierbei von einem div etwas abgeschnitten wird wie man es im Quelltext sieht.

Ich hoffe jemand ist gewillt mir hierbei eine Lösung aufzuzeigen da mir bei diesen Problemen hunderte Hilfeseiten nicht wirklich weiter helfen konnten.

Ich verstehe zwar schon manches in CSS aber leider bei weitem noch nicht alles..

Die Seite entwickle ich lokal weshalb ich leider keinen Link anbieten kann.

Grüße

Firefox

-------------------------------------------------------------
<!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=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
 background-color: #e4e4e4;
 font-family: Verdana;
 font-size: 12px;
 color: #00012F;
 width: 771px;
 margin: 10px;
    padding: 10px;
 border: 1px solid;
}
a.navlink {
    display: block;
 width: 130px;
 font-size: 10px;
 color: #e4e4e4;
 font-family: Verdana;
 text-decoration: none;
 padding: 2px;
 border: 3px solid;
 text-decoration: blink;
 }
a.navlink:hover {
    text-decoration: none;
 }
#box1 {
}
#box2 {
}
#navbox3 {
    display: inline;
    float: right;
 width: 140px;
    text-align: center;
 position:relative;
 margin: 0px auto;
 border: 1px;
 border-color: #00012F;
 border-style: ridge;
 background-color: #CC0500;
}
#navbox3:hover {
    text-align: right;
 }
#navbox4 {
    display: inline;
    width: 140px;
    text-align: center;
 position:relative;
 margin: 0px auto;
 border: 1px;
 border-color: #00012F;
 border-style: ridge;
 background-color: #CC0500;
}
#navbox4:hover {
    text-align: left;
 }
-->
</style>
</head>
<body>
<div id="box1">
<p align="center"><img src="xxxxxxxx/xxxxxxx.jpg" alt="xxx" width="400" height="268" border="1" /></p>
</div>
<div id="box2" align="center"> <strong>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</strong><br /><br />
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  xxxxxxxxxxxxxxxxxxxx<br /><br />
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</div>
<br />
<div id="navbox3">
<a class="navlink" href="xxx.html" target="_self">Nächstes Fahrzeug&gt;&gt;</a></div>
<div id="navbox4">
<a class="navlink" href="xxx.html" target="_self">&lt;&lt; Zurück</a></div>
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Problem mit divs - horizontale Ausrichtung

    Beat Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Schon mal was gehört, das man <a> auch mittels CSS auch als display:block darstellen kann?

    mfg Beat

    --
    Woran ich arbeite:
    X-Torah
    ><o(((°>      ><o(((°>
       <°)))o><                      ><o(((°>o
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Problem mit divs - horizontale Ausrichtung

      Firefox
      – Informationen zu den Bewertungsregeln

      Ja, wie ich es geschafft hatte nur einen einzigen div horizontal zu zentrieren hatte ich display:block verwendet.

      Jedoch gelang es mir damit nicht einen zweiten div links oder rechts daneben anzuordnen so das beide divs horizontal zentriert sind.

      Grüße

      Firefox

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Problem mit divs - horizontale Ausrichtung

    Beat Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Ich hoffe jemand ist gewillt mir hierbei eine Lösung aufzuzeigen da mir bei diesen Problemen hunderte Hilfeseiten nicht wirklich weiter helfen konnten.

    Ich verstehe zwar schon manches in CSS aber leider bei weitem noch nicht alles..

    Sofern du die Grösse der Box, wo du dein Auto präsentieren willst, kennst, kannst du relativ einfach die navigation relativ zu dieser Box einstellen.

    <div id=schaufenster>
    <a class=nav_back></a>
    <a class=nav_forward></a>
    <div>
    hir der Inhalt des Schaufensters
    </div>
    </div>

    CSS

    #schaufenster
      {position:relative;
       width:NNNpx; height:MMMpx;}

    #schaufenster .nav_back
      {position:absolute;
       left:-5em; width:5em; top:YYYpx;
       display:block;}

    #schaufenster .nav_forward
      {position:absolute;
       right:-5m; width:5em; top:YYYpx;
       display:block;}

    PS: Schreibe deine <div> so an, dass du weisst, was drin steht.

    mfg Beat

    --
    Woran ich arbeite:
    X-Torah
    ><o(((°>     ><o(((°>
       <°)))o><                      ><o(((°>o
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Problem mit divs - horizontale Ausrichtung

      Firefox
      – Informationen zu den Bewertungsregeln

      Besten Dank,

      Ich hab aufbauend auf deine Anleitung mal etwas rumgepfuscht und tatsächlich etwas zu stande gebracht ^^

      Allerdings bekomme ich beim div..... <div id="nav_text">Navigation</div> eine Fehlermeldung angezeigt..
      -----------
      Wenn die Breite eines Containers (einschließlich des Browserfensters) nicht ausreicht, um sowohl einen Float mit einer festen Breite als auch nachfolgende Inhalte mit einer festen Breite aufzunehmen, fließen diese Inhalte nicht um den Float, sondern darunter.

      Betrifft: Internet Explorer 6.0, 7.0
      Wahrscheinlichkeit: Wahrscheinlich
      -----------
      Hoffe ich bekomme da keine Probleme.. der IE7 zeigt mir alles so an wie es sein sollte, auch beim FF 3.0.1 sieht alles normal aus aber ob das %$%&$ding von IE6 rumzickt oder nicht kann ich erst morgen feststellen.
      ----------------------------------------------------------------
      <!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=utf-8" />
      <title>Unbenanntes Dokument</title>
      <style type="text/css">
      <!--
      body {
       background-color: #e4e4e4;
       font-family: Verdana;
       font-size: 12px;
       color: #00012F;
       width: 771px;
       margin: 10px;
          padding: 10px;
       border: 0px solid;
          }
      #box1  {
      }
      #box2  {
      }
      a.nav_back {
          display: block;
       width: 140px;
       font-size: 10px;
       color: #e4e4e4;
       font-family: Verdana;
       text-decoration: none;
       padding: 2px;
       border: 3px solid;
       text-decoration: blink;
       }
      a.nav_back:hover {
          text-decoration: none;
       }
      a.nav_forward {
          display: block;
       width: 140px;
       font-size: 10px;
       color: #e4e4e4;
       font-family: Verdana;
       text-decoration: none;
       padding: 2px;
       border: 3px solid;
       text-decoration: blink;
       }
      a.nav_forward:hover {
          text-decoration: none;
       }
      #schaufenster  {
          position: relative;
          text-align: center;
       width: auto;
       height: auto;
       margin: 0px auto;
       border: 1px;
       background-color: #e4e4e4;
       }
      #schaufenster .nav_back  {
          display: block;
       position: absolute;
          width: 140px;
       left: 0em;
       top: 0px;
          margin: 0px auto;
       border: 1px;
       border-color: #00012F;
       border-style: ridge;
       background-color: #CC0500;
       text-align: center;
       padding: 2px;
       }
      #schaufenster .nav_back:hover  {
          text-align: left;
       }
      #nav_text  {
          width: auto;
       border: 1px solid;
       height: 16px;
          }
      #schaufenster .nav_forward  {
          display: block;
       position: absolute;
          float: right;
       width: 140px;
       right: 0em;
       top: 0px;
          margin: 0px auto;
       border: 1px;
       border-color: #00012F;
       border-style: ridge;
       background-color: #CC0500;
       text-align: center;
       padding: 2px;
       }
      #schaufenster .nav_forward:hover  {
          text-align: right;
       }
      -->
      </style>
      </head>
      <body>
      <div id="box1">
      <p align="center"><img src="" alt="krf-s" width="400" height="268" border="1" /></p>
      </div>
      <div id="box2" align="center"> <strong>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</strong><br /><br />
        xxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
        xxxxxxxxxxxxxxxxxx<br /><br />
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
      </div>
      <br />
      <br />
      <div id=schaufenster>
      <a href="" target="_self" class="nav_back">&lt;&lt;Zurück</a>
      <a class="nav_forward" href="" target="_self">Nächstes Fahrzeug>></a>
      <div id="nav_text">Navigation</div>
      </div>
      </body>
      </html>

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Problem mit divs - horizontale Ausrichtung

        Firefox
        – Informationen zu den Bewertungsregeln

        Moin,

        Das Problem welches sich noch ergab konnte ich damit lösen das ich dem Container noch eine fixe Breiten Angabe verpasst habe.

        Grüße

        Firefox

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln