[print.css] Logo drucken auch bei deaktivierten Hintergrundbildern?

Status
Nicht offen für weitere Antworten.

Rayne

Erfahrenes Mitglied
Hallo,

Ich bastel gerade an einer Website und möchte, dass wenn sie gedruckt wird, auch das Logo mitgedruckt wird.

Da das Logo der screen-CSS eine Hintergrundfarbe hat, möchte ich für den Druck ein weniger farbliches Logo verwenden.

An sich kein Problem: Ich verlinke in der print.css einfach das Druck-Logo. Aber ich binde das Logo als Hintergrundbild ein und wenn beim Druck Hintergrundbilder deaktiviert sind, wird es nicht mitgedruckt.

Mein bisheriger Lösungsversuch scheint jedoch nicht zu klappen:

index.php:

HTML:
<div id="Logo">
		<img src="Bilder/Logo-print.gif" alt="" />
	</div>

screen.css:

HTML:
#Logo 
{
width:450px;
height:100px;
float:left;
display:inline;
background:url(Bilder/Logo.gif) no-repeat; 
}	

#Logo img
{
visibility: hidden;
}

print.css:

HTML:
#Logo 
{
width:450px;
height:100px;
float:left;
display:inline;
background:none; 
}				 

#Logo img
{
visibility: visible;
}

Hat jemand von euch eine Idee, wie ich mein Vorhaben umsetzen kann?

Danke :)
 
Hi,

bei mir wird mit deinen Code-Snippets das Grafikelement in der Druckvorschau klar und deutlich angezeigt, die Druckertinte spare ich mir an dieser Stelle.

mfg Maik
 
Bei mir geht es weder im FF3 noch im IE7 noch im Druck. Beim IE7 wird ein rotes Kreuz angezeigt, obwohl der Pfad zum Bild stimmt.

PS: In der Online-Version der Website sind diese Code-Schnipsel noch nicht eingebaut.
 
Ich kann keinen Browser nennen, in dem es bei mir nicht funktioniert.

Wie lautet denn der konkrete Code zum Aufruf der beiden Stylesheets?

mfg Maik
 
So, jetzt habe ich es hochgeladen: http://wiko.bplaced.net/wb/

HTML:
<link rel="stylesheet" type="text/css" href="http://wiko.bplaced.net/wb/templates/wiko/styles.css" />
<link rel="stylesheet" type="text/css" href="http://wiko.bplaced.net/wb/templates/wiko/print.css" media="print" />
 
Aha, anscheinend kann ich keine Bilder auf diesem Webspace direkt aufrufen, merkwürdig. Die als background definierten Bilder zeigt er aber an.

Scheint der Fehler also am Webspace zu liegen. Danke.

##EDIT##

Nun geht es. Hab das <?php echo TEMPLATE_DIR; ?> vergessen :rolleyes:
 
Ähm, mir ist grad aufgefallen, dass zwischen dem grünen Balken oben und dem Header im IE6 plötzlich eine weiße Linie angezeigt wird, die vorher definitiv nicht da war :confused:

An den Änderungen liegt es aber auch nicht, habe die alten Dateien zum Test drüberkopiert. Wo liegt denn der Fehler versteckt?

Stylesheet:

HTML:
/* Copyright by Christian Pfitzmann */

/* -------------------------------------------------------------------------------------------------------------------> allgemein */
* 
{ /*setzt global alle Abstände auf 0 - an gewünschter Stelle können Abstände manuell eingetragen werden*/
margin:0; 
padding:0; 
}

html 
{ 
height:100%; /*nötig, um ein DIV auf 100% Höhe zu bringen */
} 

Body 
{
background:#2b2b29;      
font-family:Arial,sans-serif;
font-size:0.75em;	
margin:0px;
height:100%; /*nötig, um ein DIV auf 100% Höhe zu bringen */
}

/* -------------------------------------------------------------------------------------------------------------------> Huelle-gesamt */
#Huelle-gesamt 
{  
position:relative;
margin-right:auto;
margin-left:auto;         	
width:900px;			 
background:#FFFFFF;      
}	

/* -------------------------------------------------------------------------------------------------------------------> Logo */
#Logo 
{
width:450px;
height:100px;
float:left;
display:inline; /* The IE5/6 Doubled Float-Margin Bug */
background:url(Bilder/Logo.gif) no-repeat; 
}		

#Logo img
{
visibility: hidden;
}		 

/* -------------------------------------------------------------------------------------------------------------------> Sprachen */
#Sprachen
{
width:450px;
height:50px;
float:right;
display:inline; 	
background: #81d000; /* The IE5/6 Doubled Float-Margin Bug */
}

#Sprachen-ausrichten
{
margin:0 10px 0 320px; 
}

#Sprachen ul li 
{
display:inline;
float:left;			
font-weight:bold;
}

#Sprachen ul li  a
{
background:#2b2b29;
color:#FFFFFF;
text-decoration:none;
padding:2px 5px 2px 5px; /*Ausrichtung der Schrift mittig*/
margin:0 0 0 5px; /*Abstand der Sprachen untereinander*/
}

#Sprachen ul li  a:hover
{
background:#FFFFFF;
color:#2b2b29;
text-decoration:none;
}

/* -------------------------------------------------------------------------------------------------------------------> Suche */
#Suche 
{
width:450px;
height:50px;
float:right;
display:inline; /* The IE5/6 Doubled Float-Margin Bug */
background:#81d000;
}

#Suche-ausrichten
{
margin:18px 0 0 180px;  
}

.Suchfeld
{
width:200px;
height:20px;
color:#2b2b29; 
border:1px solid #2b2b29;
}

.Suchbutton
{
width:55px;
height:20px;
background:#81d000;
color:#2b2b29;
font-weight:bold;
border:none;
}

.highlight /*Suchbegriffe hervorheben*/
{ 													
background:#81d000;
color:#FFFFFF;
font-weight:bold;
} 

/* -------------------------------------------------------------------------------------------------------------------> Header */
#Header 
{
width:900px;
height:300px;
background:url(Bilder/Header.jpg) no-repeat;      
float:right;	
display:inline; /* The IE5/6 Doubled Float-Margin Bug */	
}

/* -------------------------------------------------------------------------------------------------------------------> Navi */
#Huelle-Navi 
{
width:230px;		
float:left;
display:inline;	/* The IE5/6 Doubled Float-Margin Bug */
}

#Huelle-Navi ul 
{
margin:20px 0 0 0; /*Abstand Menü zum Header*/
list-style:none;
}

#Huelle-Navi ul ul 
{
margin:0 0 0 0;	
background:#f6f6f6;											
}

#Huelle-Navi ul a /*Hauptmenüpunkte Darstellung*/
{												
padding:5px 0 5px 20px; /*Abstand Hauptmenüpunkt zum Rand und  Positionierung der Schrift mittig*/
margin:2px 0 0 0; /*Abstand Hauptmenüpunkt zum nächsten Hauptmenüpunkt*/
background:url(Bilder/Hauptpunkt.gif) no-repeat left center;		
text-transform:uppercase;
display:block;
text-decoration:none;
font-weight:bold;	
color:#FFFFFF;
}

#Huelle-Navi ul a:hover /*Hauptmenüpunkte hover*/
{											
background:url(Bilder/Hauptpunkt-hover.gif) no-repeat left center;
color:#FFFFFF;
}

#Huelle-Navi ul li.menu-parent a /*Hauptmenüpunkte, wenn Unterpunkt aktiv*/
{										
background:url(Bilder/Hauptpunkt-hover.gif) no-repeat left center;	
color:#FFFFFF;				
}

#Huelle-Navi ul li.menu-current a /*Hauptmenüpunkte aktiv*/
{										
background:url(Bilder/Hauptpunkt-hover.gif) no-repeat left center;	
color:#FFFFFF;						
}

#Huelle-Navi ul ul a  /*Untermenüpunkte Darstellung*/
{											
padding:3px 0 3px 20px; /*Abstand des Untermenüs zu den Hauptmenüpunkten und zum Rand*/
background:none;
border-bottom:none;
font-weight:normal;	
text-transform:none;		
}

#Huelle-Navi ul ul a:hover /*Untermenüpunkte hover*/
{											
background:none;				
text-decoration:underline;
}


#Huelle-Navi ul ul li.menu-current a /*Untermenüpunkte aktiv*/
{										
color:#2b2b29;	
background:none;
text-decoration:underline;				
}

#Huelle-Navi ul ul li.menu-sibling a /*Untermenüpunkte, wenn anderer Untermenüpunkt aktiv*/
{										
color:#2b2b29;
background:none;				
}

#Huelle-Navi ul ul li.menu-sibling a:hover /*Untermenüpunkte, wenn anderer Untermenüpunkt aktiv, hover*/
{									
background:none;
text-decoration:underline;				
}

#Huelle-Navi ul ul li.menu-child a /*Untermenüpunkte, wenn nur Hauptmenüpunkt aktiv*/
{										
color:#FFFFFF;	
background:none;				
}

#Huelle-Navi ul ul li.menu-child a:hover /*Untermenüpunkte, wenn nur Hauptmenüpunkt aktiv, hover*/
{									
color:#8aa2af;	
background:none;				
}

/* -------------------------------------------------------------------------------------------------------------------> Content */
#Huelle-Content 
{
width:610px;
height:auto;
background:#f6f6f6;	
margin:20px 10px 10px 40px;
float:right;
display:inline; /* The IE5/6 Doubled Float-Margin Bug */
color:#2b2b29;	/*Schriftfarbe für den Haupt-Text*/
line-height:1.3em; /*Zeilenhöhe*/
word-spacing:0.3em; /*Wortabstand*/	
text-align:justify;										
}

#Huelle-Content h1 /*Rubriken*/
{
width:600px;	
height:35px;
padding:9px 0 0 10px; /*Positionierung des Textes */
margin:0 0 20px 0; /*Abstand Rubrik zum Text*/				
font-weight:bold;		
font-size:1.2em;
color:#FFFFFF;
text-transform:uppercase;
background:url(Bilder/Rubrik.gif) no-repeat;								
}

#Huelle-Content p 
{
margin:0 10px 0 10px; /*Abstand des Textes links und rechts*/
} 

#Huelle-Content a 
{
color:#64a100;
text-decoration:underline;
}

#Huelle-Content a:hover 
{
color:#64a100;
text-decoration:none;
}

#Huelle-Content ul 
{
margin-left:25px;  
list-style:url(Bilder/Liste.gif);			
}

#Huelle-Content img
{
border:1px solid #2b2b29;		
}

#Huelle-Content table
{
margin-left:20px; 	
}

/* -----------------------------------------------------------------------------------------------------------------> Footer */
#Huelle-Footer 
{
width:900px;
height:30px;
}

#Huelle-Footer-print 
{
height:100%;
width:305px;			
color:#3e4d55;	
float:left;
display:inline;
margin:0 0 0 290px;
}

#Huelle-Footer-print a
{
color:#64a100;				
text-decoration:underline;
}

#Huelle-Footer-print a:hover 
{
color:#73b802;				
text-decoration:none;
}

#Huelle-Footer-Top 
{
height:100%;
width:295px;
text-align:right;			
float:right;
display:inline;	
margin:0 10px 0 0;	
}

#Huelle-Footer-Top a 
{
color:#64a100;				
text-decoration:underline;
}

#Huelle-Footer-Top a:hover 
{
color:#73b802;				
text-decoration:none;
}

/* -------------------------------------------------------------------------------------------------------------------> clear - Float aufheben */
.clear 
{ 
clear:both; 
}

HTML:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Wirtschaftskommunikation an der FHTW Berlin - Überblick</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="http://wiko.bplaced.net/wb/templates/wiko/styles.css" />
<link rel="stylesheet" type="text/css" href="http://wiko.bplaced.net/wb/templates/wiko/print.css" media="print" />  
<script type="text/javascript" src="http://wiko.bplaced.net/wb/modules/output_filter/js/mdcr.js"></script>

<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<div id="Huelle-gesamt"><a name="Top"></a>

	<div id="Logo">
		<img src="http://wiko.bplaced.net/wb/templates/wiko/Bilder/Logo-print.gif" alt="" />
	</div>
	<div id="Sprachen">
		<div id="Sprachen-ausrichten">
			<ul>			
				<li><a href="http://wiko.bplaced.net/wb/pages/de.php">Deutsch</a></li>
				<li><a href="http://wiko.bplaced.net/wb/pages/en.php">English</a></li>

			</ul>
		</div>
	</div>
	<div id="Suche">
		<div id="Suche-ausrichten">
			<form name="search" action="http://wiko.bplaced.net/wb/search/index.php" method="get">
				<input type="hidden" name="referrer" value="15" />
				<input type="submit" name="submit" class="Suchbutton" value="Suche" />
				<input type="text" name="string" class="Suchfeld" />

			</form>
		</div>
	</div>
	
	<div class="clear"></div>

	<div id="Header"></div>
	
	<div class="clear"></div>
	
	<div id="Huelle-Navi">
		<ul class="menu-top"><li class="menu-expand menu-parent menu-first"><a href="http://wiko.bplaced.net/wb/pages/de/studiengang.php" target="_top">Studiengang</a><ul class=""><li class="menu-current menu-first"><a href="http://wiko.bplaced.net/wb/pages/de/studiengang/ueberblick.php" target="_top">Überblick</a></li><li class="menu-sibling"><a href="http://wiko.bplaced.net/wb/pages/de/studiengang/philosophie.php" target="_top">Philosophie</a></li><li class="menu-sibling"><a href="http://wiko.bplaced.net/wb/pages/de/studiengang/ziele.php" target="_top">Ziele</a></li><li class="menu-sibling menu-last"><a href="http://wiko.bplaced.net/wb/pages/de/studiengang/anforderungen.php" target="_top">Anforderungen</a></li></ul></li><li class="menu-expand"><a href="http://wiko.bplaced.net/wb/pages/de/bachelor.php" target="_top">Bachelor</a></li><li class="menu-expand"><a href="http://wiko.bplaced.net/wb/pages/de/master.php" target="_top">Master</a></li><li class="menu-expand"><a href="http://wiko.bplaced.net/wb/pages/de/fhtw.php" target="_top">FHTW</a></li><li class="menu-expand"><a href="http://wiko.bplaced.net/wb/pages/de/ansprechpartner.php" target="_top">Ansprechpartner</a></li><li class=""><a href="http://wiko.bplaced.net/wb/pages/de/haeufige-fragen.php" target="_top">Häufige Fragen</a></li><li class=""><a href="http://wiko.bplaced.net/wb/pages/de/links.php" target="_top">Links</a></li><li class=""><a href="http://wiko.bplaced.net/wb/pages/de/sitemap.php" target="_top">Sitemap</a></li><li class="menu-last"><a href="http://wiko.bplaced.net/wb/pages/de/impressum.php" target="_top">Impressum</a></li></ul>	</div>

	
	<div id="Huelle-Content">
		<a id="wb_section_15" name="wb_section_15"></a><h1>Wirtschaftskommunikation</h1>
<p>Seit dem Sommersemester 2002 wird das Studium der Wirtschaftskommunikation an der FHTW im konsekutiven Studiensystem angeboten. Die Absolventen erhalten nach dem undergraduate-Studium den Abschluss des Bachelor of Arts in Business Communication.<br />
<br />
Ab dem Sommersemester 2005 wird die erste Generation des postgraduate- Studiums zum Master of Arts in Business Communication an der FHTW starten.<br />
Die neuen Abschl&uuml;sse des Bachelor und des Master of Arts in Business Communication l&ouml;sten den Diplomstudiengang ab, der seit 1994 an der FHTW angeboten wurde.<br />
<br />
Das ungew&ouml;hnliche Fach Wirtschaftskommunikation hat bislang mehr als 400 Absolventen hervorgebracht. Diese arbeiten nun erfolgreich in der Praxis: Auf betriebswirtschaftlicher Grundlage verkn&uuml;pft unser Fach kommunikationswissenschaftliche, mediale und kreative Aspekte. Unsere Ausbildung hat den &ouml;konomisch versierten Kommunikationsexperten zum Ziel, der die neue Medienumwelt in unserer Gesellschaft mitgestaltet.</p>

<p>&nbsp;</p>
<p>&nbsp;</p><a id="wb_section_22" name="wb_section_22"></a><h1>Fachgebiete</h1>
<p>Das F&auml;cherangebot f&uuml;r das Bachelor- und Master-Studium der Wirtschaftskommunikation l&auml;sst sich in folgende thematische Bereiche gliedern:</p>
<p>&nbsp;</p>
<ul>
    <li>&nbsp;&nbsp;&nbsp; Kommunikationswissenschaften und Kommunikationsmanagement</li>
    <li>&nbsp;&nbsp;&nbsp; Allgemeine Wirtschaftswissenschaften</li>

    <li>&nbsp;&nbsp;&nbsp; Mediengestaltung und Medienproduktion</li>
    <li>&nbsp;&nbsp;&nbsp; Praktische Kommunikationsprojekte</li>
    <li>&nbsp;&nbsp;&nbsp; Sprachen und allgemeinwissenschaftliche Erg&auml;nzungsf&auml;cher</li>
    <li>&nbsp;&nbsp;&nbsp; Praktika, Bachelor- und Masterthesis</li>

</ul>
<p>&nbsp;</p>
<p>Durch Wahlfreiheiten in einigen Modulen wird die Flexibilit&auml;t der Studierenden erh&ouml;ht.&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p><a id="wb_section_111" name="wb_section_111"></a><h1>Studieninhalte</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>	</div>
	
	<div class="clear"></div>
	
		<div id="Huelle-Footer">			
			<div id="Huelle-Footer-print">

				<img src="http://wiko.bplaced.net/wb/templates/wiko/Bilder/drucken.gif" alt="drucken" />
				<a href="#" onclick="window.print();">
				diese Seite drucken</a>
			</div>
			<div id="Huelle-Footer-Top">
				<img src="http://wiko.bplaced.net/wb/templates/wiko/Bilder/top.gif" alt="" />
				<a href="#Top">
				nach oben				</a>

			</div>
		</div>
		
</div>
</body></html>
 

Anhänge

  • linie.jpg
    linie.jpg
    40,6 KB · Aufrufe: 68
Versuch es mal mit

Code:
#Logo img
{
visibility: hidden;
display:block;
}
oder gleich

Code:
#Logo img
{
display:none;
}
mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück