Beiträge von Thilo87

Thilo87

Danke, das werde ich mir dann auch nochmal angucken. Ja, ich wollte eigentlich keine Tabellen verwenden, aber was solls

Thilo87

Egal, habs jetzt halt mit einer Tabelle gemacht

Thilo87

Hallo,

ich habe ein kleines Problem: Und zwar habe ich in Photoshop das hier gemacht und bin gerade dabei, das in HTML & CSS zu übersetzen. Soweit bin ich bisher . Das einzige Problem ist das Sprachen-Icon oben links. Das sollte nämlich vertikal in der Mitte des Textes rechts daneben sein. Ich könnte das mit Padding machen, aber (siehe Code) die DIV-Tags richten sich in der Höhe ja nicht automatisch aus, so wie Tabellen, wo jede Spalte gleich hoch ist, auch wenn in einer Spalte mehr Zeilen als in einer anderen sind, sondern sie sind immer genau so hoch, wie der Text, der darin steht. Deswegen bringt mir auch vertikales zentrieren nichts, nur wenn der Name eine Zeile lang ist, dann stimmt alles. Also ist schwer zu erklären, hier der Code

HTML

<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;
    height:35px;
    float:left;
    text-align:left;

    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    color: #ff9308;
}


#stars {
    width:300px;
    height:35px;
    float:left; 
    text-align:center;

    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    color: #e3c651;        
}


#softwaresource {
    width:300px;
    height:35px;
    float:left;
    text-align:right;
    vertical-align:top;

    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:1000px">


<div style="width: 50px; height: 35px; float:left;"><img src="eng.png" width="34" height="23" /></div>


<div style="width:950px;float:right;">


    <div style="width:950px">
         <div id="name"><b><a href="#sdfasdf" target="_blank" class="name" style="height:10px">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>

    </div>
</div>
</p>

Alles anzeigen

Danke,

Thilo

Thilo87

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 brauche ich nun gar nicht mehr. Also ich habe jetzt:

HTML

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

Alles anzeigen

Ist das okay so?

Thilo87

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

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

Alles anzeigen

Danke,

freundliche Grüße,

Thilo

Thilo87

Alles klar, jetzt ist sie nur noch 280 KB groß Ich denke, das geht in Ordnung

Thilo87

Naja, ich denke nicht, dass jeder Benutzer der Internetseite DSL hat. Außerdem soll es eben so schnell wie möglich gehen, da man sich bequem durch die Datenbank bewegen können sollte.

Thilo87

Hallo,

ich habe eine Datenbank auf http://www.verstehenblog.de/?page_id=327 und möchte sie gerne in Sachen Ladezeit optimieren. Die Datenbank hat die Form:

Name$$$$Software$Quelle$
<a href="http://www.falstad.com/modebox/" target="_blank">Box Modes</a>$
<img src="http://www.verstehenblog.de/info.jpg" title="Acoustic standing waves in a 3-d box. ">$
<img src="http://www.verstehenblog.de/american.jpg" title="Englisch">$<a title="Box Modes   <a href='http://www.falstad.com/modebox/' target='_blank'><img src='http://www.verstehenblog.de/start.jpg' title='Simulation starten'></a> Acoustic standing waves in a 3-d box. " href="http://www.verstehenblog.de/Simulationen_B…D_Box_Modes.PNG"><img src="http://www.verstehenblog.de/picture.jpg"></a>$
Java-Applet$
falstad.com$
Akkustik;Wellen, waves, acoustic;http://www.falstad.com/modebox/

(ohne Zeilenumbrüche, die habe ich nur zur Übersicht eingefügt)

Ich möchte sie gerne optimieren, da bei ca. 700 Einträgen die Datei schon rund 0,6 MB umfasst und noch viele Einträge hinzukommen. Leider kenne ich mich mit HTML, PHP und CSS nicht allzu gut aus. Kann mir jemand helfen? Würde es z.B. etwas bringen, wenn ich die ganzen HTML-Codes mit PHP erstelle, oder nimmt das sich nichts? Jeder Vorschlag ist willkommen

Danke,

Grüße,

Thilo

Beiträge von Thilo87

Kleines Problem mit DIV-Größen

Kleines Problem mit DIV-Größen

Kleines Problem mit DIV-Größen

HTML- und CSS-Code Browseroptimierung?

HTML- und CSS-Code Browseroptimierung?

Datenbank optimieren

Datenbank optimieren

Datenbank optimieren