USERUn556
13.08.2022, 20:53
CSS Fehlersuche Hilfe?

Fragen:
1. Warum kann ich auf "div1" und "Content Box" kein padding festlegen?

2. Warum werden keine Zeilenumbrüche (<br>) zwischen dem "header" und der "Content Box" gemacht? 3. Warum hat der Text, "test randomn text", so einen Abstand vom "div1"?

Datei/Code:

<!DOCTYPE html>
<html>
<head>
<style>
*
{
	box-sizing: border-box;
}


body
{
	margin: 0;
    min-width: 250px;
}


div {
  float: left;
  padding: 15px, 10px; 
  text-align:center;
  
}


.div1
{
	background: white;
    width: 90px;
    height: 40px;
    padding: 2px, 5px;


}


.header
{
	padding: 30px 10px;
    background: red;
    width: 100vw;
}


.headerSpan
{
	
    background: white;
    font-size: 35px;
}


.contentBox


{ 
	
    background: black;
    color: white;
    width: 200px;
    height: 200px;
    padding: 20px, 20px;
    
}


</style>
</head>
<body>




<div class="header">


<div class="div1">Div 1</div>


<span class="headerSpan"> test randomn text <span>
</div>


<br>
<br>


<div class="contentBox">
	
    	Content Box
    
</div>


</body>
</html>

Vielen Dank im Voraus

 ...zum Beitrag
Antwort
von wandererds
13.08.2022, 21:19

bin auf anfänger und komme mit der methode besser zu recht:

anstatt einfach nur padding würd ich es löschen und das hier verwenden:

padding-top:

padding-left:

padding-right:

padding-bottom:

( habs getestet mit deinem code und es funktioniert)

 ...zur Antwort
ladladsd
07.08.2022, 22:25
CSS durch Oberstes Element klicken?

Ist das möglich ?
Angenommen ich muss einen Div mit 0.2 opacity über einen Button haben.

Aber der klick auf den Button würde trotzdem nicht funktionieren.

Mit z-index usw. wäre der Button ja das oberste Element, das kenne ich schon, das ist nicht das was ich suche.

Hier ist ein Beispiel Code falls ihr erst ausprobieren müsst oder nicht verstanden habt was ich meine. Kurz bei JSFiddle eingeben.

<!DOCTYPE html>
<html>
<head>
<style>
#d{
  position:absolute;
  background-color:rgba(255,0,0,0.2);
  height:100%;
  width:100%
}
</style>
</head>
<body>
<div id="d"></div>
<button>Button</button>
<script>
b = document.querySelector('button');
b.onclick = ()=>{
alert("karl marx");
}
</script>
</body>
</html>
...zum Beitrag
Antwort
von wandererds
08.08.2022, 22:54

den button tag in den container setzen hilft, falls ich das problem richtig verstanden haben sollte. so siehts dann aus:

https://jsfiddle.net/po7Ljnu0/

 ...zur Antwort
Erbtar
05.08.2022, 14:42
Text rechts oben neben Bild platzieren?

Hey, Ich finde keine Lösung wahrscheinlich is es eh komplett einfach, aber ich hab grad erst mit Html und Css angefangen.

So siehts bei mir aus, aber ich möchte es so haben

Was muss ich da machen? (Hab das schnell mit paint gezeichnet lol)

...zum Beitrag
Antwort
von wandererds
07.08.2022, 16:41

Hey,

ich bin selbst noch ein bluutiger Anfänger. Ich habs einigermaßen hinbekommen und versucht alles detaliert zu erklären. Ich bin mir ziemlich sicher, dass das nicht die optimalste Lösung ist, aber es ist die einzige, die ich kenne.

HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="hp1.css">
  </head>
  <body>
    <!-- mit dem <div></div> tag erstellst du dir eine Box in der du alles so platzieren und stylen kannst wie du es gerne hättest. Das Styling und positionieren findet im CSS statt.
    dafür habe ich dem div tag die klasse "obereBox" gegeben. Die Klasse muss anschließend im CSS verknüpft werden.--->
    <div class="obereBox">
      <!-- in der box ( container) habe ich als erstes das Bild hinzugefügt, damit das Bild auf der linken Seite zu sehen ist. Natürlich hat auch das Bild eine
        Klasse bekommen, damit ich die größe bearbeiten kann --->
      <img class="bild" src="blätter.jpg" alt="">
      <!-- mit dem nav tag erstellt man meistens die Leisten oben, wo du dich von Seite zu Seite klicken kannst, zB Home/ About Us/ etc. Ich habe im CSS die Klasse
        "leiste" einfach einen Schwaren Hintergrund geschaffen und zum Schluss die Höhe und Breite angepasst. --->
      <nav class="leiste">
        <!-- die tags h1 - h6 benutzt man für Überschriften, h1 gibt dir den größten und stärksten Text wieder. durch "style=color:white;" habe ich den Text weiß gefärbt --->
        <h3 style="color:white;">Birke</h3>
        <!-- mit dem p tag schreibst du einzelne absätze/ paragraphen. Ich habe so viel Text eingefügt, bis der untere Rand meines Absatzen mit dem unteren Rand des Bilder
        quasi eine linie Bildet.--->
          <p class="absatz">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum  veniam, quis nostrud exercitation ullamco laboris nirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </nav>
    </div>
    <!-- Danach habe ich einen neuen Absatz gebildet, damit der Text komplett von links anfängt. --->
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  </body>
</html>

CSS:

.bild { /* als erstes gibst du hier im CSS die klasse ein, welche du bearbeiten willst.
  mit width und height bearbeitest du die Maße der Klasse*/
  width: 350px;
  height: 350px;
  float: right; /* war hier anscheinend nicht nötig, damit wollte ich den Text ums Bild umfließen lassen */
}
.leiste { /* hier sollte alles klarsein, Hintergrundfarbe + Maße */
  background-color: black;
  width: 1600px;
  height: 55px;
}
 /* hier hab ich hinter der Klasse den tag h3 hinzgefügt, weil ich nur den ändern wollte. Hier hab ich den abstand zum bild mit hilfe von "padding" ein wenig vergrößert */
.leiste h3 {
  padding-left: 15px;
}
.absatz {
  padding-left: 5px;
}
/* das ist wahrschienlich der wichtigste teil, hiermit gibt man die positionierung in den containern an ( hierzu würd ich dir eher n youtube- video empfehlen) */
.obereBox {
  display: flex;
  justify-content:  space-between;
}
...zur Antwort