Ergebnis 1 bis 4 von 4

Thema: Kleines Problem mit DIV-Größen

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

    Standard Kleines Problem mit DIV-Größen

    Hallo,

    ich habe ein kleines Problem: Und zwar habe ich in Photoshop das hier gemachtscreenshot.jpg und bin gerade dabei, das in HTML & CSS zu übersetzen. Soweit bin ich bisher screenshot2.jpg. 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-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;
        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>
    Danke,

    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
    HTML Newbie
    Themenstarter

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

    Standard AW: Kleines Problem mit DIV-Größen

    Egal, habs jetzt halt mit einer Tabelle gemacht

  3. #3
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Kleines Problem mit DIV-Größen

    in nur 20 minuten.. wow...
    in zukunft könnte line-height dein freund sein fürs "einmitten" von inline-elementen
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  4. #4
    HTML Newbie
    Themenstarter

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

    Standard AW: Kleines Problem mit DIV-Größen

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

Ähnliche Themen

  1. kleines PHP Problem
    Von Unregistriert im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 7
    Letzter Beitrag: 23.05.2011, 21:33
  2. Problem mit Schrift Größen
    Von kappilino im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 16.09.2007, 13:40
  3. kleines problem
    Von Kyle im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 02.08.2007, 11:47
  4. kleines Problem
    Von ---- im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 24.10.2006, 04:48
  5. kleines Problem
    Von Snowman1 im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 11.03.2005, 10:47

Stichworte

Berechtigungen

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