Hat sich schon erledigt. Was ich meinte war nur width: 60% und border-width: 2px;
Beiträge von Zhaya
-
-
Hey. Ich hab versucht, dass Bild unten nachzustellen aber iwie krieg ichs nicht him dem Border ne weite von 60% und ne stärke von 2px geben aber irgendwie ändert sich da nichts. Könnt ihr mir da helfen?
HTML
Alles anzeigen<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Unbenanntes Dokument</title> <style type="text/css"> .flex-container { border-style: solid; padding: 1em; border-color:#B54648; margin: 0; list-style: none; display: flex; flex-flow: nowrap; justify-content: flex-start; } .flex-item { background: #8cacea; width: 100px; height: 100px; margin: 8px; color: black; font-size: 2em; text-align: left; } h1 { font-size: 1em; } </style> </head> <body> <ul class="flex-container"> <h1>Text</h1> <li class="flex-item">Text</li> <li class="flex-item">Text</li> <li class="flex-item">Text</li> </ul> </body> </html>
-
-
Hey. Ich habs jetzt geschafft mein Layout teilweise aufzubauen aber ich krieg es nicht genau so hin wie auf dem Bild. Könnt ihr mir da helfen?
HTML
Alles anzeigenMein Code: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Unbenanntes Dokument</title> <style type="text/css"> body { font-family: Arial, Helvetica, Sans-Serif; font-size: 20px; background: #EDEDED; } #flexContainer { display: flex; } header { background: #707070; min-height: 100px; margin: 3px; padding: 3px; } nav { background: #C9BFBF; flex: 1 1 15%; min-width: 300px; margin: 3px; padding: 3px; } aside { background: #C9C9C9; flex: 1 1 15%; min-width: 20%; padding: 3px; margin: 3px; } #content { min-height: 800px; min-width: 80%; background: #ABABAB; flex: 2 1 70%; margin: 3px; padding: 3px; } footer { background: #707070; min-height: 50px; margin: 3px; padding: 3px; } article { background: rgba(90,86,86,1.00); flex: 1 1 15%; min-width: 20%; padding: 3px; margin: 3px; } @media all and (max-width: 640px) { #flexContainer { flex-flow: column wrap; } header { min-height: 75px; } nav { min-height: 50px; order: 1; } aside { min-height: 50px; order: 2; } #content { min-height: 725px; order: 3; } footer { min-height: 25px; } } </style> </head> <body> <header>header</header> <section id="flexContainer"> <nav>sidebar</nav> <section id="content">section</section> <aside>aside</aside> <article>content 3</article> </section> <footer>footer</footer> </body> </html>
-
Wenn ich der rechten und linken box zwei versch. min-heights gebe, dann wurde die rechte box, da sie einen kleineren Wert hatte, nicht auf die gleiche höhe gesetzt wie die linke. Deshalb hab ichs jetzt wieder mit float versucht und so gehts dann:
HTML
Alles anzeigen<!doctype html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Layout</title> <style> body { margin:0; } header { width: 100%; height: 384px; margin-bottom: 50px; background: #33ccaa; } .container { width: 100%; max-width: 1040px; margin:0 auto 50px auto; } article { background:#d6e1de; width: 65.86538461538461%; min-height: 470px; float: left; } aside { background:#a7b6b3; width:29.326923076923077%; min-height: 403px; float: right; } </style> </head> <body> <header></header> <div class="container"> <article> </article> <aside> </aside> </div> </body> </html>
-
Hab jetzt beides also aside und article in den div reingetan, jetzt ist beides an der richtigen Stelle, danke
Und ja, obs reponsive ist war mir jetzt noch nicht wichtig.
Kann ich den die unteren beiden Boxen anzeigen lassen, ohne dass ich da einen Text reinschreibe? Sobald ich die Texte lösche, sind die Boxen weg
-
-
-
-
-
-
-
Was ist der Unterschied an den ganzen em, px, %? Wann weiß ich was ich benutzen muss oder ist das eine Frage des Auswendiglernens?
Kennt ihr außer Flexbox und Float noch andere möglichkeiten, mit denen man die 3 Absätze von oben nebeneinander stellen kann? Mit dem Code von oben sind die ja untereinander
Und ich versteh nicht ganz wie display:flex funktioniert? Muss das in den body oder header? Muss ich davor noch irgendwas schreiben, damit er die <p> Absätze nebeneinander anordnet?
Ich muss auch ein klassisches CSS Modul nennen, welches mehrspaltige Textsatz ermöglicht. Wäre column-count eins?
-
Das sieht schon logischer aus, danke!
Und danke wegen der Info mit dem br.
Wenn ich den teilen jetzt eine Klasse zu ordnen möchte, wäre das so oder?
<div>
<p class=hm1>absatz1</p>
<p class=hm2>absatz2</p>
<p class=hm3>absatz3</p>
</div>
und im head würde das so aussehen?
#hm1 {
...
Wäre es möglich, mir den Unterschied zwischen Class und ID zu erklären? Gelesen hatte ich, dass ID benutzt wird wenn der darauffolgende Text einzigartig ist und class, wenns mehrmals vorkommt. Hab ich das class dann richtig genutzt oder wäre das eig. n ID?
Und im head hab ich dann für den id/class tag einmal die methode mit dem # gesehen aber auch mit dem . (Punkt) Was ist da der unterschied? Tut mir leid dass ich soviel frage, versuch nur die Informationen zu bekommen, die mein Lehrer mir nicht vermitteln kann
-
Dankeschön.
Weißt du hier auch Abhilfe?
Die Aufgabenstellung lautet so:
Lege ein Html Dokument an mit einem DIV Element und 3 darin liegenden Absatzelementen.
So wie ich das verstanden habe wäre das dann so:
<div> <br>
</br>
<p>
</p></div>
Aber 1. kenn ich nicht 3 Absatzelemente und 2. bin ich mir auch nicht sicher, ob das so richtig ist