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

Feedback gewünscht (Anfänger) - Frage zu Border + Verbesserungsvorschläge

M

MuTeRiiX

Neues Mitglied
Hallo,

Ich habe heute damit begonnen HTML/CSS zu lernen und bin nun auf folgendes Problem gestoßen.
5186

Ich wollte damit beginnen, mir einen Balken zu erstellen.
Ich habe zwei Fragen.
1. Wie bekomme ich diese Einrahmung bei "CD Projekt" so, dass es auf "CD Projekt" angepasst ist?
Ich hatte bisher kein Erfolg.
2. Kann mal jemand über den Code schauen und Dinge verbessern die man sauberer schreiben kann? Möchte versuchen
direkt von anfang an sauber zu schreiben, jedoch hab ich das Gefühl, dass meine Links ein bisschen kompliziert geschrieben
sind CSS-seitig..

Vielen Lieben Dank!

<!DOCTYPE html>
<html>



<head>
<link rel="stylesheet" href="SAOcss.css">

</head>



<body>


<div id="defaultop">
<p></p>
</div>


<div class="side-bar">
<p><b>CD Projekt</b></p>
</div>

<div class="side-bar">
<img width="35" height="35" src="Bilder/cdprojekt.jpg" alt="Bildersatz, falls nicht tut"/>
</div>

<div id="linkforum" class="side-bar">
<a href="https://www.the-witcher.de/" target="_blank"> Forum </a>
</div>

<div id="linksupport" class="side-bar">
<a href="https://www.the-witcher.de/" target="_blank"> Support </a>
</div>

<div id="linkshop" class="side-bar">
<a href="https://www.the-witcher.de/" target="_blank"> Shop </a>
</div>


</body>


</html>

body{
background-color: white;
margin:1px;



}

#defaultop{
height:40px;
width:100%;
border: 1px solid white;
margin:0px;
background: gray;
opacity: 0.4;
}

.side-bar{
height:25px;
position:absolute;
top:0px;
border: 1px solid black;
}

.side-bar p{
margin:15px 50px;
}

.side-bar img{
margin:5px 7px;
}

.side-bar a{
display: block;
}

#linkforum.side-bar{
margin:10px 1400px;
}

#linkshop.side-bar{
margin:10px 1500px;
}

#linksupport.side-bar{

margin:10px 1600px;
}
 

Anhänge

  • Page.PNG
    Page.PNG
    14,3 KB · Aufrufe: 3
da ist einiges nicht schön.
Du solltest erstmal Flexbox nehmen, weil dann brauch man so ein Mist wie margin:1600px nicht
Du hast dann noch das lang="de" vergessen .
titel fehlt auch, weil da meckert jeder Validator rüber.
Inline Style wie width="40px" ubd so weiter sollte man drauf verzichten.
Das wahres erstmal.
 
Und noch ein praktisches Beispiel wie eine komplette Website mit deinem Inhalt mit aktuellem und korrektem HTML und CSS aufgebaut sein kann. Den gesamten Quelltext kannst du direkt in eine HTML-Datei kopieren oder auch das CSS in deine CSS-Datei verschieben.

So hast du eine Vorlage an der du dich zum Lernen orientieren kannst:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Hier title eintragen</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 rel="stylesheet" href="SAOcss.css">
   <style>

   /*navigation*/
   @media all {
      body {
         padding: 0rem;
         margin: 0rem;
      }
      figure {
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0rem;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         border: 0px;
      }
      .navigation {
         background-color: lightgrey;
         display: flex;
         flex-wrap: wrap;
         align-items: center;
      }
      .navigation figure {
         margin: 0.5rem 0.5rem 0.5rem 0.5rem;
      }
      .navigation h1 {
         margin: 0.5rem auto 0.5rem 0rem;
      }
      .navigation a {
         margin: 0rem 1rem 0rem 1rem;
      }
   }

   </style>
</head>
<body>
   <headerclass="pageheader">
      <h1>Überschrift im Header</h1>
   </header>
   <nav class="navigation">
      <figure>
         <img src="2019_07_30_muteriix_layout_img_02.jpg" alt="Icon">
      </figure>
      <h1>CD Projekt</h1>
      <section>
         <a href="">Forum</a>
         <a href="">Support</a>
         <a href="">Shop</a>
      </section>
   </nav>
   <main class="content">
   </main>
   <aside class="sidebar">
   </aside>
   <footer class="pagefooter">
   </footer>
</body>
</html>
 
Zuletzt bearbeitet:
Ich sehe grade dass ich den von dir gewünschten Rahmen vergessen habe. Das liegt daran, dass ich dort keinen Rahmen setzen würde. Um den Rahmen zu erhalten kannst du

Code: 
      .navigation h1 {
         margin: 0.5rem auto 0.5rem 0.5rem;
      }

durch

Code: 
      .navigation h1 {
         padding: 0.2rem;
         border: 1px solid black;
         margin: 0.3rem auto 0.3rem 0.5rem;
      }

ersetzen.
 
Leute ich hab da noch eine Frage zu Flexbox, was ihr mir empfohlen habt.. Wenn wir als Beispiel das folgende Bild nehmen, wird das nicht irgendwann sehr unübersichtlich im Code wenn das alles von einander erbt speziell die Grünen Boxen dann? Oder ist meine Denkweiße zumindest richtig so mit den Boxen? speziell im Footer, wenn ich eine Box habe und dann aber neben die Box beispielsweise Links die untereinander stehen, dann geht das doch nur, wenn ich wieder eine Box mache in der ich aber dann flex-direction: column definiere oder? Bitte nicht direkt aufspießen ^^'

5190
 
Zuletzt bearbeitet:
Wenn wir als Beispiel das folgende Bild nehmen, wird das nicht irgendwann sehr unübersichtlich im Code wenn das alles von einander erbt speziell die Grünen Boxen dann?
Zum Vergrößern anklicken....

Nein. Du sollst und kannst so wenige Container wie möglich verwenden. Die anderen Elemente sind ja auch jeweils Container.

Ohne konkreten Inhalt sind solche Zeichnungen eher nutzlos. Zumal die nicht flexibel sein können.

speziell im Footer, wenn ich eine Box habe und dann aber neben die Box beispielsweise Links die untereinander stehen, dann geht das doch nur, wenn ich wieder eine Box mache in der ich aber dann flex-direction: column definiere oder?
Zum Vergrößern anklicken....

Wenn du eine Lösung hast die weniger Container benötigt - immer her damit. Die für das Layout benötigten Container darf man natürlich verwenden. An meinem Beispiel kannst du doch sehen, dass deine div um jedes a-Element vollkommen überflüssig sind.
 
MuTeRiiX schrieb:
speziell im Footer, wenn ich eine Box habe und dann aber neben die Box beispielsweise Links die untereinander stehen, dann geht das doch nur, wenn ich wieder eine Box mache in der ich aber dann flex-direction: column definiere oder?
Zum Vergrößern anklicken....

RESPEKT !!
Das muß auch mal gesagt werden..
Gestern kanntest du noch kein Flexbox und dann das.
Du lernst schnell.
Finde ich gut , sowas hat man selten.
Mach weiter so
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben