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

Maus über Navigationsleiste -> Inhalt ausklappen

PraktikumAvatarec

Neues Mitglied
Ich würde das gerne so haben ,dass wenn ich mit meiner über einen der Navigationsleisten gehe dass einzelne Inhalte zu sehen sind. Als beispiel könnte man die Websiite "https://www.avatarec.de/" nehmen welche ich versuche nachzuprogrammieren einfach um es zu lernen. Ausserdem habe ich das Problem ,dass meine erstellte "Box" von links und rechts ein bisschen absteht!
HTML:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>AVATAREC Business Solutions GmbH: Systemhaus Hamm</title>
        <meta name="description" content="Ein interaktiver Wegweiser für die ersten Schritte mit Brackets.">
        <link rel="stylesheet" href="bereich.css">
    </head>
    <body id="body">
<body bgcolor="black">  
            <nav>
 
    </nav>
    <main class="scroll" id="content">
<div id="bereich">
<p style="margin-left:7cm">
<a href=[URL]https://www.avatarec.de/[/URL]><img src="[URL]https://www.avatarec.de/fileadmin/introduction/images/theme/Logo1.jpg[/URL]" alt="Bild" /></a>
<ul>      
   
<font size="5">
<p style="margin-left:9cm">
<b>
        <a href="loading.html" style="text-decoration:none; color:darkgrey">Home</a>&nbsp &nbsp &nbsp &nbsp
            <a href="loading.html" style="text-decoration:none; color:darkgrey">Info</a>&nbsp &nbsp &nbsp &nbsp
            <a href="loading.html" style="text-decoration:none; color:darkgrey">Über uns</a>&nbsp &nbsp &nbsp &nbsp
            <a href="loading.html" style="text-decoration:none; color:darkgrey">Datenschutz</a>&nbsp &nbsp &nbsp &nbsp
            <a href="loading.html" style="text-decoration:none; color:darkgrey">Partner</a> &nbsp &nbsp &nbsp &nbsp
        <a href="loading.html" style="text-decoration:none; color:darkgrey">Service</a>&nbsp &nbsp &nbsp &nbsp
        <a href="loading.html" style="text-decoration:none; color:darkgrey">Karriere</a>&nbsp &nbsp &nbsp &nbsp
</b>
</p>
</font>
</ul>  
</div>
<font color="black">          
<div class="item" id="info">
<div id="inhalt">
<center><img src="[URL]https://www.avatarec.de/fileadmin/_processed_/e/7/csm_tropfen_test_2f253c7f52.jpg[/URL]" align="middle" height="300" width="1230"></center> <p>
<h1 class="title" id="home">
<p style="margin-left:9cm">           AVATAREC – für den Datenfluss
        </h1>
<p style="margin-left:9cm">
           <font size="4"><b><i>Im Wasser</i></b> bleibt alles im Fluss – von der Quelle bis zur Mündung.
        Das Geheimnis des Wassers: Es besteht aus einem gut funktionierenden Netz.<br>
        Die Natur macht es uns vor, wie es geht, und wir setzen es im IT-Bereich um – auf unsere Weise und für Ihre Ansprüche. <br>
        Damit Informationen und Daten reibungslos fließen, schafft unser Experten-Team Komplettlösungen für die Planung von Unternehmensressourcen (ERP)<br> und EDV-Netzwerke.<p>
<p style="margin-left:9cm">
            <b><i>Wir stellen</i></b> hohe Ansprüche an das EDV-Netz: Es soll wie das Wasser oberflächenstabil und dennoch flexibel sein. Sie wünschen sich ein solches Netzwerk? <br>
        Dann kommen Sie ganz unverbindlich mit uns ins Gespräch! <p>
<p style="margin-left:9cm">
        <i><b>Verlass muss sein</i></b>. Deshalb setzen wir auf Qualität und bewährte Produkte. <br>
        Als Certified Partner von Microsoft Dynamics NAV und Partner von Fujitsu Technology Solutions sowie dem Archivsystemanbieter Windream kann<br> AVATAREC seinen Kunden maximalen Service bieten.</font>
        <div class="wrapper-horizontal">
<font color="white">
            <div class="item-REGISTER" id="sign-in">
<div id="bereich">
            <div class="item-CONTACT">
                <hr>
<p style="margin-left:9cm">
<font size="4">
                AVATAREC Business Solutions GmbH &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp   Tel: 02385 46292 0  &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
                Support <br>
            Oberster Kamp 1c &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp Fax: 02385 46292 99 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp  &nbsp
    &nbsp <a href="support.exe" style="text-decoration:none; color:white">Teamviewer</a> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp   59069-Hamm &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp  &nbsp
<a href="[EMAIL][email protected][/EMAIL]" style="text-decoration:none; color:white">Mail: [EMAIL][email protected][/EMAIL]</a> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp<a href="[URL]https://www.avatarec.de/ueber-uns/impressum/[/URL]" style="text-decoration:none; color:white">Impressum</a>






         
            </div>
        </div>
        <div class="item" id="sponsoren">
       
        </div>
    </main>
    </body>
</html>
CSS:
#bereich {
    background-color: black;
    width: 100%;
    height: 100%;
    border-bottom: 2px lightgrey solid;
 
}

#inhalt {
background-color: darkgrey;
    width: 100%;
    height: 100%;

}

Vielen Dank für jegliche Hilfe!
 
Zuletzt bearbeitet:
Werbung:
Werbung:
Ist das Beispiel nicht genau das, was du möchtest? Oder habe ich dich falsch verstanden?

Nachtrag:
HTML:
<body bgcolor="black">  

<font size="5">
Soetwas bitte nicht mehr benutzen, das ist veraltet, nutze statt dessen CSS
 
Ist das Beispiel nicht genau das, was du möchtest? Oder habe ich dich falsch verstanden?

Nachtrag:
HTML:
<body bgcolor="black"> 

<font size="5">
Soetwas bitte nicht mehr benutzen, das ist veraltet, nutze statt dessen CSS
Oh doch du hast Recht!
Vielen Danke!
Sowas solle ich nicht mehr benutzen?
Wie genau mache ich dass denn in CSS?
Ich musste oftmals die Schriftgröße verändern ,also fande ich es über HTML einwenige leichter.
 
Ich musste oftmals die Schriftgröße verändern ,also fande ich es über HTML einwenige leichter.

Über Klassen ,zb
Code:
<style>
body{
   background:black;
}
.big_font1{
   font-size:14px;
   color:red;
}
.big_font2{
   font-size:16px;
   color:green;
}
.big_font3{
   font-size:18px;
   color:blue;
}
</style>

<body>
    <p class="big_font1">Hallo</p>
    <p class="big_font2">Hallo</p>
    <p class="big_font3">Hallo</p>
</body>

so mußt du jetzt nur noch da wo du die größe ändern willst den class namen angeben
 
Werbung:
@basti1012
Nur mal so ein Tipp

Statt z.B. .big_font1 würde ich eher .big_font14 schreiben, dann erkennt man im HTML die Schriftgröße, ohne ins CSS zu sehen.
 
Zurück
Oben