PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Kleines Problem mit der ausrichtung einer Div-Box


Duggu
01.05.2008, 10:00
Ich möchte gern eine Tabelle mit festen Tabellenkopf machen. Dazu habe ich schon vieles im Netz gefunden und diese Variante (siehe code) hat mir am besten gefallen.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Filmografie</title>

<style type="text/css">
<!--
body
{
background:#2D0202;
font-family:verdana,sans-serif;
font-size:12px;
color: #FDF5CB;
scrollbar-base-color:#000005;
scrollbar-3d-light-color:#203b59;
scrollbar-arrow-color:#aabbcc;
scrollbar-darkshadow-color:#000005;
scrollbar-face-color:#000005;
scrollbar-highlight-color:#203b59;
scrollbar-shadow-color:#203b59;
scrollbar-track-color:#000005;
overflow:auto;
cursor:default;
}

.title1
{
font-family: arial black;
font-size:50px;
line-height:40px;
color:#FDF5CB;;
}

.title2
{
font-family:arial;
font-size:25px;
text-align:left;
color:#FDF5CB;;
}

hr
{
width:750px;
height:1px;
color:#FDF5CB;
}


div.info
{
width:540px;
font-family:verdana,sans-serif;
font-size:12px;
color:#FDF5CB;
cursor:default;
}

span.dot
{
color:#FDF5CB;
}

a
{
color:#FDF5CB;
text-decoration:none;
padding-left:3px;
padding-right:3px;
}

a:hover
{
background-color:#2D0202;
color:#000000;
text-decoration:none;
padding-left:3px;
padding-right:3px;
}

td
{
font-family:verdana,sans-serif;
font-size:11px;
color:#ddeeff;
cursor:default;
}

table.head
{
width:720px;
text-align: left;

}

td.head_num
{
width:30px;
height: 20px;
background-color:#9E2206;
padding-left:5px;
font-weight:bold;
}

td.head_titel
{
width:220px;
height: 20px;
background-color:#9E2206;
padding-left:5px;
font-weight:bold;
}

td.head_character
{
width:380px;
height: 20px;
background-color:#9E2206;
padding-left:5px;
font-weight:bold;
}

td.head_datum
{
width:50px;
height: 20px;
background-color:#9E2206;
text-align:center;
font-weight:bold;
}

table.index
{
width:720px;
}

tr.normal
{
background-color:#2D0202;
font-weight:normal;
}

tr.hover
{
background-color:#9E2206;
font-weight:bold;
}

td.num
{
width:30px;
border-bottom:1px solid #9E2206;
padding-left:5px;
}

td.titel
{
width:220px;
border-bottom:1px solid #9E2206;
padding-left:5px;
}

td.character
{
width:380px;
border-bottom: 1px solid #9E2206;
padding-left:5px;
}

td.datum
{
width:50px;
border-bottom:1px solid #9E2206;
text-align:center;
}


</style>

</head>
<body>



<table align="center" class="head" border="0" cellspacing="5" cellpadding="0">
<tr>
<td class="head_num">Nr.</td>
<td class="head_titel">titel</td>

<td class="head_character">Character / Bemerkung</td>
<td class="head_datum">Datum</td>
</tr>
</table>


<div class="head" style="height:230px; width:740px; overflow:auto;">

<!-- SCROLL-CONTENT START -->

<table align="center" class="index" border="0" cellpadding="0" cellspacing="5">

<!-- .01 -->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">01</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .02 -->

<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">02</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .03 -->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">03</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .04 -->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">04</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .05 -->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">05</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .06-->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">06</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .07-->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">07</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .08-->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">08</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .09-->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">09</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .10-->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">10</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .11-->

<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">11</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .12-->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">12</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .13-->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">13</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .14-->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">14</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .15-->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">15</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .16-->

<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">16</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .17-->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">17</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .18-->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">18</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .19-->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">19</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .20-->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">20</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .21-->

<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">21</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .22-->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">22</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .23-->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">23</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .24-->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">24</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .25-->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">25</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .26-->

<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">26</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .27-->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">27</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .28-->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">28</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .29-->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">29</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

<!-- .30-->
<tr class="normal" onmouseover="this.className='hover';"
onmouseout="this.className='normal';">
<td class="num">30</td>
<td class="titel">Ich bin immer für dich da</td>
<td class="character">Major Ram</td>
<td class="datum">2004</td>
</tr>

</table>

<!-- SCROLL-CONTENT END --></div>

</body>
</html>Leider bekomme ich die Div-Box nicht mittig ausgerichtet.

Ich habe es schon versucht mit der Klassifizierung "head" und folgenden code in im css (die ich natürlich dann extern habe):


div.head{
left: 50%;
margin-left: 370px;
position: absolute;
width: 740px;

}Was habe ich falsch gemacht? Über eure hilfe wäre ich euch sehr dankbar.

Lg Duggu
StGaensler
02.05.2008, 22:46
Hallo,

damit funktioniert es :)
div.head { margin:0 auto; }
Viele Grüße,
Stefan
Duggu
03.05.2008, 08:55
Hallo Stefan,

vielen Dank für den Tip. Es sieht auf jedenfall schon Viel besser aus. Die Tabelle ist aber im Firefox noch ein wenig (so 1-2 Buchstaben) nach links verschoben. Weisst du wie ich das noch genau untereinander bekomme?

Im IE sehe ich diese Tabelle leider überhaupt nicht. Da ist nur der Hintergrund zu sehen. Was kann ich da noch ändern????

Lg Duggu
StGaensler
06.05.2008, 10:57
Hallo,

das liegt daran, dass du rechts noch den Scrollbalken hast. Wenn du links noch nen Abstand setzt, dann geht das besser:
div.head {margin:0 auto; padding-left:2ex}
Mit dem IE-Problem kann ich dir leider nicht groß weiterhelfen. Einerseits kann ich dort nicht so komfortabel den Quelltext ändern und meine Änderungen sofort sehen, andererseits hat er auch einige Bugs bzw. Besonderheiten mit CSS. Geh einfach mal von einem Code aus, wo du weißt, dass es funktioniert, und bau dann deine Änderungen nacheinander ein.

Viele Grüße,
Stefan
Duggu
06.05.2008, 19:50
Vielen dank, ich werde es mal probieren.