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

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

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

MuTeRiiX

Neues Mitglied
30 Juli 2019
2
0
1
22
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

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.470
294
83
66
Da gebe ich die pauschale Empfehlung: Verzichte auf absolute Positionierung und darauf, deine Elemente mit margin zu positionieren. Informiere dich statt dessen über Flexlayout und ordne die Element damit an. Dann wird deine Anordnung ohne weiteres Zutun responsiv, d. h. sie passt sich automatisch an die Größe des Browserfensters an.
 
Reactions: MuTeRiiX

basti1012

Aktives Mitglied
26 November 2017
983
102
43
38
Minden
sebastian1012.bplaced.net
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.
 
Reactions: MuTeRiiX

MrMurphy

Senior HTML'ler
28 Juli 2009
1.497
221
63
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:
Reactions: MuTeRiiX

MrMurphy

Senior HTML'ler
28 Juli 2009
1.497
221
63
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.
 
Reactions: MuTeRiiX

MuTeRiiX

Neues Mitglied
30 Juli 2019
2
0
1
22
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:

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.470
294
83
66
Die Situation im Footer siehst Du ganz richtig und die Inflation von Containern, die dadurch entsteht, ist in der Tat etwas unerfreulich. Je nachdem wie das Layout aufgebaut ist, kann Gridlayout es mit weniger Containern, aber Du musst dann berücksichtigen, dass es vom IE nicht richtig unterstützt wird.
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.497
221
63
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?
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?
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.
 

basti1012

Aktives Mitglied
26 November 2017
983
102
43
38
Minden
sebastian1012.bplaced.net
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?
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
 
Werbung: