CSS: Vertical-Align

Kabelsalat · 31.12.2005

Hallo,

Ich stehe seit gestern Abend vor dem Problem zwei HTML-Elemente vertikal auszurichten und ich habe so ziemlich alles getestet, aber es will einfach nicht. Vielleicht ist euch ja mehr Glück beschert

Ansonsten muss ich wohl zum Tabellenlayout zurückkehren

Hier der HTML-Code:

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <BODY>
    <div style="height:100px;width:100%;background-color:yellow;">
      <div style="background-color:red;float:left;">
        <!--auto-generated, cannot change this-->
        <!--should be centered vertically-->
        <a id="dnn_dnnLOGO_hypLogo" title="My Website" href="http://localhost/dnn3"><img id="dnn_dnnLOGO_imgLogo" src="http://www.epifiles.de/daten/tmp/logo.gif" alt="My Website" style="border-width:0px;" /></a>
      </div>
      <div style="float:right;background-color:blue;">
        <!--auto-generated, cannot change this-->
        <!--should be centered vertically-->
        <table id="dnn_dnnBANNER_lstBanners" cellspacing="0" cellpadding="0" Summary="Banner Design Table" border="0" style="border-collapse:collapse;">
          <tr>
            <td align="Center" valign="Middle" style="border-color:Black;width:100%;"><span id="dnn_dnnBANNER_lstBanners__ctl0_lblItem"><a href="localhost/dnn3"><img src="http://www.epifiles.de/daten/tmp/banner.gif" border="0" alt="DotNetNuke - The Web Of The Future""></a></span></td>
          </tr>
        </table>
      </div>
    </div>
  </BODY>
</HTML>

Vielen Dank für eure Hilfe

PS: Ich kann bloß die divs verändern. Der Rest wird dynamisch erstellt; auch das Umwandeln der eingschlossenen divs in span-Elemente hat keinen Erfolg gebracht

Kabelsalat · 01.01.2006

Ich habe nun eine Lösung gefunden - ist allerdings alles andere als simpel und man muss sich bereits Gedanken über die Rückkehr zum Tabellenlayout machen

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <BODY>
    <!--CSS-Attributes starting with a _ are for IE-Support-->
    <!--Background-Container-->
    <div style="height:100px;width:100%;overflow:hidden;background-color:yellow;">
      <div style="height:100%;float:left;display:table;_position:relative;background-color:blue;">
        <div style="display:table-cell;vertical-align:middle;_position:absolute;_top:50%;background-color:red;">
          <!--Next div is for IE support-->
          <div style="_position:relative;_top:-50%;">
            <!--auto-generated, cannot change this-->
            <!--should be centered vertically-->
            <a id="dnn_dnnLOGO_hypLogo" title="My Website" href="http://localhost/dnn3"><img id="dnn_dnnLOGO_imgLogo" src="http://www.epifiles.de/daten/tmp/logo.gif" alt="My Website" style="border-width:0px;" /></a>
          </div>
        </div>
      </div>
      <div style="height:100%;float:right;display:table;_position:relative;background-color:blue;">
        <div style="display:table-cell;vertical-align:middle;_position:absolute;_top:50%;_right:0px;background-color:red;">
          <!--Next div is for IE support-->
          <div style="_position:relative;_top:-50%;">
            <!--auto-generated, cannot change this-->
            <!--should be centered vertically-->
            <table id="dnn_dnnBANNER_lstBanners" cellspacing="0" cellpadding="0" Summary="Banner Design Table" border="0" style="border-collapse:collapse;">
              <tr>
                <td align="Center" valign="Middle" style="border-color:Black;width:100%;"><span id="dnn_dnnBANNER_lstBanners__ctl0_lblItem"><a href="localhost/dnn3"><img src="http://www.epifiles.de/daten/tmp/banner.gif" border="0" alt="DotNetNuke - The Web Of The Future""></a></span></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </BODY>
</HTML>

Das ganze baut auf dieser Musterlösung auf: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

mynicksucks · 14.01.2006

Kabelsalat schrieb:
Ich habe nun eine Lösung gefunden - ist allerdings alles andere als simpel und man muss sich bereits Gedanken über die Rückkehr zum Tabellenlayout machen

...

Ich denke mal da sprach der Frust in dir. CSS ist ein mächtiges Werkzeug zum layouten, und es geht eigentlich alles damit, was eine Tabelle auch kann (oder besser gesagt, was man von Tabellen vielleicht gewohnt ist). Ein Riesenproblem ist natürlich der Scheiss-Internet-Explorer, der ja bekanntlich teilweise die W3C-Standards nicht interpretieren kann! Deswegen auch die unzähligen Hacks, die einen zur Verzweiflung treiben können.
Genug geschwafelt, hier noch eben ein Link mit Templates für essenzielle Seitenlayouts.
http://intensivstation.ch/templates/

Suche

CSS: Vertical-Align

Kabelsalat

Semiprofi

Kabelsalat

Semiprofi

mynicksucks

Neuling