Hallo Ich mache gerade eine Website und habe das Problem, dass ich das box shadowing Attribute in css immer auf alle vier Seiten des Containers erhal, ich will es aber nur oben und unten. Hier der HTML-Code: <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div> Und hier der CSS-Code : .content { background-color: #48cae4; padding: 5%; box-shadow: inset 0 0 10px #132124; }

Wie kann man in css box shadowing nur oben und unten erhalten?

Hallo

Ich mache gerade eine Website und habe das Problem, dass ich das box shadowing Attribute in css immer auf alle vier Seiten des Containers erhal, ich will es aber nur oben und unten.

Bild zum Beitrag

Hier der HTML-Code:

<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>

Und hier der CSS-Code :

.content {

background-color: #48cae4;

padding: 5%;

box-shadow: inset 0 0 10px #132124;

}

1 Antwort

Vom Beitragsersteller als hilfreich ausgezeichnet

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

CSS

21.12.2021, 16:29

ich will es aber nur oben und unten.

Du kannst durch Komma getrennt mehrere Schatten angeben:

<style>
.content {
    background-color: #48cae4;
    padding: 5%;
    box-shadow:
        inset 0 11px 8px -10px #132124,
        inset 0 -11px 8px -10px #132124;
}
</style>
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>

Alex

Dragonir19

Beitragsersteller

22.12.2021, 19:58

Danke, das hat funktioniert!

Ähnliche Beiträge

HTML/CSS Hilfe - zwei Textfelder mit Bild nebeneinander?

Wie löse ich das Problem? Oben mein derzeitiger Stand - unten der Wunschzustand :)

HTML

<div id="main2">
   <div class="col1">
      <h3>Vivamus nec</h3>
      <img src="UE05/pic1.jpg" alt="spring flowers"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
   </div>
   <div class="col2">
      <h3>Lorem ipsum</h3>
      <img src="UE05/pic1.jpg" alt="spring flowers"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
   </div>

Wie würdet ihr das mit CSS lösen?

...zum Beitrag

Komischer Text?

Hallo, also mein Lehrer hat in meine Abgabe für mein Layout einen komischen Lateinischen Text geschrieben, er lautet "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." Ist das eine Bewertung? Warum auf Latein?? Google Übersetzer gibt nichts Sinnvolles. Ich hatte nie Latein.

...zum Beitrag

Wie kann ich mit css die zwei div container untereinander mit Abstand dazwischen anzeigen lassen?

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <style>
         .haupt {
         margint top: 50px;
         }
         .b1 {
         float: left;
         width: 400px;
         padding: 20px 0;
         color: #01DF01;
         border-bottom-width: 3px;
         border-style: solid;
         width: 50;
         height: 30;
         background-color: #fff;
         }
         .b2 {
         float: both;
         width: 400px;
         padding: 20px 0;
         color: #01DF01;
         border-bottom-width: 3px;
         border-style: solid;
         width: 50;
         height: 30;
         background-color: #fff;
         }
      </style>
   </head>
   <body>
      <div class="haupt">
         <div class="b1">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br>
            sed diam nonumy eirmod tempor invidunt ut labore et<br>
            dolore magna aliquyam erat, sed diam voluptua.<br>
            At vero eos et accusam et justo duo dolores et
         </div>
         <div class="b2">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br>
            sed diam nonumy eirmod tempor invidunt ut labore et<br>
            dolore magna aliquyam erat, sed diam voluptua.<br>
            At vero eos et accusam et justo duo dolores et
         </div>
      </div>
   </body>
</html>

...zum Beitrag

Js Funktion funktioniert nicht?

Ich bekomme immer diese Fehlermeldung: Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')

at OnClick ((Index):16:25)

at HTMLButtonElement.onclick ((Index):33:33)

Code:

<!DOCTYPE html>

<head>

<title>Document</title>

const TextElement = document.getElementById("text");

function OnClick() {

TextElement.setAttribute('style', 'color: red;');

}

</script>

<style>

#text {

color: black;

}

</style>

</head>

<body>

<div id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, et placeat, asperiores reprehenderit praesentium esse possimus quia sed tempore, unde autem illo. Illum, voluptate laboriosam. Doloribus unde mollitia necessitatibus dicta?</div>

<button onclick="OnClick()">button</button>

</body>

</html>

Danke

...zum Beitrag

Mit html und css durch einen button Hintergrundfarbe ändern?

Hallo,

ich mache gerade eine Website und möchte da einen Knopf, mit dem ich die Hintergrundfarbe und die Schriftfarbe der Website ändern kann. Ich habe bereits einen Button designet, weiß aber nicht, wie ich mit ihm Befehle ausführen kann.

Vielen Dank schonmal im voraus!

Hier ist der html-text für den Button:

<main>

<button class="bonbon orange">hier drücken zum ändern der Hintergrundfarbe</buton>

</main>

und hier ist der css-text für den Button:

main{

background: white

}

.bonbon{

width.: 250px;

height: 60px;

backgorund: orange;

/* old browsers */

background: linear-gradient(to bottom, white, orange);

box-shadow: inset 0px 0px 6px #fff, inset 0px -1px 6px #fff;

border: 1px solid #5ea617;

border-radius: 1em;

marign: 1em

}

.bonbon:hover{

box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}

.bonbon:focus {

box-shadow: rgba(0, 0, 0, 0.7) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px

}

...zum Beitrag

Englischer Lebenslauf - Wie Gymnasium schreiben?

Wie schreibe ich auf englisch, dass ich Gymnasium X besucht habe?:

EDUCATION

School Name, Location — Degree

MONTH 20XX - MONTH 20XX

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.

...zum Beitrag

wie ist mein HTML Projekt?

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

</style>

<body>

<H1>Willkommen auf meiner ersten Seite</H1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, minima rem maiores molestiae possimus sunt aperiam blanditiis. Veritatis impedit rerum, corrupti debitis veniam maxime deleniti, atque earum, aspernatur iure voluptate. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam tenetur ratione mollitia velit, quasi blanditiis ipsa amet magnam doloremque quam quod porro voluptatibus. Voluptate ipsa ratione maxime labore quo veniam?</p>

<button>login</button>

<h1>Was erwartet sie hier auf der seite?</h1>

<p>Auf dieser seite erhalten sie hilfe von unseren Fachleuten aus der pychologie <hr>wir arbeiten seit 30 Jahren mit unseren team und haben menschen aus der

Krise geholfen

</p>

<p>in unserer 1 stunden Therapie versuchen wir auf den grund ihre schweren <br>depression zu finden</p>

<hr>

<a class="mylink" href="#">Impressum</a>

<a class="mylink" href="#">Kontakt</a>

<a class="mylink" href="#">Datenschutz</a>

</footer>

</body>

</html>

...zum Beitrag

Warum ist bei Templates oft als Platzhalter ein Text auf Latein?

"Hier fängt Ihr Text an. Klicken Sie hier und fangen Sie an zu tippen. Porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur adipisci."

Um ein Beispiel zu nennen. Habe ich bereits in vielen Vorlagen für PowerPoint, Homepage etc gesehen...

...zum Beitrag

Bootstrap Column Anordnung ändern (mobile)?

Hallo liebe Community,

ich arbeite gerade an einem Webshop und erstelle die Startseite selbst mit HTML und CSS und dem Bootstrap Grid Layout. Nun habe ich Bilder und Texte welche auf dem Desktop jeweils abwechselnd und untereinander kommen.

Also jeweils Bild und Text in einer "row" und dann entweder der Text oder das Bild als erstes. So ergibt sich in der Reihenfolge: Text-Bild, Bild-Text.

Für die Desktopansicht ist das auch genau so gewünscht, allerdings hätte ich gerne wenn die Columns beim Smartphone untereinander rutschen, dass nicht zwei Bilder nacheinander kommen, sondern: Text-Bild, Text-Bild.

Wie lässt sich das realisieren?

Hier mal ein bisschen Code, sehr reduziert.

Doppelter Content und ein/ausblenden über "hidden" ist für mich nicht möglich aus SEO-Gründen.

Danke :)

  <div class="container">

    <div class="row">
      <div class="col-lg-9">
        <h3>Überschrift</h3>
        <p>Lorem ipsum dolor.</p>
      </div>
      <div class="col-lg-3">
        <img src="img/platzhalter.jpg">
      </div>
    </div>

    <div class="row">
      <div class="col-lg-3">
        <img src="img/platzhalter.jpg">
      </div>
      <div class="col-lg-9">
        <h3>Überschrift</h3>
        <p>Lorem ipsum dolor sit.</p>
      </div>
    </div>

  </div>

...zum Beitrag

Custom CSS Wordpress einzelne Seiten ausschließen?

Hallo, wie kann ich das Wordpress CSS nur für einzelne Seiten einstellen. Hab schon bisschen was zusammengebastelt. Danke für eure Hilfe!

@media only screen and (max-width: 359px) {

#primary .content-container {

padding-left: 10px !important;

padding-right: 10px !important;

}

{display:none}

.postid-3701,

.postid-3712,

.postid-3731,

.postid-3736,

.postid-3748,

.postid-2583,

.postid-3756,

.postid-3752,

.postid-3703

{display:none}

}

...zum Beitrag

Kann jemand diesen lateinischen Text (Lorem Ipsum ) übersetzen?

Hallo! hier der Text:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Vielen Dank für jede sinnvolle Übersetzung schon mal im Vorhinein!

...zum Beitrag

Minus Padding CSS?

Ich muss eine Website mit Phase 5 HTML Editor machen und dafür brauche ich ein negatives Padding… ich habe gefühlt alles probiert und z.B. margin: -10px funktioniert aber Padding eben nicht…

Vielen Dank schon mal

...zum Beitrag

Wie bekomme ich es hin, das die Kästen beim verkleinern des Fensters über die gesamte Länge geht?

Ich habe bisher das:

und verkleinert sieht es so aus:

Aussehen soll es aber so:

Hier mein Code:

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
      <style>
         header {
         text-align: center;
         font-size: 3em;
         padding: 5px;
         color: #fff;
         background-color: #FFBF00;
         }
         .wrapper { display:flex }
         @media screen and (max-width:620px) {
         .wrapper {display:block }
         }
         nav {
         width:15%;
         text-align: center;
         font-size: 2em;
         padding-right: 60px;
         color: #fff;
         background-color: #819FF7;
         margin-right: 10px;
         margin-bottom: 150px;
         }
         a {color: #fff }
         li {list-style: none }
         article {
         width:70%;
         color: #BDBDBD;
         }
         aside {
         color: #fff;
         width: 15%
         text-align: center;
         font-size: 1em;
         padding: 10px;
         padding-right: 60px;
         background-color: #01DFD7;
         margin-bottom: 150px;
         }
         footer {
         text-align: center;
         font-size: 1em;
         padding: 10px;
         padding-right: 60px;
         background-color: #D8D8D8;
         color: #A4A4A4;
         }
      </style>
   </head>
   <body>
      <header><h2>Header</h2></header>
      <div class="wrapper">
           <nav>
            <ul>
               <li><a href="" target="_blank">Link 1</a></li>
               <li><a href="" target="_blank">Link 2</a></li>
               <li><a href="" target="_blank">Link 3</a></li>
               <li><a href="" target="_blank">Link 4</a></li>
            </ul>
         </nav>
         <article>
            <h3>Lorem Ipsum</h3>
               <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
               sed diam nonumy eirmod tempor invidunt ut labore et dolore
               magna aliquyam erat, sed diam voluptua. At vero eos et
               accusam et justo duo dolores et ea rebum. Stet clita kasd
               gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
               amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
               sed diam nonumy eirmod tempor invidunt ut labore et dolore
            magna aliquyam.</p>
         </article>
         <aside>
            <h2>About</h2>
            <p>Lorem ipsum dolor<br>
               sit ametr,<br>
               consecteteuer<br>
               adipiscing elit.
            </p>
         </aside>
      </div>
      <footer>
         <p>&copy; </p>
      </footer>
   </body>
</html>

...zum Beitrag

Drupal Zeilenumbruch

Hallo Leute,

bin gerade dabei mit Drupal eine Homepage zu gestalten. Das Problem ist halt, dass wenn ich einen Text auf die Startseite schreibe dann hat er keinen Zeilenumbruch.

Beispiel:

Ist: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."

Soll: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."

Bin noch ein totaler Anfänger und habe schon gegooglet aber leider nichts gefunden.

Vielen Dank für eure Hilfe!

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen