Beiträge von Zhaya

Zhaya · 29. März 2019

Hat sich schon erledigt. Was ich meinte war nur width: 60% und border-width: 2px;

Zhaya · 29. März 2019

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

<!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>

Alles anzeigen

Zhaya · 25. Januar 2019

basti1012 Danke

Zhaya · 25. Januar 2019

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

Mein 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>

Alles anzeigen

Zhaya · 26. April 2018

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

<!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>

Alles anzeigen

Zhaya · 26. April 2018

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

Zhaya · 18. April 2018

...Ich bin einfach nur dumm. Ich hab das Dokument geschlossen und habs dann als Website geöffnet und auf einmal wurden die Bilder angezeigt :'D

Zhaya · 18. April 2018

Natürlich mach ich irgendwas verkehrt, sonst würds ja bei mir gehen. Was heißt für dich "Er funktioniert auf meinem Rechner"? An sich funktioniert er auf meinem auch aber die Bilder werden wie gesagt nicht angezeigt. Hintegrundfarbe, Border etc. seh ich

Zhaya · 18. April 2018

Geht nicht aber trz. danke für eure Hilfe. Ich gibs auf

Zhaya · 18. April 2018

In deinem Link wirds ja in den Head Bereich geschrieben aber wenn ich es in die Div Box tun soll, dann muss es doch in den Body?

Zhaya · 18. April 2018

Oh tut mir leid also die Bilder sollen IN die Div box als Hintergrund

also kann ich das dann so schreiben

<div><img src=....> ?

Ah, ich hasse diese Aufgabe. Wie kann man erwarten dass ich das innerhalb von 8 Unterrichtsstunden alles drauf habe und google verwirrt mich nur

Zhaya · 18. April 2018

Könnt ihr mir aus eurer persönlichen Erfahrung Vorteile von Float und Inline-Block sagen? Zu inline block hab ich, dass es responsive ist aber das wars dann auch. Sonst hab ich nur etliche negative Aspekte

Zhaya · 17. April 2018

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?

Zhaya · 15. April 2018

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

Zhaya · 15. April 2018

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:

</br>

<p>

</p></div>

Aber 1. kenn ich nicht 3 Absatzelemente und 2. bin ich mir auch nicht sicher, ob das so richtig ist

Beiträge von Zhaya

Flexbox und border

Flexbox und border

Flexbox Aufbau von Containern

Flexbox Aufbau von Containern

Hilfe

Hilfe

Hilfe

Hilfe

Hilfe

Hilfe

Hilfe

Hilfe

Hilfe

Hilfe

Hilfe