• Hallo zusammen gemeinsam,

    ich hätte da gerne ein Problem:

    ich habe mich irgendwie verzettelt und finde jetzt nicht mehr raus. Ich hoffe ihr könnt mir da raus helfen.

    Ich möchte in meiner Steuerung links (so habe ich das mal genannt) 3 Boxen einbringen eine mit "Neuigkeiten", eine mit "Userbeiträgen" und der Möglichkeit dass User neue Beiträge

    erstellen können, und eine Box mit einer Rangliste. Ich habe so ziemlich alles versucht, was mir eingefallen ist, aber nun weiss ich echt nicht mehr weiter.


    Gruss Enrico

  • Hier die HTML-Datei dazu:


    <!DOCTYPE html>


    <html lang="de">


    <head>


    <meta charset="utf-8">


    <title>DEF-Games Startseite</title>

    <meta name="description" content="Hier sind Spiele zu finden für jung und jung gebliebene, es gibt Spiele für Einzelspieler,

    für 2 und mehr Spieler.Ranglisten zeigen wo man gerade in welchem Spiel steht und vieles mehr.">

    <meta name="autor" content="© EnMiRe (DEF-DarkOpa)">

    <link rel="shortcut icon" href="deffi.ico" type="image/x-icon">


    <link href="main.css" rel="stylesheet">


    <!--[if IE]>


    <script


    src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js">


    </script>


    <![endif]-->


    </head>


    <body>


    <div id="wrapper">



    <!--

    ****************************************************************************************************************************************************

    * *

    * Headerbereich *

    * *

    * Im Headerbereich sollen links, das Bild eines kleinen Drachen erscheinen, In verschieden Farben soll dann die Überschrift <h1> folgen *

    * auf der rechten Seite soll ein Platzhalter für ein eigenes Bild bzw. eines eigen erstellten Avatars sein, daneben dann die Möglichkeit *

    * der Navigation im Heaerbereich ( Annmelden, Abmelden, Registration,Gastzugang). *

    * *

    ****************************************************************************************************************************************************

    -->


    <header>


    <!--

    ****************************************************************************************************************************************************

    * *

    * Der Kleine Drache soll als Symbol der Seite dienen *

    * *

    ****************************************************************************************************************************************************

    -->


    <div id="dragon">


    <img src="def_fi.jpg." width="60" height="90"

    alt="Avatar des Users">


    </div>



    <p id="logotext">

    <strong>DEF-Games </strong>

    </p>



    <!--

    ***************************************************************************************************************************************************

    * *

    * Hier soll ein Platz sein wo der User ein Avatar oder ein eigenes Bild hochladen können *

    * *

    ***************************************************************************************************************************************************

    -->


    <div id="user">



    <img src="def_fi.jpg." width="60" height="90"

    alt="Kleiner Drache als Maskotchen der Seite">


    </div>


    <!--

    ***************************************************************************************************************************************************

    * *

    * Navigation innerhalb des Headers *

    * *

    ***************************************************************************************************************************************************

    -->




    <ul>

    <li><a href="login.html">Anmelden</a></li>

    <!-- <li><a href="logout.html">Abmelden</a></li> -->

    <li><a href="regist.html">Registrieren</a></li>

    <li><a href="gast.html">Gastzugang</a></li>

    </ul>



    </header>


    <!--

    ****************************************************************************************************************************************************

    * *

    * Navigation oben unterhalb des Headers *

    * *

    * Hier soll nun eine Navigationsleiste erscheinen, wie Startseite, Über die Seite, Profil und was noch hin zu kommen wird *

    * *

    ****************************************************************************************************************************************************

    -->


    <nav id="steuerungoben">


    <ul>

    <li><a href="index.html">Startseite</a></li>

    <li><a href="info.html">Über diese Seite</a></li>

    <li><a href="profil.html">Profil</a></li>

    </ul>


    </nav>


    <!--

    ****************************************************************************************************************************************************

    * *

    * linke Boxen für Neuigkeiten, User Beiträge, Rangliste *

    * *

    * auf der linken Seite sollen Boxen sein für Neuigkeiten, Userbeiträge, neue Beiträge erstellen, Bestenliste für die verschieden Spiele *

    * *

    ****************************************************************************************************************************************************

    -->


    <aside>


    <nav id="steuerunglinks">


    <ul>

    <li>Neuigkeiten</li>

    <li>Userbeiträge</li>

    <li><a href="beitrag_neu.html">Neuen Beitrag erstellen</a></li>

    <li><a href="rangliste.html">Bestenliste</a></li>

    </ul>


    </nav>


    </aside>


    <!--

    ****************************************************************************************************************************************************

    * *

    * Bodybereich *

    * *

    * Im Bodybereich sollen images auf die verschieden Spiele als links dargestellt werden *

    * *

    ****************************************************************************************************************************************************

    -->


    <section>


    <h1>Gameauswahl</h1>


    <p>Inhalt der Seite</p>


    <!--

    ****************************************************************************************************************************************************

    * *

    * Bereich für Sonstiges *

    * *

    * oberhalb des Footers soll ein Bereich entstehen für Werbung, Beschwerden. Kommentare und Ideen *

    * *

    ****************************************************************************************************************************************************

    -->


    </section>


    <div id="sonstiges">


    <ul>

    <li><a href="beschwerde.html">Beschwerden über andere User</a></li>

    <li><a href="komment.html">Kommentare</a></li>

    <li><a href="ideen.html">Ideen</a></li>

    </ul>


    </div>



    <!--

    ****************************************************************************************************************************************************

    * *

    * Footerbereich *

    * *

    * Im Footerbereich sollen Infos über den Ersteller der Seite, Impressum und Kontakt *

    * *

    ****************************************************************************************************************************************************

    -->


    <footer>


    <ul>

    <li><a href="impressum.html">Impressum</a></li>

    <li><a href="kontakt.html">Kontakt</a></li>

    </ul>


    © EnMiRe (DEF-DarkOpa)


    </footer>


    </div>


    </body>


    </html>

  • und hier die CSS-Datei


    * {

    margin: 0;

    padding: 0;

    }


    /*

    **********************************************************************************************************************************************************

    * *

    * HTML5-Elemente für alte Browserversionen aktivieren *

    * *

    **********************************************************************************************************************************************************

    */


    body {

    background-color: black;

    color: red;

    text-align: center;

    }



    header, nav, footer, aside, section {

    display: block;

    }


    #wrapper {

    /* background-color: #FF55FF; */

    width: 1200px;

    border: 2px solid silver;

    margin: 0 auto;

    text-align: left;

    }


    /*

    **********************************************************************************************************************************************************

    * *

    * Headerbereich *

    * *

    **********************************************************************************************************************************************************

    */




    header {


    /* background-color: green; */

    /* width: 950px; */

    height: 110px;

    margin: 2px;

    border: 2px solid silver;

    }




    header ul {


    list-style-type: none;

    padding-left: 1100px;

    margin-top: -100px;

    }


    header a {

    color: silver;

    }




    #logotext {

    margin-top: -100px;

    padding-left: 400px;

    font-size: 20pt;

    color: red;

    }




    #dragon img{

    margin: 5px;

    border: 2px solid silver;


    }



    #user img{

    margin-left: 1000px;

    margin-top: -33px;

    border: 2px solid silver;


    }







    #steuerungoben {

    /* background-color:orange; */


    height: 18px;

    margin: 2px;

    border: 2px solid silver;

    }


    #steuerungoben ul {

    list-style-type: none;

    }


    #steuerungoben li {

    display: inline;

    }


    #steuerungoben a {

    color: silver;

    display: block;

    width: 230px;


    float: left;

    border-right: 2px solid silver;

    text-align: center;

    }


    #steuerunglinks {


    /* background-color: brown; */

    width: 220px;

    height: 500px;

    margin-top: 1px;

    margin-left: 2px;

    margin-bottom: 3px;

    margin-right: 3px;

    border: 2px solid silver;

    float: left;

    }


    #steuerunglinks ul {

    list-style-type: none;

    }




    section {

    /* background-color: #5769FF; */

    margin-left: 227px;

    margin-right: 2px;

    margin-top: 2px;

    margin-bottom: 2px;


    height: 500px;

    border: 2px solid silver;


    }


    #sonstiges {

    /* background-color: #4FD8E8; */

    height: 20px;

    margin: 2px;

    border: 2px solid silver;


    }

    #sonstiges ul {

    list-style-type: none;

    }


    #sonstiges li {

    display: inline;

    }


    #sonstiges a {

    display: block;

    width: 230px;

    float: left;


    text-align: center;

    }


    footer {

    /* background-color: green; */


    height: 18px;

    margin: 2px;

    border: 2px solid silver;

    text-align:center;

    clear: both;


    }


    footer ul{

    list-style-type: none;

    }


    footer li{

    display: inline;

    }


    footer a {

    display: block;

    width: 230px;

    float: left;

    border-right: 2px solid silver;

    text-align: center;

    }

  • Könntest du erstens deinen Code in den Code tags posten und formatieren?

    HTML

    Und CSS

    Dann sieht das schon mal so aus

    * Link entfernt, weil existiert nicht mehr *


    Und jetzt bitte nochmal erklären wie es aussehen soll oder du machst mal eine Skizze fertig, das wäre noch besser.

    Auf jeden Fall wäre Flexbox sinnvoll und einige CSS angaben, wären dann auch weg die man dann nicht mehr brauch

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!