Frage Nav in Ecken schreiben

luccaen · 15 März 2020

Hallo da draußen,

ich hab vor kurzem angefangen meine eigene HTML Webseite zu bauen.
Jetzt hab ich schon ewig im Internet danach gesucht aber es einfach nicht gefunden...
Wie bekomme ich die einzelnen Nav Komponenten in eine jeweils andere Ecke.
Sprich z.B. Shop links oben, Contact rechts oben, About links unten usw.
(Hab mich an der Homeseite von Travis Scott orientiert :) )

Mein anderes Problem ist, dass ich die Farbe der Schrift dieser Nav nicht ändern kann und sie somit weiß hinterlegen muss.

Hab unten mal paar Screens angehängt falls das hilft :/

Wie gesagt bin erst ein Anfänger und offen zum lernen.
Würde mich über eure Hilfe echt freuen :)

Viele Grüße

MrMurphy · 15 März 2020

Wie gesagt bin erst ein Anfänger

Das interessiert HTML und CSS kein bißchen. Voraussetzung für bestimmte Darstellungen ist immer ein aktueller und korrekter Quellcode.

Für eine Hilfe ist es sinnvoll den Quelltext in Foren in einen Code-Block einzufügen, da Helfer den zum Testen häufig ausprobieren müssen.

Code:

in eine jeweils andere Ecke

Welche Ecke? Des Browserfensters?

float ist in jedem Fall für dein Vorhaben sachlich falsch und nicht geeignet.

Beschäftige dich mit Flexbox und CSS-Grid.

luccaen · 15 März 2020

Ok, erstmal danke für die Hilfe.

Für eine Hilfe ist es sinnvoll den Quelltext in Foren in einen Code-Block einzufügen, da Helfer den zum Testen häufig ausprobieren müssen.

Wie war das jetzt gemeint? Soll ich mal den Quelltext posten?

Welche Ecke? Des Browserfensters?

Ja, in jeder Ecke des Browser fensters.

Viele Grüße

MrMurphy · 15 März 2020

Ich habe mal nach deinen Vorgaben ein Beispiel mit Flexbox erstellt:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layout</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- <link href="../css/zentrale.css" rel="stylesheet"> -->
   <style>
      body {
         margin: 0;
      }
      header nav {
         height: 100vh;
      }
      header nav ul {
         padding: 0;
         margin: 0;
         display: flex;
         flex-wrap: wrap;
      }
      header nav ul li {
         list-style-type: none;
         width: 50%;
         height: 50vh;
         display: flex;
      }
      header nav ul li:nth-child(2) {
         justify-content: flex-end;
      }
      header nav ul li:nth-child(3) {
         align-items: flex-end;
      }
      header nav ul li:nth-child(4) {
         justify-content: flex-end;
         align-items: flex-end;
      }
   </style>
</head>
<body>
   <header>
      <nav>
         <ul>
            <li>Contact</li>
            <li>About</li>
            <li>Shop</li>
            <li>Home</li>
         </ul>
      </nav>
   </header>
</body>
</html>

luccaen · 15 März 2020

okay, also erstmal danke! Wirklich
Bin da etwas überfordert. Ich schick jetzt einfach mal mein Queltext :)

Code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Latest Pickup | Website</title>

    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">
  </head>

  <body>

<!--Header------------------------------------------------------->

    <header>
      <div id="logo">
        <a href="#home">
          <img class="noselect" src="img/Logo.png" alt="Logo">
        </a>
      </div>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a  <link type="text/css" href="shop.html">Shop</a></li>
          <li><a <link type="text/css" href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>

<!--Home---------------------------------------------------------->

    <section id="home" class="noselect">
    <hr>
      <h1>Latest Pickup</h1>
        <h2>#MADE WITH LOVE</h2>
    </section>

Das ist jetzt mein html dokument. CSS datei folgt

Code:

html, body {margin: 0; padding: 0; height: 100%; text-align: center;}


section {min-height: 100%;}

a {text-decoration:none;}

li {list-style-type: none;}

h1, h2, h3, a {font-family: 'Roboto', sans-serif; font-weight: 500;
color: #494949;text-transform: uppercase;}

h2 {color: #5d7177;}

h3 {font-size: 40px; padding-top: 8%; margin-bottom: 5px}

h4, p {font-family: 'Roboto Slab', serif;color: #494949}

hr {width: 30px; height: 3px; background: #494949; border: 0; margin: 0 auto 40px auto}
#logo, li, img, .button {transition: all 300ms; -webkit-transition: all 300ms; -moz- transition: all 300ms; -o-transition: all 300ms;}

/*Header************************************/

header {width: 100%; height: 65px; position: fixed; top: 0; left: 0; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); z-index: 1}

#logo {width: 140px; float: left; margin: 10px 0 0 50px;}

#logo:hover {opacity: 0.5}

#logo img {width: 100%;}

header nav {float: right; margin: 10px 50px 0 0}

header nav ul li{float: left; margin-left: 25px;}

header nav ul li{font-size: 16px}

header nav ul li:hover {padding-top: 5px;}

/*Home************************************/

#home {
  background: url(img/landung.jpg);
  background-position: center center;
  background-size:cover;
  background-attachment: fixed;
}

#home h1 {
  margin: 240px auto 0 auto;
  font-size: 110px
}

#home h2 {
  margin: 0 auto0 auto;
  font-size: 25px;
}

#home img {
  width: 32px;
  margin-top: 150px;
  opacity: 0.7;
}

#home img:hover {
  opacity: 1;
}

/*About**********************************/

#about img {
  width: 240px;
}

#about img:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

#about h4 {
  font-size: 25px;
}

#about p {
  width: 700px;
  margin: 0 auto 0 auto;
}

/*WorK***********************************/

#shop {
  background-color: #f0f0f0;
}

#t-shirts {
  width: 900px;
  margin: 0 auto 0 auto;
}

#t-shirts ul {
  padding: 0;
}

#t-shirts ul li {
  width: 33.3%;
  float: left;
  margin-bottom: 15px;
}

#t-shirts img {
  width: 280px;
  height: 170px;
  border-radius: 5px;
}

#t-shirts img:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}

/*Contact********************************/

form input, textarea {
  font-family: 'Roboto Slab', serif;
  font-size: 15px;
  margin-bottom: 10px;
  border-radius: 2px;
  border: 2px solid;
  border-color: #494949;
  outline: none;
}

form input:first-child {
  margin-top: 10px;
}

form input {
  width: 552px;
  height: 30px;
}

form textarea {
  width: 550px;
  height: 200px;
  resize: none;
}

.input_text {
  color: #494949;
  padding-left: 10px;
}

::-webkit-input-placeholder {color: #999999}
::-moz-placeholder {color: #999999}
::-moz-input-placeholder {color: #999999}
::-ms-input-placeholder {color: #999999}
::-o-input-placeholder {color: #999999}
::input-placeholder {color: #999999}

.button {
  background-color: ##f0f0f0;
  color: #494949;
  width: 566px;
  height: 50px;
}

.button:hover {
  background-color: #494949;
  color: #f0f0f0;
}

/*Footer********************************/

footer {
  width: 100%;
  height: 70px;
  background-color: #3f3f3f;
}

footer p {
  font-size: 12px;
  color: #f0f0f0;
  padding-top: 30px;
}

luccaen · 15 März 2020

genau, logo in die mitte hintergrund möglichst immer 100%

luccaen · 15 März 2020

muss ich das jetzt einfach 1:1 in die cssdatei übertragen oder was muss ich beachten?

luccaen · 16 März 2020

hmm irgendwie funktioniert das nicht. Ich hab jetzt die alte nav beschreibung rausgelöscht und die neue eingefügt.
Hat sich aber immernoch nichts geändert

Code:

html, body {margin: 0; padding: 0; height: 100%; text-align: center;}


section {min-height: 100%;}

a {text-decoration:none;}

li {list-style-type: none;}

h1, h2, h3, a {font-family: 'Roboto', sans-serif; font-weight: 500;
color: #494949;text-transform: uppercase;}

h2 {color: #5d7177;}

h3 {font-size: 40px; padding-top: 8%; margin-bottom: 5px}

h4, p {font-family: 'Roboto Slab', serif;color: #494949}

hr {width: 30px; height: 3px; background: #494949; border: 0; margin: 0 auto 40px auto}
#logo, li, img, .button {transition: all 300ms; -webkit-transition: all 300ms; -moz- transition: all 300ms; -o-transition: all 300ms;}

/*Header************************************/

header {width: 100%;     /* height: 65px; */
    /* position: fixed; */ top: 0; left: 0; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); z-index: 1}


header nav ul li,
       #logo {
           position: fixed;
       }

       li.top-left {
           top: 0;
           left: 0;
       }

       li.top-right {
           top: 0;
           right: 0;
       }

       li.bottom-left {
           bottom: 0;
           left: 0;
       }

       li.bottom-right {
           bottom: 0;
           right: 0;
       }

       #logo {
           top: 0;
           left: 50%;
           transform: translateX(-50%);
       }

/*Home************************************/

#home {
  background: url(img/landung.jpg);
  background-position: center center;
  background-size:cover;
  background-attachment: fixed;
}

#home h1 {
  margin: 240px auto 0 auto;
  font-size: 110px
}

#home h2 {
  margin: 0 auto0 auto;
  font-size: 25px;
}

#home img {
  width: 32px;
  margin-top: 150px;
  opacity: 0.7;
}

#home img:hover {
  opacity: 1;
}

/*About**********************************/

#about img {
  width: 240px;
}

#about img:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

#about h4 {
  font-size: 25px;
}

#about p {
  width: 700px;
  margin: 0 auto 0 auto;
}

/*WorK***********************************/

#shop {
  background-color: #f0f0f0;
}

#t-shirts {
  width: 900px;
  margin: 0 auto 0 auto;
}

#t-shirts ul {
  padding: 0;
}

#t-shirts ul li {
  width: 33.3%;
  float: left;
  margin-bottom: 15px;
}

#t-shirts img {
  width: 280px;
  height: 170px;
  border-radius: 5px;
}

#t-shirts img:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}

/*Contact********************************/

form input, textarea {
  font-family: 'Roboto Slab', serif;
  font-size: 15px;
  margin-bottom: 10px;
  border-radius: 2px;
  border: 2px solid;
  border-color: #494949;
  outline: none;
}

form input:first-child {
  margin-top: 10px;
}

form input {
  width: 552px;
  height: 30px;
}

form textarea {
  width: 550px;
  height: 200px;
  resize: none;
}

.input_text {
  color: #494949;
  padding-left: 10px;
}

::-webkit-input-placeholder {color: #999999}
::-moz-placeholder {color: #999999}
::-moz-input-placeholder {color: #999999}
::-ms-input-placeholder {color: #999999}
::-o-input-placeholder {color: #999999}
::input-placeholder {color: #999999}

.button {
  background-color: ##f0f0f0;
  color: #494949;
  width: 566px;
  height: 50px;
}

.button:hover {
  background-color: #494949;
  color: #f0f0f0;
}

/*Footer********************************/

footer {
  width: 100%;
  height: 70px;
  background-color: #3f3f3f;
}

footer p {
  font-size: 12px;
  color: #f0f0f0;
  padding-top: 30px;
}

luccaen · 16 März 2020

nein leider nicht :/ bei mir sind die immernoch rechts oben...

luccaen · 16 März 2020

meinst du online per host? also komplett öffentlich? So weit bin ich noch nich :|
Meines wissens nach kostet das ja was oder?

luccaen · 16 März 2020

ich hab jetzt mal den namen des logos geändert, das bei mir auch das richtige angezeigt wird.
Also kanns kein Fehler bei der Übermittlung geben
Leider geht das mit der nav immer noch nicht. :(

luccaen · 16 März 2020

oh hab garnicht gesehen dass es ne 2. seite gibt :)
Ja habs schon übernommen...
Soll ich den Quelltext nochmal schicken?

luccaen · 16 März 2020

html:

Code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Latest Pickup | Website</title>

    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">
  </head>


<!--Header------------------------------------------------------->
<header>
       <div id="logo">
           <a href="#home">
               <img class="noselect" src="img/logo.png" alt="Logo">
           </a>
       </div>
       <nav>
           <ul>
               <li class="top-left"><a href="#home">Home</a></li>
               <li class="top-right"><a href="shop.html">Shop</a></li>
               <li class="bottom-left"><a href="about.html">About</a></li>
               <li class="bottom-right"><a href="contact.html">Contact</a></li>
           </ul>
       </nav>
   </header>
<!--Home---------------------------------------------------------->

    <section id="home" class="noselect">
    <hr>
      <h1>Latest Pickup</h1>
        <h2>#MADE WITH LOVE</h2>
    </section>

css:

Code:

html, body {margin: 0; padding: 0; height: 100%; text-align: center;}


section {min-height: 100%;}

a {text-decoration:none;}

li {list-style-type: none;}

h1, h2, h3, a {font-family: 'Roboto', sans-serif; font-weight: 500;
color: #494949;text-transform: uppercase;}

h2 {color: #5d7177;}

h3 {font-size: 40px; padding-top: 8%; margin-bottom: 5px}

h4, p {font-family: 'Roboto Slab', serif;color: #494949}

hr {width: 30px; height: 3px; background: #494949; border: 0; margin: 0 auto 40px auto}
#logo, li, img, .button {transition: all 300ms; -webkit-transition: all 300ms; -moz- transition: all 300ms; -o-transition: all 300ms;}

/*Header************************************/

header {width: 100%;     /* height: 65px; */
    /* position: fixed; */ top: 0; left: 0; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); z-index: 1}


header nav ul li,
       #logo {
           position: fixed;
       }

       li.top-left {
           top: 0;
           left: 0;
       }

       li.top-right {s
           top: 0;
           right: 0;
       }

       li.bottom-left {
           bottom: 0;
           left: 0;
       }

       li.bottom-right {
           bottom: 0;
           right: 0;
       }

       #logo {
           top: 0;
           left: 50%;
           transform: translateX(-50%);
       }

/*Home************************************/

#home {
  background: url(img/landung.jpg);
  background-position: center center;
  background-size:cover;
  background-attachment: fixed;
}

#home h1 {
  margin: 240px auto 0 auto;
  font-size: 110px
}

#home h2 {
  margin: 0 auto0 auto;
  font-size: 25px;
}

#home img {
  width: 32px;
  margin-top: 150px;
  opacity: 0.7;
}

#home img:hover {
  opacity: 1;
}

/*About**********************************/

#about img {
  width: 240px;
}

#about img:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

#about h4 {
  font-size: 25px;
}

#about p {
  width: 700px;
  margin: 0 auto 0 auto;
}

/*WorK***********************************/

#shop {
  background-color: #f0f0f0;
}

#t-shirts {
  width: 900px;
  margin: 0 auto 0 auto;
}

#t-shirts ul {
  padding: 0;
}

#t-shirts ul li {
  width: 33.3%;
  float: left;
  margin-bottom: 15px;
}

#t-shirts img {
  width: 280px;
  height: 170px;
  border-radius: 5px;
}

#t-shirts img:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}

/*Contact********************************/

form input, textarea {
  font-family: 'Roboto Slab', serif;
  font-size: 15px;
  margin-bottom: 10px;
  border-radius: 2px;
  border: 2px solid;
  border-color: #494949;
  outline: none;
}

form input:first-child {
  margin-top: 10px;
}

form input {
  width: 552px;
  height: 30px;
}

form textarea {
  width: 550px;
  height: 200px;
  resize: none;
}

.input_text {
  color: #494949;
  padding-left: 10px;
}

::-webkit-input-placeholder {color: #999999}
::-moz-placeholder {color: #999999}
::-moz-input-placeholder {color: #999999}
::-ms-input-placeholder {color: #999999}
::-o-input-placeholder {color: #999999}
::input-placeholder {color: #999999}

.button {
  background-color: ##f0f0f0;
  color: #494949;
  width: 566px;
  height: 50px;
}

.button:hover {
  background-color: #494949;
  color: #f0f0f0;
}

/*Footer********************************/

footer {
  width: 100%;
  height: 70px;
  background-color: #3f3f3f;
}

footer p {
  font-size: 12px;
  color: #f0f0f0;
  padding-top: 30px;
}

luccaen · 16 März 2020

nein leider nicht. ich habs jetzt noch mal unabhängig abgespeichert und es geht auch nicht :/
Das war aber bei mir schonmal so, das ich die schriftfarbe der nav nicht ändern konnte...

luccaen · 16 März 2020

Hab das noch geändert mit body und html. Ergebnis kannst du dir ja denken :/
Aber hab ich überhaupt einen Body?

luccaen · 16 März 2020

so siehts jetzt neu aus... richtig?

Code:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Latest Pickup | Website</title>

    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">
  </head>


<!--Header------------------------------------------------------->
<header>
       <div id="logo">
           <a href="#home">
               <img class="noselect" src="img/logo.png" alt="Logo">
           </a>
       </div>
       <nav>
           <ul>
               <li class="top-left"><a href="#home">Home</a></li>
               <li class="top-right"><a href="shop.html">Shop</a></li>
               <li class="bottom-left"><a href="about.html">About</a></li>
               <li class="bottom-right"><a href="contact.html">Contact</a></li>
           </ul>
       </nav>
   </header>
<!--Home---------------------------------------------------------->

    <section id="home" class="noselect">
    <hr>
      <h1>Latest Pickup</h1>
        <h2>#MADE WITH LOVE</h2>
    </section>


</html>

luccaen · 16 März 2020

ich benutz chrome, wo muss denn der body hin?

luccaen · 16 März 2020

ich hab jetzt nochmal ein anderen editor, browser und alles neu geschreieben. hat nichts gebracht...

luccaen · 16 März 2020

ja erstmal gute neuigkeiten :)
an sich geht es, jedoch ist die schrift anders und die bilder fehlen :/

Aber das ist ja erstmal egal...

Vielen dank !!!!

luccaen · 16 März 2020

Ok das bekomm ich hin :)

Danke dass du deine Nacht geopfert hast, Gute Nacht! :)))

Frage Nav in Ecken schreiben

Mitglied

Anhänge

Senior HTML'ler

Mitglied

Senior HTML'ler

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied