boxen erstellen

Enrico Michael · 19. Januar 2020

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

Enrico Michael · 19. Januar 2020

Hier die HTML-Datei dazu:

<!DOCTYPE html>

<head>

<title>DEF-Games Startseite</title>

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

<!--[if IE]>

<script

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

</script>

<![endif]-->

</head>

<body>

<!--

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

* *

* 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). *

* *

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

-->

<!--

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

* *

* Der Kleine Drache soll als Symbol der Seite dienen *

* *

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

-->

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

alt="Avatar des Users">

</div>

<strong>DEF-Games </strong>

</p>

<!--

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

* *

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

* *

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

-->

<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="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 *

* *

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

-->

<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>

<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 *

* *

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

-->

<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>

<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 *

* *

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

-->

<ul>

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

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

</ul>

</footer>

</div>

</body>

</html>

Enrico Michael · 19. Januar 2020

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;

}

basti1012 · 19. Januar 2020

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

HTML

<!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">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script>
</head>
<body>
    <div id="wrapper">
        <header>
            <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>
            <div id="user">
                <img src="def_fi.jpg." width="60" height="90" alt="Kleiner Drache als Maskotchen der Seite">
            </div>
            <ul>
                <li><a href="login.html">Anmelden</a></li>
                <li><a href="regist.html">Registrieren</a></li>
                <li><a href="gast.html">Gastzugang</a></li>
            </ul>
        </header>
        <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>
        <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>
        <section>
            <h1>Gameauswahl</h1>
            <p>Inhalt der Seite</p>
        </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>
        <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>

Alles anzeigen

Und CSS

CSS

* {
     margin: 0;
     padding: 0;
}
 body {
     background: black;
     color: red;
     text-align: center;
}
 header, nav, footer, aside, section {
     display: block;
}
 #wrapper {
     width: 1200px;
     border: 2px solid silver;
     margin: 0 auto;
     text-align: left;
}
 header {
     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 {
     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 {
     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 {
     margin-left: 227px;
     margin-right: 2px;
     margin-top: 2px;
     margin-bottom: 2px;
     height: 500px;
     border: 2px solid silver;
}
 #sonstiges {
     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 {
     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;
}

Alles anzeigen

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

Enrico Michael · 19. Januar 2020

Sry, das es da gesonderte Code-tags gibt wusste ich nicht:-)

m.scatello · 19. Januar 2020

Siehe https://www.w3schools.com/howt…yhow_css_two_columns_flex

Enrico Michael · 19. Januar 2020

Danke

boxen erstellen

Jetzt mitmachen!

Teilen