Problem bei der Erstellung eines responsive Menüs mit html/css ohne Javascript

[Ansophie]

Hallo allerseits!

Ich bin AnSophie und weil ich Hilfe brauche, bin ich neu hier. =)

Ich arbeite mit html5/CSS3.

Seit bald 3 Tagen plage ich mich mit meinem „Menü“, weil ich meine gesamte Website mobilefriendly machen muss/möchte.
Bis jetzt hatte ich eine „sidebar“, mit der geht responsive schlecht und es gefällt mir auch nicht mehr.

Ich habe einige Unterseiten mit mehreren Textabschnitten pro Seite.
Damit man nicht den ganzen Text „durchlesen“ muss, um eine Info zu finden/entdecken, die man sucht, möchte ich die einzelnen Textabschnitte übersichtlich zur Auswahl zur Verfügung stellen - siehe Bild „menue1“.

Das „mega menü“ wäre zwar eine Option, allerdings ist es zu unübersichtlich - siehe Bild „menue2“. Außerdem hätte ich die einzelnen Kategorien lieber erst zum „Anklicken“.



Folgendes gelingt mir leider nicht

1. FAQ soll aufgeklappt bleiben, wenn man draufklickt, damit man die einzelnen Kategorien/Unterseiten sehen kann.

2. Wenn man dann auf eine Unterseite klickt- sollen die Textabschnitte horizontal auswählbar werden, also eigentlich auch sichtbar bleiben - siehe Bild "menue3" (ist eine Fotomontage).

3. Wenn sich der Bildschirm verkleinert, soll alles „untereinander“ rutschen. („mediaqueries“ sind dann wohl das nächste Problem, das fehlt mir leider auch noch der Durchblick.)

4. ein sticky Menü wäre praktisch, oder ein "Hamburger" auf der Seite, damit man nicht rauf scrollen muss, um was anderes auszuwählen. mir wird bei so etwas immer übel.

Falls jemand eine bessere Idee hat, so ein Menü schöner zu gestalten, ich bin für Ideen/Vorschläge dankbar. Ich bin an einem Punkt angelangt, wo ich den „Wald vor lauter Bäumen nicht mehr sehe“ =/

Anbei auch die html/css-dateien.


lg, AnSophie

 

[basti1012]

Ich habe mal etwas gesucht .
*** Link entfernt, weil nicht mehr erreichbar ***

Bei Home kannst du sehen, dass das es 2 Mal horizontal nach unten geht.

So müsstest du es dann auf die anderen Menüpunkte auch anwenden.
Das @mediaqueries und responsive und deinen Hamburger kann man dann auch da noch einbauen.

Da dieses Beispiel sehr einfach gestrickt ist sollte das alles sehr einfach anpassbar sein für deine Vorstellungen.
Sticky Menü brauch man bei den Menü ja nur bei

ul#menu {
  top:0;
    position: sticky;
    }

zu ändern.
Beim kleinen Menü für zb Handy muß man dann mit @mediaqueries paar Sachen in der Css ändern, und noch den zusätzlichen Hamburger noch mit einbauen.

Soll das alles ohne Javascript laufen?
Zwar wären paar Sachen einfacher mit JS , aber dein Vorhaben sollte auch komplett ohne JS ganz gut klappen, falls ich nix falsch verstanden habe

 

[Ansophie]

hey basti1012, danke für deinen Tipp.

habs schon ausprobiert, allerdings gelingt mir in dieser Variante nicht, die Felder in allen drei balken links auszurichten.

welche werte muss ich ändern, damit
das ganze größer wird, aber nicht breiter als der header (body mit einer max-width: 90rem) und
die 2. und 3. Ebene entsprechend nach unten versetzt werden und sich nicht überlappen.

und wie stell ich das dann mit dem responsiv ein, jetzt bleibt alles fix.

lg, ansophie

 

[basti1012]

Meinst du das mit responsive so ungefähr

Problem bei der Erstellung eines responsive Menüs mit html/css ohne Javascript lösung 3

Problem bei der Erstellung eines responsive Menüs mit html/css ohne Javascript lösung 3 Hallo allerseits! Ich bin AnSophie und weil ich Hilfe brauche, bin ich neu hier. =) Ich arbeite mit html5/CSS3. Seit bald 3 Tagen plage ich mich mit meinem „Menü“, weil ich meine gesamte Website...

basti1012.bplaced.net

In der Handy Ansichr ist alles links und bei einen Menü Punkt tiefer leicht versetzt.
Soll das so auch in der normalen Ansicht sein oder wie meinst du das ?

 

[Ansophie]

ja so wäre es in der handy ansicht super, ist es möglichen einen hamburger wie hier https://www.mediaevent.de/tutorial/css-transform.html einzufügen?

für die desktopversion, hätt ich den vorschlag, den du in #2 schon gemacht hast genommen, aber da ging eben nicht das ich es horizontal mehr nach links geht und größer konnte ich es auch nicht machen.
die Balken sollten exakt untereinander aufgehen, damit möglichst alles in einer linie bleibt, weißt du was ich mein?

 

[basti1012]

Meinst du das der Hamburger animiert ist .das beim Klicken ein x entsteht ?b
Das andere verstehe ich nicht ganz.
Hast du da ein Beispiel oder Bild wie du dir das vorstellen tust ?

 

[Ansophie]

ja, genau statt dem hamburger, dann ein x.

also im "Bild" siehst du den Grundriß meiner jetzigen website und die zeile 2 und 3 in Grün aus dem Vorschlag #2.

Der Firmenname/Branche, Kontakt und der Text unten im <main> steht in einer Linie untereinander,
die items in 2 und 3 tanzen aber aus der Reihe.
Wie in "Bild 2" gut zu sehen, müssten also Home und alle anderen items derselben Zeile genauso wie die in der 2. und 3. Zeile nach links rutschen.

und das zweite war, dass das Größenverhältnis zum bereits bestehenden header etc. nicht stimmt -
Die 2. und 3. Zeile müssten höher werden und dieselbe Breite wie Zeile 1 bekommen.
Es ging nicht wirklich, es war dann zusätzlich auch noch überlappt, weils aufgrund der größeren font-size dann auch noch umgebrochen hat. margin/padding und auch die top-werte ändern hat da nicht viel gebracht. hab sehr wahrscheinlich am falschen manipuliert.

Item ist ja ein schön-kurzes Wort und das geht sich prima mehrmals in einer Zeile aus, aber ich hab da leider einige längere wörter oder sogar 2 oder 3 Wörter stehen.

p.s. Javascript ist leider kaum eine Option für mich, weil ich mich damit nicht auskenne und unheimlich ist es mir auch ein bisschen. =/

lg

 

[basti1012]

kuck mal ob ich das mit den untereinander stehen richtig vertanden habe?

Problem bei der Erstellung eines responsive Menüs mit html/css ohne Javascript lösung 3

Problem bei der Erstellung eines responsive Menüs mit html/css ohne Javascript lösung 3 Hallo allerseits! Ich bin AnSophie und weil ich Hilfe brauche, bin ich neu hier. =) Ich arbeite mit html5/CSS3. Seit bald 3 Tagen plage ich mich mit meinem „Menü“, weil ich meine gesamte Website...

basti1012.bplaced.net

Bei längeren Worten kann man die Wörter brechen oder Silben trennung machen.
Sind die Wörter zu lang dann passen die nicht mehr in das Feld.
Man könnte für das eine Feld die Schrift dann kleiner machen oder so.
Mit Javascript könnte man das automisch auslesen und die größen anpassen.

Ob es da in Css noch was geben tut der ein zu großes Wort automatisch kleiner anzeigen lassen kann das weiss ich gerade auch nicht, zumindest fällt mir gerade nix ein ohne Javascript.

Alle 3 Zeilen haben hetzt die gleiche höhe. und üperlappen auch nicht.
Dein Hamburger hat jetzt auch ein X

 

[Tronjer]

p.s. Javascript ist leider kaum eine Option für mich, weil ich mich damit nicht auskenne und unheimlich ist es mir auch ein bisschen. =/

Das klingt niedlich. ;)

Dazu möchte ich dir einen Ratschlag geben, den mir mein ehemaliger Prof mal erteilt hat, als ich meinte, dass PHP ja noch verständlich sei, aber JavaScript nie mein Ding werden würde. Der Mann sagte damals: "Fang mit jQuery an!".

Das ist nun 8 Jahre her. Mittlerweile bin ich Senior JavaScript Developer und habe mit jQuery nichts mehr am Hut. Aber die leicht verständliche Syntax von jQuery hat mir den Einstieg in die Sprache erst ermöglicht.

 

[daddl3]

zu 1. hier ein Beispiel:

JS using onclick event on li to display block

HTML: <script>function dropdown() { console.getElementById("").style.display="block"; }</script> <div id="dropdown"> <ul> <li onclick="dropdown()">...

stackoverflow.com

geht auch mit jQuery mit einem slide.Toggle

zu 3. mach dich erstmal mit der @media Rolle vertraut. Mehr brauchst du nicht, wenn du nicht professionell Webseiten erstellen möchtest.

zu 4. Da kommst du leider so gut wie gar nicht an Javascript vorbei.
Du kannst es mit @media und @keyframes versuchen, aber an einem onclick kommst du nicht vorbei ^^



Ich habe anfangs auch immer alles selber gemacht und machen wollen.
Jetzt benutze ich Frameworks wie Bootstrap.
Leicht verständlich, geht schnell und sieht schön aus.

Navbar

Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

getbootstrap.com

 

[Ansophie]

Danke für euren Input.
Werde mich da auf jedenfall noch mit @media beschäftigen, aber das geht alles nicht so schnell umzusetzen, wie ich es gerne hätte. Einzig "@media print" ist mir gelungen.
Vermutlich sind es die unterschiedlichen Displaybreiten - Ausrichtungen - eigenen Angaben im "body" wie max-width / min-width oder nur width und die extras für -moz, IE usw., die das ganze etwas undurchsichtig erscheinen lassen.

Von jquery und bootstrap habe ich schon mal gelesen. ;) ... bis jetzt bin ich immer noch ohne ausgekommen, auch wenn dadurch manches vielleicht komplizierter und über Umwege gemacht ist, oder ich auf vieles verzichte, von dem ich nicht mal weiß, dass es existiert.

bzgl. der Unheimlichkeit von Javascript ... heißt es nicht, dass durch das "<script>...</script>" ein Einfallstor für Schadenbringendes geschaffen wird?

sind frameworks und (i)frames dasselbe? frames sind doch angeblich auch nicht so gut, wenn man die verwendet, oder?


ad 3)
ich hatte den Eindruck, dass selbst die Website des größten österr. Nachrichtenportals vergleichsweise mit sehr wenig javascript auskommt und besonders vielen @media queries. Für die Bilder verwenden die grids, glaube ich.

ad 4)
das "Untereinanderrutschen" funktioniert in dieser Vorlage (https://wiki.selfhtml.org/wiki/CSS/fertige_Layouts/Design01) auch ohne Javascript...oder?!
Hier war mir aber der dritte menübalken nicht gelungen und man müsste eben immer nach oben scrollen, aber vielleicht nicht mehr mit einem "sticky" oder "hamburger".


Bisher habe ich alles autodidaktisch selbst geschafft und ich bin stolz drauf. Meine Kollegen sind alle von ihren Anbietern und CMS abhängig, ich möchte das nicht sein und komplett an einen Profi abzugeben mag ich nicht, weil es mir ja Spass macht und ich das lernen will. Bisher habe ich noch niemanden gefunden, der mir das anhand meiner website beibringt - also wie so wie Nachhilfe.
Es stimmt, beruflich möchte ich keine Websites erstellen, weshalb ich es sehr beruhigend finde, dass dann @media queries ausreichend sind.
Trotzdem will ich, dass meine Website professionell funktioniert und es gibt noch viel zu lernen - deswegen hab ich mich in eurem Forum angemeldet. =)

jetzt werd ich mal eure Vorschläge durcharbeiten und sehen wie ich mich anstelle.

wie ist das eigentlich mit dem copyright/der quellenangabe, wie/wo soll ich das angeben, wenn ich einen code(schnipsel) von euch verwende?

lg, ansophie

 

[daddl3]

Tracking und Style ist die meiste Anwendung von Javascript. <script> wird nur zum Aufrufen von Java bzw Scripten benutzt. Du kannst aber fast alles damit Programmieren, deswegen wird damit auch viel quatsch gemacht.

Ein Framework ist ein vorgebauter Baukasten, den du benutzen kannst. Ein iFrame nur ein Baustein.



Guck dir den Quellcode von Seiten an, oder downloade dir die Seite.
Dann hast du mehr einblick, wie die Seite geschrieben wurde.
Entweder Css mit <link> oder <script>. Nur weil dein Firefox @media anzeigt, heisst das nicht, dass es trotzdem mit javascrpt geschrieben wurde.

Otto.de wird z.Bsp. komplett mit Java Seitigen Serven betrieben, also nicht in Javascript, sondern mit Java.



ad4) Ja. Wenn duz.Bsp height:80% angiebst, haben die Balken immer die gleiche Größe.




Und da kannst du auch stolz drauf sein, jeder hat so angefangen^^

Und mit der Zeit kommt das auch alles von alleine.

Wenn du hilfe brauchst, schreib einfach. Ich helfe sehr gerne

 

[Aaron3219]

<script> wird nur zum Aufrufen von Java bzw Scripten benutzt.

Nicht ganz! Java ≠ JavaScript. Der <script> tag in Vanilla HTML (also keine Frameworks o.ä.) ist ausschließlich für die Einbindung von client-side Scripten, also meist JavaScript. Genauere Information hier.

sind frameworks und (i)frames dasselbe

Ganz und gar nicht. Ein iframe erlaubt es, ein anderes (meist) HTML-Dokument in eine Seite zu betten.
Für die Erklärung eines Frameworks gefällt mir die folgende Definition:

A web framework (WF) or web application framework (WAF) is a software framework that is designed to support the development of web applications including web services, web resources, and web APIs. Web frameworks provide a standard way to build and deploy web applications on the World Wide Web. Web frameworks aim to automate the overhead associated with common activities performed in web development. For example, many web frameworks provide libraries for database access, templating frameworks, and session management, and they often promote code reuse. Although they often target development of dynamic web sites, they are also applicable to static websites.

Frameworks haben i.d.R. einen Objektorientierten Aufbau, welcher OOP (Objektorientierte Programmierung) erleichtert/ermöglicht. Im Moment macht es für dich allerdings keinen Sinn, schon über die Benutztung eines Frameworks nachzudenken.

ad 3)
ich hatte den Eindruck, dass selbst die Website des größten österr. Nachrichtenportals vergleichsweise mit sehr wenig javascript auskommt und besonders vielen @media queries. Für die Bilder verwenden die grids, glaube ich.

Für eine static Website brauchst du eigentlich nicht viel JS, bzw. gar keins. I.d.R. wird JS dort für kleinere Events benutzt, wie z.B. der klick auf einen Button. Wenn dir jQuery im Moment zu hoch erscheint, finde ich es persönlich auch nicht schlimm, erst einmal auf snippets im Internet zu setzen und diese dann anzupassen. Manchmal reicht es ja schon, ein Objekt auszublenden und ein anderes einzublenden. Dazu gibt es überall Anleitungen im Internet und, im Notfall, ja uns.

Die Seite des Nachrichtenportals, welche auch immer das sein mag, benutzt mit ziemlicher Sicherheit ziemlich viel JS oder vergleichbares (Stichwort: Typescript, Python, etc.). Doch es ist nicht immer auf den ersten Blick sichtbar, da es z.B. unter der Haube (also im Backend) läuft (Stichwort: NodeJS). Mit dieser Thematik musst du dich allerdings auch noch nicht auseinandersetzen.

wie ist das eigentlich mit dem copyright/der quellenangabe, wie/wo soll ich das angeben, wenn ich einen code(schnipsel) von euch verwende?

Ich habe noch nie ein Forenmitglied gesehen, dass jemals eine Copyright-Angabe verlangt hat. Wir machen das hier Ehrenamtlich und gerne. Ich glaube ich spreche hier für alle, wenn ich sage, dass du sie einfach benutzen kannst.

 

[Ansophie]

Hallo,

danke erstmal für eure bisherigen Antworten - die sind schon sehr hilfreich gewesen!

Ich habe das Menü soweit ganz ok hinbekommen. Da ich mit den media queries erst jetzt starte, kann ich noch nicht sagen, wie sich das gesamte im responsive dann umsetzen lässt - darauf möchte ich in der nächsten Zeit nochmal zurückkommen.

Was ich leider nicht geschafft habe ist, wie ich das Menü im Hamburger sowohl horizontal bei größeren und vertikal bei kleineren viewports verschwinden lassen kann.

lg, ansophie

 

[basti1012]

zeig mal dein code den du jetzt hast.
Aber übereinander und nebeneinander kann man ganz einfach mit Flexbox machen

<ul><li>link 1</li><li>link 2</li><li>link 3</li></ul>
<style>
/*nebeneinander*/
ul{
   display:flex;
   flex-direction:row;
}
/*ubereinander*/
ul{
   display:flex;
   flex-direction:column;
}
</style>

in media queries einbauen so

ul{
     display:flex;
     flex-direction:row;
} 
  /*unter 400px ist es dann uebereinander*/
@media only screen and (max-width: 400px) {
  ul{
       display:flex;
       flex-direction:column;
  }
}

 

[Ansophie]

momentan funktioniert wieder gar nichts.

der hamburger wird nicht mehr zu einem x.
wie muss ich die linien ansprechen, damit sie bei :checked reagieren?

ich glaub außerdem ich hab da vielzuviel css-anweisungen die keine funktion haben.

ich blick nicht mehr durch! :(

lg, ansophie

 

[basti1012]

So langsam verliere ich den überblick.Wieso sind da den jetzt 2 Menüs ?
Wo hast du den jetzt den Code her von den Menü ( s ).
Es ist bestimmt einfacher den originalen Code zu nehmen und da drauf zu arbeiten. Mit den Jetzigen Menü komme ich gerade nicht zurecht weil ich nicht weiß was du willst ?
Am Anfang wahr es noch eine 3 Ebene Submenü. Jetzt sind da 2 Menüs , warum ? , soll das so sein ?

Wie soll das den aussehen ? Immer noch so das es 3 ebene in der Wagerechten nach unten auf geht , so wie im Beispiel von post #8 ?



Der Hamburger wird nicht zum X weil die Checkbox über den Hamburger musss, und weil in der Css nach Class="hamburger gesucht wird was es nicht gibt.

 

[Ansophie]

entschuldige, ich hätt die codes nicht mischen sollen.

natürlich soll nur ein menü sein, das obere war dabei, weil das darstellte, was mir gefallen hätte und es war mal was, was funktioniert hat. hatte die idee von dort (https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/).

also hier mein original code.

den hamburger im html-code hab ich in Kommentar gesetzt, weil das menü sonst wieder so blöd verrutscht. um zu sehen, wo es hingehört, bitte die kommentarzeichen entfernen.

Spoiler: html

<!DOCTYPE html>
<html>
<head>
   
<title>startseite</title>
<meta charset="UTF-8" />
<link href="theme.css" rel="stylesheet">
</head>
<body>
<header>
    <div class="container">        
        <a tabindex="-1" title="Zurück zur Startseite" href="index.html">
            <img class="header_logo" src="images/website-logo.jpg" alt="Logo"/>
            <h1></h1></a>
            <p class="visitenkarte">Adresse
                                    <br>Adresse
                                    <br>Tel:
                                    <br>e-mail: <img class="kleines_bild" src="images/tip-website10.jpg" alt="Mail-to" /></p>
    </div>
</header>
<nav>

<!--
     <input type="checkbox" id="hamburg">
        <label for="hamburg" class="hamburg">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
        </label>  -->
   
   
    <div class="navi_lang">
       
    </div>

   
   
    <ul class="navigation_menu">
       
        <li id="current" class="item"><a href="#">Home</a></li>  
           
        <li class="item"><a href="#">item1</a>
            <ul class="dropdown_navi">
                <li><a href="#">item1.1</a></li>
                <li><a href="#">item1.1</a></li>
                <li><a href="#">item1.1</a></li>
                <li><a href="#">item1.1</a></li>
                <li><a href="#">item1.1</a></li>
                <li><a href="#">item1.1</a></li>
            </ul>
        </li>
       
       <li class="item"><a href="#">item1</a>
            <ul class="dropdown_navi">
                <li><a href="#">item1.1</a></li>
                <li><a href="#">item1.1</a></li>
                <li><a href="#">item1.1</a></li>
                <li><a href="#">item1.1</a></li>
            </ul>
        </li>
   
        <li class="item"><a href="#">item2</a>
            <ul class="dropdown_navi">
                <li><a href="#">item1.1</a>
                    <ul class="submenu">
                        <li><a href="#">item1.1.1</a></li>                      
                        <li><a href="#">item1.1.1</a></li>
                        <li><a href="#">item1.1.1</a></li>
                        <li><a href="#">item1.1.1</a></li>
                    </ul>
                </li>
               
                <li><a href="#">item1.1</a>
                     <ul class="submenu">
                        <li><a href="#">item1.1.1</a></li>                      
                        <li><a href="#">item1.1.1</a></li>
                        <li><a href="#">item1.1.1</a></li>
                        <li><a href="#">item1.1.1</a></li>
                    </ul>
                </li>
               
                <li><a href="#">item1.1</a>
                    <ul class="submenu">
                         <li><a href="#">item1.1.1</a></li>                      
                        <li><a href="#">item1.1.1</a></li>
                        <li><a href="#">item1.1.1</a></li>
                        <li><a href="#">item1.1.1</a></li>
                    </ul>
                </li>
           
                <li><a href="#">item1.1</a>
                    <ul class="submenu">
                         <li><a href="#">item1.1.1</a></li>                      
                        <li><a href="#">item1.1.1</a></li>
                        <li><a href="#">item1.1.1</a></li>
                        <li><a href="#">item1.1.1</a></li>
                    </ul>
                </li>
           
                <li><a href="#">item1.1</a>
                    <ul class="submenu">
                         <li><a href="#">item1.1.1</a></li>                      
                        <li><a href="#">item1.1.1</a></li>
                        <li><a href="#">item1.1.1</a></li>
                        <li><a href="#">item1.1.1</a></li>
                    </ul>
                </li>

                <li><a href="#">item1.1</a>
                    <ul class="submenu">
                         <li><a href="#">item1.1.1</a></li>                      
                        <li><a href="#">item1.1.1</a></li>
                        <li><a href="#">item1.1.1</a></li>
                        <li><a href="#">item1.1.1</a></li>
                    </ul>
                </li>

                <li><a href="#">item1.1</a>
                    <ul class="submenu">
                        <li><a href="#">item1.1.1</a></li>                      
                        <li><a href="#">item1.1.1</a></li>
                        <li><a href="#">item1.1.1</a></li>
                        <li><a href="#">item1.1.1</a></li>
                    </ul>
                </li>
            </ul>
        </li>
       
       
        <li class="item"><a href="#">item1</a>
            <ul class="dropdown_navi">
                <li><a href="#">item1.1</a></li>
            </ul>
        </li>
       
        <ul class="navigation_language">
            <li class="nav_lang_en"><a href="#">English</a></li>
            <li class="nav_lang_de"><a href="#">Deutsch</a></li>
        </ul>
    </ul>
   

   
   
</nav>

<main>
 
        <div class="banner">
            <div class="container_banner">
                <div class="column">
                    <div class="headline1">
                        <p class="headline">&bdquo;Lorem ipsum dolor sit amet&rdquo;</p>
                    </div>
                            <div class="headline1_text">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae malesuada ipsum. Duis sit amet leo metus. Vivamus sed libero eleifend, auctor leo non, dignissim tortor. Maecenas quam enim, interdum vitae massa non, tincidunt maximus nisi. Suspendisse vehicula dui sed tempor interdum. Vestibulum pharetra dolor at felis auctor hendrerit. In vel risus dictum, condimentum leo et, tempus magna. Ut pretium semper mauris, nec mattis eros consequat quis. </p> <br>
                                <p class="mehr"><a href="#">mehr erfahren</a></p>
                            </div>
                    </div>
                </div>
            </div>  

           

        <div class="banner">
            <div class="container_banner">
                <div class="column1">
                    <div class="headline2">
                        <p class="headline">&bdquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&rdquo;</p>
                    </div>
                            <div class="headline2_text">
                                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae malesuada ipsum. Duis sit amet leo metus. Vivamus sed libero eleifend, auctor leo non, dignissim tortor. Maecenas quam enim, interdum vitae massa non, tincidunt maximus nisi.</p>
                                <p class="mehr1"><a href="#">Mehr erfahren</a></p>
                            </div>
                    </div>
                </div>
            </div>

   

        <div class="banner">
            <div class="container_banner">
                <div class="column2">
                    <div class="headline2">
                        <p class="headline">&bdquo;Vivamus sed libero eleifend, auctor leo non, dignissim tortor.&rdquo;</p>
                    </div>
                            <div class="headline2_text">
                                <p>Vestibulum pharetra dolor at felis auctor hendrerit. In vel risus dictum, condimentum leo et, tempus magna. Ut pretium semper mauris, nec mattis eros consequat quis. </p>
                                <p class="mehr2"><a href="#">Mehr erfahren</a></p>
                            </div>
                    </div>
                </div>
            </div>

           
   
</main>
<footer>
    <div class="container">    
        <a tabindex="-1" title="Zurück zur Startseite" href="index.html">
            <img class="header_logo" src="images/website-logo.jpg" alt="Logo"/>
            <h1></h1></a>
            <p class="visitenkarte">Adresse
                                    <br>Adresse
                                    <br>Tel:
                                    <br>e-mail: <img class="kleines_bild" src="images/tip-website10.jpg" alt="Mail-to" /></p>
    </div>
        <br>
        <br>
            <hr width=95% ; color= #f8f8ff>
        <br>
            <p>&copy; 2015 - <script type="text/javascript" src="website-funktionen.js"></script>
            <span style="padding-left:250px"><a href="Impressum.html">Impressum &amp; Datenschutzerklärung</a></span></p>
        <br>
</footer>

</body>
</html>

 

[Ansophie]

und hier der css-code in zwei teilen, weil zu groß.

Spoiler: css

/* HTML Website Stylesheet Script 1.0*/
*
{
  margin:0;
  padding:0;
}

body
{
    /* background: url(images/site-background.jpg) no-repeat; */
    background-color: #f8f8ff;/*#660033;*/
    background-position: center;
    background-position: top;
    font-family: Times New Roman;
    font-size: 1.35rem;
    line-height: 1.5rem;
    margin: 0 auto;
    max-width: 90rem;
    padding: 1.25rem 2.5rem 1.25rem 2.5rem;
    border: 1px solid grey;
    letter-spacing: .02em;
}

a
{
    color: #3300CC;
}



header
{
    background-color: #f8f8ff; /*#D9D8F0;*/
    background-image: url("images/") , url(images/.jpg);
    background-position: 35rem , right;
    background-repeat: no-repeat;
    height: 20rem;
    margin: 1rem 0 0 0;
    padding: 0 0 0 0;
    border-left: 1px solid #660033;
    border-right: 1px solid #660033;
    border-top: 1px solid #660033;
    position: relative;
    background-size: contain;
    
}

header a
{
    color: #84041B;
    text-decoration: none;
}

header a:hover
{
    color: #84041B;
    text-decoration: underline;
}

.header_logo
{
    border: 1px solid black;
    float: left;
    height: 6rem;
    margin-right: 2.2rem;
    margin-top: 1.3rem;
    width: 6rem;
}

.container
{
    padding: 0 0 0 2.2rem;
    height: inherit;
    position: relative;
    display: table;
    
}

.container p, .container h1
{
    color: #84041B;
    font-size: 2rem;
    line-height: normal;
    text-align: left;
    padding: 4rem 0 0 0;
    margin: 4.5rem 0 0 0;
    font-variant: small-caps;
    
}

.kleines_bild
{
    height: 1.3rem;
    vertical-align: -0.3rem;
    width: 10.5rem;
}

.container .visitenkarte
{
    color: black;
    font-size: 1.4rem;
    line-height: 1.4rem;
    margin-top: 1rem;
    padding: 0 0 0 0;
}

.container .visitenkarte a
{
    color: #3300CC;
}

nav
{
    border-right: 2px solid #660033;
    border-left: 2px solid #660033;
    background-color: #f8f8ff; /* #D9D8F0*/
    background-position: right;
    background-size: contain;
    height: 5.5rem;
    position: relative;
    /*margin-top: -0.063rem;*/
    padding: 0.313rem 0.313rem 0.313rem 0.313rem;
}

.navi_lang
{
    height: 1.7rem;
    margin: 0 0 0 0;
    padding: 0.5rem 0 0 0;
    position: relative;
    width: auto;
}

.navigation_language
{
    /*background-color: #f8f8ff;  #D9D8F0*/
    color: #660033;
    display: table;
    float: right;
    height: 1.4rem;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    text-align: center;
}

.navigation_language a
{
    color: #660033; 
}
.navigation_language a:hover
{
    background-color: #660033;
    color: #f8f8ff; /*#6666CC;*/
}

.nav_lang_de
{
    /* border-bottom: 0.2rem solid #84041B;
    border-top: 0.2rem solid #84041B;*/
    float: right;
    font-size: 1.4rem;
    font-variant: small-caps;
    font-weight: normal;
    list-style-type: none;
    margin: 0 0.8rem 0 0;
}
.nav_lang_en
{
    /*border-bottom: 0.2rem solid #84041B;
    border-top: 0.2rem solid #84041B;*/
    float: right;
    font-size: 1.4rem;
    font-variant: small-caps;
    font-weight: normal;
    list-style-type: none;
    margin: 0 0 0 0;
}

.navigation_menu
{
    color: #660033;
    height: 2.6rem;
    padding: 0 0 0 0;
    margin: 0.5rem 0 0 0;
    text-decoration: none;
    width: auto;
}
.navigation_menu a
{
    color: #660033;
    text-decoration: none; 
}
.navigation_menu a:hover
{
    background-color: #660033;
    color: #f8f8ff;
    /*color: gold; */
      
}
.navigation_menu #current a
{
    /* background-color: navajowhite;
    color: gold;*/
    text-decoration: underline;
}

.navigation_menu .item
{
    display: inline-block;
    float: left;
    font-size: 1.8rem;
    font-variant: small-caps;
    font-weight: normal;
    margin: 0;
    padding: 0.5rem 2rem 0.5rem 2rem;
    text-align: left;
    width: auto;
}

.navigation_menu .dropdown_navi
{
    background-color: #f8f8ff;
    border: solid 0.1rem #660033;
    /*border-radius: 0.438rem;*/
    color: #660033;
    display: none;
    height: 5.125rem;
    left: 0;
    padding-left: 2.2rem;
    position: absolute;
    right: 0;
    top: 5.2rem;
}

.navigation_menu .dropdown_navi li
{
    /*border-bottom: 0.1rem solid #84041B;*/
    color: #660033;
    font-size: 1.4rem;
    font-weight: normal;
    list-style-type: none;
    margin: 0 0 0 0;
    padding: 1rem 0 1rem 0;
    text-align: left;
    /*white-space: nowrap;*/
    float: left;
    width: calc(100%/7);
    display: inline-block;
}

.navigation_menu .dropdown_navi li a
{
    color: #660033;
}

.navigation_menu .dropdown_navi li a:hover
{
    color: #f8f8ff;
    background-color: #660033;
}


.navigation_menu .dropdown_navi #current a
{
    color: #660033;
    /*background-color: navajowhite;*/
    text-decoration: underline;
}

.navigation_menu .dropdown_navi #current a:hover
{
    color: #f8f8ff;
    background-color: #660033;
}


.navigation_menu .dropdown_navi a
{
    color: #660033;
}


.navigation_menu li:hover .dropdown_navi
{
    display: inline-block;
}



.navigation_menu .dropdown_navi .submenu
{
    background-color: #f8f8ff;
    border: solid 0.1rem #660033;
    /*border-radius: 0.438rem;*/
    color: #660033;
    display: none;
    height: 5.125rem;
    position: absolute;
    right: 0;
    left: 0;
    top: 4.9rem;
    padding-left: 2.2rem;
    /*opacity: 0.9;*/

}

.navigation_menu .dropdown_navi .submenu li
{
    color: #660033;
    font-size: 1.4rem;
    font-weight: normal;
    list-style-type: none;
    /*margin: 0 1.8rem 0 -0.4rem;
    padding: 0 1.5rem 0 -1.5rem; alt*/
    margin: 1rem 0 1rem 0;
    padding: 0 0 0 0;
    text-align: left;
    /*white-space: nowrap;*/
    float: left;
    width: calc(100%/6);
    display: inline-block;
}

.navigation_menu .dropdown_navi .submenu li a
{
    color: #660033;
}

.navigation_menu .dropdown_navi .submenu li a:hover
{
    background-color: #660033;
    color: #f8f8ff;
    text-decoration: none;
}


.navigation_menu .dropdown_navi .submenu a
{
    color: #660033;
}

.navigation_menu li .dropdown_navi li:hover .submenu
{
    display: inline-flex;
}

.navigation_menu .dropdown_navi .submenu a:hover
{
    background-color: #660033;
    color: #f8f8ff;
    text-decoration: none;
}

/*Hamburger*/
label.hamburg
{
    display: block;
    background: #660033;
    width: 64px;
    height: 50px;
    position: relative;
    /*margin-left: auto;
    margin-right: auto;*/
    align-self: flex-start;
    margin-left: 2rem;
    border-radius: 5px;
    cursor: pointer;
}

input#hamburg
{
    display: none;
}

.line
{
    position: absolute;
    left: 8px;
    height: 4px;
    width: 48px;
    background: #fff;
    border-radius: 2px;
    display: block;
    transition: 0.3s;
    transform-origin: center;
}

.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }

#hamburg:checked + .hamburg .line:nth-child(1)
{
   transform: translateY(12px) rotate(-45deg);
}

#hamburg:checked + .hamburg .line:nth-child(2)
{
   opacity: 0;
}

#hamburg:checked + .hamburg .line:nth-child(3)
{
   transform: translateY(-12px) rotate(45deg);
}

#hamburg:checked + .hamburg .line

/*Hamburger ende*/

main
{
    border-left: 1px solid #660033;
    border-right: 1px solid #660033;
    background-color: #f8f8ff; /* #D9D8F0*/
    height: auto;
    padding: 1rem 0 0 2.2rem;
    margin: 0 0 0 0;
}


section
{
    height: auto;
    
    margin: 0 1rem 0 0;
}

section h1
{
    padding: 0 0 0 0;
}

.banner
{
    background-color: #f8f8ff;
    display: block;
    height: 300px;
    width: auto;
}

.container_banner
{
    display: block;
    background-color: #f8f8ff;
    margin-left: auto;
    margin-right: auto;
    padding-left: 50px;
    padding-right: 50px;
    height: 300px;
    width: auto;
}

.column
{
    height: 300px;
    width: 97%;
    padding: 0 0 0 2.2rem;
    margin: 0 0 0 0;
    background-color: #edf1f0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.headline1
{
    display: block;
    height: 140px;
    width: 530px;
    padding: 0 0 0 1rem;
    margin: 0 0 0 0;
}

.headline1 p.headline, .headline2 p.headline
{
    font-size: 1.5rem;
    color: #660033;
    font-family: Geneva, sans-serif;
    text-transform: none;
    letter-spacing: .02em;
    line-height: 1.4;
}

.headline1_text
{
    height: 300px;
    width: 700px;
    padding: 0 2.2rem 0 2.2rem;
    margin: 0 0 0 0;
    display: block;
    color: #660033;
    font-family: Geneva, sans-serif;
    font-size: 1.1rem;
    text-transform: none;
    letter-spacing: .02em;
}

.headline1_text a
{
    color: #3300CC;
    white-space: nowrap;
}

.column1
{
    height: 300px;
    width: 45%;
    padding: 0 0 0 2.2rem;
    margin: 1.9rem 0 0 0;
    background-color: #edf1f0;
    display: flex;
    align-items: center;
    float: left;
}


.headline2
{
    display: block;
    height: 140px;
    width: 300px;
    padding: 0 0 7rem 0;
    margin: 0 0 0 0;
}

.headline2_text
{
    height: 300px;
    width: 400px;
    padding: 0 0 0 2.2rem;
    margin: 5.5rem 0 6rem 0;
    display: block;
    color: #660033;
    font-family: Geneva, sans-serif;
    font-size: 1.1rem;
    text-transform: none;
    letter-spacing: .02em;
}

.column2
{
    height: 300px;
    width: 45%;
    padding: 0 0 0 2.2rem;
    margin: -17rem 0 0 0;
    background-color: #edf1f0;
    display: flex;
    align-items: center;
    float: right;
}

 

[Ansophie]

Spoiler: css-2.teil

.mehr
{
    color: #660033;
    
    height: 2.5rem;
    width: 16rem;
    border: 1px solid #660033;
    text-align: center;
    padding: 1.25rem 0 0 0;
    font-size: 1.2rem;
    margin: -2.5rem 2rem 0 0;
    background-color: transparent;
    float: right;
    display: inline-block;
    text-transform: uppercase;
}

.mehr a, .mehr1 a, .mehr2 a
{
    color: #660033;
    text-decoration: none;
}

.mehr1
{
    color: #660033;
    height: 2.5rem;
    width: 16rem;
    border: 1px solid #660033;
    text-align: center;
    padding: 1.5rem 0 0 0;
    font-size: 1.2rem;
    margin: 1rem 2rem 1rem 0;
    background-color: transparent;
    float: right;
    display: inline-block;
    text-transform: uppercase;
}

.mehr2
{
    color: #660033;
    height: 2.5rem;
    width: 16rem;
    border: 1px solid #660033;
    text-align: center;
    padding: 0.8rem 0 1rem 0;
    font-size: 1.1rem;
    margin: -0.5rem 2rem 1rem 0;
    background-color: transparent;
    float: right;
    display: inline-block;
    text-transform: uppercase;
}

footer
{
    background-color: darkgrey;
    background-position: right;
    position: relative;
    color: #660033;
    font-size: 1.5rem;
    font-variant: small-caps;
    font-weight: normal;
    height: auto;
    margin-bottom: 2.5rem;
    padding: 0.7rem 0 0.7rem 0;
    text-align: center;
    
    border-bottom: 1px solid #660033;
    border-right: 1px solid #660033;
    border-left: 1px solid #660033;
}

footer a
{
    color: #660033;
    text-decoration: none;
}

footer a:hover
{
    color: #84041B;
    text-decoration: underline;
}