Tabelle mit 2 Spalten - Inhalte auf gleicher ebene

Dane

Hallo zusammenIch habe gerade versuche eine Tabelle mit 2 Spalten zu erstellen, so das die Inhalte auf gleicher Zeile sind. Leider bekomme ich das nicht gleichauf.

Der Code:

HTML

<table border="1">  <colgroup width="100%" span="3"></colgroup>  <tr>    <td width="100%" align="left"  valign="top">Wer bei Facebook ist, darf gerne meine Fanseite dort besuchen. Es würde mich freuen euch als Fan zu gewinnen. </td>    <td width="50%" align="right"  valign="bottom"><div class="fb-like-box" data-href="https://www.facebook.com/Linsenschuss.Fotografie" data-width="250" data-colorscheme="dark" data-show-faces="false" data-header="true" data-stream="false" data-show-border="true"></div><div id="fb-root"></div><script>(function(d, s, id) {  var js, fjs = d.getElementsByTagName(s)[0];  if (d.getElementById(id)) return;  js = d.createElement(s); js.id = id;  js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&appId=xxxxxxxxxx&version=v2.0";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script></td>  </tr></table>

Sieht so aus:

Und sollte eigentlich dann so aussehen, optimal auch mit der feinen Umrandung:

Was müsste ich an dem Code noch anpassen?

Danke für jede Hilfe! Achso, in Live: http://www.linsenschuss.de/seiten/ueber-mich/

synaptic

also zuerst mal entfernste alle attribute aus deinen TDs, die bringen nämlich nix..
und die linke zelle auf 100%, dazu die rechte auf 50% wären.... *trommelwirbel* 150%, also kannste auch da schomma froh sein, dass des nix gebracht hat^^

gib deinem table (also dem kleinen table, der genau diese anzeige bewirkt) ne id.
dann leiteste von dieser id abgehend auf die TDs. also so:
danach gibste noch der ersten zelle ne id und der gibste ein padding-top (das is einfacher, als deinem facebook-krams nen eigenen style zu verpassen, ght zwar auch, aber ich bevorzuge immer den einfacheren weg)

Code

#deinetableid td{
    vertical-align: top;
}
#deinetableid td#ersteZelle{
    padding-top: 6px;
}

meine werte hab ich jetzt hier nur quick and dirty aussm firefox=> firebug

warum du allerdings ne tabelle nimmst ist mir unklar und sematisch vollkommener unfug

Dane

Erst mal vielen Dank!

Vorneweg: Was wäre die bessere alternative?

Das ganze sollte etwas dynamisch sein, da die Seite für mobile Geräte auch ausgelegt ist.

synaptic

das ganze jetzt mal ganz grob hingescratched (ungetestet)
du kannst die gleiche struktur mit divs bauen, das layout vom table übernehmen und bei handys über nen mediaquery die ganze sache neu anordnen.
die query is hier jetzt nur beispielhaft, dazu kannste dich hier einlesen:
http://wiki.selfhtml.org/wiki/CSS/Media_Queries

HTML

<style type="text/css">
    .tbl{
        display: table;
        width: 100%;
        border: 1px solid red;
        background: white;
    }
    .tblcell
    {
        display: table-cell;
        border: 1px solid blue;
        vertical-align: top;
        padding:5px;

    }
    @media only screen and (max-width:320px) {
        .tbl{
            display: block;
        }
        .tblcell
        {
            display: block;
        }
    }
</style>
<div class="tbl">
    <div class="tblcell">linker inhalt</div>
    <div class="tblcell">rechter inhalt</div>
</div>

Alles anzeigen

Dane

Vielen Dank!

So schaut das dann bei mir aus:

Vom aufbau her kommt das ganz gut hin. Aber das Design sollte es einfach vom vorhandenen übernehmen. Ist das auch möglich?

synaptic

Ja mach halt die border-angaben raus
Und das padding top wieder rein, dafür das allgemeine padding raus
Die styles vom css sollten dann schon die nötigen sein.

Mein code war lediglich ein aus dem Ärmel geschütteltes Beispiel.
Etwas eigenarbeit bitte

Tags