Der Text will nicht nach unten im div Tag...

18inch · #1 (**permalink**) 15.07.2004, 15:48

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 · #2 (**permalink**) 15.07.2004, 15:54

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

hemfrie

18inch · #3 (**permalink**) 15.07.2004, 15: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 · #4 (**permalink**) 15.07.2004, 16: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 · #5 (**permalink**) 15.07.2004, 16:39

Zitat:

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

Ähm ~

diese Ausage ist so nicht richtig ....... (setzen -------->

spass)

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>

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 · #6 (**permalink**) 15.07.2004, 17: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!

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 · #7 (**permalink**) 15.07.2004, 17: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

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

(das war böse, ich weiß ----------->aber auch Spass

)

18inch · #8 (**permalink**) 15.07.2004, 22: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 · #9 (**permalink**) 16.07.2004, 08: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

[mit diversen spans]

Aber ich sehe schon

Du hast das Beispiel nicht verstanden....

18inch · #10 (**permalink**) 16.07.2004, 10: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???

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Hover effekt auf ganze TD zelle	gandalf_hh	CSS	27	13.07.2011 19:06
Auf-/Zuklappen mit JS	crimi	Javascript & Ajax	7	23.09.2008 16:27
Float hängt sich durch's padding durch.	nick	CSS	3	16.01.2008 19:24
Probleme mit Abständen zwischen div´s....	darvida	CSS	4	09.07.2005 18:48
layout ohne tabellen	rw597678	CSS	3	23.04.2005 12:31