Beiträge von Varitaxx

Varitaxx · 13. Oktober 2017

Was verstehst du unter Shorthand? Das mehrere Anweisungen in einer Zeile stehen?

Hatte auch schon die "klassischen" Varianten mit getrennten Anweisungen probiert.

Es ändert sich nichts. Erstaunlicherweise werden die Serifen nur in den Überschriften angezeigt.

Hatte aber auch h1, h2 explizit einen Font sans-serif zugeteilt. Auch das greift nicht.

Vor allem wüßte ich gerne, woher ein serifes Font kommt, wo doch nirgends eines zugeteilt wurde.

Komischerweise zeigt Internet-Explorer als einziger Browser keine Serifen an. Opera und Fuchs sehr wohl schon.

Im Editor (DW CS6) werden auch keine Serifen dargestellt, bei Live-Ansicht dann aber wohl.
Verstehe das wer will

Varitaxx · 13. Oktober 2017

Gerne noch den Code der index.html (HTML 4):

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//DE" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/coin-slider.css" />
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-times.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>
</head>
<body>
<div class="main">
  <div class="header">
    <div class="header_resize">
      <div class="searchform">
        <form id="formsearch" name="formsearch" method="post" action="#">
          <span>
          <input name="editbox_search" class="editbox_search" id="editbox_search" maxlength="80" value="Search our ste:" type="text" />
          </span>
          <input name="button_search" src="images/search.gif" class="button_search" type="image" />
        </form>
      </div>
      <div class="logo">
        <h1><a href="index.html">Magic<span>box</span> <small>Company Slogan Here</small></a></h1>
      </div>
      <div class="clr"></div>
      <div class="menu_nav">
        <ul>
          <li class="active"><a href="index.html"><span>Home Page</span></a></li>
          <li><a href="support.html"><span>Support</span></a></li>
          <li><a href="about.html"><span>About Us</span></a></li>
          <li><a href="blog.html"><span>Blog</span></a></li>
          <li><a href="contact.html"><span>Contact Us</span></a></li>
        </ul>
      </div>
      <div class="clr"></div>
      <div class="slider">
        <div id="coin-slider"> <a href="#"><img src="images/slide1.jpg" width="920" height="360" alt="" /><span><big>Sed condimentum justo sit amet urna ornare euismod.</big><br />
          Tusce nec iaculis risus hasellus nec sem sed tellus malesuada porttitor. Mauris scelerisque feugiat ante in vulputate. Nam sit amet ullamcorper tortor. Phasellus posuere facilisis cursus. Nunc est lorem, dictum at scelerisque sit amet, faucibus et est. Proin mattis ipsum quis arcu aliquam molestie.</span></a> <a href="#"><img src="images/slide2.jpg" width="920" height="360" alt="" /><span><big>Amet urna ornare euismodSed condimentum.</big><br />
          Tusce nec iaculis risus hasellus nec sem sed tellus malesuada porttitor. Mauris scelerisque feugiat ante in vulputate. Nam sit amet ullamcorper tortor. Phasellus posuere facilisis cursus. Nunc est lorem, dictum at scelerisque sit amet, faucibus et est. Proin mattis ipsum quis arcu aliquam molestie.</span></a> <a href="#"><img src="images/slide3.jpg" width="920" height="360" alt="" /><span><big>Sed condimentum justo sit amet urna ornare euismod.</big><br />
          Tusce nec iaculis risus hasellus nec sem sed tellus malesuada porttitor. Mauris scelerisque feugiat ante in vulputate. Nam sit amet ullamcorper tortor. Phasellus posuere facilisis cursus. Nunc est lorem, dictum at scelerisque sit amet, faucibus et est. Proin mattis ipsum quis arcu aliquam molestie.</span></a> </div>
        <div class="clr"></div>
      </div>
      <div class="clr"></div>
    </div>
  </div>
  <div class="content">
    <div class="content_resize">
      <div class="mainbar">
        <div class="article">
          <h2><span>Excellent Solution</span> For Your Business</h2>
          <p class="infopost">Posted <span class="date">on 11 sep 2018</span> by <a href="#">Admin</a> &nbsp;&nbsp;|&nbsp;&nbsp; Filed under <a href="#">templates</a>, <a href="#">internet</a> &nbsp;&nbsp; <a href="#" class="com">Comments <span>11</span></a></p>
          <div class="clr"></div>
          <div class="img"><img src="images/img1.jpg" width="198" height="188" alt="" class="fl" /></div>
          <div class="post_content">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. <a href="#">Suspendisse bibendum. Cras id urna.</a> Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.</p>
            <p><strong>Aenean consequat porttitor adipiscing. Nam pellentesque justo ut tortor congue lobortis. Donec venenatis sagittis fringilla.</strong> Etiam nec libero magna, et dictum velit. Proin mauris mauris, mattis eu elementum eget, commodo in nulla. Mauris posuere venenatis pretium. Maecenas a dui sed lorem aliquam dictum. Nunc urna leo, imperdiet eu bibendum ac, pretium ac massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Quisque condimentum luctus ullamcorper.</p>
            <p class="spec"><a href="#" class="rm">&raquo; Read more</a></p>
          </div>
          <div class="clr"></div>
        </div>
        <div class="article">
          <h2><span>We'll Make Sure Template</span> Works For You</h2>
          <p class="infopost">Posted <span class="date">on 29 aug 2016</span> by <a href="#">Admin</a> &nbsp;&nbsp;|&nbsp;&nbsp; Filed under <a href="#">templates</a>, <a href="#">internet</a> &nbsp;&nbsp; <a href="#" class="com">Comments <span>7</span></a></p>
          <div class="clr"></div>
          <div class="img"><img src="images/img2.jpg" width="198" height="188" alt="" class="fl" /></div>
          <div class="post_content">
            
            <p><strong>Aenean consequat porttitor adipiscing. Nam pellentesque justo ut tortor congue lobortis. Donec venenatis sagittis fringilla.</strong> Etiam nec libero magna, et dictum velit. Proin mauris mauris, mattis eu elementum eget, commodo in nulla. Mauris posuere venenatis pretium. Maecenas a dui sed lorem aliquam dictum. Nunc urna leo, imperdiet eu bibendum ac, pretium ac massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Quisque condimentum luctus ullamcorper.</p>
            <p class="spec"><a href="#" class="rm">&raquo; Read more</a></p>
          </div>
          <div class="clr"></div>
        </div>
        <p class="pages"><small>Page 1 of 2</small> <span>1</span> <a href="#">2</a> <a href="#">&raquo;</a></p>
      </div>
      <div class="sidebar">
        <div class="gadget">
          <h2 class="star"><span>Sidebar</span> Menu</h2>
          <div class="clr"></div>
          <ul class="sb_menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">TemplateInfo</a></li>
            <li><a href="#">Style Demo</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Archives</a></li>
            <li><a href="#">Web Templates</a></li>
          </ul>
        </div>
        <div class="gadget">
          <h2 class="star"><span>Sponsors</span></h2>
          <div class="clr"></div>
          <ul class="ex_menu">
            <li><a href="#">Tadelü</a><br />
              Irgendwas</li>
            <li><a href="#">Template</a><br />
              Noch mehr davon</li>
            <li><a href="#">Hoster</a><br />
              Web Hosting Provider</li>
            <li><a href="#">Photos</a><br />
               Amazing Photos</li>
            <li><a href="#">Piffpaff</a><br />
               Software &amp; Tools</li>
            <li><a href="#">Stylesheet</a><br />
               CSS Zeug</li>
          </ul>
        </div>
      </div>
      <div class="clr"></div>
    </div>
  </div>
  <div class="fbg">
    <div class="fbg_resize">
      <div class="col c1">
        <h2><span>Image</span> Gallery</h2>
        <a href="#"><img src="images/gal1.jpg" width="75" height="75" alt="" class="gal" /></a> <a href="#"><img src="images/gal2.jpg" width="75" height="75" alt="" class="gal" /></a> <a href="#"><img src="images/gal3.jpg" width="75" height="75" alt="" class="gal" /></a> <a href="#"><img src="images/gal4.jpg" width="75" height="75" alt="" class="gal" /></a> <a href="#"><img src="images/gal5.jpg" width="75" height="75" alt="" class="gal" /></a> <a href="#"><img src="images/gal6.jpg" width="75" height="75" alt="" class="gal" /></a> </div>
      <div class="col c2">
        <h2><span>Services</span> Overview</h2>
        <p>Curabitur sed urna id nunc pulvinar semper. Nunc sit amet tortor sit amet lacus sagittis posuere cursus vitae nunc.Etiam venenatis, turpis at eleifend porta, nisl nulla bibendum justo.</p>
        <ul class="fbg_ul">
          <li><a href="#">Lorem ipsum dolor labore et dolore.</a></li>
          <li><a href="#">Excepteur officia deserunt.</a></li>
          <li><a href="#">Integer tellus ipsum tempor sed.</a></li>
        </ul>
      </div>
      <div class="col c3">
        <h2><span>Contact</span> Us</h2>
        <p>Nullam quam lorem, tristique non vestibulum nec, consectetur in risus. Aliquam a quam vel leo gravida gravida eu porttitor dui.</p>
        <p class="contact_info"> <span>Address:</span> 12345 Musterstadt, GER<br />
          <span>Telephone:</span> +049-1234-5678<br />
          <span>FAX:</span> +458-4578<br />
          <span>Others:</span> +099 - 0125 - 01258<br />
          <span>E-mail:</span> <a href="#">mail@deinepage.de</a> </p>
      </div>
      <div class="clr"></div>
    </div>
  </div>
  <div class="footer">
    
  </div>
</div>
</body>
</html>

Alles anzeigen

Varitaxx · 13. Oktober 2017

Klar,

kann den css-Code auch hier reinposten:

Code

@charset "utf-8";
body {
    margin:0;
    padding:0;
    width:100%;
    color:#8a8a8a;
    font:normal 12px/1.5em "Liberation sans", Arial, Helvetica, sans-serif;
    background:#0f0f0f url(../images/main_bg.gif) repeat left top;
}
html, .main {
    padding:0;
    margin:0;
}
.main {
    background:url(../images/header_bg.jpg) no-repeat center top;
}
.clr {
    clear:both;
    padding:0;
    margin:0;
    width:100%;
    font-size:0;
    line-height:0;
}
h2 {
    margin:8px 0;
    padding:8px 0;
    font-size:25px;
    font-weight:normal;
    color:#3f3f3f;
}
p {
    margin:8px 0;
    padding:0 0 8px 0;
}
a {
    color:#fdbb20;
    text-decoration:underline;
}
.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar {
    margin:0;
    padding:0;
}
.header {
}
.header_resize {
    margin:0 auto;
    padding:0;
    width:960px;
}
.logo {
    margin:0;
    padding:0;
    float:left;
    height:116px;
}
h1 {
    margin:0;
    padding:28px 0 0;
    font-size:48px;
    font-weight:normal;
    line-height:1.2em;
    text-transform:none;
    text-align:left;
}
h1 a, h1 a:hover {
    color:#fff;
    text-decoration:none;
}
h1 span {
}
h1 small {
    display:block;
    margin:0;
    font-size:20px;
    font-weight:normal;
    line-height:1.2em;
    letter-spacing:normal;
    text-transform:none;
    color:#8f8f8f;
}
.slider {
    padding:0 0 34px;
}
.rss {
    padding:18px 20px 0 0;
    float:right;
    width:auto;
}
.rss p {
    margin:0;
    padding:0;
    float:right;
    width:auto;
    color:#fff;
    font-size:13px;
    line-height:1.5em;
    font-weight:bold;
}
.rss a {
    color:#fff;
    text-decoration:none;
}
.rss a:hover {
    text-decoration:underline;
}
.rss img {
    margin:-3px 0 -3px 6px;
    border:none;
}
.menu_nav {
    margin:0 auto 20px;
    padding:0;
    height:55px;
}
.menu_nav ul {
    list-style:none;
    padding:0;
    height:55px;
    float:none;
    background:#000;
}
.menu_nav ul li {
    margin:0;
    padding:0;
    float:left;
}
.menu_nav ul li a {
    display:block;
    margin:0;
    padding:19px 32px;
    font-size:13px;
    line-height:17px;
    font-weight:normal;
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    text-align:center;
    background:none;
}
.menu_nav ul li.active a, .menu_nav ul li a:hover {
    text-decoration:none;
    color:#fdbb20;
}
.content {
    padding:0;
}
.content_resize {
    margin:0 auto;
    padding:18px 0 32px;
    width:960px;
}
.content .mainbar {
    margin:0;
    padding:12px 20px;
    float:left;
    width:640px;
    background:#f4f4f4;
}
.content .mainbar h2 {
    margin-bottom:0;
    padding-bottom:8px;
    font-size:30px;
    line-height:1.2em;
    color:#3f3f3f;
    border-bottom:1px solid #bebebe;
}
.content .mainbar div.img {
    padding:12px 0;
    float:left;
}
.content .mainbar img {
}
.content .mainbar img.fl {
    margin:0;
    padding:0;
    background:#fff;
    border:1px solid #8b8b8b;
}
.content .mainbar .article {
    margin:0 0 32px;
    padding:0;
}
.content .mainbar .article a {
    color:#334e7d;
}
.content .mainbar .post_content {
    float:right;
    width:420px;
}
.content .mainbar .post_content strong {
    color:#3f3f3f;
}
.content .sidebar {
    padding:0 20px;
    float:right;
    width:220px;
}
.content .sidebar .gadget {
    margin:0 0 12px;
    padding:8px 0;
}
.content .sidebar h2 {
    color:#dadada;
    text-transform:none;
    border-bottom:1px solid #444;
}
ul.sb_menu, ul.ex_menu {
    margin:0;
    padding:0;
    list-style:none;
    color:#929292;
}
ul.sb_menu li, ul.ex_menu li {
    margin:0;
}
ul.sb_menu li {
    padding:8px 0;
    width:220px;
}
ul.ex_menu li {
    padding:4px 0;
}
ul.sb_menu li a {
    color:#929292;
    text-decoration:none;
    margin-left:-16px;
    padding:4px 8px 4px 16px;
}
ul.ex_menu li a {
    font-weight:bold;
    color:#fff;
    text-decoration:none;
}
ul.sb_menu li a:hover, ul.ex_menu li a:hover {
    color:#fdbb20;
    font-weight:bold;
    text-decoration:underline;
}
p.spec {
    padding:0 0 16px;
}
p.infopost {
    margin-bottom:0;
    padding:0;
    color:#8a8a8a;
}
p.infopost a {
    padding:0 2px;
    color:#8a8a8a;
    text-decoration:underline;
}
.content .mainbar a.com {
    margin:0;
    padding:0;
    float:right;
    font-weight:normal;
    text-decoration:none;
    color:#334e7d;
}
.content .mainbar a.com:hover {
    text-decoration:underline;
}
.content .mainbar a.com span {
    padding-left:4px;
    font-weight:bold;
    color:#334e7d;
}
.content .mainbar a.rm {
    float:right;
    margin:0 0 16px;
    padding:0;
    font-size:13px;
    line-height:18px;
    font-weight:normal;
    text-transform:uppercase;
    color:#334e7d;
    text-decoration:none;
    text-align:center;
    background:none;
}
.content .mainbar a.rm:hover {
    text-decoration:underline;
}
.content p.pages {
    margin:0;
    padding:16px 0;
    font-size:11px;
    color:#929292;
    text-align:left;
    border-top:1px solid #bebebe;
}
.content p.pages span, .content p.pages a {
    padding:8px 12px;
    text-decoration:none;
    background:#fff;
}
.content p.pages span, .content p.pages a:hover {
    color:#fff;
    background:#334e7d;
}
.content p.pages a {
    color:#929292;
}
.content p.pages small {
    font-size:12px;
    float:right;
}
.content .mainbar .comment {
    margin:0;
    padding:16px 0 0 0;
}
.content .mainbar .comment img.userpic {
    border:1px solid #dedede;
    margin:10px 16px 0 0;
    padding:0;
    float:left;
}
.fbg {
}
.fbg_resize {
    margin:0 auto;
    width:920px;
    padding:16px 20px;
    color:#8a8a8a;
    border-bottom:1px solid #000;
}
.fbg h2 {
    color:#e7e7e7;
    padding-bottom:24px;
}
.fbg img.gal {
    margin:0 8px 8px 0;
    padding:0;
    border:none;
}
.fbg .col {
    margin:0;
    float:left;
}
.fbg .c1 {
    padding:0 16px 0 0;
    width:280px;
}
.fbg .c2 {
    padding:0 36px 0 16px;
    width:280px;
}
.fbg .c3 {
    padding:0 0 0 16px;
    width:274px;
}
.fbg .fbg_ul {
    margin:0;
    padding:0;
    list-style:none;
}
.fbg .fbg_ul li {
    margin:0;
    padding:0;
    list-style:none;
}
.fbg .fbg_ul li a {
    display:block;
    margin:0;
    padding:2px 0 2px 12px;
    color:#8a8a8a;
    text-decoration:none;
    background:url(../images/li.gif) no-repeat left center;
}
.fbg .fbg_ul li a:hover {
    color:#fdbb20;
    text-decoration:underline;
}
.fbg p.contact_info {
    line-height:1.8em;
}
.fbg p.contact_info a {
    color:#fdbb20;
    text-decoration:underline;
}
.fbg p.contact_info span {
    display:block;
    float:left;
    width:74px;
    font-weight:bold;
    color:#fff;
}
ol {
    list-style:none;
}
ol li {
    display:block;
    clear:both;
}
ol li label {
    display:block;
    margin:0;
    padding:16px 0 0 0;
}
ol li input.text {
    width:480px;
    border:1px solid #c0c0c0;
    margin:0;
    padding:5px 2px;
    height:16px;
    background-color:#fff;
}
ol li textarea {
    width:480px;
    border:1px solid #c0c0c0;
    margin:0;
    padding:2px;
    background-color:#fff;
}
ol li .send {
    margin:16px 0 0 0;
}
.searchform {
    margin:0;
    padding:0;
    float:right;
}
#formsearch {
    margin:0;
    padding:44px 0 0;
    width:auto;
    height:30px;
}
#formsearch span {
    display:block;
    margin:0;
    padding:0;
    float:left;
    background:url(../images/search_bg.gif) no-repeat left top;
}
#formsearch input.editbox_search {
    margin:0;
    padding:8px 6px;
    float:left;
    width:174px;
    font-size:12px;
    line-height:14px;
    color:#aeaeae;
    background:none;
    outline:none;
    border:none;
}
#formsearch input.button_search {
    margin:0;
    padding:0;
    border:none;
    float:left;
}
.footer {
}
.footer_resize {
    margin:0 auto;
    padding:0 20px;
    width:920px;
    line-height:1.5em;
    color:#929292;
    border-top:1px solid #323232;
}
.footer_resize p {
    margin:24px 0;
    padding:0;
    line-height:normal;
    white-space:nowrap;
    text-indent:inherit;
}
.footer_resize a {
    color:#fdbb20;
    font-weight:normal;
    margin:0;
    padding:0;
    border:none;
    text-decoration:underline;
    background-color:transparent;
}
.footer_resize a:hover {
    color:#fdbb20;
    background-color:transparent;
    text-decoration:none;
}
.footer_resize .lf {
    float:left;
}
.footer_resize .rf {
    float:right;
}
a {
    outline:none;
}

Alles anzeigen

Varitaxx · 12. Oktober 2017

Hi,

bearbeite gerade ein Webtemplate und wollte da Anpassungen machen.

Stolpere aber über ein Problem:

Setze einen sans-serif-Font ein, doch es wird an bestimmten Stellen serif ausgegeben.

Ein serifes-Font ist allerdings nirgends deklariert.

html-seminar.de/woltlab/attachment/1198/

Wo kommt die Serife-Schriftart her?

Gruß

Beiträge von Varitaxx

Wo kommt die serife-Schriftart her?

Wo kommt die serife-Schriftart her?

Wo kommt die serife-Schriftart her?

Wo kommt die serife-Schriftart her?