zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden Der Text will nicht nach unten im div Tag...

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.07.2004, 16:48
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.07.2004
Beiträge: 71
18inch befindet sich auf einem aufstrebenden Ast
Standard 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???
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.07.2004, 16:54
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.777
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

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


hemfrie
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.07.2004, 16:59
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.07.2004
Beiträge: 71
18inch befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #4 (permalink)  
Alt 15.07.2004, 17:22
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.777
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 15.07.2004, 17:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
</ulle>
Mit Zitat antworten
  #6 (permalink)  
Alt 15.07.2004, 18:03
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.07.2004
Beiträge: 71
18inch befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 15.07.2004, 18:40
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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 )
__________________
</ulle>
Mit Zitat antworten
  #8 (permalink)  
Alt 15.07.2004, 23:59
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.07.2004
Beiträge: 71
18inch befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 16.07.2004, 09:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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....
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 16.07.2004, 11:04
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.07.2004
Beiträge: 71
18inch befindet sich auf einem aufstrebenden Ast
Standard

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???
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:01 Uhr.