zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Vererbung der Schriftgrösse an untergeordnetes h1 Tag?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.04.2010, 09:17
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.02.2004
Beiträge: 35
atmosfear befindet sich auf einem aufstrebenden Ast
Frage Vererbung der Schriftgrösse an untergeordnetes h1 Tag?

Hallo und schönen guten Morgen zusammen!

Ich habe bei einer Webseite ein Verhalten, das ich nicht ganz nachvollziehen kann. Und zwar habe ich folgenden CSS Code:

Code:
html {
  font-size:100%;
}

#news {
  background:#586076 url('ma10_news_bg.gif') no-repeat top left;
  font:0.750em Georgia, Verdana, Arial, Helvetica, sans-serif;
  color:#f5f6fa;
  height:224px;
  clear:both;
  padding:16px;
  overflow:hidden;
}

div#news dl.index-list {
  padding:0px;
  margin:0px;
}

div#news dl.index-list dd {
  padding:0px;
  margin:0px;
  margin-bottom:16px;
}

div#news dl.index-list dd h1.newsdate {
  margin:0px;
  padding:0px;
  font-weight:bold;
  color:#b8bfcc;
}
Die Frage ist, warum bekommt das h1 Tag nicht die richtige Schriftgrösse vom übergeordneten #news Selektor?

Danke!
atmosfear
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.04.2010, 09:44
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Die Syntax für font stimmt nicht. Wenn die font-Eigenschaften zusammengefasst verwendet werden, muss auch line-height dabei sein.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.04.2010, 09:47
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.02.2004
Beiträge: 35
atmosfear befindet sich auf einem aufstrebenden Ast
Standard

Aber hier steht doch:

Zitat:
The font shorthand property sets all the font properties in one declaration.

The properties that can be set, are (in order): "font-style font-variant font-weight font-size/line-height font-family"

The font-size and font-family values are required. If one of the other values are missing, the default values will be inserted, if any.
Quelle w3schools.com

atmosfear
Mit Zitat antworten
  #4 (permalink)  
Alt 21.04.2010, 09:53
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.02.2004
Beiträge: 35
atmosfear befindet sich auf einem aufstrebenden Ast
Standard

Hallo nochmal!

Habe jetzt mal das hier probiert:
Code:
#news {
  background:#586076 url('ma10_news_bg.gif') no-repeat top left;
  font:0.750em/100% Georgia, Verdana, Arial, Helvetica, sans-serif;
  color:#f5f6fa;
  height:224px;
  clear:both;
  padding:16px;
  overflow:hidden;
}

div#news dl.index-list {
  padding:0px;
  margin:0px;
}

div#news dl.index-list dd {
  padding:0px;
  margin:0px;
  margin-bottom:16px;
}

div#news dl.index-list dd h1.newsdate {
  margin:0px;
  padding:0px;
  font-weight:bold;
  color:#b8bfcc;
}
Selbes Ergebnis - siehe hier:
http://img265.imageshack.us/i/newsshot.gif/

Das h1 wird viiiiiel zu gross geschrieben?!

Danke
atmosfear
Mit Zitat antworten
  #5 (permalink)  
Alt 21.04.2010, 09:56
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von atmosfear Beitrag anzeigen
Die Frage ist, warum bekommt das h1 Tag nicht die richtige Schriftgrösse vom übergeordneten #news Selektor?
du darfst den Toaster nur auf 3 stellen, sonst geht es nich.

Nein im Ernst, was sollen wir denn mit dem dürftigen Codeschnipsel anfangen?
Entweder ein Link zum Problem oder ein lauffähiges Beispiel, was dein Problem zeigt.

Zitat:
Zitat von EvT Beitrag anzeigen
Die Syntax für font stimmt nicht. Wenn die font-Eigenschaften zusammengefasst verwendet werden, muss auch line-height dabei sein.
ähem....*hüstel*......, soweit ich weiss ist bei font nur font-size und font-family Pflicht, alles andere ist optional.

edit. Ein Bild hilft da auch nicht weiter, läd höchstens zum fabulieren ein.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #6 (permalink)  
Alt 21.04.2010, 10:02
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.02.2004
Beiträge: 35
atmosfear befindet sich auf einem aufstrebenden Ast
Standard

Gut, also hier der gesamte CSS-Code:

Code:
/*
10px = 0.6em
11px = 0.689em
12px = 0.750em
14px = 0.875em
16px = 1.0em
18px = 1.125em
22px = 1.375em
26px = 1.625em
*/

html, body{
  margin:0;
  padding:0;
  text-align:center;
}

html {
  font-size:100%;
}

body {
  background:#1f2330 url('ma10_site_bg.gif') repeat-x top left;
}

#pagecontainer{
  width:980px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}

#header{
  width:980px;
  height:144px;
  background:#272b38 url('ma10_header_bg.gif') no-repeat top left;
}

#mike {
  float:right;
  position:relative;
  width:485px;
  height:144px;
  background:#272b38 url('ma10_header_mike.jpg') no-repeat top left;
}

/* --- main navigation on top */
ul#mainnav {
  float:left;
  font:0.750em Georgia, Verdana, Arial, Helvetica, sans-serif;
  color:#f5f6fa;
  padding:0px;
  margin:96px 0px 0px 16px;
  width:479px;
  list-style-type:none;
  font-weight:bold;
}

ul#mainnav li {
  display:inline;
}

ul#mainnav a {
  padding:0px;
}

ul#mainnav a:link, ul#mainnav a:visited {
  color:#f5f6fa;
  text-decoration:none;
}

ul#mainnav a:hover, ul#mainnav a:active {
  color:#f5f6fa;
}

ul#mainnav li.pressed {
  color:#f5f6fa;
  padding:0px;
}

ul#subnav {
  float:left;
  font:0.750em Georgia, Verdana, Arial, Helvetica, sans-serif;
  padding:0px;
  margin:5px 0px 0px 16px;
  width:479px;
  list-style-type:none;
  font-weight:bold;
}

ul#subnav li {
  display:inline;
}

ul#subnav a {
  padding:0px;
}

ul#subnav a:link, ul#subnav a:visited {
  color:#b8bfcc;
  text-decoration:none;
}

ul#subnav a:hover, ul#subnav a:active {
  color:#b8bfcc;
}

ul#subnav li.pressed {
  color:#b8bfcc;
  padding:0px;
}

#leftcol{
  float:left;
  position:relative;
  width:256px;
  background-color:#00ff00;
}

#quote {
  font:1.125em Georgia, Verdana, Arial, Helvetica, sans-serif;
  background:#f75227 url('ma10_slogan_bg.gif') no-repeat top left;
  color:#222633;
  height:96px;
  padding:16px;
  overflow:hidden;
}

div#quote p {
  margin:0px;
  padding:0px;
}

div#quote p.align-right {
  margin:0px;
  padding:0px;
  padding-top:8px;
  text-align:right;
  font:0.689em Georgia, Verdana, Arial, Helvetica, sans-serif;
  font-style:italic;
  color:#222633;
}

#news {
  background:#586076 url('ma10_news_bg.gif') no-repeat top left;
  font:0.750em/100% Georgia, Verdana, Arial, Helvetica, sans-serif;
  color:#f5f6fa;
  height:224px;
  clear:both;
  padding:16px;
  overflow:hidden;
}

div#news dl.index-list {
  padding:0px;
  margin:0px;
}

div#news dl.index-list dd {
  padding:0px;
  margin:0px;
  margin-bottom:16px;
}

div#news dl.index-list dd h1.newsdate {
  margin:0px;
  padding:0px;
  font-weight:bold;
  color:#b8bfcc;
}

#contentcol {
  background:#f5f6fa url('ma10_content_bg.gif') no-repeat top left;
  width:662px;
  height:560px;
  padding:16px;
  padding-right:46px;
  position:relative;
  float:right;
  display:inline;
}

#imagepic {
  background:#f5f6fa url('ma10_home_image.jpg') no-repeat top left;
  height:160px;
}

#content {
  background-color:#f5f6fa;
  font:0.750em Tahoma, Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
  padding-right:8px;
  color:#222633;
  text-decoration:none;
  word-spacing:normal;
  text-align:left;
  letter-spacing:0;
  line-height:1.5em;
  width:636px;
  height:400px;
  clear:both;
  overflow:auto;
}

.clearfix:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}

.clearfix {
  display:inline-block;
}

/* hides from IE-mac */
* html .clearfix {
  height:1%;
}
.clearfix {
  display:block;
}

 /* printer styles */
@media print {
  /* hide the left column when printing */
  #leftcol{
    display:none;
  }
  #twocols, #maincol {
    width:100%;
    float:none;
  }
}
Und hier noch die HTML Sache dazu:
HTML-Code:
<!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" xml:lang="de-AT" lang="de-AT">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--
	This website is powered by TYPO3 - inspiring people to share!
	TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
	TYPO3 is copyright 1998-2008 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
	Information and contribution at http://typo3.com/ and http://typo3.org/
-->
<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_660104a2c3.css" />
<link rel="stylesheet" type="text/css" href="uploads/tf/maweb10.css" />
<title>...</title>
<meta name="generator" content="TYPO3 4.2 CMS" />
</head>
<body>
<div id="pagecontainer">
	<div id="header">
		<div id="mike">
			<img src="uploads/tf/tab.gif" alt="..." />
		</div>
		<ul id="mainnav">
			<li class="pressed">home&nbsp;&nbsp;|&nbsp;&nbsp;</li>
			<li><a href="index.php?id=9" onfocus="blurLink(this);">shiatsu</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li>
			<li><a href="index.php?id=10" onfocus="blurLink(this);">iaido</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li>
			<li><a href="index.php?id=11" onfocus="blurLink(this);">photos</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li>
			<li><a href="index.php?id=25" onfocus="blurLink(this);">mike</a></li>
		</ul>
		<ul id="subnav">
		</ul>
	</div>
	<div id="wrapper" class="clearfix">
		<div id="contentcol">
			<div id="imagepic" style="background-image:url(uploads/media/ma10_home_image_01.jpg);">
			</div>
			<div id="content">
				<h1>Home</h1>
				<br />
				<img src="clear.gif" width="1" height="5" border="0" class="spacer-gif" alt="" title="" /><br />
				<blockquote style="margin-bottom:0;margin-top:0;">
					<p>
						Alles sinnlich Wahrnehmbare ist dem Wandel unterworfen, also in Bewegung. ...Es gibt ineinander greifende Zyklen des Wandels ... Man kann den Winden und Wellen nicht gebieten anzuhalten, aber man kann lernen, durch die tückischen Strömungen zu manövrieren, indem man das eigene Verhalten mit den vorherrschenden Prozessen der Transformation in Einklang bringt - und so die Stürme des Lebens übersteht.
					</p>
				</blockquote>
				<div class="news-list-container">
					<div class="news-list-item">
						<span class="news-list-date">Montag, 19. April 2010</span>
						<h2>Testnews</h2>
						<p>
							Test Newseintrag<span class="news-list-morelink">[mehr]</span>
						</p>
						<hr class="clearer" />
					</div>
					<div class="news-list-item">
						<span class="news-list-date">Montag, 19. April 2010</span>
						<h2>News 2</h2>
						<p>
							Test Newseintrag 2<span class="news-list-morelink">[mehr]</span>
						</p>
						<hr class="clearer" />
					</div>
				</div>
			</div>
		</div>
		<div id="leftcol">
			<div id="quote">
				<p>
					Erwartet mein Kommen beim ersten Licht des fünften Tages. Bei Sonnenaufgang.
				</p>
				<p class="align-right">
					Gandalf, in Der Herr der Ringe
				</p>
			</div>
			<div id="news">
				<dl class="index-list">
					<dd>
					<h1 class="newsdate">19.04.10 11:16</h1>
					News 2</dd>
					<dd>
					<h1 class="newsdate">19.04.10 09:33</h1>
					Testnews</dd>
				</dl>
			</div>
		</div>
	</div>
</div>
</body>
</html>
So
atmosfear

Geändert von atmosfear (21.04.2010 um 12:34 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 21.04.2010, 10:10
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

okay, aber dieser Aufbau ist nicht dein Ernst, oder?

Eine h1-Überschrift gehört in den header. adlmannseder.com ist üblicherweise deine h1.

Das Datum könnte Teil einer Definitionsliste sein, z.B. dt ist das Datum und dd dann der Newstext.

schon das einfache Einfügen von h1 { font-size:1em; } oben in deiner CSS ließ das Datum gewaltig schrumpfen.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #8 (permalink)  
Alt 21.04.2010, 10:20
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.02.2004
Beiträge: 35
atmosfear befindet sich auf einem aufstrebenden Ast
Standard

@hubspe
Zitat:
okay, aber dieser Aufbau ist nicht dein Ernst, oder?
Von welchem Aufbau redest du da bitte? Die gesamte Seite oder nur dieser Teil mit der Aufzählung?
Ich bin gerne bereit etwas dazuzulernen, deshalb schau ich auch hier im Forum vorbei

Also das mit dt usw. werde ich testen...

Danke auf jeden Fall für eure Hilfe!
atmosfear
Mit Zitat antworten
  #9 (permalink)  
Alt 21.04.2010, 10:32
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Dass die line-height doch nicht zwingend erforderlich ist, das ist wohl richtig. Mich ärgert es nun ein wenig, dass ich nicht auf die Schnelle erklären kann, warum die Vererbung nicht bis zur h1 klappt. Zumal font-size: inherit; für h1 diese Überschrift dann in 12px zeigt. Schauen wir mal, ob gleich jemand um die Ecke kommt und sagt "so und so ist das", oder ob ich die Zeit zum Nachlesen finde.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 21.04.2010, 10:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Ich sehe keine Schriftgrößenangabe für die h1 (wo ist der Link?). Dann gilt der Defaultwert des Browsers. Mir fällt kein Browser ein, in dem das "inherit" wäre.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Quelle im IMG Tag durch css ändern Deffcon CSS 7 07.05.2010 18:23
Div im IE zu hoch RancoR CSS 10 10.07.2007 00:11
Tag überschreiben asd CSS 6 09.06.2006 16:10
img alt tag über css steuern?? biki CSS 1 12.09.2003 20:47


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:20 Uhr.