Auf Thema antworten

Beitrag

[QUOTE="andiluft, post: 12307, member: 4156"]
Hallo liebe Leute von heute, :)

ich bin ein bisschen verzweifelt, wie man gleich merkt, ich bin Anfänger und mache eine Aufgabe, die benotet wird. Vielleicht kann mir ja jemand weiterhelfen.

Der Feinschliff fehlt noch...

Problem: Das Logo, die NAV (Links nicht HG), p, h1 sollen linksbündig sein und untereinander stehen, ab einer Viewportgröße von 1024px ändert sich die Darstellung des Menus. Soweit so gut, funktioniert auch alles ABER, wenn ich versuche dem Nav ne max-width zu geben, dreht das Logo durch und wirft alles übern Haufen und macht was es will.

Jetzt schon einmal nen Dickes Danke. Hoffe, ma sieht durch.

HTML

[CODE=html]<header>
            <a href="#" id="title">Color Rays</a>
          
            <nav>
                <ul>
                    <li>
                        <a href="#">First Link</a>
                    </li>
                  
                    <li>
                        <a href="#">Second</a>
                    </li>
                  
                    <li>
                        <a href="#">Another One</a>
                    </li>
                  
                    <li>
                        <a href="#">Fourth Link</a>
                    </li>
                  
                    <li>
                        <a href="#">Last Link</a>
                    </li>
                </ul>
            </nav>
        </header>
      
        <main>
      
            <h1>Heading</h1>
          
            <p>Lorem ipsum dolor sit
        
        </main>
  
    </body>
</html>

* {
    margin: 0;
   box-sizing: border-box;  /* das Padding wir nicht zu der breite der Elemente hinzugezählt */
}

html {
    font-size: 100%;
    padding: 0;
}

/* Open Sans Bold */

@font-face {
    font-family: OpenSans;
    src: url(../fonts/opensans-bold.woff);
    src: url(../fonts/opensans-bold.woff) format("woff");
    font-weight: bold;
    font-style: normal;
}

/* Open Sans Italic */

@font-face {
    font-family: OpenSans;
    src: url(../fonts/opensans-italic.woff) format("woff");
    font-weight: normal;
    font-style: italic;
}

/* Open Sans Bold Italic */

@font-face {
    font-family: OpenSansBold;
    src: url(../fonts/opensans-bolditalic.woff) format("woff");
    font-weight: bold;
    font-style: italic;
}

/* Open Sans Regular */

@font-face {
    font-family: OpenSans;
    src: url(../fonts/opensans-regular.woff) format("woff");
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: OpenSans, Helvetica, arial, sans-serif;
    color: #000;
    font-size: 1em;
    text-align: left;
    padding: 0;
    background-color: #fff;

}

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
    display: block;
}

strong, b {
    font-weight: bold;
}

em, i {
    font-style: italic;
}

small {
    font-size: 0.8rem;
}

main h1,
main p {
    margin-bottom: 1rem;
}

main h1 {
    font-size: 2em;
    font-weight: bold;
}

main p {
    line-height: 1.5em;
}

main :last-child {
    margin-bottom: 0;
}

a {
    text-decoration: none;
}

/* Header */

header {
    color: #fff;
    background: url(../images/bg.jpg) no-repeat;
    background-size: cover;
    background-position: right bottom;
    height: 30rem;
    width: 100%;
    position: relative;
}

header a {
    color: #fff;
}

header ul {
    list-style: none;
}

#title { /* Inline Element */
    font-size: 7.5rem;
    font-weight: bold;
    letter-spacing: -0.05em;
    opacity: 0.75;
    position: absolute;
    top: calc(10rem - 7.5rem + 0.5rem);
    left: calc((100% - 80%) / 2 + 1rem + 1rem); /* h1/p2 padding + mainpadding */
    white-space: nowrap;
    max-width: 1025px;
}

#title::before {
    content: url(../images/sun.svg);
    display: inline-block;
    vertical-align: middle;
    width: 1.5em;
    padding-right: 1rem;
}

nav {
    font-size: 1.4rem;
    font-weight: bold;

background-color: rgb(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);

position: absolute;
    bottom: 0;

width: 100%;
    /* max-width: 1025px;  Nav soll zentral */
}

nav ul {
    display: flex;
    align-items: center;

flex-grow: 1;
    justify-content: space-between;
    flex-direction: distribute;
    padding: 0.8rem calc( ( 100% - 80% ) / 2 + 1rem ) 0.8rem calc( ( 100% - 80% ) / 2 - 1rem );

margin: 0 auto;

}

nav li {
    margin-left: 2rem;
    cursor: pointer;
    flex-direction: center;
}

nav a {
    color: rgb(255, 255, 255);
    white-space: nowrap;
 
    padding: 3.2rem 1rem 3.2rem 1rem;
    display: inline-block;

transition: background-color 0.1s ease-out;
   transition: transform 0.1s ease-out;
}

nav a:hover {
    background-color: rgb(0, 0, 0, 0.2);
    transform: scale(1.2, 1.2);
}

main {
    width: 80%;
    margin: 0 auto;
    padding: 2rem;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    text-align: justify;
/* main soll max-width: 1025px */
}[/CODE]
[/QUOTE]

Authentifizierung