Buttons werden nicht vollständig angezeigt von Rike, 01.07.2007 01:06

Buttons werden nicht vollständig angezeigt

Rike Homepage des Autors 01.07.2007 01:06

Hallo,
ich bastle gerade an meinem Master-Abschlussprojekt, einem E-Learning Kurs. Leider schaffe ich es nicht, dass meine Vorwärts- und Rückwärts-Buttons korrekt angezeigt werden. Den IE7 habe ich zumindest soweit, dass er den Vorwärtsbutton genau dort positioniert wo ich ihn haben will und der Button auch vollständig angezeigt wird. Der Rückwärts-Button dagegen ist unten halb abgeschnitten. Im Firefox werden beide Buttons abgeschnitten:(

Wäre super froh, wenn mir jemand helfen kann!
Vielen Dank schon mal,
Rike

Hier das HTML und CSS und zur Veranschaulichung auch im Netz http://www.henrike-hamelmann.de/sepi/:

/////////// Teil des CSS (komplettes siehe unten)///////
/////////////////////////////////////////////////

/* ------------- Forward and Backward Buttons ------------- */
div#navigate {
position:relative;
top:15px;
left:740px;
z-index:99;

}

.forward {
background:url(../gifs/forward.png) no-repeat top left;
height:29px;
width:28px;
}

.forward:hover {
background:url(../gifs/forward_x.png) no-repeat;
}

.forward span {
visibility:hidden;
}

.backward {
background:url(../gifs/forward.png) no-repeat;
}

.backward:hover {
background: url(../gifs/forward_x.png) no-repeat;
}

.backward span {
visibility:hidden;
}

///////////////////// HTML ///////////////////////
/////////////////////////////////////////////////

<body>

<div id="container">
<h1 id="coursetitle"><span>Scanning, Editing and Publishing Images</span></h1>

<ul id="menu">
Hier steht die Navigation.
</ul>

<div id="close"><a href="javascript:self.close()" id="a4">x</a></div>
  <div id="content"> <b class="rtopcontent"><b class="r1"></b>
    <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b>
    <h2>Unit Overview</h2>
    <p>Content</p>

<div id="navigate"><a href="#" class="backward"><span>Backward</span></a><a href="#" class="forward"><span>Forward</span></a></div>

<p id="footer"><a href="#" id="a1">Help</a><span style="color:#000033; font-weight:bold;">  |  </span><a href="#" id="a1">Print</a>
<b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
</p>
</div>

</body>

///////////////////// komplettes CSS ///////////////////////
/////////////////////////////////////////////////

/* basic elements */
  body {
font-family: Arial, Verdana, Helvetica, sans-serif;
    margin: 0; padding: 2em 0;
    text-align: center;  /* Centre for Internet Explorer */
font-size:0.9em;
font-style:normal;
line-height:1.2em;
font-weight:normal;
font-variant:normal;
color:#000033;
background-color: #EBF0F3;
  }

ul {
list-style-position: inside;
list-style-type: disc;
background:transparent;
margin: 0 10px 10px 20px;
}

/* Footer Links */

#a1, #a1:hover, #a1:active {
font-family:Arial,Verdana,Helvetica,sans-serif;
    font-size:1em;
    font-style:normal;
    font-weight:bold;
    font-variant:normal;
}

#a1, #a1:active {
color:#000033;
text-decoration:none;
}
#a1:hover {
color:#000033;
text-decoration:underline;
}

/* Content Links */

#a2, #a2:hover, #a2:active {
font-family:Arial, Verdana, Helvetica, sans-serif;
    font-size:1em;
    font-style:normal;
    font-weight:normal;
    font-variant:normal;
}

#a2 {
color:#6A71A7;
text-decoration:none;
}

#a2:hover {
color:#000033;
text-decoration:underline;
}
#a2:active {
color:#000033;
text-decoration:none;
}

/* ContentNavi Links */

#a3, #a3:hover, #a3:active  {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size:1em;
font-style:normal;
    font-weight:bold;
    font-variant:normal;
}

#a3 {
color:#6A71A7;
text-decoration:none;
}
#a3:hover {
color:#000033;
text-decoration:none;
}

#a3:active {
color:#000033;
text-decoration:none;
}

/* Close Button */

#a4 {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size:1em;
font-style:normal;
font-weight:normal;
font-variant:normal;
color:#000033;
text-decoration:none;
}

div#container {
    text-align: left;    /* align content left */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 850px;
    background: #D2D7E2;
  }

h1{
font-family:Arial, Verdana, Helvetica, sans-serif;
color: #fff;
font-size: 2em;
font-style: normal;
height: 91px;
}

h2 {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size:1.2em;
    font-style:normal;
    line-height:normal;
    font-weight:bold;
    font-variant:normal;
    color:#000033;
}

h1#coursetitle {
background-image: url(../gifs/head2.png);
background-color: #EBF0F3;
background-repeat: no-repeat;
background-position: left top;
}

h1#coursetitle span {
  visibility: hidden;
  position:relative;
  top: 40px;
  left:20px;
  }

div#content {
margin: 0px 15px 15px 190px;
background-color:#fff;
}

* html div#content {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
    margin-bottom: 0;
  }

div#content h2 {
    font-size: 1.2em;
    margin: 0;
padding: 7px 0 10px 10px;
    color: navy;
  }
  div#content p {
    font-size: 1em;
    margin: 0 10px 10px 10px;
padding: 0;
background:transparent;
  }

p#footer {
    clear: both;
    font-size: 0.8em;
    margin: 0;
color: white;
    text-align: center;
    background-color: #4682B4;
border-top: 3px solid #4682B4;
  }

/* Navigation */

ul#menu {
  width: 180px;
  list-style: none;
  border-top: solid 1px #b9a894;
  margin: 0 10px 0 0;
  padding: 0;
  float: left;
  border: none;
}

ul#menu ol {
  display: none;
  text-align: left;
  list-style: none;
  margin: 0;
  padding: 5px;
}

ul#menu li,
  ul#menu a {
  font-family: verdana, sans-serif;
  font-size: 0.9em;
  color: #000033;
  margin: 0 0 0 10px;
}

ul#menu li {
border-bottom: solid 1px #666699;
line-height: 18px;
}

ul#menu ol li {
border-bottom: none;
}

ul#menu ol li:before {
content: "-";
}

ul#menu a {
text-decoration: none;
outline: none;
}

ul#menu a:hover {
color: #666699;
}

ul#menu a.active {
color: #666699;
}

ul#menu a.visited {
color: #ccc;
}

/* footer rounded box */

.rtop, .rbottom{
   display:block;
   background:#EBF0F3;
   }
.rtop *, .rbottom *{
   display: block;
   height: 1px;
   overflow: hidden;
   background:#4682B4;
   }
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px;
height: 2px
   }

/* content rounded box */

.rtopcontent, .rbottomcontent{
   display:block;
   background:#D2D7E2;
   }
.rtopcontent *, .rbottomcontent *{
   display: block;
   height: 1px;
   overflow: hidden;
   background:#fff;
   }

/* ContentNavi */

div#content p.contentnavi{
text-align:right;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size:1em;
font-style:normal;
font-weight:bold;
font-variant:normal;
color:#000033;
margin: 0 10px;
padding: 3px 0 0 0;
border-top: 2px solid #DDDFE8;
}

/* ------------- Forward and Backward Buttons ------------- */
div#navigate {
position:relative;
top:15px;
left:740px;
z-index:99;

}

.forward {
background:url(../gifs/forward.png) no-repeat top left;
height:29px;
width:28px;
}

.forward:hover {
background:url(../gifs/forward_x.png) no-repeat;
}

.forward span {
visibility:hidden;
}

.backward {
background:url(../gifs/forward.png) no-repeat;
}

.backward:hover {
background: url(../gifs/forward_x.png) no-repeat;
}

.backward span {
visibility:hidden;
}

/* ------------- Close Window ------------- */

#close{
float:right;
position:relative;
top:-98px;
right:10px;
text-align:center;
background:#fff;
filter: Alpha(opacity=30);
-moz-opacity: 0.30;
color:#000;
padding:3px;
width:12px;
height:15px;
border: 1px solid #003;
}

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Rike: Buttons werden nicht vollständig angezeigt

Beitrag lesen

Buttons werden nicht vollständig angezeigt

Buttons werden nicht vollständig angezeigt