✔ Fortschrittbalken

Status
Nicht offen für weitere Antworten.
F

FoXzz

Mitglied
Hallo.
Habe folgendes Problem:
Ich habe vor folgenden Code bei mir auf der Homepage zu integieren, um den aktuellen Entwicklungsstand sichtbar zu machen.

Code: 
<div style="border:1px solid #000000; width:100px; height:15px; margin-left:auto; margin-right:auto; margin-top:auto; margin-bottom:auto;"><div style="background-color:#1a4782; width:2%; height:15px;" id="balken">
    
  </div>
  <font size="-2" color="#5f95df" face="ARIAL"><div align="center">2%</div></font>
</div>

Mein Problem ist nun folgendes:
Die Schrift, die in dem Balken in der Mitte stehen soll, steht nicht dort, sondern unterhalb des Balkens in der Mitte.
Wie schaffe ich es die Schrift in die Mitte des Balkens zu bekommen?
 
Probier's mal so:

CSS: 
div {
font-family: arial; 
font-size:10px; 
color:#5f95df; 
}
HTML: 
<div style="border:1px solid #000000; width:100px; height:15px; margin-left:auto; margin-right:auto; margin-top:auto; margin-bottom:auto;">
     <div style="background-color:#1a4782; width:2%; height:15px;" id="balken"></div>
     <div style="line-height:15px;margin-top:-15px;text-align:center;">2%</div>
</div>

Das Thema wird ins CSS-Forum verschoben.
 
Ein Problem hab ich doch noch.
Hab das nun eingebaut und der Hintergrund des Balkens wird in der Mitte angezeigt, da er in einem Table liegt, der eine Zentrierung in die Mitte hat!
Das ganze sieht so aus:

progress3gb.jpg
 
Zuletzt bearbeitet:
index.php

Code: 
<html>
<head>
<title>coaster-freaks.com</title>
</head>
<body bgcolor="#8697B5">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="middle"><img src="images/logo.jpg" width="900" height="545" border="0"><br/>
    <br/>
    <?php
echo "<font color='#FFFFFF'>Coming soon...</font>";
?>
<br/>
<br/>
<font color="#FFFFFF" size="-1">Fortschritt:</font>
<br/>
<br/>
<?php include("includes/progress.php"); ?>
<br/>
<a href="http://www.coaster-freaks.com/index.php"><font face="Arial" size="-2" color="#FFFFFF">Home</font></a>
<br/>
<a href="http://www.coaster-freaks.com/index.php?section=links"><font face="Arial" size="-2" color="#FFFFFF">Links</font></a>
<br/>
<a href="http://www.coaster-freaks.com/index.php?section=contact"><font face="Arial" size="-2" color="#FFFFFF">Fragen?</font></a>
<br/>
<br/>
<?php

    if( isset($_REQUEST['section']) && file_exists('includes/'.$_REQUEST['section'].'.php') ) {
        include_once 'includes/'.$_REQUEST['section'].'.php';
    } 
?> 
<br/>
<font face="Arial" size="-3" color="#FFFFFF">© Copyright 2006 coaster-freaks.com</font>
<br/>
<a href="http://www.ranking-hits.de/" title="Website Statistik Ranking-Hits.de" target="_blank"><img src="http://www.ranking-hits.de/?ref=www.coaster-freaks.com&amp;style=1" border="0" alt="Ranking-Hits" /></a>
<br/>
<br/>
</td>
  </tr>
</table>
</body>
</html>

progress.php

Code: 
<!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>Untitled Document</title>
</head>
<div style="border:1px solid #000000; width:100px; height:15px; margin-left:auto; margin-right:auto; margin-top:auto; margin-bottom:auto;">  <div style="background-color:#1a4782; width:7%; height:15px;" id="balken"></div>  <div style="line-height:15px;margin-top:-15px;text-align:center"><font size="-2" color="#FFFFFF" face="Arial">7%</font></div> </div>
<body>
</body>
</html>
 
  • Bestimme für das erste DIV die CSS-Eigenschaft text-align:left.

  • In der progress.php werden nur die Elemente innerhalb des body-Elements notiert und nicht der vollständige Quelltext eines HTML-Dokuments, denn der ist ja schon im Hauptdokument vorhanden:
HTML: 
<div style="border:1px solid #000000; width:100px; height:15px; margin-left:auto; margin-right:auto; margin-top:auto; margin-bottom:auto;text-align:left;">  <div style="background-color:#1a4782; width:7%; height:15px;" id="balken"></div>  <div style="line-height:15px;margin-top:-15px;text-align:center"><font size="-2" color="#FFFFFF" face="Arial">7%</font></div> </div>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück