nicht angemeldet
Buttons werden nicht vollständig angezeigt
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>
<!-- Menu -->
<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>
<p class="contentnavi">1 | <a href="#" target="_self" id="a3">2</a></p>
<b class="rbottomcontent"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b>
<b class="r1"></b></b>
<!-- Content --></div>
<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>
<!-- container --></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;
}
-
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.
Ohne jetzt den Code genau angeschaut zu haben, könnte es sein, dass Du versuchst einem Inline-Element, nämlich dem a, eine Höhe zu geben, ohne es vorher mittels der Eigeneschaft Display, zu einem Blockelement gemacht zu haben?
Schönen Gruß
Afra
--
Endlich Ruhe-
Hallo nochmal,
und vielen Dank für die Antwort. Das hat prima geklappt. Mit display:block; und Höhenangabe werden die Buttons richtig dargestellt.Allerdings schaffe ich es nun nicht, dass die beiden auch schön auf gleicher Höhe nebeneinanderstehen.
Für einen Tip dazu wäre ich dankbar.
Viele Grüße
RikeHallo!
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.
Ohne jetzt den Code genau angeschaut zu haben, könnte es sein, dass Du versuchst einem Inline-Element, nämlich dem a, eine Höhe zu geben, ohne es vorher mittels der Eigeneschaft Display, zu einem Blockelement gemacht zu haben?
Schönen Gruß
Afra
-
Hallo!
Allerdings schaffe ich es nun nicht, dass die beiden auch schön auf gleicher Höhe nebeneinanderstehen.
Für einen Tip dazu wäre ich dankbar.
Lass sie nebeneinander floaten.
Schönen Gruß
Afra
--
Endlich Ruhe-
Danke Dir! Ist ja doch viel einfacher als mal so denkt. Drauf kommen ist trotzdem schwer ;)
Hallo!
Allerdings schaffe ich es nun nicht, dass die beiden auch schön auf gleicher Höhe nebeneinanderstehen.
Für einen Tip dazu wäre ich dankbar.
Lass sie nebeneinander floaten.
Schönen Gruß
Afra
-
-
-