nicht angemeldet
Vertikale Aurichtung von Tabellen Inhalten
Wie kann ich einen inhalt einer Tabellen spalte vertikal ausrichten.
Das Problem besteht bei mir darin das ich einen Div tag mit der id main habe. er soll in einer 3 Spaltigen tabelle oben angezeigt werden aber er ist zentriert.
hier mal der code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200" class="left"></td>
<td width="700" align="center" valign="top">
<div id="main">
<div id="header" class="header"><img src="/templates/herr-der-ringe/images/header.png" width="750" height="195" /></div>
<div id="login"><?php mosLoadModules ( 'login' ); ?></div>
<div id="nav"><?php mosLoadModules ( 'navigation' ); ?></div>
<div id="date"><?php echo mosCurrentDate(); ?></div>
<div id="links"><?php mosLoadModules ( 'left' ); ?></div><div id="content"><?php mosMainBody(); ?></div>
</div>
<p align="center">
<?php include_once('includes/footer.php'); ?>
<?php mosLoadModules ( 'footer' ); ?>
</p>
</td>
<td class="right"> </td>
</tr>
</table>
Die dazugehörigen css auschnitte:
* {
margin: 0;
padding: 0;
}
body {
background-color: #000000;
}
div#main {
text-align: left; /* Seiteninhalt wieder links ausrichten */
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
}
div#header {
position: fixed;
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
height: 195px;
width: 750px;
}
div#login {
position: fixed;
margin-right: 0px;
margin-left: 750px;
margin-top: 0px;
}
div#nav {
text-align: left;
top: 200;
width: 550px;
position: fixed;
height: 30px;
}
div#date {
text-align: left;
right: 550px;
width: 200px;
position: fixed;
margin-right: 0px;
margin-top: 0px;
margin-left: 550px;
height: 30px;
}
div#links {
text-align: left;
width: 200px;
background-color: #FF0000;
position: fixed;
margin-top: 30px;
}
div#content {
text-align: left;
right: 200px;
width: 500px;
margin-left: 200px;
margin-top: 220px;
z-index: -1;
}
Hoffe mir kann einer helfen.
-
Wie kann ich einen inhalt einer Tabellen spalte vertikal ausrichten.
mit 'vertical-align: top/middle/bottom'
BTW:
1. Benutze zum Positionieren der Elemente entweder eine Tabelle *oder* CSS, aber nicht beides gleichzeitig.
Eine CSS-Lösung ist aber natürlich vorzuziehen.2. wenn du Layout-Probleme hast, kopiere doch bitte den Quellcode, den dein *Browser* zurückgibt und nicht den Quellcode aus deinem Editor. Den Inhalt deiner php-Dateien kann man nämlich nicht sehen und somit dein Problem auch viel schwerer nachvollziehen.
Grüße
gaby-
mit 'vertical-align: top/middle/bottom'
Geht Trotzdem Net.
Hier der quelltext aus dem browser OHNE tabellen, die sind nun entfernt. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;>charset=iso-8859-1" /> <title>Alianz der Völker - Home</title>
< <link rel="stylesheet" href="http://localhost/joomla/templates/herr-der-ringe/css/template_css.css" type="text/css"/><link rel="shortcut icon" href="http://localhost/joomla/images/favicon.ico" />
</head>
<body> <center>
<div id="main"> <div id="header" class="header"><img src="/templates/herr-der-ringe/images/header.png" width="750" height="195" /></div> <div id="login"> <table cellpadding="0" cellspacing="0" class="moduletable"> <tr> <th valign="top">
Login Form </th> </tr> <tr> <td> <form action="http://localhost/joomla/index.php" method="post" name="login" >
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td>
<label for="mod_login_username"> Username </label> <br /> <input name="username" id="mod_login_username" type="text" class="inputbox" alt="username" size="10" /> <br /> <label for="mod_login_password"> Password </label> <br />
<input type="password" id="mod_login_password" name="passwd" class="inputbox" size="10" alt="password" /> <br /> <input type="checkbox" name="remember" id="mod_login_remember" class="inputbox" value="yes" alt="Remember Me" /> <label for="mod_login_remember"> Remember me </label> <br /> <input type="submit" name="Submit" class="button" value="Login" /> </td>
</tr> <tr> <td> <a href="http://localhost/joomla/index.php?option=com_registration&task=lostPassword"> Lost Password?</a> </td> </tr> <tr>
<td> No account yet? <a href="http://localhost/joomla/index.php?option=com_registration&task=register"> Register</a> </td> </tr> </table>
<input type="hidden" name="option" value="login" /> <input type="hidden" name="op2" value="login" />
<input type="hidden" name="lang" value="english" /> <input type="hidden" name="return" value="http://localhost/joomla/index.php" /> <input type="hidden" name="message" value="0" /> <input type="hidden" name="force_session" value="1" /> <input type="hidden" name="j512fda1eee260559efe6d6fb1d096fcf" value="1" /> </form> </td> </tr> </table>
</div>
<div id="date">Tuesday, 31 July 2007</div> <div id="links"> <table cellpadding="0" cellspacing="0" class="moduletable">
<tr> <th valign="top"> Random Image </th> </tr> <tr> <td> No Images </td> </tr>
</table> <table cellpadding="0" cellspacing="0" class="moduletable"> <tr> <th valign="top"> Polls </th> </tr> <tr> <td>
<script language="javascript" type="text/javascript"> <!-- function submitbutton_Poll1() { var form = document.pollxtd1; var radio = form.voteid; var radioLength = radio.length; var check = 0;
if ( 'z' != 'z' ) { alert('You already voted for this item today.'); return; } for(var i = 0; i < radioLength; i++) { if(radio[i].checked) { form.submit(); check = 1; } } if (check == 0) { alert('No selection has been made, please try again'); } } //--> </script> <form name="pollxtd1" method="post" action="http://localhost/joomla/index.php?option=com_poll">
<table width="95%" border="0" cellspacing="0" cellpadding="1" align="center" class="poll"> <thead> <tr> <td style="font-weight: bold;"> This Joomla! installation was .... </td> </tr>
</thead> <tr> <td align="center"> <table class="pollstableborder" cellspacing="0" cellpadding="0" border="0"> <tr> <td class="sectiontableentry2" valign="top"> <input type="radio" name="voteid" id="voteid1" value="1" alt="1" /> </td> <td class="sectiontableentry2" valign="top">
<label for="voteid1"> Absolutely simple </label> </td> </tr> <tr> <td class="sectiontableentry1" valign="top"> <input type="radio" name="voteid" id="voteid2" value="2" alt="2" /> </td>
<td class="sectiontableentry1" valign="top"> <label for="voteid2"> Reasonably easy </label> </td> </tr> <tr> <td class="sectiontableentry2" valign="top"> <input type="radio" name="voteid" id="voteid3" value="3" alt="3" />
</td> <td class="sectiontableentry2" valign="top"> <label for="voteid3"> Not straight-forward but I worked it out </label> </td> </tr> <tr> <td class="sectiontableentry1" valign="top">
<input type="radio" name="voteid" id="voteid4" value="4" alt="4" /> </td> <td class="sectiontableentry1" valign="top"> <label for="voteid4"> I had to install extra server stuff </label> </td> </tr> <tr>
<td class="sectiontableentry2" valign="top"> <input type="radio" name="voteid" id="voteid5" value="5" alt="5" /> </td> <td class="sectiontableentry2" valign="top"> <label for="voteid5"> I had no idea and got my friend to do it </label> </td> </tr>
<tr> <td class="sectiontableentry1" valign="top"> <input type="radio" name="voteid" id="voteid6" value="6" alt="6" /> </td> <td class="sectiontableentry1" valign="top"> <label for="voteid6"> My dog ran away with the README ... </label> </td>
</tr> </table> </td> </tr> <tr> <td> <div align="center"> <input type="button" onclick="submitbutton_Poll1();" name="task_button" class="button" value="Vote" />
<input type="button" name="option" class="button" value="Results" onclick="document.location.href='http://localhost/joomla/index.php?option=com_poll&task=results&id=14';" /> </div> </td> </tr> </table>
<input type="hidden" name="id" value="14" /> <input type="hidden" name="task" value="vote" /> <input type="hidden" name="j1ae3494e899272e193acb67f0b7d2a8d" value="1" />
</form> </td> </tr> </table> <table cellpadding="0" cellspacing="0" class="moduletable"> <tr> <th valign="top"> Wer ist Online? </th>
</tr> <tr> <td> We have 1 guest online </td> </tr> </table> <table cellpadding="0" cellspacing="0" class="moduletable"> <tr>
<th valign="top"> Related Items </th> </tr> <tr> <td> </td> </tr> </table>
</div><div id="content"><table class="blog" cellpadding="0" cellspacing="0"><tr><td valign="top"><div> <table class="contentpaneopen"> <tr> <td class="contentheading" width="100%"> Welcome to Joomla! </td> </tr> </table>
<table class="contentpaneopen"> <tr>
<td width="70%" align="left" valign="top" colspan="2"> <span class="small"> Written by Web Master </span> </td> </tr> <tr> <td valign="top" colspan="2" class="createdate">
Saturday, 12 June 2004 </td> </tr> <tr> <td valign="top" colspan="2"> </td>
</tr> <tr> <td colspan="2" align="left" class="modifydate"> Last Updated ( Saturday, 12 June 2004 ) </td> </tr> <tr> <td align="left" colspan="2"> <a href="http://localhost/joomla/index.php?option=com_content&task=view&id=1&Itemid=1" class="readon">
Read more...</a> </td> </tr> </table>
<span class="article_seperator"> </span>
</div></td></tr><tr><td valign="top"><table width="100%" cellpadding="0" cellspacing="0"><tr><td valign="top" width="50%"> <table class="contentpaneopen"> <tr>
<td class="contentheading" width="100%"> Newsflash 1 </td> </tr> </table>
<table class="contentpaneopen"> <tr> <td width="70%" align="left" valign="top" colspan="2"> <span class="small">
Written by Administrator </span> </td> </tr> <tr> <td valign="top" colspan="2" class="createdate"> Monday, 09 August 2004 </td> </tr>
<tr> <td valign="top" colspan="2"></td> </tr> </table>
<span class="article_seperator"> </span>
</td><td valign="top" width="50%"> <table class="contentpaneopen">
<tr> <td class="contentheading" width="100%"> Newsflash 2 </td> </tr> </table>
<table class="contentpaneopen"> <tr> <td width="70%" align="left" valign="top" colspan="2">
<span class="small"> Written by Administrator </span> </td> </tr> <tr> <td valign="top" colspan="2" class="createdate"> Monday, 09 August 2004 </td>
</tr> <tr> <td valign="top" colspan="2"></td> </tr> </table>
<span class="article_seperator"> </span>
</td></tr></table></td></tr><tr><td valign="top"><div class="blog_more"> <div> <strong> More... </strong> </div> <ul> <li> <a class="blogsection" href="http://localhost/joomla/index.php?option=com_content&task=view&id=4&Itemid=1"> Newsflash 3</a>
</li> </ul> </div></td></tr></table></div>
</div> <p align="center"> <div align="center"> © 2007 Alianz der Völker</div>
<div align="center">
<a href="http://www.joomla.org">Joomla!</a> is Free Software released under the GNU/GPL License.</div> <table cellpadding="0" cellspacing="0" class="moduletable"> <tr> <td>
</td> </tr> </table> </p>
</center> </body> </html> <!-- 1185836731 -->
-
Hallo.
mit 'vertical-align: top/middle/bottom'
Geht Trotzdem Net.
Doch, das geht. Du wendest es in deinem Quelltext nur nicht an.
MfG, at-
Doch, das geht. Du wendest es in deinem Quelltext nur nicht an.
Ich wende es in der css an. wie alles sonst.
-
Hallo.
Ich wende es in der css an. wie alles sonst.
Du hast leider die Zugangsdaten für deinen Server nicht preisgegeben, so dass wir keinen Blick auf dein CSS werfen konnten. Überhaupt empfiehlt sich ab einem gewissen Umfang des Quellcodes ein Verweis auf die fehlerhafte Seite.
MfG, at-
Ich habe es noch nicht auf meinem Lokalen Webspace sondern teste es erst einmal bei mir auf dem Rechner. Aber wenn ihr wollt lade ich es ebend hoch.
-
Hallo.
Aber wenn ihr wollt lade ich es ebend hoch.
Das hat mit unserem Willen wenig zu tun, sondern damit, dass wir Fehler meist besser identifizieren, wenn wir etwas nach ihnen durchsuchen können. Wenn du also Schwierigkeiten mit deinem CSS hast, ist es mehr als sinnvoll, uns eben dieses CSS nicht vorzuenthalten.
MfG, at-
Also in ca. 10 min könnt ihr es unter adv.kota-wow.eu finden.
-
Also in ca. 10 min könnt ihr es unter adv.kota-wow.eu finden.
So. Sie ist nun einsehbar.
-
-
-
-
-
-
-
-