Anzeige

Vertical-align funktioniert in Firefox/Safari nicht

Vertical-align funktioniert in Firefox/Safari nicht | PSD-Tutorials.de

Erstellt von martinhahn90, 09.05.2009.

  1. martinhahn90

    martinhahn90 Nicht mehr ganz neu hier

    Dabei seit:
    23.06.2008
    Beiträge:
    56
    Geschlecht:
    männlich
    Vertical-align funktioniert in Firefox/Safari nicht
    Servus Jungs,

    schon wieder ich, schon wieder mit einem Problem und schon wieder werde ich hier vermutlich wunderbar geholfen, wie man so schön sagt. :p

    Es geht wieder einmal um die Fotografenseite. Mittlerweile habe ich eine Stoppfunktion bereits selber hinbekommen, wenngleich ich noch nicht weiß, wie ich bei einem Klick auf Stop ein Play (samt Startfunktion) anzeigen lassen kann. Aber das sei hier erst einmal nebensächlich.

    Mein Hauptproblem:
    Ich habe links die Kategorien mittles "vertical-align: bottom;" an den unteren Rand des DIVs gepackt, was in dem von mir oft gescholtenen IE auch wunderbar klappt. Safari und Firefox mögen das jedoch nicht sonderlich.
    Ich vermute auch fast, dass es im IE nur klappt, weil ich zusätzlich der td das Attribut "valign=bottom" gegeben habe...

    Wisst ihr, was ich hier falsch mache? Habe im Forum bereits gesucht und gute Tipps zu margin:auto gefunden, um vertikal zu zentrieren, nur bringt mich das leider nicht weiter, hehe.


    Codeschnipsel:
    Code (Text):
    1. HTML:
    2. <td class="kategorien" valign="bottom">
    3.                 <br />
    4.                 <br />
    5.                 <a href="#">still 1 &nbsp;</a><br />
    6.                  <a href="#">still 2 &nbsp;</a><br />
    7.                  <a href="#">industrie &nbsp;</a><br />
    8.                  <a href="#">food &nbsp;</a><br />
    9.                  <a href="#">architektur &nbsp;</a><br />
    10.                  <br />
    11.                  <a href="#">info &nbsp;</a><br />
    12.                 </td>
    Code (Text):
    1. CSS:
    2. .kategorien {
    3.     width: 79px;
    4.     font-size: 12px;
    5.     text-align: right;
    6.     vertical-align: bottom;
    7.     float: left;
    8. }


    Liveversionen:
    HTML: Fotodesign Martin Wissen - Startseite - Industriefotografie Borken
    CSS: http://martinhahn90.ma.funpic.de/martin-wissen/style.css
     
    #1      
  2. leohh

    leohh CSS verliebt

    Dabei seit:
    19.06.2008
    Beiträge:
    244
    Vertical-align funktioniert in Firefox/Safari nicht
    AW: Vertical-align funktioniert in Firefox/Safari nicht

    Ein vertical-align, funktioniert nur auf inline-elemente.
    Durch dein float, wird aber dein inline-element zu einem block-element, wodurch das v-align nicht mehr greifen kann.

    Im IE funktioniert das nur, weil die redmonder eine eigene Vorstellung von der Spezifitaet haben, die noch nie mit den allgemeinen Vorstellungen und Wuenschen konform gingen. Es ist wirklich so, dass wenn etwas im FF + Safari bzw. Opera nicht so angezeigt wird, wie man es gerne haette, jedoch im IE funktioniert, dass es kein guter Code ist. ;)
     
    Zuletzt bearbeitet: 09.05.2009
    #2      
  3. martinhahn90

    martinhahn90 Nicht mehr ganz neu hier

    Dabei seit:
    23.06.2008
    Beiträge:
    56
    Geschlecht:
    männlich
    Vertical-align funktioniert in Firefox/Safari nicht
    AW: Vertical-align funktioniert in Firefox/Safari nicht

    Danke erst einmal. :)
    Ich schaue auch genau deswegen immer zuerst in den Fuchs. ;)
    Mein Problem ist jedoch, wie ich den Code nun sauber bekomme, wie ich also das Problem mit v-align umgehe. Gibt es da eine Möglichkeit?
     
    #3      
  4. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    Vertical-align funktioniert in Firefox/Safari nicht
    AW: Vertical-align funktioniert in Firefox/Safari nicht


    bau 3 div nebeneinander und setzt das per position:relative; bottom:0; nach unten...



    Die Tabelle ist voll merkwürdig...
     
    #4      
  5. martinhahn90

    martinhahn90 Nicht mehr ganz neu hier

    Dabei seit:
    23.06.2008
    Beiträge:
    56
    Geschlecht:
    männlich
    Vertical-align funktioniert in Firefox/Safari nicht
    #5      
  6. Doitsu

    Doitsu Aktives Mitglied

    Dabei seit:
    15.04.2009
    Beiträge:
    482
    Vertical-align funktioniert in Firefox/Safari nicht
    AW: Vertical-align funktioniert in Firefox/Safari nicht

    position:relative; - Bleib da, wo du bist - bottom:0; - und verschiebe dich um 0px nach unten?
    Wirst wohl absolute meinen (?)
     
    Zuletzt bearbeitet: 09.05.2009
    #6      
  7. martinhahn90

    martinhahn90 Nicht mehr ganz neu hier

    Dabei seit:
    23.06.2008
    Beiträge:
    56
    Geschlecht:
    männlich
    Vertical-align funktioniert in Firefox/Safari nicht
    AW: Vertical-align funktioniert in Firefox/Safari nicht

    Bei position: absolute; passiert immerhin etwas, jedoch verschiebt sich dann alles aus meinem gewünschten Bereich heraus. :'(
     
    #7      
  8. martinhahn90

    martinhahn90 Nicht mehr ganz neu hier

    Dabei seit:
    23.06.2008
    Beiträge:
    56
    Geschlecht:
    männlich
    Vertical-align funktioniert in Firefox/Safari nicht
    AW: Vertical-align funktioniert in Firefox/Safari nicht

    Servus Leute,

    das ganze funktioniert nun nur solange, bis ich eine feste Höhe für eine der oben genannten Klassen eingebe. (Siehe Beispiel unten, dort ist eine feste Höhe vergeben, das Hintergrundbild wächst dann weiter nach unten, aber die Kategorien (liegen im navi-DIV) werden nicht mehr vertikal ausgerichtet...:(

    Code (Text):
    1.  
    2. #navibg {
    3. background-color: #ffffff;
    4. margin: 0 0 0 0;
    5. width: 300px;
    6. height: 650px;
    7. float: left;
    8. }
    9. .navigation {
    10.     font-size: 16px;
    11.     background-color: #ffffff;
    12.     background-image: url('img/navibg.jpg');
    13.     font-family: Futura;
    14.     width: 300px;
    15.     height: 415px;
    16.     margin-right:0px;
    17.     margin-left:0px;
    18.     padding-left:0px;
    19.     margin-top: 100px;
    20.     float:left;
    21. }
    22. .kategorien {
    23.     width: 79px;
    24.     font-size: 12px;
    25.     text-align: right;
    26.     vertical-align: bottom;
    27.     float: left;
    28. }
    29. .thumbarea {
    30.     width:170px;
    31.     float: left;
    32.     visibility: visible;
    33. }
    Code (Text):
    1.  
    2. <div id="navibg">
    3.             <div class="navigation">
    4.             <div><a href="index.php"><img src="img/logo.jpg" class="img" alt="Fotodesign Martin Wissen Startseite" /></a></div>
    5.                  <div class="kategorien">
    6.                 <br />
    7.                 <br />
    8.                 <?php
    9.                 $query = $sql->sendQuery('SELECT id, posID, name
    10.                     FROM fdw_image_cats
    11.                     ORDER BY posID');
    12.                 while($row = $sql->fetchObject($query)) {
    13.                     echo '<a href=\'index.php?catID='.$row->id.'\'>'.$row->name.'</a><br />';
    14.                 }
    15.                 ?>
    16.                  <br />
    17.                  <a href="kontakt.php">info &nbsp;</a>
    18.                 </div>
    19.                 <div class="thumbarea" id="boxTd" onmouseover='jtoggle()' onmouseout='jtoggleO()'>
    20.                            
    21.                             <br />
    22.                             <br />    
    23.                             <ul id="thumbs">
    24.                            
    25.                             <?php
    26.                             $query = $sql->sendQuery('SELECT name, posID
    27.                                 FROM fdw_images
    28.                                 WHERE catID = \''.intval($catID).'\'
    29.                                 ORDER BY posID');
    30.                             $i = 1;
    31.                             while($row = $sql->fetchObject($query)) {
    32.                                 echo '<li value=\''.$i.'\'><img style=\'width:45px; height:35px;\' src=\'thumbs/'.$catID.'/'.$row->name.'\' alt=\'\' title=\'\' /></li>';
    33.                                
    34.                                 $i++;
    35.                             }
    36.                             ?>
    37.                            
    38.                               </ul>
    39.                             <div class="galerie-pfeile">
    40.                             &nbsp;
    41.                                 <a href="javascript:slideShow.nav(-1)"><img src="img/pfeil-links.png" class="img" alt="voriges Bild" /></a>
    42.                                 <a href="javascript:slideShow.stop()"><img src="img/pfeil-pause.png" class="img" alt="Diashow anhalten" /></a>
    43.                                 <a href="javascript:slideShow.nav(1)"><img src="img/pfeil-rechts.png" class="img" alt="n&auml;chstes Bild" /></a>
    44.                                 </div>
    45.                 </div>
    46.             </div>
    47.             </div>
     
    #8      
x
×
×