Hervorhebung mit oder funktioniert nicht? @ tutorials.de: Tutorials, Forum & Hilfe

Steve2010 · 02.09.10 18:05

Servus zusammen,

habe das Problem, dass ich Text im XHTML hervorheben will. Der Code ist laut W3C valide. Aber irgendwie bewirken weder noch etwas. Ich steh' hier auf dem Schlauch. Hier der Code ...

HTML-Code:

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
	
	<head>
	
	<meta name="language" content="german, de, deutsch" />
	<meta http-equiv="Content-Type" content="text	/html;charset=utf-8" />
	
	<link rel="stylesheet" media="screen" href="CSS/layout.css" />
	
	
	<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="CSS/ie6.css" />
	<![endif]-->


	<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="CSS/ie7.css" />
    <![endif]-->

	
	<!--[if lt IE 8]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" 
	type="text/javascript">
	</script>
	<![endif]-->
	
	<script type="text/javascript" src="CSS/javahover.js"></script>
	
	<title>
			Visionfood Gewürze und Extrakte
	</title>
	
	
	
	</head>
	

	
		<body>



	<div id="branding">
		<h1><a href="Qualitaet.htm">Visionfood</a></h1>
	</div>
	
	
		<blockquote class="info">
		<p>Gewürze und Extrakte</p>
		</blockquote>
	<!-- Branding Ende -->
	
	

	

	<div id="navi">
				
			<div id="navbar">
			
			<ul>
				<li><a href="index.htm">home</a></li>
			  	<li><a href="/" id="current">qualität</a></li>
			 	<li><a href="Leistungen.htm">leistungen</a></li>
			 	
			 	<li><a href="Produkte.htm">produkte</a>
			 		<ul><!-- öffnet die Klappnavi von Sortiment -->
			 		
			 			<li><a href="Gewuerze.htm">gewürze</a></li>
	               		<li><a href="Extrakte.htm">extrakte</a></li>
	               		<li><a href="Bio-produkte.htm">bio-produkte</a></li>
	               		<li><a href="Sonstige_produkte.htm">sonstige produkte</a></li>
	                        
	            	</ul><!-- schließt die Klappnavi von Sortiment -->
	            </li>
			 	
			 	<li><a href="Kontakt.htm">kontakt</a></li>
			</ul>
			</div><!--Ende Navbar-->	
			
	</div>
	<!--Ende Navi-->	
	

	<div id="content_subpage">

		<h2>Qualität</h2>
			
			<p>Lebensmittel sind Vertrauenssache. Deshalb setzen wir ausschließlich akkreditierte Labore ein. 
			Das gibt Ihnen und Ihren Kunden die größtmögliche Sicherheit in Bezug auf die Qualität der Ware. 
			Sie haben auch die Möglichkeit nahezu alle Produkte in dampfentkeimter Qualität zu beziehen.</p><br /> 
			<p>Profitieren Sie von rund 20 Jahren Erfahrung innerhalb der Gewürzbranche.</p>
			<br /><br />
			<p><strong>
				&gt; ausschließlich akkreditierte Labore<br />
				&gt; nahezu alle Produkte auch dampfentkeimt<br />
				&gt; rund zwanzigjährige Branchenerfahrung<br />
			</strong></p>
		

	</div><!--Ende content-->
		
	<div id="footer">
			<p>
				<a href="AGB.htm">agb</a>
				 - 
				<a href="Impressum.htm">impressum</a>
			</p>
	</div><!--Ende footer-->

	</body>
	
	</html>

Und das zugehörige CSS ...

Code :

/*importiert norm.css*/
 
@import url("norm.css");
 
 
body {
    position: relative;
    background: url(../images/Background-Verlauf.jpg) repeat-x;
    background-position: 0px 100px;
    margin: 0 auto;
    text-align:center;
    width: 950px;
    top: 5px;
    font-size: 100.01%;
    font-family: Arial, Tahoma, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
    }
 
 
 
#branding {
    background: url(../images/VisionfoodLogo3.jpg) no-repeat;
    text-indent:-9999px;
    position: relative; 
    left: 25px;
    top: 15px;
    width: 950px;
    height: 60px;
    }
 
 
blockquote.info {
    text-indent: -9999px;
    height:0;
    }
 
 
 
/*--Definiert den Navi Div--*/
#navi {
    border-left: solid 1px #cbdce4;
    border-right: solid 1px #cbdce4;
    position: relative;
    top: 35px;
    width: 948px;
    height: 230px;
    font-family: Arial, Tahoma, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
    font-variant: small-caps;
    font-size: 0.8em;
    letter-spacing:0.1em;
    }
 
 
#navbar {
    background: url(../images/Navbar_Balken.png) no-repeat;
    margin: 0;
    padding: 0;
    height: 27px;
    }
    
#navbar li {
    list-style: none;
    float: left;
    }
    
#navbar li a {
    display: block;
    padding: 4px 0px;
    height: 19px;
    width: 189.6px;
    color: #ffffff; 
    text-decoration: none; 
    }
 
 
#navbar li a:hover, #navbar li a#current {
    background-color: #e1ffd2;
    color: #2a6e91;
    font-weight: bold;
    font-size: 1.1em;
    }
 
 
#navbar li ul {
    display: none;
    width: 10em;
    }
 
 
 
#navbar li:hover ul, #navbar li.hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0;
    }
    
#navbar li:hover li, #navbar li.hover li {
    float: none;
    } 
 
 
    
#navbar li:hover li a, #navbar li.hover li a {
    background-color: #e1ffd2;
    color: #2a6e91;
    height: 19px; 
    border-top: 1px solid #6ea876;
    }
 
#navbar li li a:hover {
    font-weight: bold;
    font-size: 1.1em;
    }
 
 
 
 
 
div#content {
    clear: both; 
    position: relative;
    background: #ffffff;
    border-left: solid 1px #cbdce4;
    border-right: solid 1px #cbdce4;
    border-top: 1px solid #195098;
    text-align: left;
    top: 35px;
    height: 85px;
    color: #195098;
    padding: 25px 20px 20px 20px;
    line-height:1.0em;
    
    }
 
#content p {
    line-height:1.2em;
    font-weight:100;
    font-size: 0.8em;
    }
 
#content h2 {
    font-weight:100;
    font-size: 1.2em;
    word-spacing: 0.1em;
    padding: 0px 0px 20px 0px;
    }
 
 
 
 
 
#content_main {
    position: relative;
    background: #ffffff;
    border-left: solid 1px #cbdce4;
    border-right: solid 1px #cbdce4;
    top: 35px;
    height: 340px;
    width: 948px;
    border-top: 1px solid #cbdce4;
    text-align: left;
    color: #195098;
    font-size: 0.7em;
    letter-spacing:0.0em;
    word-spacing:0.0em;
    }
 
#content_main a:link, a:visited, a:active, a:hover {
    color: #195098;
    text-decoration: none;
    }
 
#qualitaet {
    background: url(../images/Female_ScientistVIX.jpg) no-repeat;
    background-position: 20px 65px;
    position: relative;
    width: 28%;
    float: left;
    height: 300px;
    padding: 25px 20px 23px 20px;
    color: #195098;
    }
 
#produkte {
    position: relative;
    background: url(../images/Bild_Sortiment_Chili_PepperXI.jpg) no-repeat left top;
    border-left: solid 1px #cbdce4;
    width: 28%;
    float: right;
    height: 300px;
    padding: 25px 20px 23px 20px;
    }
 
#leistungen {
    background: url(../images/ContainerschiffVII.jpg) no-repeat;
    background-position: 20px 65px;
    border-left: solid 1px #cbdce4;
    position: relative;
    float: left;
    width: 28%;
    height: 300px;
    left: 15px;
    padding: 25px 20px 23px 20px;
    }
 
#content_main p {
    line-height:1.2em;
    font-weight:100;
    }
 
#content_main h3 {
    font-weight: bold;
    padding: 0px 0px 200px 0px;
    line-height: 1.0em;
    font-size: 1.3em;
    }
 
 
 
#content_subpage {
    clear: both; 
    position: relative;
    background: #ffffff;
    border-left: solid 1px #cbdce4;
    border-right: solid 1px #cbdce4;
    border-top: 1px solid #195098;
    text-align: left;
    top: 35px;
    height: 250px;
    color: #195098;
    padding: 50px 50px 30px 75px;
    line-height:1.0em;
    }
    
#content_subpage p {
    line-height:1.2em;
    font-weight:100;
    font-size: 0.8em;
    }
 
#content_subpage h2 {
    font-weight:100;
    font-size: 1.2em;
    word-spacing: 0.1em;
    padding: 0px 0px 20px 0px;
    }
 
 
#content_subpage a {
    color: #195098;
    }
 
 
 
#contact {
    position: relative;
    float: left;
    background: #ffffff;
    text-align: left;
    color: #195098;
    line-height:1.0em;
    padding: 50px 50px 30px 0;
    }
 
 
#picture {
    position: relative;
    float: right;
    background: #ffffff;
    padding: 50px 162px 30px 0;
    }
 
 
div#footer {
    position: relative; 
    clear: both;
    background: url(../images/Navibalken950T.png) no-repeat center;
    top: 26px;
    width: 950px;
    height: 28px;
    color: #ffffff; 
    }
 
 
 
#footer a:link, #footer a:visited, #footer a:active {
    color: #ffffff; 
    text-decoration:none;
    font-variant: small-caps;
    font-size:0.8em;
    letter-spacing: 0.1em;
    padding: 0px 20px 0px 20px;
    }
 
 
#footer a:hover, #footer a#current {
    font-weight:bold;
    color: #e1ffd2;
    }

Ich wäre euch wirklich dankbar, wenn ihr mir hier weiterhelfen könntet.

Beste Grüße
Steve

dreifragezeichen · 02.09.10 19:20

Was heißt hier, die Hervorhebung mit den genannten Elementen zur logischen Auszeichnung (http://de.selfhtml.org/html/text/logisch.htm#elemente) würde nicht funktionieren?

Das tut sie sehr wohl, wie es hier an den letzten drei Zeilen deutlich zu erkennen ist, die mit ausgezeichnet sind:

Hervorhebung mit <em> oder <strong> funktioniert nicht?-strong.png

Wenn dir das derzeitige Erscheinungsbild nicht zusagt, mußt du entweder die Formatierung des CSS-Selektors #content_subpage p überarbeiten, oder eine weitere Regelmenge für definieren.

Code css:

1	#content_subpage p strong { /* gewünschte Formatierung */ }

Steve2010 · 02.09.10 20:07

Hi,

vielen Dank für deine Antwort. Allerdings bin ich jetzt überrascht. Denn sowohl beim IE, wie auch bei FF und Opera wird es nicht hervorgehoben, sonder hat die gleiche Schriftstärke wie der vorhergehende Text.

Viele Grüße
Steve

spicelab · 02.09.10 20:32

Funktioniert bei mir auch

Ist das irgendwo online?

Steve2010 · 02.09.10 20:56

Zitat von spicelab

Funktioniert bei mir auch

Ist das irgendwo online?

Hi spicelab,

habe ich gerade mal hochgeladen:

http://www.foto-solutions.de/Visionf.../Qualitaet.htm

Aber auch in unterschiedlichen Browsern bleibt die Schrift gleich. Echt ein Phänomen.

Viele Grüße
Steve

spicelab · 02.09.10 21:01

Zitat von Steve2010

Aber auch in unterschiedlichen Browsern bleibt die Schrift gleich. Echt ein Phänomen.

Überhaupt kein Phänomen, bei deiner angewandten CSS-Formatierung

Die FF-Erweiterungen Firebug u. Web Developer entblößen solch ein Phänomen noch immer mit wenigen Klicks als ordinären "Fehler im System"

Zitat von norm.css

Code css:

.
.
.
 
/*normalisiert font-style und font-weight auf normal*/
 
 
address, caption, cite, code, dfn, em, strong, th, var
{
font-style:normal; /* im Falle von <em> wäre "italic" anstelle "normal" gewünscht */
font-weight: normal; /* im Falle von <strong> wäre "bold" anstelle "normal" gewünscht */
}

Fazit: Zumindest deine angesprochenen Elemente em u. strong aus diesem gruppierten Selektor entfernen, damit sie ihr typisches logisches Erscheinungsbild zurückerhalten.

Steve2010 · 02.09.10 21:36

Zitat von spicelab

Überhaupt kein Phänomen, bei deiner angewandten CSS-Formatierung

Die FF-Erweiterungen Web Developer und Firebug entblößen solch ein Phänomen noch immer mit wenigen Klicks als ordinären "Fehler im System"

Fazit: Zumindest deine angesprochenen Elemente em u. strong aus diesem gruppierten Selektor entfernen, damit sie ihr typisches logisches Erscheinungsbild zurückerhalten.

Danke dir spicelab, Problem gelöst!

Und wieder etwas gelernt. Ich hatte die "norm.css" aus dem ansonsten sehr guten Buch "CSS PUR!". Allerdings werde ich die wohl nochmal genau unter die Lupe nehmen. Damit ich hier keine weiteren Überraschungen erlebe.

Schönen Abend noch.
Steve

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

RegExp Quantifier: Eins oder keins - funktioniert nicht!

SUM() funktioniert nicht.. oder doch Denkfehler?

for oder foreach funktioniert nicht =(

Zeilenumbruch per \n oder \n\r funktioniert nicht...

echo oder include funktioniert nicht

Stichworte

E-Mail:

Abonnieren Abbestellen