Inhalt wird neben Tabelle rechts ausgerichtet anstatt darunter.

[bigbootykilla]

Hi Leute,

ich habe doch ein kleines Problem. Vielleicht liegts grad am Verstädnis. Auf der Seite Wakusi Welt gibt es eine Tabelle Computerspiele in der Mitte die nur 1 Spalte hat. Ich möchte die Tabelle nach links an den Rand verschieben, aber wenn ich auf align="left" stelle, so schiebt ihr mir den unteren Inhaltsbereich " Kommunikation für ..." rechts neben die Tabelle und das ganze Layout ist zerstört.

Hier ist der "content" HTML Code:

<div id="content"> <!--content Start-->
            <h1 style="text-align: center;">Wakusi Download Area</h1>
            
                <table border="1" align="center">
                    <colgroup>
                        <col width="250" />
                        <col width="250" />
                    </colgroup>
                        <tr>
                            <th style="text-align: center;">Download: Wakusi VPN Client</th>
                            <th style="text-align: center;">Download: Wakusi VPN Konfig Files</th>
                        </tr>
                        <tr>
                            <td style="text-align: center;"><a href="http://www.wakusi.de/download/vpn_v2.1_15.exe">Wakusi VPN Client</a></td>
                            <td style="text-align: center;"><a href="http://wakusi.de/forum/viewtopic.php?f=3&t=5&sid=a5b60c24cc2743d8ed8d2b6fd55bab92" target="_blank">
                                Müssen hier beantragt werden</a></td>
                        </tr>
                </table>
            
            <blockquote><p style="text-align: center; font-size: 18px; color: red;"><b>
                Achtung: Um Zertifikate zu bekommen, müsst ihr euch im
                <a href="http://www.wakusi.de/forum/ucp.php?mode=register&sid=b7842ad5eccae243009de811fcb2bd78" target="_blank">Forum</a>
                registrieren!
            </b></p></blockquote>
            
            
            <h2>Patches und Mods für Spiele</h2>
                
            <!--Tabelle Patches und Mods Start-->
            <table border="1" align="center">
                <colgroup>
                        <col width="250" />
                </colgroup>
                    
                    <!--Tabellenüberschrift-->
                    <tr>
                        <th style="text-align:left;">Computerspiele</th>
                    </tr>
                    
                    <!--Tabelleninhalt-->
                <tr>
                    <td style="text-align:left;">
                        <ul>
                            <li><a href="downloads/action_shooter.html">
                                Action / Shooter</a></li>
                        </ul>
                    </td>
                </tr>
                
                <tr>
                    <td style="text-align:left;">
                        <ul>
                            <li><a href="downloads/adventure_fantasy.html">
                                Adventure / Fantasy</a></li>
                        </ul>
                    </td>
                </tr>        
                
            </table> <!--Tabelle Patches und Mods Ende-->
            <br/>
            
            <hr style="width:550px; text-align:center; color:green; height:3px; background-color:green;" />
            
            <h2>Kommunikation für Wakusi Gamer</h2>
                <blockquote><p>
                    Hier gibt es diverse Kommunikationsmöglichkeiten bis hin zu 100% sicheren Verschlüsselungen mit Gizmo und Zfone in Kombination, so dass ihr garantiert
                    keine unerwünschten Mithörer erwarten müsst. Viel Spass beim herunterladen und ausprobieren!
                </p></blockquote>
                
                <!--Tabelle Kommunikation Start-->
                <table border="1" align="center">
                <colgroup>
                        <col width="350" />
                        <col width="350" />
                </colgroup>
                    
                    <!--Tabellenüberschrift-->
                    <tr>
                        <th style="text-align:center;">Kommunikationsprogramme</th>
                        <th style="text-align:center;">Link zum Download</th>
                    </tr>
                    
                    <!--Tabelleninhalt-->
                <tr>
                    <td style="text-align:center;">
                        Gizmo 5
                    </td>
                    <td style="text-align:left;">
                        <ul>
                            <li><a href="http://www.wakusi.de/download/gizmo_windows.exe">Gizmo 5 für Windows</a></li><br/>
                            <li><a href="http://www.wakusi.de/download/zfone.zip">zfone verschlüsselt eure Gespräche<br/>mit Gizmo 5</a></li>
                        </ul>
                    </td>
                </tr>
                
                <tr>
                    <td style="text-align:center;">
                        Skype<br/>(neue und alte Version)
                    </td>
                    <td style="text-align:left;">
                        <ul>
                            <li><a href="http://www.wakusi.de/download/skype_neu.exe">Skype neue Version</a></li><br/>
                            <li><a href="http://www.wakusi.de/download/skype_alt.exe">Skype v.3.8.0.188</a></li>
                        </ul>
                    </td>
                </tr>
            </table> <!--Tabelle Kommunikation Ende-->
            <br/>
            
            <hr style="width:550px; text-align:center; color:green; height:3px; background-color:green;" />
            
            <blockquote><p>
                Teamspeak Server werden in kürze Online gestellt!
            </p></blockquote>                    
        
        <br/>
        <br/>
        <br/>        
        </div> <!--content Ende-->

CSS Code des "content" Bereichs:

#content {
    background-color: #3f3f3f;
    color: white;
    margin-left: 160px; /*Abstand links von 200px; navlinks hört bei 190px auf*/
    border-left: 2px dotted red;
    padding: 5px 10px 10px 10px;
    font-size: 15px;
}

    #content h1 {
        font-size: 18px;
        text-align: center;
        text-decoration: underline;
    }
    
    #content h2 {
        font-size: 18px;
        padding-left: 50px;
        text-decoration: underline;
    }
    #content a:visited, #content a:link {
        color : #6699CC;
    }

Ich hoffe ihr könnt mir weiterhelfen :)

Ich möchte einfach nur die Tabelle oben in dem Link nach links verschieben und den Bereich rechts einfach schwarz lassen. Darunter, unter der Trennlinie möchte ich alles unverändert lassen.

gruß bigbootykilla

 

[Efchen]

...gibt es eine Tabelle Computerspiele in der Mitte die nur 1 Spalte hat.

Dann ist es keine Tabelle (<table>) mehr, sondern eine Liste (<ul>).

Ich möchte die Tabelle nach links an den Rand verschieben, aber wenn ich auf align="left" stelle, so schiebt ihr mir den unteren Inhaltsbereich " Kommunikation für ..." rechts neben die Tabelle und das ganze Layout ist zerstört.

Vielleicht weißt Du, dass man Layout nur noch mit CSS macht. Da heißt es dann nicht mehr align=left, sondern "float:left;".
Und es gibt da einen bekannten Spruch: "Wer float sagt, muss auch clear sagen". Denn um ein float wieder aufzuheben, gibt es clear. Dann klappts auch mit dem Layout :-)

 

[bigbootykilla]

jepp mit clear hats dann geklappt

vielen Dank

gruß bigbootykilla