Antworten auf deine Fragen:
Neues Thema erstellen

Vertical-align funktioniert in Firefox/Safari nicht

martinhahn90

Nicht mehr ganz neu hier

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:
HTML:
<td class="kategorien" valign="bottom">
                <br />
                <br />
                <a href="#">still 1 &nbsp;</a><br />
                 <a href="#">still 2 &nbsp;</a><br />
                 <a href="#">industrie &nbsp;</a><br />
                 <a href="#">food &nbsp;</a><br />
                 <a href="#">architektur &nbsp;</a><br />
                 <br />
                 <a href="#">info &nbsp;</a><br />
                </td>
Code:
CSS:
.kategorien {
    width: 79px;
    font-size: 12px;
    text-align: right;
    vertical-align: bottom;
    float: left;
}



Liveversionen:
HTML:
CSS:
 

leohh

CSS verliebt

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:

martinhahn90

Nicht mehr ganz neu hier

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?
 

Herr_D

offline

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?


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



Die Tabelle ist voll merkwürdig...
 

martinhahn90

Nicht mehr ganz neu hier

AW: Vertical-align funktioniert in Firefox/Safari nicht

Danke schonmal für den Tipp. Weiß gerade auch nicht mehr, warum ich eine Tabelle gwählt hatte. Klappt ja auch so genau so "gut".
Das mit den 3 DIVs funktioniert nämlich bei mir nicht -.-*
 

Doitsu

Aktives Mitglied

AW: Vertical-align funktioniert in Firefox/Safari nicht

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

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

martinhahn90

Nicht mehr ganz neu hier

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:
#navibg { 
background-color: #ffffff; 
margin: 0 0 0 0; 
width: 300px; 
height: 650px; 
float: left;
}
.navigation {
    font-size: 16px;
    background-color: #ffffff;
    background-image: url('img/navibg.jpg');
    font-family: Futura;
    width: 300px;
    height: 415px;
    margin-right:0px;
    margin-left:0px;
    padding-left:0px;
    margin-top: 100px;
    float:left;
}
.kategorien {
    width: 79px;
    font-size: 12px;
    text-align: right;
    vertical-align: bottom;
    float: left;
}
.thumbarea {
    width:170px; 
    float: left; 
    visibility: visible;
}
Code:
<div id="navibg">
            <div class="navigation">
            <div><a href="index.php"><img src="img/logo.jpg" class="img" alt="Fotodesign Martin Wissen Startseite" /></a></div>
                 <div class="kategorien">
                <br />
                <br />
                <?php
                $query = $sql->sendQuery('SELECT id, posID, name
                    FROM fdw_image_cats
                    ORDER BY posID');
                while($row = $sql->fetchObject($query)) {
                    echo '<a href=\'index.php?catID='.$row->id.'\'>'.$row->name.'</a><br />';
                }
                ?>
                 <br />
                 <a href="kontakt.php">info &nbsp;</a>
                </div>
                <div class="thumbarea" id="boxTd" onmouseover='jtoggle()' onmouseout='jtoggleO()'>
                            
                            <br />
                            <br />    
                            <ul id="thumbs">
                            
                            <?php
                            $query = $sql->sendQuery('SELECT name, posID
                                FROM fdw_images
                                WHERE catID = \''.intval($catID).'\'
                                ORDER BY posID');
                            $i = 1;
                            while($row = $sql->fetchObject($query)) {
                                echo '<li value=\''.$i.'\'><img style=\'width:45px; height:35px;\' src=\'thumbs/'.$catID.'/'.$row->name.'\' alt=\'\' title=\'\' /></li>';
                                
                                $i++;
                            }
                            ?>
                            
                              </ul>
                            <div class="galerie-pfeile">
                            &nbsp;
                                <a href="javascript:slideShow.nav(-1)"><img src="img/pfeil-links.png" class="img" alt="voriges Bild" /></a>
                                <a href="javascript:slideShow.stop()"><img src="img/pfeil-pause.png" class="img" alt="Diashow anhalten" /></a>
                                <a href="javascript:slideShow.nav(1)"><img src="img/pfeil-rechts.png" class="img" alt="n&auml;chstes Bild" /></a>
                                </div>
                </div>
            </div>
            </div>
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.527
Neuestes Mitglied
Christian Eidelloth
Oben