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.

Luksa

Fragesteller

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

Fragesteller

08.01.2017, 14:08

@thomasbuescher

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

Luksa

Fragesteller

08.01.2017, 14:11

@thomasbuescher

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

Caseyyy

08.01.2017, 15:08

Vllt. hast du einen Schatten drauf.

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

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;
}

...zur Frage

Joomla! / Beez3-Template: Wie kann ich die Dimensionen des .logoheader in der CSS ändern?

Hallo,

folgende Daten sind derzeit in der in der personal.css hinterlegt:

.logoheader {
  background: url(../images/personal/personal2.png) no-repeat right;
  size:
  width: 100%;
  height: auto
  bottom #0C1A3E;
  color: #FFFFFF;
  height: 288px;
  max-height: 100%;
  width: 1030px;
  max-width: 100%;
  border-bottom: solid 1px #040404;
  border-top: solid 1px #040404;
  border-left: solid 1px #040404;
  border-right; soild 1px #040404;

Ich möchte erreichen, dass der .logoheader eine fixe Höhe und Breite hat und der Inhalt an dieses angepasst wird.

...zur Frage

HTML-Tags in einer FPDF ohne die ganzen Anweisungen?

Hi,

ich habe einen in Php mit variablen erstellten Text für eine Email. Dieser Mail soll eine PDF angehängt werden. Dazu habe ich den Code von FPDF vorgegeben bekommen. Ohne jegliche Zusätze sieht die PDF schrecklich aus. Gerade die vielen Html-Tags (<hr>, <p>, <td>, etc.) stören stark.

Gibt es einen Weg, dass die Befehle der Tags auch für die PDF verwendet werden, bzw. ich die Tags ausblenden kann?

Ist es möglich der Pdf auch mit utf-8 zu versehen, damit die Sonderzeichen ordentlich dargestellt werden?

Danke vorab!

...zur Frage

Was sagt ihr zu dem anfangsprojekt?

Mein Ziel ist es mit html und CSS eine stabile Test Seite zu erstellen (Später kommt Js dazu) um dann eine richtige Seite zu bauen

html:

<!DOCTYPE html>

<head>

<title>Document</title>

<a href="#"><i class="fa fa-fw fa-search"></i> Search</a>

<a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a>

<a href="#"><i class="fa fa-fw fa-user"></i> Login</a>

</div>

</head>

<body>

</Header>

<main>

<h2>Anmeldung</h2>

<h3>Login</h3>

</form>

</div>

<hr>

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

<a href="#">kontakt</a>

</main>

</footer>

</body>

</html>

css:

body {

font-family: Arial, Helvetica, sans-serif;

color: white;

}

body{

background-color: white;

}

.input {

display: flex;

margin: 150px;

margin-top: 3000px;

flex-direction: column;

justify-content: center;

align-items: center;

box-shadow: 1px 1px 3px 3px black;

border-radius: 30px;

height: 30px;

width: 100px;

padding: 100px;

}

h3{

color: black ;

}

)

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;

}

#main {margin: 0 auto; width: 25%;}

.input {margin: 0 auto; width: 25%;}

input:hover {

color: blue;

}

/* Style the navigation bar */

.navbar {

width: 100%;

background-color: #555;

overflow: auto;

}

/* Navbar links */

.navbar a {

float: left;

text-align: center;

padding: 12px;

color: white;

text-decoration: none;

font-size: 17px;

}

/* Navbar links on mouse-over */

.navbar a:hover {

background-color: #000;

}

/* Current/active navbar link */

.active {

background-color: #04AA6D;

}

/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */

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

.navbar a {

float: none;

display: block;

}

...zur Frage

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?

...zur Frage

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

...zur Frage

HTML Texte besser mit <p> oder einem Div darstellen?

Hallo,

ich habe gerade folgendes gesehen:

Da sehen wir, dass die beiden Texte mit einem Div dargestellt werden und nicht mit einem P Element. Was hat das für Vorteile und warum machen das manche Seiten so? Sollte das jeder machen?

...zur Frage

Einzelne Pixel in HTML Dokument ansprechen?

Hallo, also Theoretisch könnte man ja so viele <Divs> mit 1px(height,width) Erzeugen, wie das Browserfenster Pixel hat und auf Float setzen.

Somit könnte man dann alle Pixel einzeln ansprechen.

Hat das Jemand schon gemacht?

Gibts da Beispiele für, was man alles damit Anstellen kann?

Danke.

Grüße.

...zur Frage

Joomla: Wie bekomme ich diese Überschrift etwas fetter dargestellt?

Hallo,

arbeite gerade wieder mal an meiner Webseite.

Ich arbeite mit Joomla 3.xx

wie und wo kann ich einstellen dass die Überschrift bei dem Modul

"Beiträge - Kategorie"

grösser dargestellt wird?

Das Verändern der Einstellungen in Header-Tag hat nichts gebracht

...zur Frage

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.

...zur Frage

Hauptbild mit H1 und Button darüber (responsive)?

Bitte helft mir mit einem einfachen HTML und CSS Code.

Ich will einfach ein großes Hauptbild das responsive (width: 100%) dargestellt wird, und dadrüber zentriert eine Überschrift und ein Button. Versuche es leider schon lange aber bekomme immer wieder Fehler.

...zur Frage

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>

...zur Frage

Html Scrollen funktioniert nicht?

Ich habe das problem, dass t3 unter die Fusszeile verschwindet. Ich möchte aber das er die Fusszeile nach unten drückt und man scrollen kann.

<!DOCTYPE html>
<html lang="de">
 <head>
  <title>
   Titel
  </title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <style>
   body{
   margin: 0;
   margin-right: 18pt;
   }
   a{
    text-decoration: none;
    color: black;
    font-face: Arial;
   }
   hr{
    background-color: black;
    border-color: black;
    width: 25%;
   }
   .fusszeile{
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: blue;
    height: 3em;
    font-size: 12pt;
    font-face: Arial;
   }
   h1{
    font-size: 30pt;
    font-face: Arial;
    text-align: center;
   }
   t2{
    font-size: 18pt;
    font-face: Arial;
    color: white;
   }
   t3{
    font-size: 18pt;
    font-face: Arial;
    text-align: justify;
    position: fixed;
   }
   .drop {
    background-color: blue;
    color: black;
    padding: 9pt;
    font-size: 18pt;
    border: none;
    cursor: pointer;
    font-face: Arial;
    margin-left: 0;
   }
   .dropdown {
    position: fixed;
    display: inline-block;
   } 
   .dropdown-content {
    display: none;
    position: absolute;
    background-color: blue;
    font-face: Arial;
    font-size: 18pt;
    min-width: 100px;
   }
   .dropdown-content a {
    color: black;
    padding: 9pt 18pt;
    text-decoration: none;
    display: block;
   }
   .dropdown:hover .dropdown-content {
    display: block;
   }
   div#text{
    float: left;
   }
  </style>
 </head>
 <body>
   <h1>
     Titel
   </h1>
   <div class="dropdown">
   <button class="drop">
   <b>
    <a href="#">
     &equiv; Men&uuml
    </a>
   </b>
   </button>
  <div class="dropdown-content">
   <b>
   <a href="#">Text</a>
   </b>
  </div>
 </div>
 <div id="text">
  <t2>
   ----------|....
  <br>
  </t2>
 </div>
 <div id="text" style="margin-left: 18pt;">
  <t3>

k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
3
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
3
  </t3>
 </div>
  <div class="fusszeile">
   <hr noshade>
   <center>
   <a href="#">Text</a>
  </center>
  </div>
 </body>
</html>

...zur Frage

Wieso werden Sonderzeichen & Umlaute nie richtig dargestellt- HTML // Webspace?

Ich habe im Head-Tag UFT-8 definiert und im Editor die Kodierung auch da drauf, wenn ich die Date abspeicher und privat aufrufe, klappt es auch. Aber sobald ich sie online auf meinen Webspace lade, werden Umlaute wie ü, ä, ö und ß nicht dargestellt. Auch Sonderzeichen wie ein Herz, was eig. erscheinen soll [siehe Bild]

Gibt es ne Möglichkeit das Umlaute dargestellt werden, muss ich da irgendwas am Webspace ändern? .-.Ich benutze das Verwaltungsprogramm 'Plesk'.

Danke! :)

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen