Ergebnis 1 bis 5 von 5

Thema: HTML- und CSS-Code Browseroptimierung?

  1. #1
    HTML Newbie
    Registriert seit
    29.07.2012
    Beiträge
    8
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard HTML- und CSS-Code Browseroptimierung?

    Hallo,

    ich habe folgenden HTML- und CSS-Code geschrieben. Ich bin in CSS und HTML aber nicht so fit, der Code sollte aber möglichst optimiert sein für Ladezeit und verschiedene Browser, da davon in einer Liste mehrere angezeigt werden. Würde mich freuen, wenn da mal jemand drüberschauen könnte und mir sagen könnte, wo ich noch etwas verbessern könnte.

    HTML-Code:
    <style type="text/css">
    
    #resultstopbar {
        background-color: #fff3e3;
        width: 100%;
        height: 20px;
    
        padding-left: 2px;
        left: 0px;
        
        font-family: Verdana, Geneva, sans-serif;
        font-size: 14px;
        color: #ff9308;
    }
    
    #name {
        width:30%;
        float:left;
        text-align:left;
        
        font-family: Verdana, Geneva, sans-serif;
        font-size: 14px;
        color: #ff9308;
    }
    
    #stars {
        width:40%;
        float:left; 
        text-align:center;
        
        font-family: Verdana, Geneva, sans-serif;
        font-size: 14px;
        color: #e3c651;        
    }
    
    #softwaresource {
        width:30%;
        float:left;
        text-align:right;
        
        font-family: Verdana, Geneva, sans-serif;
        font-size: 14px;
        color: #ff9308;    
    }
    
    #description {
        width:80%;
        float:left;
        text-align:left;
        
        font-family: Verdana, Geneva, sans-serif;
        font-size: 14px;
        color: #000000;
    }
    
    #thumbnail {
        width:20%;
        float:left;
        text-align:right;
    }
    
    #category {
        float:left;
        width:50%;
        text-align: right;
        
        font-family: Verdana, Geneva, sans-serif;
        font-size: 14px;
        color: #3bb12c;
    }
    
    #pwopm {
        padding:0;margin:0;
    }
    
    
    
    a.name:link {
      color:            #ff9308;
    }
    
    a.name:visited {
      color:            #e07e00;
    }
    
    a.name:hover {
      background-color: #fff3e3;
    }
    
    
    
    a.category:link {
      color:            #3bb12c;
    }
    
    a.category:visited {
      color:            #3bb12c;
    }
    
    a.category:hover {
      background-color: #d7f7d3;
    }
    
    
    
    a.softwaresource:link {
      color:            #ff9308;
    }
    
    a.softwaresource:visited {
      color:            #ff9308;
    }
    
    a.softwaresource:hover {
      background-color: #fff3e3;
    }
    
    </style>
    
    
    <div id="resultstopbar">
        <p id="pwopm">
            <span style="vertical-align:middle;">results <b>1 to 22</b> of <b>387</b> for <b>"double-slit-experiment"</b></span>
        </p>
    </div>
    
    <p>
    <p id="pwopm">
        <div>
             <div id="name"><b><a href="#sdfasdf" target="_blank" class="name">Can we increase traffic flow rate by increasing
    maximum speed limit?</a></b></div>
             <div id="stars"><img src="stars.png" width="269" height="22" /></div>
             <div id="softwaresource"><a href="#" class="softwaresource">java-applet</a> | <a href="#" class="softwaresource">phy.ntnu.tw</a></div>
        </div>
    </p>
    
    <p id="pwopm">
        <div>
            <div id="description">
                  <p>
                    This is a three lanes high way traffic simulation. You can adjust number of cars with slider when it is paused.<br />
                    The color turn yellow when it is accelerating, turn red when hit brake, turn green when in the same speed.<br />
                    It turn into blue when changing lanes.
                  </p>
          <p align="center"><a href="#sdfasdf" target="_blank"><img src="start.png" border="0"/></a></p>
        </div>
        <div id="thumbnail">
            <img src="thumbnail.png" /></div>
        </div>
    </p>
    
    <p id="pwopm">
        <div style="float:left; width:50%;">&nbsp;</div>
        <div id="category"><a href="#" class="category">optics</a> | <a href="#" class="category">lightwaves</a> | <a href="#" class="category">double-slit</a> <b>:category</b></div>
    </p>
    </p>
    Danke,

    freundliche Grüße,

    Thilo
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Bandit
    Gast

    Standard AW: HTML- und CSS-Code Browseroptimierung?

    Beachte, dass ID's eindeutig sein müssen und nur einmal vorkommen dürfen. Dein "pwopm" z.B. darf also nicht id sein, sondern class

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    29.07.2012
    Beiträge
    8
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: HTML- und CSS-Code Browseroptimierung?

    Okay, ich habe es jetzt mit absoluten Breiten gemacht, also width="... px", weil sich das sonst alles komisch verschoben hat, wenn man die Fenstergröße geändert hat. Und die <p> brauche ich nun gar nicht mehr. Also ich habe jetzt:

    HTML-Code:
    <style type="text/css">
    
    #resultstopbar {
        background-color: #fff3e3;
        width: 950px;
        height: 20px;
    
        padding-left: 2px;
        left: 0px;
        
        font-family: Verdana, Geneva, sans-serif;
        font-size: 14px;
        color: #ff9308;
    }
    
    #name {
        width:350px;
        float:left;
        text-align:left;
        
        font-family: Verdana, Geneva, sans-serif;
        font-size: 14px;
        color: #ff9308;
    }
    
    #stars {
        width:300px;
        float:left; 
        text-align:center;
        
        font-family: Verdana, Geneva, sans-serif;
        font-size: 14px;
        color: #e3c651;        
    }
    
    #softwaresource {
        width:300px;
        float:left;
        text-align:right;
        
        font-family: Verdana, Geneva, sans-serif;
        font-size: 14px;
        color: #ff9308;    
    }
    
    #description {
        width:760px;
        float:left;
        text-align:left;
        
        font-family: Verdana, Geneva, sans-serif;
        font-size: 14px;
        color: #000000;
    }
    
    #thumbnail {
        width:190px;
        float:left;
        text-align:right;
    }
    
    #category {
        float:left;
        width:475px;
        text-align: right;
        
        font-family: Verdana, Geneva, sans-serif;
        font-size: 14px;
        color: #3bb12c;
    }
    
    
    
    a.name:link {
      color:            #ff9308;
    }
    
    a.name:visited {
      color:            #e07e00;
    }
    
    a.name:hover {
      background-color: #fff3e3;
    }
    
    
    
    a.category:link {
      color:            #3bb12c;
    }
    
    a.category:visited {
      color:            #3bb12c;
    }
    
    a.category:hover {
      background-color: #d7f7d3;
    }
    
    
    
    a.softwaresource:link {
      color:            #ff9308;
    }
    
    a.softwaresource:visited {
      color:            #ff9308;
    }
    
    a.softwaresource:hover {
      background-color: #fff3e3;
    }
    
    
    
    
    </style>
    
    
    <div id="resultstopbar">
        <p style="padding:0;margin:0;">
            <span style="vertical-align:middle;">results <b>1 to 22</b> of <b>387</b> for <b>"double-slit-experiment"</b></span>
        </p>
    </div>
    
    <p>
        <div style="width:950px">
             <div id="name"><b><a href="#sdfasdf" target="_blank" class="name">Can we increase traffic flow rate by increasing
    maximum speed limit?</a></b></div>
             <div id="stars"><img src="stars.png"/></div>
             <div id="softwaresource"><a href="#" class="softwaresource">java-applet</a> | <a href="#" class="softwaresource">phy.ntnu.tw</a></div>
        </div>
    
        <div style="width:950px">
            <div id="description">
                  <p>
                    This is a three lanes high way traffic simulation. You can adjust number of cars with slider when it is paused.<br />
                    The color turn yellow when it is accelerating, turn red when hit brake, turn green when in the same speed.<br />
                    It turn into blue when changing lanes.
                  </p>
                  <p align="center"><a href="#sdfasdf" target="_blank"><img src="start.png" border="0"/></a></p>
            </div>
            <div id="thumbnail"><img src="thumbnail.png" /></div>
        </div>
    
    
        <div style="width:950px">
            <div style="float:left; width:475px;">&nbsp;</div>
            <div id="category"><a href="#" class="category">optics</a> | <a href="#" class="category">lightwaves</a> | <a href="#" class="category">double-slit</a> <b>:category</b></div>
        </div>
    </p>
    Ist das okay so?

  4. #4
    Bandit
    Gast

    Standard AW: HTML- und CSS-Code Browseroptimierung?

    Ich würd' mal sagen, zuviele Style-Angaben im HTML-Code

  5. #5
    Unregistriert
    Gast

    Standard AW: HTML- und CSS-Code Browseroptimierung?

    Ich würde mal sagen, DIVitis und IDtis

Ähnliche Themen

  1. Hilfe für IE Browseroptimierung gesucht?
    Von Swanky im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 09.02.2011, 11:37
  2. Schwierigkeiten bei der Browseroptimierung
    Von Machmoud im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 05.08.2009, 19:21
  3. Code Fenster html code
    Von Hurrican im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 07.01.2009, 16:04
  4. HTML Code
    Von CHIEFCHILLER im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 10.09.2007, 13:30
  5. HTML Code auf einer HTML-Hilfe Website anzeigen
    Von Sternenkrieger im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 16.06.2004, 10:24

Stichworte

Berechtigungen

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