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

[ERLEDIGT] Breite von Tabellenspalten

Status
Für weitere Antworten geschlossen.

Phänox

Neues Mitglied
Hallo,
Ich versuche mich zurzeit bei meiner ersten Website und bin daher noch ein Anfänger ^^ alles was ich bis jetzt gemacht habe bzw kann beruht auf Internet Informationen. Nun bin ich jedoch auf ein Problem gestoßen was ich nicht gelöst bekomme :/
Bild im Browser : http://prntscr.com/aype15
Bild vom HTML Code : http://prntscr.com/aype9p
Bild vom CSS Code : http://prntscr.com/aypeic
So wie man auf dem Bild sieht ist der Rand von der Zelle wo das Bild drin ist über die ganze breit ich will es jedoch nur auf 1/3 der Breit haben damit der Text noch platz hat wie mache ich das ?
 
Zuletzt bearbeitet:
Werbung:
Hallo

Am besten ist immer ein Link zur Seite. Bilder mit Quelltext sind nicht hilfreich.

Zudem solltest du uns das Bild zur Verfügung stellen, welches auf der Seite angezeigt werden soll.

alles was ich bis jetzt gemacht habe bzw kann beruht auf Internet Informationen

Um die Information zu finden, dass eine Tabelle zum Layouten mißbraucht werden sollte, musst du aber recht verweifelt gesucht haben. Das ist sachlich seit dem Jahrtausenwechsel schlicht falsch.

Also solltest du zunächst Informationen suchen, wie das aktuelle HTML5 und CSS3 funktionieren und angewendet werden.

Du solltest auch von Beginn an auf Inline-CSS "style=" verzichten.

Dem Aussehen nach scheint das Bild keinerlei Informationen zu enthalten. Es soll also die Webseite nur verschönern. Deshalb wird es als Hintergrundbild (background-image) eingebunden.

Der HTML-Quellcode könnte also folgendermaßen aussehen:

Code:
<section>
   <p>Dies ist ein Blindtext. Blindtexte sind zumeist weder informativ noch interessant, sondern ausgesprochen langweilig.</p>
</section>

Statt section können natürlich auch andere Container verwendet werden, sofern sie besser passen. Dazu hast du ja keine Informationen geliefert.

Der Rest wird dann per CSS erledigt. Das könnte folgendermaßen aussehen:

Code:
section {
   background-color: black;
   background-image: url(pfad/bildname.png);
   background-repeat: no-repeat;
   background-size: contain;
   border: 3px solid blue;
}
section p {
   color: green;
   margin-left: 33%;
}

Abstände, Farben, Rahmen, Schriftgröße und so weiter können antürlich noch angepasst werden.

Du siehst also, das korrekt angewandtes HTML / CSS auch viel übersichtlicher ist.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Ok ich hoffe ich gebe jetzt die richtigen Informationen. Es soll eine Website über ein Team werden und ich möchte über jeden Spieler ein Art Spieler Profil machen. Zu diesem gehört dann auch ein Profil Bild welches die Spieler ausgesucht haben. Rechts von dem Spieler Profil Bild soll dann der Name und In-Game namen stehen aber halt nicht ganz rechts am rand wie es jetzt der Fall wäre.
Das Bild habe im Anhang
 

Anhänge

  • 305896.jpg
    305896.jpg
    445,1 KB · Aufrufe: 82
Werbung:
Werbung:
Genau *_* nur zwei Sachen Über den Profilbild soll zentriert Profilbild stehen und bekommt man es auch irgendwie hin das das zwei Tabellen Zellen sind also das das Profil bild von den Border der einen Zelle umrundet wird und der Name und in-Game Name rechts in einer separaten Zelle ?
aber auf jeden Fall schon mal vielen dank für deine Hilfe sehr nett !!:)

Gruß Phänox
 
Super vielen Dank :) eine Frage hätte ich jedoch noch wie kann ich das machen so wie ich es hatte oder ist es so nicht möglich?
 
Werbung:
Ich glaube ich bin einfach zu doof es zu beschreiben :/ meine Frage ist ob es auch möglich ist aus meinem HTML code sowas zu machen ohne viel zu verändern oder ob ich es einfach verbockt habe ^^ vielen danke im voraus

gruß Phänox
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> eXo-Prime League of Legends Team</title>
    <link href="S.css" type="text/css" rel="stylesheet">
    <link href="L.css" type="text/css" rel="stylesheet">
</head>
<body>
<map name="lol">
    <area shape="rect" coords="0,0,400,175" target="window" alt="league of Legends" href="[URL]http://euw.leagueoflegends.com/de[/URL]">

</map>
<map name="eXo">
    <area shape="rect" coords="0,0,1344,756" target="window" alt="league of Legends" href="[URL]http://www.my-exodus.de[/URL]"/>
</map>
<table>
    <colgroup>
        <col width="25%">
        <col width="50%">
        <col width="25%">

    </colgroup>
    <tr>
        <td style="text-align: center"><img usemap="#lol" src="Bilder/League-Of-Legends-Logo-4.jpg" width="400px"> </td>
        <td style="text-align: center"><img src="Bilder/logo.jpg" width="70%" usemap="#eXo"></td>
        <td style="text-align: center"><img usemap="#lol" src="Bilder/League-Of-Legends-Logo-4.jpg" width="400px"></td>
    </tr>
</table>
<form action="S.php" method="post">
    <input id="login" type="submit" name="Login" value="Login" >
    <input id="Rechts" type="password" name="Passwort" size="13" placeholder="Passwort" maxlength="30">
    <input id="Rechts" type="text"  name="Name" size="13" placeholder="Benutzername" maxlength="16">
</form>
<br><br>
<table>
    <colgroup>
        <col width="11.11%">
        <col width="11.11%">
        <col width="11.11%">
        <col width="11.11%">
        <col width="11.11%">
        <col width="11.11%">
        <col width="11.11%">
        <col width="11.11%">
        <col width="11.11%">
    </colgroup>
    <tr>

        <td style="text-align: center"><a href="H.html" class="class1">Home</a></td>
        <td  style="text-align: center"><a href="W.html" class="class3">Was ist League of Legends?</a></td>
        <td  style="text-align: center"><a href="T.html" class="class1">Top Laner</a></td>
        <td  style="text-align: center"><a href="J.html" class="class1">Jungler</a></td>
        <td  style="text-align: center"><a href="M.html" class="class1">Mid Laner</a></td>
        <td  style="text-align: center"><a href="A.html" class="class1">AD Carry</a></td>
        <td style="text-align: center" ><a href="S.html" class="class1">Supporter</a></td>
        <td  style="text-align: center"><a href="K.html" class="class4">Kontakt</a></td>
        <td  style="text-align: center"><a href="SH.html" class="class4">Shop</a></td>

    </tr>
</table><br>
<table >
    <tr>
        <th id="td5"> <span id="weis"> Spieler Profil von Fabian (Top Laner)</span></th>
    </tr>

    <tr>
        <td> <span id="mitte"> Profilbild</span><br> <img id="left" src="Bilder/305896.jpg" width="20%" > </td>


    </tr>


</table>



</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Hallo

ob es auch möglich ist aus meinem HTML code sowas zu machen ohne viel zu verändern

Nein, das ist es leider nicht.

ob ich es einfach verbockt habe

Wahrscheinlich ja.

Grundsätzlich kannst du deine Seite erstellen und gestalten wie du willst. Also auch mit einem sachlich eigentlich falschen Tabellenlayout.

Bis zum Jahr 2000 gab es für Webseiten kaum Gestaltungsmöglichkeiten. (Gestaltung = Layout) Deshalb wurden Tabellen bewußt zur Gestaltung mißbraucht. Allerdings haben Layouttabellen viele Nachteile, die in Kauf genommen werden mussten.

Mit der Einführung von CSS2 im Jahr 2000 hat sich das grundlegend geändert. Seitdem sind Tabellen zur Gestaltung nicht mehr erforderlich und auf die Nachteile konnte verzichtet werden.

Tabellenlayouts werden heutzutage nur noch verwendet, wenn der Webseitenersteller keine Besucher wünscht oder sie abschrecken will. Wenn das dein Wunsch ist kannst du natürlich beim Tabellenlayout bleiben - mit all seinen Nachteilen.

Du hast zum Beispiel keinen Einfluß, mit welchen Geräten deine Besucher deine Webseite aufrufen. Spätestens mit Tablets und Smartphones, zumal im Hochformat, sind Webseiten mit einem Tabellenlayout nicht mehr zu nutzen.

Du brauchst ja nur mal deinen Browser schmaler zu ziehen. Es ist immer wieder erstaunlich, wie viele Webseitenersteller ihre Fortschritte nur im Vollformat auf ihren Großbildschirmen betrachten und noch nicht mal das schaffen.

Und wenn Webseitenersteller behaupten, grade ihre Besucher würden nur vor großformatigen Desktop-Bildschirmen sitzen glaube ich ihnen nicht.

Dazu habe ich schon zu häufig erlebt, dass Webseitenersteller, für die nur ein Tabellenlayout in Frage kam, nach ein, zwei Jahren mit dem Wunsch erschienen, ihre Seite doch responsive zu machen. Es würden sich einfach zu viele Besucher beschweren oder sie hätten kaum noch Besucher. Bei einem Tabellenlayout bleibt dann nur die Antwort: Abreißen und alles neu machen.

Wenn deine Besucher dich nicht interessieren kannst du gerne beim Tabellenlayout bleiben. In Foren wirst du dazu aber kaum Unterstützung finden. Für uns Helfende ist es nervig Lösungen zu finden, von denen wir wissen, dass sie innerhalb kurzer Zeit wieder über Bord geworfen werden.

Tabellendaten, für die Tabellen gedacht sind, benötigen auch kaum Formatierungen. Wer in den letzten Jahren HTML / CSS gelernt hat, kann die deshalb kaum noch formatieren, außer ein paar Grundformatierungen . Das ist schlicht unnötig geworden. Und wer wie ich noch mit Tabellenlayouts begonnen hat, ist im allgemeinen froh, auf die Nachteile verzichten zu können.

In halbwegs aktuellen Anleitungen zu HTML / CSS sind Tabellen entsprechend auch nur noch ein Nebenkapitel, in dem nur die grundlegenden Elemente und CSS-Anweisungen erläutert werden.

Ansonsten kannst du gleich aktuelles HTML5 / CSS3 wie im Standard vorgegeben benutzen - oder spätestens wenn du von deinen Besuchern genügend Prügel bezogen hast.

Siehe zum Beispiel:

http://www.css4you.de/wslayout1/

oder

http://www.barrierefreies-webdesign.de/knowhow/layout-tabellen/

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Werbung:
Ok vielen Dank für diese Informationen das war wirklich sehr lehrreich. Natürlich werde ich nun auf HTMl 5 und CSS3 umsteigen nach diesen Informationen. Natürlich muss ich jetzt wieder von 0 beginnen leider jedoch auf die Zukunft gesehen bestimmt die richtige Entscheidung. Ich werde mir nun ein paar Tutorials anschauen zu HTML 5 und CSS3. Ich habe jetzt 3 HTML seiten und 2 CSS seiten gibt es eine Möglichkeit Ihnen diese zukommen zu lassen ? damit ich sehe wie man auf die Tabellen verzichtet, weil ehrlich gesagt ist mir während den Arbeiten auch aufgefallen das Tabellen sehr viele Nachteile haben wusste jedoch nicht das man diese auch umgehen kann. Zudem habe ich ihren code eingefügt bin und nun auf ein weiteres Problem gestoßen und zwar dieses:
http://prntscr.com/ayt6cq
ich habe keine Ahnung wieso sich ihr Code vor meine Menü leiste schiebt^^
Und wie kann man den Code so schicken: http://prntscr.com/ayt8kv

Aktueller Code:
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> eXo-Prime League of Legends Team</title>
    <link href="S.css" type="text/css" rel="stylesheet">
    <link href="L.css" type="text/css" rel="stylesheet">
</head>
<body>
<map name="lol">
    <area shape="rect" coords="0,0,400,175" target="window" alt="league of Legends" href="[URL]http://euw.leagueoflegends.com/de[/URL]">

</map>
<map name="eXo">
    <area shape="rect" coords="0,0,1344,756" target="window" alt="league of Legends" href="[URL]http://www.my-exodus.de[/URL]"/>
</map>
<table>
    <colgroup>
        <col width="25%">
        <col width="50%">
        <col width="25%">

    </colgroup>
    <tr>
        <td style="text-align: center"><img usemap="#lol" src="Bilder/League-Of-Legends-Logo-4.jpg" width="400px"> </td>
        <td style="text-align: center"><img src="Bilder/logo.jpg" width="70%" usemap="#eXo"></td>
        <td style="text-align: center"><img usemap="#lol" src="Bilder/League-Of-Legends-Logo-4.jpg" width="400px"></td>
    </tr>
</table>
<form action="S.php" method="post">
    <input id="login" type="submit" name="Login" value="Login" >
    <input id="Rechts" type="password" name="Passwort" size="13" placeholder="Passwort" maxlength="30">
    <input id="Rechts" type="text"  name="Name" size="13" placeholder="Benutzername" maxlength="16">
</form>
<br><br>
<table>
    <colgroup>
        <col width="11.11%">
        <col width="11.11%">
        <col width="11.11%">
        <col width="11.11%">
        <col width="11.11%">
        <col width="11.11%">
        <col width="11.11%">
        <col width="11.11%">
        <col width="11.11%">
    </colgroup>
    <tr>

        <td style="text-align: center"><a href="H.html" class="class1">Home</a></td>
        <td  style="text-align: center"><a href="W.html" class="class3">Was ist League of Legends?</a></td>
        <td  style="text-align: center"><a href="T.html" class="class1">Top Laner</a></td>
        <td  style="text-align: center"><a href="J.html" class="class1">Jungler</a></td>
        <td  style="text-align: center"><a href="M.html" class="class1">Mid Laner</a></td>
        <td  style="text-align: center"><a href="A.html" class="class1">AD Carry</a></td>
        <td style="text-align: center" ><a href="S.html" class="class1">Supporter</a></td>
        <td  style="text-align: center"><a href="K.html" class="class4">Kontakt</a></td>
        <td  style="text-align: center"><a href="SH.html" class="class4">Shop</a></td>

    </tr>
    <header role="banner">
    </header>
    <nav role="navigation">
    </nav>
    <main role="main">
        <article class="spieler">
            <div>
                <p>Profilbild</p>
                <figure>
                    <img src="[URL]https://www.html.de/attachments/305896-jpg.4398/[/URL]" alt="Bruno Phänox">
                </figure>
            </div>
            <section>
                <h2>Bruno Phänox</h2>
                <p>In-Game: Imperator</p>
            </section>
        </article>
    </main>
    <footer role="contentinfo">
    </footer>

</body>
</html>

grüße Phänox

Ps: Vielen dank für Ihre Geduld mit mir^^
 
Zuletzt bearbeitet von einem Moderator:
Hallo

So allmählich überschreiten deine Wünsche die Möglichkeiten des Forums und auch meine Zeitinvestition.

Ich helfe gerne bei abgegrenzten Problemen. Motto: Hilfe zur Selbsthilfe.

Nach und nach wird die Hilfe für dich zur Einzelhilfe, wobei ich dir im Endeffekt deinen gesamten Webauftritt erstelle. Das wird mir zu aufwändig.

Spätestens wenn mir Code am Forum vorbei übermittelt werden soll geht mir auch mein "Lohn" verloren. Nämlich das alle Interessierten von meinen Informationen profitieren. Außerdem bin ich daran interessiert von Anderen Rückmeldungen zu erhalten, falls ich mit meinen Antworten falsch liegen sollte. Das würde bei Umgehung des Forums auch entfallen.

Ich sehe bei dir auch keinen Willen selbst Zeit und Energie aufzuwenden um weiter zu lernen. Ohne ein gewisses Grundwissen nützen dir meine Informationen aber nichts.

Ich helfe dir gerne bei anderen abgegrenzten Fragen und Problemen, aber hier bin ich erst mal raus.

Gruss

MrMurphy
 
Alles klar :) Nur meine letzte frage wieso sich Das Profil bild etc vor meine Menü leiste schiebt wusste ich gerne den habe viele sachen ausprobiert nichts hat geklappt das meine menü leiste wieder vor dem Profil bild ist
 
Werbung:
Nur meine letzte frage wieso sich Das Profil bild etc vor meine Menü leiste schiebt wusste ich gerne
Ganz einfach, weil die zweite Tabelle nicht mehr ordnungsgemäß mit </table> geschlossen wird.

Dürfte demnach wohl beim Kopieren und Einfügen MrMurphys Code passiert sein.
 
Werbung:
Status
Für weitere Antworten geschlossen.
Zurück
Oben