Problemlösung um <b> nicht benutzen zu müssen?

[kiX]

Hallo,

hier erstmal wie mein XHTML aussieht:

<div class="postinfo smallfont">
      <b>Autor:</b> Administrator |
      <b>Datum:</b> 140</div>

Gibt es eine Möglichkeit das <b> rauszunehmen und rein über CSS zu formatieren, ohne <span> oder <p>, dass es genauso aussieht?

[womstar]

Hallo,

hier erstmal wie mein XHTML aussieht:

<div class="postinfo smallfont">
      <b>Autor:</b> Administrator |
      <b>Datum:</b> 140</div>

Gibt es eine Möglichkeit das <b> rauszunehmen und rein über CSS zu formatieren, ohne <span> oder <p>, dass es genauso aussieht?

es gibt eine, nur ist die noch nicht ganz so kompatibel:
http://forum.jswelt.de/showthread.php?t=19046 (before)


als verbesserungsvorschläge:

css-klassen oder css-id's immer in einem wort.
also nicht class="postinfo smallfont" sondern class="postinfosmallfont".

statt <b> würde ich <strong> verwenden.

[dipser]

<em>, <strong>, jedoch muss ich sagen, dass diese beiden elemente nicht unbedingt für das sind was du möchtest, da du nichts betonen willst, sondern nur etwas auszeichnen möchtest. Daher wäre es angebrachter span zu nehmen.

[rasputin]

ähm womstar, kix meint zwei verschiedene klassen. wenn man mehrere klassen auf ein tag anwenden will, trennt man diese mit leerzeichen. das leerzeichen als solches ist sowieso nicht in klassennamen erlaubt.

[dipser]

als verbesserungsvorschläge:

css-klassen oder css-id's immer in einem wort.
also nicht class="postinfo smallfont" sondern class="postinfosmallfont".

statt <b> würde ich <strong> verwenden.

Schlechte Verbesserung. Weil das 2 Klassen sind.

[edit] Verflixt und zugenäht auch...

[womstar]

gut. wusste ich nicht.
dann würde ich es dennoch alles in eine class packen oder die struktur des css optimieren.

[kiX]

Okay vielen Dank für eure Hilfe. Ich habe aber allerdings ein neues Problem *grml* Da ich gerade von einem Tabledesign auf dein div-layout umsteige, hab ich ein kleines Problem beim Positionieren von dem Newsbild...

<!-- CSS -->
.newscontent a:link, .newscontent a:visited
{ 
  color:#000;
  text-decoration:none;
}
.newscontent a:active, .newscontent a:hover
{ 
  color:#000;
  text-decoration:underline;
}
.newscontent {
 padding:4px;
 background-color:#ececec;
 text-align:justify;
 color:#444444;
 text-decoration:none;
}
.newscontainer {
	width: 98%; 
	border: 1px solid #000; 
	background: #ececec; 
    color: #333;
	font-family: Tahoma, Verdana, Helvetica;
	padding: 0px; 
	margin: 10px auto; 
	text-align: left;
}
.newspicture {
	width: auto; 
	height: auto;
	padding: 5px; 
	background: #ececec; 
}
.newstitle {
  font-size: 23px; 
  color: #333; 
  letter-spacing: -1px; 
  font-family: Tahoma, Verdana, Helvetica; 
}
.postinfo {
        background-image: url(images/cellpic.gif); 
        COLOR: #ececec; 
        background-color: #ececec;
	    padding: 3px;
	    border-bottom: 1px solid #000;
        border-width: 1px 0px 1px 0px;
}
.newsinfo {
	margin: 10px auto 8px auto;
	text-align: right;
    padding-right: 5px;
	width: auto;
	background: #ececec;
}
.newsinfo a:link, div.newsinfo a:visited, div.newsinfo a:active {
	background: #EEE;
	color: #000;
	padding: 1px 4px;
	border: 1px solid #000;
	text-decoration: none;
}
.newsinfo a:hover {
	background: #FFF;
	color: #999 ! important;
	padding: 1px 4px;
	border: 1px solid #000;
	text-decoration: underline;
}
.titlecontainer {
  font-weight: bold;
  background-image: url(images/katcellpic.gif);
  border-bottom: 1px solid #000;
} 
<!-- CSS ENDE -->   
<div class="newscontainer">

    <div class="newspicture" style="float: left; border-bottom: 1px solid #000; border-right: 1px solid #000; margin-right: 4px; border-width: 0px 1px 1px 1px;">
     <img alt="" src="http://qoo-net.de/amd.jpg" width="100" height="100" />
    </div>

    <div class="title" style="border-width: 0px 0px 1px 0px;">
     <div class="newstitle">Hier News2</div>
     </div>
     <div class="spacer" style="border: 0px; font-size: 0px;"></div>
    <div class="postinfo smallfont">
      <b>Autor:</b> Autor |
      <b>Datum:</b> 01.01.2005</div>
    <div class="newscontent" style="padding: 4px;">
     Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext
     Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext
     Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext
     Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext
     Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext
     Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext
     Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext
     Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext
    </div>
    <div class="newsinfo smallfont">
     <a href="#">mehr lesen & Kommentare</a>
     <a href="#">Diese News verschicken</a> 
    </div>
   </div>
      
   <div class="newscontainer">

    <div class="newspicture" style="float: right; border-bottom: 1px solid #000; border-left: 1px solid #000; margin-left: 4px;border-width: 1px 0px 1px 1px;">
     <img alt="" src="http://qoo-net.de/amd.jpg" width="100" height="100" />
    </div>

    <div class="title" style="border-width: 0px 0px 1px 0px; padding-left: 3px;">
     <div class="newstitle">Hier News1</div>
     </div>
     <div class="spacer" style="border: 0px; font-size: 0px;"></div>
    <div class="postinfo smallfont">
      <b>Autor:</b> Autor |
      <b>Datum:</b> 01.01.2005</div>
    <div class="newscontent" style="padding: 4px;">
     Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext
     Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext
     Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext
     Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext
     Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext
     Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext
     Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext
     Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext
    </div>
    <div class="newsinfo smallfont">
     <a href="#">mehr lesen & Kommentare</a>
     <a href="#">Diese News verschicken</a> 
    </div>
   </div>

Achja, mein Problem ist: Das Newsbild, wird nicht bündig ans Table geheftet, da ist ca. 1px frei. Keine Ahnung warum

-Edit- Nun gehts

[bine]

zum ersten Thema:
ich hätte da über ne Klasse font-weight:bold verwendet, strong hab ich noch nie benutzt. Wenn die font eh in einer Klasse definiert wird ist das dann nicht so am praktischsten?

[womstar]

strong hat bei vorlese-browsern und bei suchmaschinen bestimmte vorteile.

[bine]

ach so