• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabellen-Positionierungsproblem

DanielSun

DanielSun

Neues Mitglied
Hallo Leute!
Ich habe heute meine erste HTML-Webseite gestaltet und bis auf eine Sache hat alles auch wunderbar funktioniert.

Leider habe ich folgendes Problem:
Ich habe in einen Article-Tag eine Tabelle eingebaut (siehe Anhang). Leider "rutscht" diese Tabelle aus dem Rahmen heraus und setzt direkt auf dem "footer" auf. Trotz stundenlanger suche komme ich einfach nicht auf die Lösung. Vielleicht könnt ihr mir als HTML-Anfänger helfen.

Vielen Dank im Voraus! :-)

Hier das Ende meine index.html Datei:

...
<article>
<h2>N&auml;chste Videos</h2>

<table>

<thead>
<td>Nr.</td>
<td>Name</td>
<td>Datum</td>
</thead>

<tr>
<td>1</td>
<td>Video 1</td>
<td>09.12.2013</td>
</tr>

<tr>
<td>2</td>
<td>Video 2</td>
<td>10.12.2013</td>
</tr>

<tr>
<td>3</td>
<td>Video 3</td>
<td>11.12.2013</td>
</tr>

<tfoot>
<td>insges. 3</td>
<td>1-3</td>
<td>09-12.2013</td>
</tfoot>

</table>

<p>Dies ist der Plan der geplanten Ver&ouml;ffentlichungen. Wir hoffen,
dass uns unsere Faulheit...</p>

</article>


</section>

<aside>
<h3>Unsere Sponsoren</h3>
<p>TUS Bosenheim</p>
<a href="http://www.bosenheim.de/index.php?id=69">
<img src="kirche.gif" alt="Bosenheim-Logo"/>
</a>

<p>Hier ist Platz f&uuml;r Werbung oder Partner</p>
<h3>Unsere Partner</h3>
<p>Ich und Du...</p>
<p>Hier ist Platz f&uuml;r Werbung oder Partner</p>
</aside>

<footer>
<p>&copy; by TUS XY 2013</p>
</footer>

</body>

</html>
 

Anhänge

  • Tabelle.JPG
    Tabelle.JPG
    42,8 KB · Aufrufe: 10
Naja...die Seite ist leider noch nicht online. Deshalb habe ich ja das Bild hinzugefügt, damit man sieht was ich meine. Reicht das nicht?:(
 
Das Problem hierbei ist jedoch, dass der gepostete Quelltext nicht ausreicht um den Fehler ausfindig zu machen.
Die Ursache deines Problems kann schon weiter oben, oder aber auch im CSS liegen.
 
So, damit sich nicht jeder hier das ZIP-Archiv runterladen muss, poste ich mal die index.html und die CSS-Datei hier:

index.html
HTML: 
<!DOCTYPE html>
<html>
<head>
    <title>TUS Bosenheim 1886 e.V.</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
</head>
<header>
    <h1>TUS Bosenheim 1886 e.V.</h1>
    <h2>Homepage</h2>
</header>
<nav>
    <ul>
            <a href="http://community.fussball.de/de/verein/tus-1883-pfaffen-schwab/42111520.html"><li>Fussball</li></a>
            <a href="http://www.tus-bosenheim-tennis.de/"><li>Tennis</li></a>
            <a href="#"><li>link #3</li></a>
            <a href="#"><li>link #4</li></a>
    </ul>
</nav>
<body>
<section>
    <article>
        <h2>TUS Bosenheim - Eilmeldung!!!</h2>
        <p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder
        w&uuml;nscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen
        Umständen, in denen M&uuml;hen und Schmerz ihm große Freude bereiten k&ouml;nnen.
        Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je
        anstrengender k&ouml;rperlicher Betätigung, außer um Vorteile daraus zu
        ziehen?</p>

        <p>Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung
        trifft, eine Freude zu genießen, die keine unangenehmen Folgen hat, oder einen,
        der Schmerz vermeidet, welcher keine daraus resultierende Freude nach sich zieht?
        Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder w&uuml;nscht, nur,
        weil er Schmerz ist, es sei denn, es kommt zu zuf&auml;lligen Umst&auml;nden, in denen
        M&uuml;hen und Schmerz ihm große Freude bereiten können.</p>
        <blockquote cite="http://www.bosenheim.de/index.php?id=69">Zitat:<br />
        Der Turn- und Sportverein 1886 Bosenheim e.V. besteht nunmehr über 100
        Jahre. Er bildet heute wie früher ein wichtiges Element im dörflichen
        Gefüge von Bosenheim. Der Wandel der Zeiten ging am "TuS" auch nicht
        spurlos vorüber. Zu den traditionellen Bereichen Turnen - und seit 1948
        Fussball - gesellte sich Tennis und Radsport, die sich vollauf im Verein
        etabliert haben.<br />
        Der TuS Bosenheim ist bestrebt, gute Kontakte zu den anderen Vereinen und
        Institutionen im Ort zu pflegen, denn nur aus einer solchen harmonischen
        Gemeinschaft profitieren alle Beteiligten.
        </blockquote>
    </article>
    <article>
        <h2>TUS Bosenheim - Die neue Homepage ist online</h2>
        <p>Hier folgt das neue TUS Bosenheim Intro: </p>
            <video src="Virales Marketing im Todesstern Stuttgart.mp4" controls>
                    <p>Dein Browser unterst&uuml;tzt kein HTML5!</p>
            </video>
        <p>Um ein triviales Beispiel zu nehmen, wer von uns unterzieht
        sich je anstrengender körperlicher Betätigung, außer um Vorteile
        daraus zu ziehen?</p>
        <p>Aber wer hat irgend ein Recht, einen Menschen zu
        tadeln, der die Entscheidung trifft, eine Freude zu genießen, die keine
        unangenehmen Folgen hat, oder einen, der Schmerz vermeidet, welcher
        keine daraus resultierende Freude nach sich zieht? Auch gibt es
        niemanden, der den Schmerz an sich liebt, sucht oder wünscht.</p>
    </article>
    <article>
        <h2>N&auml;chste Videos</h2>
        <table>
        <thead>
            <td>Nr.</td>
            <td>Name</td>
            <td>Datum</td>
        </thead>
        <tr>
            <td>1</td>
            <td>Video 1</td>
            <td>09.12.2013</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Video 2</td>
            <td>10.12.2013</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Video 3</td>
            <td>11.12.2013</td>
        </tr>
        <tfoot>
            <td>insges. 3</td>
            <td>1-3</td>
            <td>09-12.2013</td>
        </tfoot>
        </table>
        <p>Dies ist der Plan der geplanten Ver&ouml;ffentlichungen. Wir hoffen,
        dass uns unsere Faulheit...</p>
     </article>
</section>
<aside>
    <h3>Unsere Sponsoren</h3>
    <p>TUS Bosenheim</p>
            <a href="http://www.bosenheim.de/index.php?id=69">
            <img src="kirche.gif" alt="Bosenheim-Logo"/>
            </a>
    <p>Hier ist Platz f&uuml;r Werbung oder Partner</p>
    <h3>Unsere Partner</h3>
    <p>Ich und Du...</p>
    <p>Hier ist Platz f&uuml;r Werbung oder Partner</p>
</aside>
<footer>
    <p>&copy; by TUS XY 2013</p>
</footer>
</body>
</html>

style.css
Code: 
* {
    padding: 0px;
    margin: 0px;
    font-family: Arial, Verdana, sans-serif;
}


header {
    height: 100px;
    background-color:#456CD3;
    border-radius: 10px;
  
}

body {
    width: 800px;
    background-color: #000000;
    margin: 25px auto;
}

header h1 {
    font-family: Verdana;
    font-style: italic;
    padding-left: 50px;
    padding-top: 25px;
    color: white;
    font-size: 30pt;
    text-shadow: black 1px 1px 4px;
  
}

header h2 {
    font-family: Verdana;
    font-style: italic;
    color: white;
    font-size: 16pt;
    padding-left: 480px;
    text-shadow: black 1px 1px 4px;
}


nav ul {
    list-style-type: none;
}

nav li {
    display: inline;
    margin-right: 40px;
    background-color:#456CD3;
    padding-right: 35px;
    padding-left: 35px;
    padding-top: 3px;
    padding-bottom: 3px;
    border: #C0C0C0 3px outset;
    border-radius: 5px;
    font-weight: bold;
    cursor: default;
}

nav {
    margin-top: 20px;
    text-align: center;
    margin-bottom: 30px;
}

nav a {
    text-decoration: none;
    color: white;
    text-shadow: gray 0px 0px 4px;
  
}

nav li:hover {
    border: #C0C0C0 3px inset;      
}

nav a:hover {
    color: #808080;
    text-shadow: none;
}

section {
    width: 575px;
    float: left;
}

article {
    border: gray 4px groove;
    padding: 20px;
    text-align: left;
    margin-bottom: 25px;
    margin-right: 30px;
}

article h2 {
    font-size: 14pt;
    color: white;
    padding-bottom: 10px;
    letter-spacing: 1px;
    font-weight: bold;
}

article p {
    font-size: 12pt;
    color: white;
    padding-bottom: 10px;  
}

article blockquote {
    font-weight: bold;
    font-style: italic;
    font-size: 10pt;
    padding: 15px;
    background-color: #456CD3;
    border-radius: 10px;
    color: black;
}

video {
    width: 220px;
    height: 180px;
    float: right;
    border: gray 1px solid;
    border-radius: 5px;
    background-color: #456CD3;  
}

aside {
    text-align: center;
    padding-right: 10px;
    width: 155px;
    float: right;
    color: white;
    padding: 35px;
    background-color: #222222;
    border-radius: 15px;
}

aside h3 {
    font-size: 16pt;
    padding-bottom: 10px;
    font-variant: small-caps;
    padding-top: 25px;
}

aside p {
    font-size: 12pt;
    font-style: italic;
    font-weight: bold;
    color: #E1E1E1;
}

aside img {
    width: 100px;
    height: 100px;
    border: none;
    cursor: default;
}

footer {
    clear: both;
    text-align: center;
    padding: 5px;
    background-color: #456CD3;
    color: black;
    border-radius: 10px;
}

footer p {
    font-size: 12pt;
    font-weight: bold;
    font-family: monospace;
    text-shadow: gray 1px 1px 2px;
}

table {
    text-align: center;
    color: black;
    border: white 1px inset;
    background-color: #456CD3;
    float: left;
    margin-right: 20px;
}

td {
    border: white 1px inset;
    padding-right: 5px;
    padding-left: 5px;
}

thead {
    font-weight: bold;
}

td:hover {
  background-color: gray;
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben