CSS: Wie kann man einen Rahmen mit Abstand machen?

Also so ein border: solid 5px black; aber er soll so mit 15px um die div Box herum entstehen und nicht direkt angrenzend einen Rahmen bilden. Wisst ihr was ich meine? Also so als würde man ein Wort einkreisen z.B.

2 Antworten

Babelfish

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webentwicklung, Programmieren & Softwareentwicklung

06.08.2024, 23:32

Es ist echt schwer zu verstehen, was du genau willst. Beim nächsten mal vielleicht einfach eine Zeichnung machen oder es präziser erklären.

Nach deinem letzten Kommentar gehe ich davon aus, dass outline das ist, was du suchst:

https://developer.mozilla.org/en-US/docs/Web/CSS/outline

https://www.mediaevent.de/css/userinterface-outline.html

Das ist ein rein dekorativer Rahmen, den du ähliche wie border setzt und mit einem offset auch den Abstand angeben kannst.

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

Zebra321

Beitragsersteller

07.08.2024, 11:56

ENDLICH! Das war, was ich gesucht hatte! Ich finde meine Frage überhaupt nicht unmissverständlich verfasst, es ist nicht immer jemand "schuld" daran, wenn sich zwei Leute missverstehen. Ja nächstes Mal verwende ich eine Zeichnung. Das ist genau was ich gesucht habe! Outline + Offset. Danke.

Von Experte Babelfish bestätigt

ChrisCat1, UserMod Light

06.08.2024, 22:31

Einen Innenabstand kann man mit "padding" machen.
https://www.w3schools.com/css/css_padding.asp

Bild zum Beitrag

Ansonsten gibt es auch noch den Außenabstand, welchen man mit "margin" macht.
https://www.w3schools.com/css/css_margin.asp

Zebra321

Beitragsersteller

06.08.2024, 22:33

Das weiß ich, aber ich brauche einen Abstand vom Rahmen zum Div-Kästchen, keinen Abstand INNERHALB oder ZWISCHEN Kästchen. Somit ist das leider nicht was ich hier brauche.

Babelfish

06.08.2024, 22:41

@Zebra321

Das hast du dann aber falsch erklärt. Der äußere Abstand ist dann margin.

Zebra321

Beitragsersteller

06.08.2024, 22:42

@Babelfish

Wieso bestätigst du die vollkommen falsche Antwort noch?! NEIN Margin funktioniert nicht.

ChrisCat1, UserMod Light

06.08.2024, 22:44

@Zebra321

Wenn du dem Div-Kästchen den Rahmen zuweist ist dieser Rahmen Teil des Div-Kästchen. Mit padding kannst du hier eben dem Abstand zum Inhalt des Div-Kästchen festlegen.

Wenn der Rahmen also ein eigener Teil sein soll kannst du z.B. ein Div-Kästchen in ein anderes Div-Kästchen packen.
Dem äußeren kannst du dann den Rahmen zuweisen und dann je nach Wusch dem äußeren Div einen Innenabstand geben oder dem inneren Div einen Außenabstand.

Zebra321

Beitragsersteller

06.08.2024, 22:52

@ChrisCat1, UserMod Light

Das mit dem Padding funktioniert jedenfalls nicht, das bewirkt nicht was ich brauche. Ich kann auch kein Div-Kästchen um das Div-Kästchen packen, weil ich will dass quasi das etwas hinzugefügt wird auf einen beliebigen Knopf. Wenn ich das wollte müsste ich also um jeden einzelnen Knopf auf jeder Unterseite einen unsichtbaren Knopfrahmenboxdings drumrummachen ... ich will quasi einen "Rahmen", der weit um die Box herum ist, wie wenn man in einem Menü etwas auswählt. Es soll einfach nur optisch ansprechender sein und ich hoffe dass das anders geht als mit einer zusätzlichen Box, weil ich es nur in eine Zeile CSS/JS schreiben will bei onClick soll es ein Kästchen um das this-Objekt drumrumachen, aber es soll jetzt nicht irgendwie jeder Knopf so eine Elternbox drumherum haben die aktiv sichtbar wird bei onClick

Babelfish

06.08.2024, 23:35

@Zebra321

Das war die Antwort zu deiner Frage, so wie ich sie (und offensichtlich auch andere) verstanden haben. Da war dann vieleicht doch eher die Frage missverständlich formuliert. Mit „Abstand vom Rahmen zum Div-Kästchen“ kann ich beim besten WIllen nichts anfangen.

Ich gehe aber jetzt davon aus, dass du offset suchst und da habe ich noch eine extra Antwort geschrieben.

Ähnliche Beiträge

HTML projekt wie findet ihr die vorarbeit?

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

...zum Beitrag

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zum Beitrag

Bootstrap: CSS Styling nur mit!important möglich?

Hallo,

warum kann ich Eigenschaften am CSS Framework nur mit !important verändern?

Dieser Code funktioniert ohne !important nicht. Warum ist das so?

Auf !important sollte doch weitestgehend vermieden werden.

<h2>Badges</h2>
  <a class="btn badges" href="#">Kommentare <span class="badge badge-secondary">20</span></a>

.btn{ border: 2px solid #CCC !important; border-radius: 5px !important; color:#CCC !important; }

...zum Beitrag

CSS Lichterkette als Border?

Hallo, für ein Schulprojekt muss ich eine Adventkalenderwebsite programmieren und designen. Jedenfalls habe ich ein kleines Fenster (Div), dass ich gerne mit einer Lichterkette umranden würde (gerne animiert). Ich habe bereits mit border-image herumprobiert, jedoch hat es nicht wirklich gut geklappt. Habt ihr eine Lösung?

...zum Beitrag

Grid Layout funktioniert nicht?

<div id="story">
		<p id="grid1">1</p>
		<p id="grid2">2</p>
		<p id="grid3">3</p>
		<p id="grid4">4</p>
		<p id="grid5">5</p>
		<p id="grid6">6</p>
	</div>

#grid1{
	grid-area: "eins";
	border: 1px solid black;
}
#grid2{
	grid-area: "zwei";
	border: 1px solid black;
}
#grid3{
	grid-area: "drei";
	border: 1px solid black;
}
#grid4{
	grid-area: "vier";
	border: 1px solid black;
}
#grid5{
	grid-area: "fünf";
	border: 1px solid black;
}
#grid6{
	grid-area: "sechs";
	border: 1px solid black;
}


#story{
	padding: 15px;
	color:  white;
	background-color: rgb(0, 0, 255);
	display: grid;
	grid-template-columns: 200px 200px 200px;
	grid-template-rows: 200px 200px 200px;
	gap: 16px;
	grid-template-areas:
	"eins" "eins" "zwei"
	"drei" "vier" "zwei"
	"fünf" "vier" "sechs";
}

Es wird bei mir Quasi nur 1 2 3 nächste Zeile 4 5 6 angezeigt. Bild in der Ergänzung meiner letzten Frage. Ich will aber dass es so aussieht wie in grid template areas nur halt dass nicht zum Beispiel 1 1 dasteht sondern nur ein großes Feld mit der Zahl 1 drinnen.

...zum Beitrag

CSS Problem mit Firefox?

Ich will gerade ein kleines CSS-only Dropdown-Menü mittels der Pseudoklasse :focus realisieren. Das funktioniert in Chrome, Edge und Safari super, nur Firefox schießt hier quer und die Links lassen sich nicht anklicken. Meine Vermutung ist, dass es bei Firefox ein Timing-Problem gibt und – vereinfacht gesagt – blur vor click kommt und click ins leere läuft, da der Link dann unsichtbar ist.

Hier ein ganz einfacher Testcase:

HTML

<nav>
 <span class="menu" tabindex="-1">
  Menü aufrufen
  <ul>
   <li><a href="https://www.gutefrage.net/" target="_blank">Gutefrage</a></li>
   <li><a href="https://www.google.com/" target="_blank">Google</a></li>
  </ul>
 </span>
</nav>

CSS

.menu {
 position: relative;
 border: 1px solid silver;
 border-radius: 5px;
 padding: 4px 8px;
}

.menu:focus {
 background-color: coral;
}

.menu ul {
 display: none;
}

.menu:focus ul {
 position: absolute;
 display: block;
}

Link

https://jsfiddle.net/Babelfisch/bck65qeo/6/

Hat jemand eine Idee, wie ich Firefox hier dazu bringen kann, sich wie alle anderen Browser zu verhalten? Ich bin hier gerade mit meinem Latein am Ende, will das ganze aber ungern begraben oder unnötig Javascript dafür nutzen.

...zum Beitrag

CSS: Wie kann ich bei Hover die Hintergrund- und Schriftfarbe ändern lassen?

Hallo zusammen,

ich würde gerne in diesen Code eine Hover-Funktion einbauen. Da ich Neuling bin, hoffe ich, dass ihr mir die Unbeholfenheit verzeiht.

Bei Hover sollte sich die Hintergrundfarbe und wenn möglich die Schriftfarbe ändern:

*#dm *.dmBody div.u_1159973834 {
  background-color: rgba(255, 255, 255, 0.35) !important;
  border-style: solid !important;
  border-width: 2px !important;
  border-color: rgba(255, 255, 255, 1) !important;
}

Besten Dank für eure Zeit!

...zum Beitrag

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

...zum Beitrag

HTML / CSS: Meine div-Box-Breite passt sich automatisch dem Inhalt an?

Wie löse ich das Problem? Die div-Box soll immer die gleiche Breite behalten.

CSS-Code:

.btn-1 {
  text-transform: none;
  cursor: pointer;
  overflow: visible;
  font-family: inherit;
  line-height: inherit;
  padding: 20px 50px;
  color: white;
  background-color: #424242;
  border-color: #fff;
  transition-duration: 0.4s;
  border-radius: 15px !important;
  font-size: 1.3em !important;
  text-rendering: auto;
  word-spacing: normal;
  letter-spacing: normal;
  text-shadow: none;
  align-items: flex-start;
  font: 400 13.3333px Arial;
  border-width: 2px;
  border-style: outset;
  border-image: initial;
}

HTML:

<button data-shoppy-product="hzX6G9S" class="btn-1">Pay 15 €</button>

Unwichtig:

<script src="https://shoppy.gg/api/embed.js"></script>

...zum Beitrag

Wie kann ich den Abstand zwischen HTML-Tags entfernen?

HI, ich programmiere gerade einen Taschenrechner in HTML/CSS/JavaScript und möchte den Abstand zwischen den Elementen entfernen. Margin, Padding und Border sind bereits auf 0 gestellt. Der Abstand ist auch nur horizontal zwischen den Elementen. Vielen Dank im Voraus :-)

...zum Beitrag

CSS!important?

Hallo

Ich habe das Problem, wenn ich mein (s)css an die Handyansicht anpasse, dann muss ich die Werte im Media Query immer mit !important überschreiben.

Wie kann ich das ändern oder wie löse ich es ohne important?

Danke im voraus

...zum Beitrag

Einbindung von JS und CSS klappt nicht, könnte die Fehlerursache sein?

Hallo Leute, ich wollte gerade zum besseren Verständnis von getElementById() ein Beispiel nachbauen, dazu habe ich ein HTML-Dokument erstellt und die entsprechenden JavaScript- und CSS-Dateien eingebunden. Die CSS-Datei im Kopfbereich, die JS-Datei vor dem schließenden body-Tag. Am Ende soll ein roter Rahmen um eine Tabelle erzeugt werden.

Ich dachte erst, dass es am falsch eingegebenen Pfad liegen könnte, aber der ist soweit ich sehe auch richtig. Egal was ich tue, die HTML-Datei wird ausgegeben, aber ohne die JS- und CSS-Komponenten.

Hier der zugehörige JS-Code:

Hier der JS-Code:

function init() {
    // Selektion nach ID
    const mainElement = document.getElementById("main");
    mainElement.className = "border";
}

Hier der CSS-Code:

.border {
    border: thick solid red;
    border-radius: 25px;
    padding: 5px 25px 25px 25px;
}

...zum Beitrag

HTML, CSS, JavaScript: Komischer Rand entsteht, der da nicht hin soll. Wie entfernen?

Im Rahmen eines Projektes erstelle ich derzeit eine "Webseite". Das Problem ist, dass im blau umkreisten Menü ein Abstand entstanden ist, der dort nicht hingehört. Zur besseren Veranschaulichung wurden Elementen eine Farbe zugewiesen.

Link zum Code:
https://docs.google.com/document/d/15GRD_qnv_Rr4WNFKoEWZLnoZD5wKAh0WldTEo8ZLhuY/edit?usp=sharing

Screenshot

...zum Beitrag

Abstand zwischen zwei Div-Containern verhindern HTML?

Ich habe zwei Div-Container mit display: inline-block; padding: 0; margin: 0; aber es befindet sich trotzdem ein Abstand zwischen ihnen. Woran liegt das?

hoffe auf Hilfe,

Bohne47

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen