CSS Print eigenschaft funktioniert nicht?

Hallo ich habe folgendes Problem bei einer Website habe ich über "@media print{...}" eine Druckereigenschaft hinzugefügt und im html den link tag für die style.css um "media='all' " erweitert. Jetzt mein Problem ich habe ein Bild das Auf der Website ist eindeutig per ID auf display: none gestellt. Jetzt wurde das bild immer noch angezeigz also habe ich es um "img{display: none;}" erweitert und das bild wird immer noch angezeigt. Auserdem habe ich versucht die Print - Css - Datei über "" einzubinden und die normale über "" eingebunden. Jetzt meine Frage wie schafe ich es das das bild nicht angezeigt wird

2 Antworten

ilovetoro

15.09.2017, 10:07

Das "@ media print ..." muss zuletzt geladen werden, also nicht wieder von anderen CSS hinterher überschrieben werden.

Entweder kannst du es in dein bestehendes CSS stylsheet unten dran dazu fügen
in diesem Fall ist dein stylesheet-metatag: "media="all" .
ODER du setzt es als seperates stysheet ein, wie gesagt als letztes
dann ist der stylesheet-metatag: media="print" .

Allerdings, in manchen Browsern lassen sich die Print-Befehle nur durch tatsächliches Ausdrucken testen, also in Druckvorschau wird durchaus immer noch nicht der Print-Befehl ausgeführt.


<link href=".." rel="stylesheet" type="text/css" media="all" />

oder seperat:

<link href=".." rel="stylesheet" type="text/css" media="print" />

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, CSS, JavaScript

14.09.2017, 22:30

Lege mal ein Fiddle mit dem relevanten Code an: https://jsfiddle.net/ und poste hier den Link.

Ähnliche Beiträge

CSS Media query geht nicht richtig?

hallo,ich habe folgendes Problem: Wenn ich bei meiner Website mit CSS per Media query eine responsive Website machen möchte, geht das nicht richtig. Ich muss bei max- und min-width mindestens 1000px eintragen, damit es funktioniert. Kann mir bitte jemand helfen?

...zum Beitrag

SCSS wird nicht mehr umgewandelt / gegriffen (Terminal, SASS)?

Hi zusammen,

ich baue zu Zeit eine Website mit HTML /CSS (scss). Über das Terminal lasse ich mein SCSS in CSS umschreiben. Bisher hat das Terminal immer gut seinen Job erledigt. Bis gerade eben (falls es überhaupt am Terminal liegt). Ich navigiere wie immer in meinen Ordner, in dem die style.scss udn die style.css liegt. Wenn ich mit mich mit dem Terminal in dem Ordner befinde schreibe ich folgenden Befehl:

sass --watch scss/style.scss:css/style.css

Bisher hat das immer gut funktioniert. SCSS wurde in CSS umgeschrieben. Jetzt aber kann ich nach Eingabe des Befehls einmal etwas in dem SCSS-Code ändern, die Änderung wird dann auch im Browser angezeigt - sobald ich dann aber ein zweites Mal etwas ändere schreibt das Terminal zwar:

Compiled scss/style.scss to css/style.css.

.. aber der Browser zeigt keine Änderung an. Das SCSS wird also irgendwie nicht mehr genommen.

Weiß jemand woran das liegt und kann mir weiterhelfen?

...zum Beitrag

@media print funktioniert nicht?

Hallo!

Ich bin gerade dabei eine eigene Website zu coden und bin gerade dabei das Layout für die Druckversion zu ändern. Dies sollte mit @media print { blablabla...; } funktionieren. Allerdings wird bei mir die Version nicht angezeigt. Also ich meine damit das sie nicht übernommen wird.

CSS-Code:

/* ==============================================================

Druckversion für die Webseiten:
2 Links - Wegen "Spam" gelöscht

Datei: druckversion.css
Datum: 10.05.17
Autor: einfachTagbird

============================================================= */
@import url('https://fonts.googleapis.com/css?family=Lato|Merriweather|Montserrat|Roboto+Condensed|Source+Sans+Pro');
@media print { 
body { font-family: 'Roboto Condensed', 'Source Sans Pro', 'Lato', 'Montserrat', 'Merriweather', 'sans-serif', 'Verdana'; font-size: 12pt; }
h2 {    font-size: 18pt;    padding-top: 6pt;    border-top: 1pt solid #000000;    margin-top: 12pt;}nav#navibereich { display: none; }a {    color: #000000;    text-decoration: none;}a[href]:after {    content:" <URL: "attr(href)"> ";}

}

...zum Beitrag

Abstand in CSS/Html?

Hallo,

ich möchte Abstand zwischen diesen Wörtern nach unten machen. Wie soll ich das machen?

Hier sind meine Tags:

HTML-CODES:

<h1 class="firstheading">PEAKSOFT</h1>

<li><a class="liststyleone" href="">My courses</a></li>

<li><a class="liststyle" href="">Announcements</a></li>

<li><a class="liststyle" href="">Trash</a></li>

<li><a class="liststyle" href="">Schedule</a></li>

</ul>

</header>

CSS-CODES:

.layout {

display: flex;

justify-content: space-between;

}

.liststyle {

list-style-type: none;

}

.liststyleone {

color: rgb(31, 110, 212);;

font-weight: 600;

text-decoration: none;

font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

font-weight: 600;

}

.liststyle {

color: black;

font-weight: 600;

text-decoration: none;

font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

Würde mich für schnelle Antworten freuen. Danke im Voraus!
LG

...zum Beitrag

CSS: Items untereinander sortieren?

Hallo zusammen,

ich brauche etwas Hilfe mit CSS. Ich habe mir mit HTML ein Div erstellt, und ein paar Social Media Buttons reingepackt:

<div class="social-media-buttons">
<a class="btn" href="https://github.com/dominikdev-m">
<i class="fab fa-github"></i>
</a>
<a class="btn" href="https://twitter.com/DominikMiskovi7">
<i class="fab fa-twitter"></i>
</a>
<a class="btn" href="https://instagram.com/dominik_rxb">
<i class="fab fa-instagram"></i>
</a>
</div>

Dann habe ich mit CSS versucht diese Social Media Buttons untereinander zu sortieren, falls der Nutzer auf einem Gerät ist das maximal 400 Pixel breit ist:

@media only screen and (max-width: 400px) {
    .social-media-buttons {         display: inline-block;     }

Leider funktioniert der CSS Code nicht, die Buttons werden irgendwie komisch sortiert auf dem Smartphone und nicht untereinander. Könnt ihr mir sagen was ich falsch gemacht habe?

Danke im Voraus.

LG, Dominik

...zum Beitrag

Website-Änderungen werden nicht angezeigt wegen Browser-Cache?

Hallo zusammen,

ich habe folgendes Problem:

Ich hoste meine Website bei Ionos. Dort habe ich meine Codes (HTML, CSS, JavaScript und PHP) im Webspace abgelegt, der mit der Domain verbunden ist.

Nun habe ich an der Website Änderungen vorgenommen und z.B. eine mobile Ansicht implementiert. Ich habe die alten Code-Dateien überschrieben.

Auf der Website werden diese Änderungen aber nicht angezeigt, wenn man die Website vor kurzem bereits besucht hatte, da der Browser-Cache die alten Daten noch gespeichert hat.

Gibt es hier eine Möglichkeit, das zu verhindern und für die Nutzer direkt die neue Version anzeigen zu lassen?

Ich danke für eure Rückmeldungen :)

...zum Beitrag

Idee für eine Webseite?

Hallo, ich habe schon einige Websites programmiert und habe gute Kenntnisse in HTML/CSS/JS/PHP etc.

Habt ihr vielleicht eine gute Idee für eine Webapp? Vielleicht etwas Social Media mäßiges? Oder etwas für Firmen? Falls ihr kreative Köpfe seid, könntet ihr mir sehr gerne helfen ^^

=> Ich habe schon eine Website für Firmen programmiert, bei welcher man intern mit den Mitarbeitern über einen Chat kommunizieren kann, sie war aber nicht sehr erfolgreich....

Danke im Voraus!

...zum Beitrag

Website programmieren; HTML, CSS; Wo ist mein Fehler?

Hallo :)

Ich hab mich heute mal als blutiger Anfänger daran gemacht mit einem Tutorial eine Website zu programmieren.

Nutze dazu folgendes Youtube-Video: https://www.youtube.com/watch?v=MsrrKMzLeWE

Allerdings sieht meine Website nun etwas verschoben aus. (Ich füge Bilder von der Index.html und der Style.css Datei, sowie der Website ein.)

Habe meinen Code schon nach Fehlern durchsucht, habe aber nichts gefunden.

Würde mich sehr freuen wenn mir jemand weiterhelfen kann.

...zum Beitrag

navbar logo in die mitte?

Bin gerade dabei Für einen Freund eine Website zu erstellen jedoch ist es das erste mal das ich ein logo in die Mitte machen muss und ich komm mit nichts weiter.. Tutorials.. w3schools.. etc

html

	<div class="topnav">
	


  
  <div class="topnav-centered">
		  <a class="topnav-centered" href="#home">
            <img src="https://cdn.discordapp.com/attachments/807683377137844285/1036024148855627786/Strixley_Ruffy_2.png" width="85px;"	height="80px;" class="img-fluid">
	
</a> 
  </div>


 
  <a href="#about">Über</a>
  <a href="#gamemodes">Gamemodes</a>


  
  <div class="topnav-right">
  
    <a href="#shop">Shop</a>
    <a href="#staff">Team</a>
  </div>


</div>
</div>

css

.topnav {
	position: relative;
	list-style-type: none;
    overflow: hidden;
    background-color: #181818;
    box-shadow: 0px 6px 13px -7px rgba(0,0,0,0.20);
    transition: all .2s ease-in;
    font-weight: 700;
    text-transform: uppercase;
}


.topnav a {
  float: left;
  color: white;
  text-align: top;
  align-items: start;
  padding-top: 30px;
  padding-right: 100px;
  padding-bottom: 30px;
  padding-left: 100px;
  text-decoration: none;
  font-size: 20px;
}


.topnav a:hover {
  color: #5205ed;
}


.topnav-centered a {
  float: none;
    display: inerhit;
    right: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
}


.topnav-right {
  float: right;
  align-items: end;
}


.right {
  justify-content: flex-start;
}


.left {
  justify-content: flex-end;
}


@media screen and (max-width: 600px) {
  .topnav a, .topnav-right {
    float: none;
    display: block;
}
	.topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
	}
}


@media screen and (max-width: 800px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}


@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: center;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: right;
    display: inline-block;
    text-align: left;
  }
}


@media screen and (min-width: 800px) {
  div .max-width {
    max-width: 60%;
    margin: 0 auto;
    box-shadow: none;
  }
}


	.topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
	}






body {
  padding: 0px;
  background-image: linear-gradient(rgba(24, 24, 24, 1), rgba(14, 14, 14, 1));
  color: black;
  font-size: 20px;
}

...zum Beitrag

Blazor @media?

Guten Abend,

irgendwie funktioniert @media bei mir nicht.
ich nutze das Web Framework Blazor.

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

Mit freundlichen Grüßen

...zum Beitrag

Dynamic Web App und Thymeleaf CSS einbinden?

Moin.

Statt JSP wollte ich ich nun Thymeleaf umschwenken. Allerdings hab ich bei Thymeleaf Probleme, die CSS Datei einzubinden. Meine Recherchen haben ergeben, dass Thymeleaf von Haus aus in src/main/resources/static/ nach Ressourcen sucht. Die hab ich auch da reingepackt. css/style.css

Mein HTML Dokument sieht die Verlinkung Folgendermaßen aus:

 <link th:href="@{/css/style.css}" rel="stylesheet" />

Meine HTML Seite befindet sich direkt im webapp Ordner.

Ich hab auch versucht die HTML Seite in den templates Ordner zu packen. Leider ebenfalls ohne Ergebnis.

Pro Forma der CSS Inhalt :)

body{
	background-color: red;
}

Hier auch mal ein Bild von der Ordnerstruktur:

...zum Beitrag

Html/CSS Text neben Bild?

Hallo, ich arbeite seit ungefähr drei Monaten mit html und habe jetzt ein Problem: Ich will einen Text neben mein Bild platzieren, doch immer wenn ich alles nach links floate zerstört das meine navigationsleiste. Möchte noch anmerken, dass meine Skills zu diesem Thema ziemlich beschränkt sind. Hier findet ihr mein CSS - unten html. Danke für eure hilfe! 😊

.topnav {

background-color: rgb(245, 245, 245);

overflow: hidden;

}

.topnav a {

float: left;

display: block;

color: #1d1d1d;

text-align: center;

padding: 14px 16px;

text-decoration: none;

font-size: 17px;

}

.topnav a:hover {

background-color: #ddd;

color: black;

}

.topnav a.active {

background-color: #3f79e6;

color: white;

}

.topnav .icon {

display: none;

}

@Media screen and (max-width: 600px) {

.topnav a:not(:first-child) {display: none;}

.topnav a.icon {

float: right;

display: block;

}

@Media screen and (max-width: 600px) {

.topnav.responsive {position: relative;}

.topnav.responsive a.icon {

position: absolute;

right: 0;

top: 0;

margin-left: 30px;

}

.topnav.responsive a {

float: none;

display: block;

text-align: left;

}

@Media screen and (min-width: 601px){

#produkte {

margin-left: 20%;

float: left;

}

.produkt {

width: 200px;

border: solid #dedcd9;

background-color: #f6f8fa;

padding: 10px;

margin: 20px;

display: block;

text-align: right;

height: 200px;

}

.produkt img {

width: 180px;

padding: 10px;

display: block;

}

p, a, h1, h2, h3, h4, h5, h6 {

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

font-display: block;

}

a {

font-size: x-large;

color:#3f79e6;

}

Das ist mein html:

<!DOCTYPE html>

<head>

function myFunction() {

var x = document.getElementById("myTopnav");

if (x.className === "topnav") {

x.className += " responsive";

} else {

x.className = "topnav";

}

</script>

</head>

<body>

<a href="#contact">Contact</a>

<a href="#about">About</a>

</a>

</div>

<div class="desc"><a>Nike Air</a></div><p>Toller Schuh mit dicker Sohle und guter Federung, wird meistens als Lauf- bzw. Freizeitschuh verwendet.</p>

</div>

</body>

</html>

...zum Beitrag

HTML/CSS, Bilder werden nicht angezeigt?

Ich habe im <body> mehrere divs, in denen abwechselnd divs und Texte untereinander angezeigt werden sollen. Die Bilder sollen auf voller Höhe sein (height: 100vh;). Wenn ich die Bilder mit <img src=""> im HTML Code im div einfüge, wird es angezeigt. Will ich es aber in meiner CSS Datei als background-image vom div einfügen, wird der Bereich, wo das Bild sein sollte, einfach nur grau. Die style.css ist richtig in der HTML-Datei angegeben, da andere Styles funktionieren. Der Pfad ist ebenfalls richtig angegeben. Hat jemand Ideen, was ich falsch mache? :(

...zum Beitrag

Class in css und html wird nicht angesprochen, was tun?

Ich habe eine Frage zum Thema html und css. Die class .logo lässt sich nicht ansprechen und wenn ich mit vsc versuche verschiedene "classes" anzusprechen schlägt er mir nur alte gelöschte "classes" vor. Vielleicht kann mir ja jemand bei diesem Problem helfen Danke im vorraus :)

hier ist der Code:

index.html

<!DOCTYPE html>

<html>

<head>

<title>beispiel</title>

</head>

<body>

<nav>

<li><a href="">Element 2.1</a></li>

<li><a href="">Element 3.1</a></li>

<li><a href="">Element 4.1</a></li>

<li><a href="">Element 5.1</a></li>

<li><a href="">Element 6.1</a></li>

<li><a href="">Element 7.1</a></li>

<li><a href="">Element 8.1</a></li>

</ul>

<li><a href="">Element 1</a></li>

<li><a href="">Element 2</a></li>

<li><a href="">Element 3</a></li>

<li><a href="">Element 4</a></li>

<li><a href="">Element 5</a></li>

<li><a href="">Element 6</a></li>

<li><a href="">Element 7</a></li>

<li><a href="">Element 8</a></li>

</ul>

</nav>

</body>

</html>

style.css

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

background-color: rgb(214, 214, 214);

}

nav {

width: 100%;

}

.leftnav {

float: left;

list-style: none;

background-color: cadetblue;

}

.topnav {

width: 100%;

float: right;

list-style: none;

background-color: crimson;

margin-bottom: 0;

}

nav .leftnav li {

margin-left: 25px;

margin-top: 30px;

margin-right: 25px;

margin-bottom: 30px;

}

nav .topnav li {

float: right;

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav .firstlielement {

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav li a {

text-decoration: none;

color: white;

}

nav .leftnav li a {

color: rgb(50, 60, 197);

text-decoration: none;

}

nav .leftnav li a:hover {

color: rgb(173, 174, 196);

text-decoration: none;

}

nav .topnav li a:hover {

color: rgb(81, 253, 1);

text-decoration: none;

}

.logo {

}

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen