XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Knowledge Base (http://xhtmlforum.de/forumdisplay.php?f=79)
-   -   Der Text will nicht nach unten im div Tag... (http://xhtmlforum.de/showthread.php?t=32829)

18inch 15.07.2004 16:48

Der Text will nicht nach unten im div Tag...
 
also mein Quellcode sieht so aus:
Code:

<div id="page">
  <div id="banner"> hier stehen diverse Menülinks </div>
  <div id="banner2"> Sie sind eingeloggt als, XXXX XXXX </div>
.....
.....
.....
.....
</div>

Meine Styles sind so definiert:
Code:

#page {width: 778px;height: 415;margin: 0 auto;position: relative;}
#banner { width: 778px;height: 50px;top: 0px;left: 0px;overflow: hidden;background: transparent;background-image: url(../images/banner.png);margin: 0;text-align: right; vertical-align: bottom; margin:0;}
#banner2 {width: 700px; height: 50px; top: 0px; left: 78px; overflow: hidden; background: transparent; margin: 0 auto; text-align: left; vertical-align: bottom; position: absolute;}

Weder im div Tag banner noch im banner2 setzt er den Text nach unten (bottom)!!!
Wieso macht er das nicht???

hemfrie 15.07.2004 16:54

das liegt daran, dass vertical-align nur auf das TD-Tag (<td>) angewendet wird.

:)
hemfrie

18inch 15.07.2004 16:59

also kann ich vertical-align nur in verbindung mit <td> benutzen???

aber wie kriege ich den Text in meinen div Boxen nach unten???
Da muss es doch auch ne Lösung geben, oder?

hemfrie 15.07.2004 17:22

Da Du ja Deine Div´s absolut positionierst, kannst Du mit bottom:0; angeben, dass sich diese unten ander der Box "page" ausrichten sollen.

hier mal ein vereinfachtes Beispiel
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">       
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <title></title>
        <style type="text/css">
        /*<![CDATA[*/
        <!--
        #banner{
                bottom: 0;
                left: 0;
                position: absolute;
        }
       
        #banner2{
                bottom: 0;
                position: absolute;
                right: 0;
        }
       
        #page{
                background: #008000;
                height: 200px;
                position: relative;
                width: 700px;
        }
        -->
        /*]]>*/
        </style>
</head>

<body>

<div id="page">
  <div id="banner"> hier stehen diverse Menülinks </div>
  <div id="banner2"> Sie sind eingeloggt als, XXXX XXXX </div>
</div>
</body>
</html>

:)
hemfrie

ulle 15.07.2004 17:39

Zitat:

das liegt daran, dass vertical-align nur auf das TD-Tag (<td>) angewendet wird
Ähm ~ :? diese Ausage ist so nicht richtig ....... (setzen --------> :D spass)


hier mal eine kleine [vertical-align] Studie :arrow:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="de">
<head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">   
<!--

html,body  {
  padding: 0px;
  margin: 0px;
  font-family: "Trebuchet MS",Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 100.01%;
  background-color: #FF9911;
  color: #000000;
}

div {
  margin: 5px;
  border: 1px solid #000000;
  padding: 1px;   
  background-color: #FFFFFF;
  font-size: 0.8em;
}
img {
        height: 300px;
        width: 1px;
        border: 1px solid #000000;
}
.bild {
        background-color: #FF0000;
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 300px;
        text-decoration: underline;
}
.baseline {
        vertical-align: baseline;
        text-decoration: underline;
}
.sub {
        vertical-align: sub;
}
.super {
        vertical-align: super;
}
.top {
        vertical-align: top;
}
.text-top {
        vertical-align: text-top;
}
.middle {
        vertical-align: middle;
}
.bottom {
        vertical-align: bottom;
}
.text-bottom {
        vertical-align: text-bottom;
}
.ausrichtung {
        vertical-align: 40px;
}

  -->
</style>

</head>
<body>

<div>
        [img]x.gif[/img]
        <span class="bild">qI</span>
        <span class="baseline">baseline</span>
        <span class="sub">sub</span>
        <span class="super">super</span>
        <span class="top">top</span>
        <span class="text-top">text-top</span>
        <span class="middle">middle</span>
        <span class="bottom">bottom</span>
        <span class="text-bottom">text-bottom</span>
        <span class="ausrichtung">ausrichtung 40px über baseline</span>
</div>

</body></html>

Die CLASS [Bild] ist nur zur Veranschaulichung, alternativ ist natürlich das Blind-Gif, das mit dem border, zu nutzen - natürlich in der Praxis ohne border.

18inch 15.07.2004 18:03

also das ist meine css Datei:
Code:

#banner,
#navigation,
#bottom1,
#bottom2,
#navigation,
#content                        { border: 1px none black; position: absolute;}
#banner                        { width: 778px; height: 50px; top: 0px;left: 0px; overflow: hidden; background: transparent; background-image: url(../images/banner.png); text-align: right; bottom: 0;}
#banner2                        { width: 700px; height: 50px; top: 0px; left: 78px; overflow: hidden; background: transparent; text-align: left;}
#banner3                        { width: 700px; height: 50px; top: 0px; left: 78px; overflow: hidden; background: transparent; text-align: right;}
.bottom {
  vertical-align: bottom;
}
#navigation                { width: 168px; height:335px; top:50px; left:0px; overflow:auto; background: transparent; position: absolute;}
#content                        { width: 610px; height:335px; top:50px; left:168px; overflow:auto; background: transparent; position: absolute;}
#bottom1                        { width: 778px; height:30px; top:385px; left:0px; overflow:hidden; background: transparent; position: absolute; text-align: left; vertical-align: middle;}
#bottom2                        { width: 778px; height:30px; top:385px; left:0px; overflow:hidden; background: transparent; position: absolute; text-align: right; vertical-align: bottom;}
#page                        { width: 778px; height: 415; top: 0px;left: 0px; position: relative;}
body, table, div, tr, td, th        { font-family: verdana; font-size: 11px; color: #000000; margin:0 auto;}

Und hier sind die Anordnungen der div Tags auf meiner page:
Code:

<div id="page">
  <div id="banner">hier ist der Hintergrund vom Banner und einige Links (Profil / Kontakt/ etc...)</div>
  <div id="banner2">hier erscheint nur was wenn man eingeloggt ist!</div>
  <div id="navigation">hier werden alle naviLinks aus der Datenbank rein geladen</div>
  <div id="content">hier ist immer haupt inhalt zu finden</div>
  <div id="bottom2">diverse angaben</div>
  <div id="bottom1">diverse angaben</div>
</div>

Das Problem ist, das weder im Banner, im Banne2 , im bottom1 noch im bottom2 der Text nach unten kommt!
Ich bin einfach zu doof den Text auf den Bottom zu setzen! :lol:

Was muss ich ändern, damit er den Text in den genannten div Tags nach unten setzt?? Mit vertical-align funzt es nicht! Habe ich schon probiert!
Ich habe auch probiert den jeweilign Text in <span> zu setzen und den span habe ich mit bottom definiert!
Jedoch klappt nix!!!

Bitte um Hilfe

ulle 15.07.2004 18:40

Kopier Dir doch mal die beiden Beispiele oben.

Dann versuche mal zu verstehen was da passiert, und dann bist Du auch in der Lage es bei Dir einzusetzen.

Deshalb haben wir Dir ja komplette XHTML Dateien gepostet, ein wenig mußt Du auch tun - lernen (sorry)

Komplette XHTML Beispiele machen Spass :arrow: http://www.xhtmlforum.de/viewtopic.php?t=1399

Außerdem willst Du doch nicht das wir glauben Du siehst wirklich so aus wie auf Deinem Bildchen, falls doch schreibe ich Dir vielleicht das gesamte Projekt :lol: (das war böse, ich weiß ----------->aber auch Spass ;) )

18inch 15.07.2004 23:59

Ich habe mir die beiden Beispiele von euch kopiert und ausprobiert!

Und natürlich funktionieren die auch! Es handelt sich ja auch nur um einen div Tag mit diversen spans etc...

Aber ich glaube, dass das Problem bei mir die verschachtelung der div Tags ist!!!

Ich konnte bisher immer alles mit vertical-align formatieren, jedoch diesmal nicht.
Irgendwo macht css Probleme. Und ich weiss einfach nicht wo!? :?

Ich wäre um jeden Tip dankbar!

ps: Was hast du gegen das Bildchen?? ich sehe wirklich so aus! :P

ulle 16.07.2004 09:45

Zitat:

Aber ich glaube, dass das Problem bei mir die verschachtelung der div Tags ist!!!
Nein :!:

Zitat:

Es handelt sich ja auch nur um einen div Tag mit diversen spans etc...
Eben - gut gesehen :arrow: [mit diversen spans]



Aber ich sehe schon :arrow: Du hast das Beispiel nicht verstanden....

18inch 16.07.2004 11:04

Ich habe die Beispiele verstanden.
Und so habe ich es sonst auch imer gemacht, wenn ich Text , etc... formatieren wollte.

Aber trotzdem funzt es bei mir diesmal nicht! Wieso??
Und banner2 bekomme ich gar nicht erst zu sehen!!! Wieso das alles?

Hier ein kleines Beispiel:
Code:

<div id="page">
        <div id="banner"><span class="bottom">Bitte unten stehen!!! banner</span></div>
        <div id="banner2"><span class="bottom">Bitte unten stehen!!! banner2</span></div>
</div>

Und die css Datei dazu:
Code:

#page { width: 778px; height: 415; top: 0px;left: 0px; position: relative;}
 
#banner { width: 778px; height: 50px; top: 0px;left: 0px; overflow: hidden; background: transparent; background-image: url(../images/banner.png); text-align: right; bottom: 0;}

#banner2        { width: 700px; height: 50px; top: 0px; left: 78px; overflow: hidden; background: transparent; text-align: left;}

Aber der Text steht trotzdem nicht unten! Wieso denn nur???


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:21 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023