|
|||
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; } Danke! atmosfear |
Sponsored Links |
|
|||
Aber hier steht doch:
Zitat:
atmosfear |
|
|||
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; } http://img265.imageshack.us/i/newsshot.gif/ Das h1 wird viiiiiel zu gross geschrieben?! Danke atmosfear |
|
|||
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; } } 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 | </li> <li><a href="index.php?id=9" onfocus="blurLink(this);">shiatsu</a> | </li> <li><a href="index.php?id=10" onfocus="blurLink(this);">iaido</a> | </li> <li><a href="index.php?id=11" onfocus="blurLink(this);">photos</a> | </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> atmosfear Geändert von atmosfear (21.04.2010 um 12:34 Uhr) |
|
||||
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 |
|
|||
@hubspe
Zitat:
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 |
|
|||
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.
|
Sponsored Links |
|
|||
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.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |