Probleme bei dem Erstellen/Design von einem Header

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

madcoding

Neues Mitglied
12 August 2020
2
0
1
35
Hallo,
ich habe für mich mal eine Seite designen lassen um diese dann selbst zu programmieren, leider habe ich jetzt schon das erste Problem aber ich bin auch noch ein blutiger Anfänger :)

Das Design für den Header sieht so aus:

Header.PNG

Problem:
1597247898725.png

Aktuell bin ich soweit:

1597247478504.png

Mein Problem ist jetzt, dass Logo (der halbe Kopf auf der rechten Seite) in den Hintergrund zu integrieren, welcher hinter dem Menü etc. liegt. Ich weiß nicht genau wie ich das schaffe.

Mein HTML Code.

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>navbar test</title>
</head>
<body>
    <header>
            <div class="navbar">
            <img class="logo" src="/IMG/logo.png" alt="Logo">
            <nav>
                <ul class="nav-links">
                    <li><a href="#home">home</a></li>
                    <li><a href="#about">about</a></li>
                    <li><a href="#cases">cases</a></li>
                    <li><a href="#blog">blog</a></li>
                </ul>
            </nav>
            <a class="cta" href=""><button>Contact</button></a>
        </div>
    </div>

    </header>

    <section class="about">
        <div class="about-left">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus at aliquam architecto sint quia libero aliquid nesciunt quam ut cum.</div>
        <div class="about-right">
            <img src="/IMG/logo-wolf.png" alt="Logo-Wolf">

        </div>
    </section>
</body>
</html>
Mein CSS Code:

CSS:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500&display=swap');

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

li, a, button{
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #333;
    text-decoration: none;
}


.navbar{
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 20px 20px;
    margin: 20px 20px;
    align-items: center;
}

.logo{
    height: 80px;
    cursor: pointer;
    margin-right: auto;
   
}

.nav-links{
    list-style: none;
}

.nav-links li{
    display: inline-block;
    padding: 0px 20px;
}

.nav-links li a:hover{
    color: #e0902e;
    border-bottom: #48c9f8 solid 2px;
}

.cta button{
    padding: 9px 25px;
    background-color: orange;
    border: none;
    border-radius: 50px;
    color: white;
    cursor: pointer;
}

.cta button:hover{
    background-color: #48c9f8;
}

.about{
    width: 100%;
    display: flex;
    padding: 0px 20px;

}

.about-left{
    background-color: red;
    padding: 30px;
    flex: 1;
}

.about-right{
    background: yellow;
    padding: 30px;
    flex: 1;
    width: 50%;
}

.about-right img{
    width: 20%;
}
Gehört das Bild in den Header Background? Sollte ich dafür ein neues div erstellen aber ich habe es nicht hinbekommen, dass es rechts angeordnet wird und im Hintergrund liegt.

Vielen Dank für eure Hilfe.

Mfg
 

basti1012

Senior HTML'ler
26 November 2017
1.395
144
63
39
Minden
sebastian1012.bplaced.net
Ein Beispiel mit den echten Bilder zum testen wäre für uns einfacher.
Ich würde aber mal versuchen das Bild in
about-right
als backround-image:url('link.jpg') einzubinden.
Dann brauchst du nicht einen extra Container den du mit positionen und z-index bearbeiten müßtest.
EDIT:
Ich sehe gerade das eine Bild geht ja bis in der Navigation rein.
Ich denke das man dann die Container anders anordnen muß.
Code:
    <header>
            <div id="left">
                     <img class="logo" src="/IMG/logo.png" alt="Logo">
              
        
                    <div class="about-left">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus at aliquam architecto sint quia libero aliquid nesciunt quam ut cum.</div>
</div>
            <div id="right">
            <div class="navbar">
    
            <nav>
                <ul class="nav-links">
                    <li><a href="#home">home</a></li>
                    <li><a href="#about">about</a></li>
                    <li><a href="#cases">cases</a></li>
                    <li><a href="#blog">blog</a></li>
                </ul>
            </nav>
            <a class="cta" href=""><button>Contact</button></a>
                    </div>
                        <div class="about-right">
            <img src="/IMG/logo-wolf.png" alt="Logo-Wolf">

        </div>
        </div>

    </header>
#right und #left ein flex-direction:colum geben
und dann das Bild in den #right als Background-image einbinden.

Oder hat einer nee andere Idee ??
 
Zuletzt bearbeitet:

madcoding

Neues Mitglied
12 August 2020
2
0
1
35
Hi,
vielen Dank für die schnelle Antwort ich werde es später gleich mal testen!
was genau meinst du mit einem Beispiel mit echten Bildern? Benötigt ihr die genutzten Bilder von mir zum testen?
 
Werbung: