Hi super simple question here,
I am making an upload page for my website and am attempting to implement a download bar. No php is hooked into it yet but I am trying to make the layout. All is good however I can not seem to find out why my class wont apply to the upload bar..the first class is "leaking" into it if you will. I tried to google it first but everything is very broad obviously. Progress bar starts at ther bottom of the html. Sorry for the wall I didnt know where I steered wrong.
progress bar dream...
progress bar reality...
closer look: http://samplepackgenerator.com/phUploader.php
THE HTML
<!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" xml:lang="en" lang="en">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php echo $samplepackgenerator; ?>Upload Sounds</title>
</head>
<?
If($password_form) {
Echo $password_form;
} Else {
?>
<form action="<?=$_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data" name="phuploader">
<body align="center" class="mbr-box mbr-section mbr-section--relative mbr-section--fixed-size mbr-section--full-height mbr-section--bg-adapted " id="header2-0" style="background-image: url(assets/images/studio2.png);">
<tr>
<td class="table_header" colspan="2"><b><?=$samplepackuploader;?></b> </td>
</tr>
<?If($display_message){?>
<tr>
<td colspan="2" class="message">
<br />
<?=$display_message;?>
<br />
</td>
</tr>
<?}?>
<tr>
<td colspan="2" class="upload_info">
<b>Allowed Types:</b> <?=implode($allow_types, ", ");?><br />
<b>Max file size:</b> <?=$max_file_size?>kb.<br />
</td>
</tr>
<?For($i=0;$i <= 0;$i++) {?>
<tr>
<!-- <td class="table_body" width="80%"><input type="file" name="file[]" size="30" /></td> -->
</tr>
<?}?>
<tr>
<td colspan="2" align="center" class="table_footer">
<div>
<!-- Upload -->
<a href="#" class="mbr-buttons__btn btn btn-lg animated fadeInUp delay btn-default" type="button" name="file[]" onclick="document.getElementById('fileID').click(); return true;">Upload</a> <input id="fileID" name="file[]" multiple="multiple" type="file" style="visibility: hidden; " />
<!-- Confirm -->
<input class="mbr-buttons__btn btn btn-lg animated fadeInUp delay btn-default" type="submit" value=" Confirm " name="submit" />
<!-- Back -->
<a class="mbr-buttons__btn btn btn-lg animated fadeInUp delay btn-default" href="index.html" >Back<a
</a>
</div>
</td>
</tr>
</body>
</form>
<?}//Please leave this here.. it really dosen't make people hate you or make your site look bad.. ?>
<tr>
<td colspan="2" align="center" class="progress">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="50" style="width: 100%;">
<span>HELLO</span>
</div>
</div>
</td>
</tr>
</html>
THE CSS
body{
padding: 30px;
width: 40%;
}
.progress span{
display: block;
position: absolute;
width: 30%;
}
