CSS Box erstellen?

4 Antworten

DaMenzel
28.10.2019, 14:57

Die wohl einfachste Lösung wäre die Eigenschaft z-index zu verwenden: https://www.css-wiki.com/css-eigenschaft/z-index
EinAlexander  28.10.2019, 15:16
Die wohl einfachste Lösung wäre die Eigenschaft z-index zu verwenden:

Nein. Sicher nicht. Egal welchen Ansatz man verwendet, die Eigenschaft z-index ist auf jeden Fall überflüssig.

2
DaMenzel  29.10.2019, 16:58
@EinAlexander

Mhm, okay. Gibt's da auch eine Begründung ohne den Quelltext vorher gesehen zu haben?

0
EinAlexander  29.10.2019, 17:32
@DaMenzel
Gibt's da auch eine Begründung ohne den Quelltext vorher gesehen zu haben?

Ja. Denn egal wie der Quelltext aussieht, z-index ist für das gewünschte Vorhaben auf jeden Fall überflüssig. Es ist kein Quelltext denkbar, wo das in der Fragestellung beschriebene Problem mit Hilfe von z-index gelöst werden kann.

0
g4nd4lf88 
Beitragsersteller
 28.10.2019, 15:00

Wo setze ich den HTML Code hin?

vor oder nach

<div id:"nav"> (wo nun das Navigationselement ist)

#Anfänger

0
DaMenzel  28.10.2019, 15:03
@g4nd4lf88

Ich gehe davon aus dass Du 3 DIVs hast für die Boxen: grün, gelb, blau.
Alle sollten also drinstehen haben welche Positionierung verwendet wird wie relative oder absolute.
Unter die Eigenschaft setzt Du ein z-index: 1; <- gelbe Box.
Bei der blauen z-index: 2; oder höher damit ist die blaue Box oberhalb der gelben.

0
EinAlexander
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, Webseite
28.10.2019, 15:15
Für eine Aufgabe muss ich den gelben Container erstellen. Der grüne und blaue ist bereits erstellt. Wie bekomme ich das hin? Welcher CSS Code wird benötigt

Dafür gibt es unzählige Möglichkeiten. Leider postest Du die Aufgabenstellung nicht, so dass man Dir nicht die richtige Lösung nennen kann. Hier als Beispiel eine Möglichkeit (nicht responsive):

<!doctype html>
<title>Boxes</title>
<style>
#holder {
  width: 1280px;
  min-height:100vH;
  background: yellow;
  margin: auto;
}

#content {
    background:green;
   width:980px;
   height:100vH;
   float:left
}

nav {
    background:blue;
   float:left;
   width:300px
   }


</style>
<div id="holder">
    <div id="content">
   hello world
   </div>
   <nav>
       <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      </ul>
</div>

Alex
g4nd4lf88 
Beitragsersteller
 28.10.2019, 15:26

JOP! Hab noch min-height rausgelassen und dann hats geklappt! DANKE <3

0
germanils
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer
28.10.2019, 14:49

Da gibt es diverse Möglichkeiten. Am besten wär's, wenn Du deinen vorhandenen Code mal zeigst/Verlinkst.
Woher ich das weiß:Berufserfahrung – Entwicklung von Apps und Websites
Babelfish
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML
28.10.2019, 15:53

Geht am einfachsten mit Flexbox Layout:

https://jsfiddle.net/Babelfisch/npm76juf/

Gruß
Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.