Wie bekomme ich die <hr> Trennlinie dünner als 1px?

Hallo,

die <hr.> Linie wird bei mir unter 1px nur in Edge richtig dargestellt. In allen anderen Browsern wird unter 1px genau so wie 1px dargestellt. Ich habe jetzt schon sehr viel versucht, auch die größe als HTML Attribut und in em anzugeben.

Ich wäre wirklich dankbar für jede Hilfe!

3 Antworten

thomasbuescher

08.01.2017, 13:56

Hallo,

dünner als 1px geht ja gar nicht, weil die Auflösung des Monitors durch die pixelgröße begrenzt wird.

Du kannst aber die Farbe abschwächen, um die Linie dünner wirken zu lassen.

Also z. B. die Linie nicht 1px schwarz, sondern 1px grau.

Caseyyy

08.01.2017, 15:08

Vllt. hast du einen Schatten drauf.

Luksa

Beitragsersteller

08.01.2017, 14:00

Danke für deine Antwort!

Klar, aber merkwürdigerweise ist die Linie 2 pixel hoch. Wie gesagt, nur in Edge nicht, da wird es so dargestellt wie es soll.

thomasbuescher

08.01.2017, 14:02

@Luksa

Ach, hab nochmal genau hingeschaut. Wenn Du als Breite "1" angibst, ist das nicht bei allen Browsern 1px.

Mach das lieber über einen CSS Befehl und gibt als Breite "1px" an. Das das Kürzel "px" da auch wirklich steht.

Oder, wenn Du es mit Deinem Befehl versuchen willst:

Das funktioniert aber auch nicht immer.

Luksa

Beitragsersteller

08.01.2017, 14:08

@thomasbuescher

Habe ich auch schon gemacht. Verändert sich aber nichts :/

Luksa

Beitragsersteller

08.01.2017, 14:11

@thomasbuescher

border-style: solid
macht komischerweise auch das selbe wie border-style: double.

Kieselsaeure

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

08.01.2017, 17:53

wie willst du bitte der led sagen sie soll doch bitte nur zb 1/4 leuchten von der fläche her..? selbst wenns sowas gäbe wärs vermutlich sehr sehr sehr teuer. deswegen gibts viele led's. eine led = 1pixel.

kuechentiger

08.01.2017, 15:20

<hr style="height:1px; border:0 none">

Ähnliche Beiträge

Html und Css; Wieso wird der Text am Ende als Link dargestellt?

Hallo,

es geht um folgenden Code:

<!doctype html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="widt=device-width, initale-scale=1">
        <meta name="description" content="Beschreibung">
        <title>Test html Grundgeruest</title>
    </head>
    <body>
    </body>
</html>

</br>
</br>
</br>

ERSTELLUNG EINES LINKS</br>
<a href="irgendwohin.html">Hier Klicken</a>
Nach "href=" steht die Datei, die aufgerufen werden soll, diese muss in Gänsefüsschen stehen.</br>
"Hier Klicken" ist der für den Benutzer sichtbare Text, der angeklickt </br>
werden soll. Achtung Attribute wie href stehen immer nur im Start-Tag, nie im End-Tag.</br>
</br>
</br>
</br>

EINFÜGEN VON BILDERN</br>
<img src="https://localhost/Schulung_Html_und_Css/Html/Vorgang_02_HTML_Grundgeruest/Bilder/test.jpeg" alt="kurzbeschreibung" width="50px" height="50px">
</br>
</br>



    <!--
    - Beachte dass das Bild im selben Ordner liegen muss oder ein eindeutiger Link erzeugt werden muss.
    Wobei darauf zu achten ist, in welche die "/" schauen.
    -->
</br>
</br>
</br>
</br>



<p> Hier kann ein Text dargestellt werden </P>
<p> Hier kann ein weiterer Text dargestellt werden </p>
    <!--
    - Hat den Vorteil dass mit einem Stylesheet alle mit <p> gekennzeichneten "Container" mit einer Eingabe oder Umstellung Formatiert werden können.
    -->



<ul>
    <li><a href="https://www.google.com/">Google</></li>
    <li><a href="https://www.youtube.com/">Youtube</></li>
    <li><a href="https://www.bing.com/">Bing</></li>
    <li><a href="https://www.y-informer.com">y-informer.com</></li>
</ul>    

</br>
</br>
</br>

<p> Dies ist die Xampp installation</p>


    <!-- so wird ein Kommentar eingefügt. Dieser ist für den Besucher der Webseite nicht lesbar.
        Innerhalb des kommentars können auch html Befehle  eingegeben werden. Diese sollen zumindest
        keine auswirkungen auf die Eingabe haben.
        
        - Fehler der mir unterlaufen ist. Beim Einfügen von Bildern, sofern dieser im selben Ordner liegt muss hinter dem
        <img src noch ein "=" Zeichen. Wenn das Bild in einem leserlichen Format ist klappt es.
        -- Sofern das Bild an einem anderen Ort liegt, klappt es aber nicht, an der Lösung wird noch gearbeitet.
        
        Beachte:
        - Dateifadsangaben im internet -> "/"
        - Dateifadsangaben im Betriebssystem -> "\"
        - Die Angabe "localhost" beinhaltet bereits die "htdocs" entsprehcend ist im weiteren nur noch der Projektordner anzugeben.
        
        Merke: bei dem eigentlichen Turtorial:
        - Die Xamp Installation und Konfiguration durchgehen
        - kurze einführung wie das funktioniert mit dem Webspace -> PC -> Server -> Webspace -> Domain und so weiter.
        
    -->

Wenn ich mir den Code im Browser ansehe wird der Teil unten:


<p> Dies ist die Xampp installation</p>

als Link dargestellt wieso ist das so?

...zum Beitrag

HTML Code testen?

Haben im Moment einen HTML-Code den ich einfach mal testen möchte. Ich weiß, dass es geht wenn ich das in einem Textdokument speichere, aber meine Frage ist, wie das dann genau geht. Also das man sie testweise im Browser ausführt.

Hätte als Browser Chrome und Edge zur Verfügung

...zum Beitrag

EBay HTML Vorlage / Problematik?

Hallo,

grundlegend habe ich die HTML Kenntnisse in den letzten Tagen verstanden und angewandt. Sobald ich mir mein erstelltes Layout ansehe im Browser sieht es perfekt aus und alles funktioniert.

Kopiere ich diesen Code und füge ihn in eBay ein, so wird mir alles umgestellt und es sieht einfach nur doof aus.

Gibt es da einen Trick? Ich konfiguriere das Aussehen direkt im HTML Dokument und nicht ausgelagert im CSS da ich mir dafür keinen Webspace zulegen will. Ich wäre dankbar für Tipps.

...zum Beitrag

Wie kann ich meine html Seite für alle Browser optimieren?

Ich habe eine Webseite erstellt die auf Chrome wunderbar funktioniert und auch auf Microsoft edge, aber im Internet Explorer und auf Firefox wieder nicht, wie kann man das beheben?

...zum Beitrag

Bei CSS "display: flex;" wird alles schief warum?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login</title>
  <!-- stylesheet -->
   <link rel="stylesheet" href="styles.css">
   <!-- Boostrap Icon -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
</head>
<body>
  <div class="container">
    <!-- Create Account -->
     <div class="sign-up">
      <div class="sign-up-container">
        <h3>Create account</h3>
        <div class="cs-form-group">
          <label for="Email">Email</label>
          <input type="email" class="cs-form-control">
        </div>
      </div class="cs-form-group">
        <label for="password">Password</label>
        <input type="password" name="" id="" class="cs-form-control">
      </div>
      <div class="cs-form-control">
        <button class="cs-form-submit">Create Account</button>
      </div>
      <span class="divider"></span>
      <div class="cs-form-group">
        <button class="social-login">
          <span class="social-icon">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/2048px-Google_%22G%22_logo.svg.png" alt="" style="width: 20px;">
            
          </span>
          Create using Google Account
        </button>
      </div>
      <p>Already have an account?<a href="#"> Login</a></p>
     </div>
  </div>
     <!-- Login -->
     <div class="login">
     </div>
     <!-- Forgot Password -->
      <div class="forget-password">
      </div>
  </div>
  
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #F5F5F5;
}

.sign-up{
  position: relative;
  padding: 10px;
  width: 420px;
}

.sign-up-container{
  position: relative;
  background: #F5F5F5;
  padding: 24px 20px;
  border: 1px solid #D4D5D8;
  box-shadow: 0px 1px 2px rgba(152, 152, 152, 0.2);
}

.sign-up-container h3{
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 8px;
}

.cs-form-group{
  display: block;
}

...zum Beitrag

Binary Tree auf Website visualisieren (HTML, CSS, JS)?

Hallo, ich muss für den Softwareentwicklungsunterricht einen Binärbaum mit JavaScript programmieren und diesen anschließen mit HTML und CSS visualisieren. Der Lehrer meinte explizit, dass KI oder andere Hilfe verwendet werden sollte, da die Aufgabe sonst zu umfangreich wäre. Nun, ich habe ChatGPT 4o für eine Visualisierung davon gefragt und nur fehlerhaften Code bekommen. Andere Klassenkameraden haben ChatGPT mit Canvas (Premiumversion) verwendet und da gab es aber richtige Ergebnisse.

Nun zu meiner Frage: Wo bekomme ich den Code her? Ich habe bereits das halbe Internet durchforstet, aber es entspricht fast nichts meinen Anforderungen:

Es soll Textfelder zum Hinzufügen, Löschen und Suchen geben
Bei Hinzufügen tippt man eine Zahl ein und diese wird hinzugefügt
Bei Löschen wird die Zahl aus dem Binärbaum gelöscht
Beim Suchen wird die Zahl im Binärbaum besonders dargestellt wie z.B. leuchtet der Node dann auf
Keine Librarys dürfen verwendet werden (!)

Wäre dankbar für bereits fertigen Code. Ich bekomme den Binärbaum selbst her, aber an der Visualisierung scheiterts.

...zum Beitrag

HTML Tag als Text darstellen?

Hallo. Ich möchte den Tag <h1> nicht als Tag darstellen, sondern als Text. Wie geht das und macht man das in HTML selber oder in CSS?

Hintergrund: Ich versuche gerade eine Seite zu schreiben, wo HTML erklärt wird. Dort gibt es dann einen Satz bzw. Absatz, der wie folgt lautet:

"Die Sprache HTML beschreibt, wie der Browser (oder ein anderes Programm, wie z. B. ein Text-Editor) die Auszeichnungen des Textes zu „verstehen“ hat, nicht, wie er sie dann in der Darstellung umsetzt. So besagt <h1> zwar, dass eine Überschrift folgt, nicht aber, in welcher Schriftgröße oder Schriftschnitt diese darzustellen ist – hier haben sich nur gewisse übliche Standardeinstellungen eingebürgert, die aber nicht Teil der HTML-Spezifikation sind."

Das Problem ist nun, dass im zweiten Satz ab <h1> alles danach als Überschrift groß und fett geschrieben wird (und in einer neuen Zeile), weil er das alles, was danach folgt, als "Überschrift" kennzeichnet bzw. tagt. Das will ich aber nicht. Ich will, dass es als normaler Text dargestellt wird und alles danach auch. Wie genau mache ich das?

...zum Beitrag

Wie entferne ich plötzlich aufgetretene dünne schwarze Linie auf dem Desktop?

Auf meinem Desktophintergrund tauchte plötzlich eine schwarze relativ dünne Linie auf, welche sich senkrecht durch das bild zieht. Sie ist allerdings nur auf dem Desktop vorhanden, dass heißt öffne ich bspw. einen Browser ist auf diesem keine Linie zu sehen.

Falls jemand sich auskennt, bitte antworten. Danke schonmal

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

Warum werden HTML-Dateien nicht richtig angezeigt?

Ich mache für Informatik über Notepad++ eine HTML aber bei mir zuhause (windows 10 ) werden bei allen browsern (chrome , Firefox, edge , ja auch internet explorer) die die datei nicht angezeigt z.b werden bilder nicht angezeigt so wie umlaute seltsame symbole sind

...zum Beitrag

Wieso schlechte Bildqualität bei Google Chrome?

Hallo,

Seit einer Weile werden Bilder , z.B. von Facebook in Chrome fehlerhaft angezeigt. Sie haben alle lila-blaue Flecken und Linien. In anderen Browsern hingegen (z.B. Edge) erscheinen die Bilder hingegen ganz normal.

Vielen Dank für eure Mithilfe!

...zum Beitrag

Javascript funktioniert nicht in Chrome?

Ich habe eine kleine lokale Website geschrieben und bin auf folgende Situation gestoßen:

Chrome führt ohne weiteres kein Javascript aus. Bei allen anderen Browsern (IE, Edge, Firefox, Safari) funktioniert es allerdings. Es sind keine Erweiterungen installiert und JS ist aktiviert. Es werden keine Fehler in der Konsole angezeigt.

Und jetzt kommt der komische Teil: Auf manchen PCs funktioniert es, auf anderen nicht. Wenn ich auf den PCs, auf denen es nicht funktioniert zuerst die Entwicklertools aufrufe, und dann die Seite besuche, funktioniert alles einwandfrei.

Ich habe keine Ahnung was die PCs gemeinsam haben, oder was diese äußerst nervtötende Situation verursacht und bin für jede Hilfe dankbar.

...zum Beitrag

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

Wieso wird eine html-Datei auf meinem Webserver (Raspberry PI) nicht so dargestellt, wie wenn ich sie normal im Browser öffne?

Ich habe einen Apache2 Webserver auf meinem Raspberry PI installiert. Nun habe ich meine html Website hinterlegt. Diese kann auch vom Server abgerufen werden, nur sieht sie nicht so aus, wie ich sie eigentlich programmiert habe. Fehlt auf dem Webserver vielleicht ein Programm, dass dies ermöglicht? Kann der Webserver möglicherweise nicht alles an den Client senden, sodass dieser nur den reinen html code und nicht den Rest empfängt (CSS, JavaScript)? Ich bin leidern noch nicht so erfahren auf diesem Gebiet. Vielleicht kann mir jemand helfen, Danke!

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen