XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Freiraum vor Listeneinträgen (Navigation) (http://xhtmlforum.de/showthread.php?t=36811)

zeitgeist 10.09.2005 14:12

Freiraum vor Listeneinträgen (Navigation)
 
Liste der Anhänge anzeigen (Anzahl: 1)
Hi,

ich habe ein kleines Problem mit einer Navigation. Wie auf dem begefügten Screenshot zu sehen, ist vor der Navigation auf der linken Seite ein großer weißer Freiraum. Frage: Weshalb ist er da und wie kann ich ihn beseitigen? Vielen Dank für eure Hilfe.

Das momentane CSS-File
Code:

/* Standards fuer die ganze Seite */
body {
  background : #ffffff;
  margin : 0;
  padding : 0;
  font-family : verdana, arial, helvetica, sans-serif;
  font-weight : normal;
  font-size : 10px;
  line-height : 13px;
  color : #808080;
}


img {
  border : 0;
}


table {
  margin : 0 auto;
}


a:link, a:visited {
  color : #808080;
  text-decoration : none;
  font-weight : normal;
}


a:hover, a:active, a:focus {
  color : #808080;
  text-decoration : none;
  font-weight : normal;
  background : #eeeeee;
}


/* Seite zentrieren */
#maincontainer01 {
  position : absolute;
  left : 50%;
  width : 780px;
  margin-top : 20px;
  margin-left : -390px;
}


#header01 {
  margin : 0;
  padding : 0;
  width : 780px;
  height : 70px;
}


/* Navigation und Content */
#contentcontainer01 {
  margin : 0;
  padding : 0;
  height : 400px;
  border : 1px solid #800000;
}


#navi01 {
  margin : 0;
  padding : 0;
  border : 0;
  height : 41px;
  text-align : left;
}


#navi01 img {
  vertical-align : top;
}


/* Navigationspunkte */
  /* Standards fuer Listen */
  #navi01 ul {
    list-style-type : none;
  }


  #navi01 li {
    float : left;
    margin : 0;
    padding : 0;
    text-decoration : none;
    background-repeat : no-repeat;
    background-position : 0;
  }

  #navi01 li a {
    display : block;
  }


  /* Agentur */
  #navi01 li .nav01 {
    width : 72px;
    height : 41px;
    background-image : url("gfx/btn_agency01a.jpg");
  }


  /* Merchandising */
  #navi01 li .nav02 {
    width : 118px;
    height : 41px;
    background-image : url("gfx/btn_merchandise01a.jpg");
  }


  /* Marketing */
  #navi01 li .nav03 {
    width : 89px;
    height : 41px;
    background-image : url("gfx/btn_marketing01a.jpg");
  }


  /* Werbung */
  #navi01 li .nav04 {
    width : 80px;
    height : 41px;
    background-image : url("gfx/btn_ad01a.jpg");
  }


  /* Medien */
  #navi01 li .nav05 {
    width : 69px;
    height : 41px;
    background-image : url("gfx/btn_media01a.jpg");
  }


  /* Kontakt */
  #navi01 li .nav06 {
    width : 88px;
    height : 41px;
    background-image : url("gfx/btn_contact01a.jpg");
  }


  /* Pseudo links */
  #navi01 li .nav07 {
    width : 218px;
    height : 41px;
    background-image : url("gfx/btn_pseudoleft01.jpg");
  }
/* END OF Navigationspunkte */


#content01 {
  margin : 0;
  padding : 0;
  text-align : center;
}


#footer01 {
  margin-top : 30px;
  padding : 0;
  border : 0;
  text-align : center;
}

Der HTML-Part
Code:

  <body>
   
    <div id="maincontainer01">

     
      <div id="contentcontainer01">
       
        <div id="header01">
          HEADER
        </div>

       
        <div id="navi01">
          <ul>[*][*][*][*][*][*][*][/list]        </div>

       
        <div id="content01">
          MOEP
        </div>

      </div>

     
      <div id="footer01">
        FOOTER
      </div>

    </div>

  </body>


The Doc 10.09.2005 14:19

liegt sicher an margin und / oder padding, beginne dein Stylesheet immer mit:
* { margin:0; padding:0}

zeitgeist 10.09.2005 14:25

Tatsächlich. So funktioniert's. Danke =) .

zeitgeist 11.09.2005 14:30

Liste der Anhänge anzeigen (Anzahl: 1)
Ein weiteres Problem ist aufgetreten. Die Grafiken in der Navigation sollen von rechten bis zum linken Rand gehen. Dafür ist die Box genau 2 Pixel breiter als die Grafiken zusammen. FF setzt den Rahmen nach innen und alles ist i.O. Der IE dagegen setzt den Rahmen nach außen und übrig bleibt ein 2-Pixel-Abstand oben rechts (s. Anhang). Was muss ich ändern, damit die Seite im IE aussieht wie im FF?

Vielen Dank für eure Hilfe.

The Doc 11.09.2005 14:40

Liegt warscheinlich am falschen Boxmodell des IE (ist im Quirksmode, oder?), gib dem IE seperat eine 2px kleinere Breite:
Code:

* html #navi{
width:xyz px;
}


zeitgeist 11.09.2005 15:12

Hi. Danke für den Tipp. Im Header waren im aktuellen CSS 2 Pixel zu viel angegeben. Der IE hat deshalb scheinbar die komplette Seite aufgeblasen, weil der Header darin eingebette ist. FF ignorierte die Überbreite des Headers. Naja, funzt jetzt erstmal wieder.


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:22 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023