Mit welchen HTML Tags und CSS Eigenschaften komme ich zu meinem gwünschten Layout?

    Hallo Community,

    seit einigen Tagen widme ich mich wieder dem programmieren mit HTML und CSS, wo mit ich mein Wunsch Layout erstellen möchte.

    Eine Datei mit HTML und CSS habe ich schon erstellt, als erstes möchte ich gerne wissen um welche Art von Layout es sich bei diesem handelt.
    Des weiteren frage ich mich mit welchen HTML Tags und CSS Eigenscaften ich hier arbeiten muss um mein gewünschtes Layout zu bekommen.

    Ich würde mich freuen wenn Ihr mir in diesem Punkt weiter hlefen könntet damit ich mit meiner Seite weiter machen kann

    Ich würde mich sehr auf eine Antwort freuen.

    LG
    Webmaster2015

    Hallo,

    ich denke deine Fragen sind leider zu ungenau um sie abschließend beantworten zu können.

    Zitat

    welche Art von Layout es sich bei diesem handelt.

    Aus deiner Grafik ist nicht mal zu erkennen, ob sie eine oder zwei Seiten darstellen soll. Und festgeschriebene Arten von Layouts gibt es nicht.

    Zitat

    Des weiteren frage ich mich mit welchen HTML Tags und CSS Eigenscaften ich hier arbeiten muss um mein gewünschtes Layout zu bekommen.

    Das hängt vom Inhalt ab, der noch komplett fehlt. Einfach zusammenhanglos die erforderlichen HTML-Elemente und CSS-Eigenschaften aufzuzählen macht meiner Ansicht nach wenig Sinn. Wie soll dir das weiterhelfen?

    Insgesamt scheinen deiner Bilder im oberen Bereich viel zu viel Platz einzunehmen. Die Besucher wollen möglicht unkompliziert an die eigentlichen Informationen ohne erst lange scrollen zu müssen.

    Und separate Startseiten (falls das oben in deinem Bild eine sein soll) sind megaout. Die will seit dem letzten Jahrtausend niemand mehr haben -> weglassen.

    Gruss

    MrMurphy

    Ok, dann stelle ich meine Fragen genauer

    Bei dem unteren Fenster meiner Grafik (siehe oben) mit welchen Tags z.B. Div-Container und CSS muss ich arbeiten um an das gewüscnhte Ergebnis zu gelangen?

    Ja die obere Seite in meiner Grafik befinden sich zwei Arten von Seiten das eine ist die Startseite und die andere die eigentliche Seite mit Inhalt und Menü

    Würde mich über Antwort freuen.

    2 Mal editiert, zuletzt von Webmaster2015 (28. August 2015 um 14:14)

    Hallo

    HTML:

    div
    header
    main
    nav
    article
    aside
    section
    footer
    h1
    h2
    p
    ul
    li
    a
    img

    CSS:

    padding
    border
    margin
    display
    float/clear und/oder flex und/oder inline-block
    background
    text-decoration
    text-align
    style-type-decoration
    Pseudo-Elemente
    max-width

    Gruss

    MrMurphy

    Ok, dann werde ich jetzt mal meinen bestehenden HTML und CSS Code nennen den ich bisher habe.

    HTML

    <html>
    <head>
    <title>Seitentitel</title>
    <link rel="stylesheet" type="text/css" href="layout.css">
    </head>
    <body>
    <div id="fenster">
    <div id="menue">

    </div>
    <div id="inhalt">

    </div>
    <div>
    </body>
    </html>

    CSS

    #fenster {
    width: 900px;
    height: 500px;
    background: blue;
    }
    #menue {
    width: 200px;
    height: 500px;
    background: green;

    Muss ich jetzt die ganzen genannten Elemente verwenden oder nur einige, die Trennung HTML und CSS ist klar nur wie muss ich diese jetzt anlegen ?

    Um meine Frage einfacher zu beantworten habe ich meinen bestehenden HTML und CSS Code mit eingefügt

    Hallo

    um das Lernen der Grundlagen wirst du nicht herumkommen.

    Du kannst alle Elemente verwenden, musst es aber nicht. Webseiten können auf mehreren Wegen korrekt erstellt werden.

    Und wie schon geschrieben ist es sinnlos Webseiten ohne Inhalt zu erstellen. Ohne Inhalt müssen den Elementen Größenangaben zugewiesen werden, die mit Inhalt nicht mehr passen und die auch nicht auf unterschiedliche Fenstergrößen reagieren können.

    Erst wenn du den Inhalt (Überschriften, Menüpunkte der Navigation, Texte, Bilder) lieferst kannst du eine Webseite erstellen. Der Inhalt steht immer an erster Stelle.

    Mit den bisherigen Informationen kann ich nur eine Webseite erstellen, die in der Praxis nicht funktionieren kann. Das ist pure Zeitverschwendung.

    Was ich schon raten kann: Dein div id="fenster" ist wahrscheinlich überflüssig.

    Gruss

    MrMurphy

    Einmal editiert, zuletzt von MrMurphy (28. August 2015 um 15:08)

    ok, aber ich wollte eigentlich nur die HTML Tags und CSS Eigenschaften die ich auch wirklich für meine Seite benötige, so habe ich das auch in meinem Eröffnungspost diesen Threads gemeint

    Trotz alle dem Danke dafür, ich möchte jetzt auch nicht undankbar rüber kommen oder so, aber mich bringt es nicht wirklich weiter.

    Ich würde mich freuen wenn man mir mit Beispiel Codes zur Seite stehen könnte.

    - - - Aktualisiert - - -

    Durch die letzten Antworten ist trotzdem die Frage nicht geklärt ob es ein, 1 Spaltiges 2 Spaltiges usw. ist

    Wie MrMurphy schon schrieb- um die Grundlagen wirst du nicht herumkommen. Also lernen und nicht erwarten, dass hier jemand jedesmal deine überflüssigen Fragen beantwortet.

    aber Fragen darf man und da kann man doch auch erwarten das man auf seine Fragen eine Antwort bekommt weil schlißlich heißt dieses Forum ja forum hilft oder sehe ich das falsch?

    Weil durch diese Erwartung habe ich mich ja auch hier angemeldet um Antworten auf meine Fragen zu bekommen weil jeder hat mal angefangen oder nicht und jeder hat auch fragen gestellt.

    - - - Aktualisiert - - -

    fragen darf man stellen und da kann man doch auch erwarten eine Antwort auf die Fragen zu bekommen oder sehe ich das falsch?

    - - - Aktualisiert - - -

    Ich habe einen Code

    <!DOCTYPE html>
    <html lang="de">
    <head>
    <meta charset="utf-8">
    <title>Mein Titel</title>
    </head>
    <body bgcolor="#FF9900" text="#0000CC">
    <div id="seitenbereich">
    <style type="text/css">
    <!--
    #navi {
    float:left;
    width:13em;
    background-color:thistle;
    }

    #inhalte {
    margin: 0 10em 0 13em;
    background-color:lightblue;
    }

    #infokasten {
    float:right;
    width: 10em;
    background-color:yellowgreen;
    }
    -->
    </style>
    <div id="navi">
    <ul>
    <li>Startseite</li>
    <li>Impressum</li>
    </ul>
    </div>

    <div id="infokasten">
    Auf dieser Seite bekommen Sie Informationen zu ...
    </div>

    <div id="inhalte">
    Hier HTML und CSS lernen und die
    eigene Website erstellen - selbst ist der Mensch
    </div>

    </div>

    <div id="menue">
    </div>
    </body>
    </html>

    Entschuldigung bitte wenn ich so frage aber auf Grund meiner Situation (die ich hier nicht diskutieren möchte) kann ich mir dies nur mit Unterstützung und Beispielen beibringen weshalb ich mich hier auch angemeldet habe

    Und würde mich freuen wenn man mich mit Beispielen Unterstützen könnte, aber das werde ich hier nicht erleben das dies passiert oder?

    Hallo,

    ist dies ein Code den ich für mein gewünschtes Layout verwenden kann oder müssen da noch änderungen vor genommen werden?


    <!DOCTYPE html>
    <html lang="de">
    <head>
    <meta charset="utf-8">
    <title>Pierre Verley | Home</title>
    <link rel="stylesheet" type="text/css" href="layout.css">
    </head>
    <body>

    <div id="wrap">
    <div id="header">


    </div>
    <div id="main">
    <div id="sidebar">
    </div>
    <div id="content">



    </div>
    </div>
    <div id="footer">
    </div>
    </div>

    </body>
    </html>

    würde mich über Antwort freuen.

    Hallo

    ich bin es wieder, ich habe hin und her probiert aber irgendwie will es nicht so wie ich will.

    Hier der Code

    <!DOCTYPE html>
    <html lang="de">
    <head>
    <meta charset="utf-8">
    <title>Pierre Verley</title>
    </head>
    <body bgcolor="#FF9900" text="#0000CC">
    <div id="seitenbereich">
    <style type="text/css">
    <!--


    #inhalte {
    margin: 22;
    border: 50;
    padding: 35px;
    withe: 100;
    height: 150;
    background-color:yellow;
    }

    .nav div{
    float: left;
    width: 150px;
    height: 22px;
    background: orange;
    color: white;
    margin: 2px;
    text-align: center;
    }

    -->
    </style>


    <div id="inhalte">
    <div class="nav">
    <h1>Pierre Verley</h1>
    <h2>Meine persoenliche Homepge</h2>
    <header>
    <img src="ilm.jpg" height="135" width="995">
    </header>
    <div><a href="pierre.htm">Pierre Verley</a></div> <div><a href="beruflich.html">Beruflich</a></div><div><a href="fernsehen.htm">Fernsehen</a></div><div><a href="sturm.html">Sturm der Liebe</a></div><div><a href="kontakt.htm">Kontakt</a></div><div><a href="impressum.html">Impressum</a></div>
    </div>
    </div>

    </div>

    <div id="menue">

    </div>
    </body>
    </html>

    würde mich auf Antwort freuen.