|
|||
![]()
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> 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;} Wieso macht er das nicht??? |
Sponsored Links |
|
|||
![]() Zitat:
![]() ![]() hier mal eine kleine [vertical-align] Studie ![]() 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>
__________________
</ulle> |
|
|||
![]()
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;} 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> Ich bin einfach zu doof den Text auf den Bottom zu setzen! ![]() 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 |
|
|||
![]()
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 ![]() 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 ![]() ![]()
__________________
</ulle> |
|
|||
![]()
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 |
|
|||
![]() Zitat:
![]() Zitat:
![]() Aber ich sehe schon ![]()
__________________
</ulle> |
Sponsored Links |
|
|||
![]()
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> 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;} |
Sponsored Links |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hover effekt auf ganze TD zelle | gandalf_hh | CSS | 27 | 13.07.2011 20:06 |
Auf-/Zuklappen mit JS | crimi | Javascript & Ajax | 7 | 23.09.2008 17:27 |
Float hängt sich durch's padding durch. | nick | CSS | 3 | 16.01.2008 20:24 |
Probleme mit Abständen zwischen div´s.... | darvida | CSS | 4 | 09.07.2005 19:48 |
layout ohne tabellen | rw597678 | CSS | 3 | 23.04.2005 13:31 |