Ergebnis 1 bis 10 von 10
  1. #1
    kiX
    kiX ist offline Mitglied
    registriert
    16-06-2004
    Beiträge
    26

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

    Hallo,

    hier erstmal wie mein XHTML aussieht:
    Code:
    <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?

  2. #2
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913

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

    Zitat Zitat von kiX
    Hallo,

    hier erstmal wie mein XHTML aussieht:
    Code:
    <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.

  3. #3
    Avatar von dipser
    dipser ist offline Lounge-Member
    registriert
    23-06-2002
    Ort
    Osnabrück
    Beiträge
    673

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

    <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.

  4. #4
    Avatar von rasputin
    rasputin ist offline Lounge-Member
    registriert
    31-10-2001
    Beiträge
    3.102

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

    ä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.

  5. #5
    Avatar von dipser
    dipser ist offline Lounge-Member
    registriert
    23-06-2002
    Ort
    Osnabrück
    Beiträge
    673

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

    Zitat Zitat von womstar
    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...

  6. #6
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913

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

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

  7. #7
    kiX
    kiX ist offline Mitglied
    registriert
    16-06-2004
    Beiträge
    26

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

    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...

    Code:
    <!-- 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
    Geändert von kiX (09-08-2004 um 17:16 Uhr)

  8. #8
    Avatar von bine
    bine ist offline Lounge-Member
    registriert
    06-07-2002
    Ort
    Schleswig-Holstein
    Beiträge
    5.902

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

    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?
    bine

  9. #9
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913

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

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

  10. #10
    Avatar von bine
    bine ist offline Lounge-Member
    registriert
    06-07-2002
    Ort
    Schleswig-Holstein
    Beiträge
    5.902

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

    ach so
    bine

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •