Frage stellen
bin im Thema CSS, DIV, fx.slide im Moment ziemlich am wueheln und haenge nun an einer Stelle und hoffe das mir einer von Euch einen entscheidenden Hinweis geben kann.
Schaut Euch mal das an: http://www.predi.biz/test.php. Dort überlappen sich zwei Bereiche: einmal der dunkelgruen gerahmte "Kalenderbereich" links und dahinter/rechts die gelbe info-box.
Der Kalenderbereich kann ausgeblendet werden, indem man auf EVENTS klickt (realisiert mit fx.slide). Beim Ausblenden sieht man, dass sich der Inhalt der Info-box "ausbreitet" und dabei die Gesamtbreite ausnutzt. Das ist soweit ganz ok.
Nun schaut mal http://www.predi.biz/test2.php an. Hier habe ich in die info-box noch eine Tabelle mit 90% Breite eingefuegt. Wenn der Kalenderbereich sichtbar ist, schiebt die Tabelle sich unter den Kalenderbereich. Ist der Kalenderbereich ausgeblendet, schiebt sich die Tabelle nn nach oben, da dort nun mehr Platz ist. Das gefaellt mir gar nicht.
Ich haette gerne, das die Info-Box erst rechts neben dem Kalenderbereich beginnt und sich dann automatisch verbreitert, wenn der Kalender ausgeblendet wird. D.h. die Tabelle mit 90% Breite verbreitert sich beim Ausblenden automatisch und veraendert dabei nicht die Position bzgl. Hoehe.
hier nun der html-code:
(startet hier am Besten mit dem Lesen nach
//++++++++++++++++++++++++++++++++++++++++++++++++
// SHOW EVENTS
//++++++++++++++++++++++++++++++++++++++++++++++++
- dort beginnt der kritische Bereich)
- Code: Alles auswählen
<!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" xml:lang="en" lang="en">
<head>
<title>PREDI.BIZ</title>
</head>
<body>
<script type='text/javascript' src='./js/mootools.js'></script>
<script type='text/javascript' src='./js/demo.js'></script>
<link rel='stylesheet' type='text/css' href='./css/test2.css'/>
<?php
// parameter
$start_page='test.php';
include ('lang_en.php');
echo "<div class='langbox'>";
echo "info-zeile";
echo "</div>";
echo "<div class='mainframe'>"; //HAUPTRAHMEN, umfasst alles unterhalb der obersten info-zeile
echo "<div class='headline'>"; //div fuer ueberschrift und kurzbeschreibung
echo "<div class='headline_name'>PREDI.BIZ</div>";
echo "<div class='headline_description'>infotext zu predi<br>2te Zeile</div>";
echo "</div>";
echo "<div class='filter_help'>";
echo "<div class='filter'>
<a id='v_toggle' href='#'><img src='pic/toggle.gif' width='11' height='11' alt='' />FILTER</a>
</div>";
echo "<div class='help'>
<a id='v_toggle_help' href='#'><img src='pic/toggle.gif' width='11' height='11' alt='' />HELP</a>
</div>";
echo "</div>";
echo "<div id='help_slide'>";
echo "HELPTEXT!!!!!";
echo "</div>";
echo "<div id='filter_slide'>";
echo "FILTER and DROPDOWNS!!!!";
echo "</div>";
echo "<div class='events_toggle'>
<a id='h_toggle' href='#'><img src='pic/toggle.gif' width='11' height='11' alt='' />EVENTS</a>
</div>";
//++++++++++++++++++++++++++++++++++++++++++++++++
// SHOW EVENTS
//++++++++++++++++++++++++++++++++++++++++++++++++
echo "<div class='events'>"; //rahmt das naechste div ein
echo "<div id='events_slide'>";
echo "<table width='100%' border='1'>";
echo "<tr><td width='18%' align='center' valign='top'>";
echo "17<br>SEP<br><br>";
echo "</td><td valign='top'>";
echo "Marathon Berlin</td></tr>";
echo "<tr><td width='18%' align='center' valign='top'>";
echo "31<br>DEZ<br><br>";
echo "</td><td valign='top'>";
echo "Marathon Marathon</td></tr>";
echo "<tr><td width='18%' align='center' valign='top'>";
echo "31<br>DEZ<br><br>";
echo "</td><td valign='top'>";
echo "Marathon Marathon</td></tr>";
echo "<tr><td width='18%' align='center' valign='top'>";
echo "31<br>DEZ<br><br>";
echo "</td><td valign='top'>";
echo "Marathon Marathon</td></tr>";
echo "</table>";
echo "</div>";
echo "</div>";
// END EVENTS
//++++++++++++++++++++++++++++++++++++++++++++++++++
//++++++++++++++++++++++++++++++++++++++++++++++++
// SHOW MAININFO
//++++++++++++++++++++++++++++++++++++++++++++++++
echo "<div class='info'>";
echo "info-box";
echo "<div class='info_head'>";
$main_inf="login";
switch ($main_inf) {
case "det":
include ('info_event_details.php');
break;
case "login":
echo "info-text with details for the event<br>hgu ilfbiea vbi lfbeashiv bhia ebhvi fbaehiv lbhi abhvi bhia bvhi fbaehiv bihf eabvhi lfbahl vbhfeal bvhli fbahivl bhifl abhvi bfahi lvbhfl bvh flbhvil fbhi";
echo "
<table width='90%' border='1'>
<tr><td> T A B E L L E/ZEILE1: hjikgfl bajiv bfi abvi fbjiav bfi bvjhi fbvil dbi</td></tr>
<tr><td> T A B E L L E/ZEILE2: hjikgfl bajiv bfi abvi fbjiav bfi bvjhi fbvil dbi</td></tr>
</table>
";
break;
}
echo "</div>"; // end div info_head
echo "</div>"; // end div info
echo "</div>";
?>
</body>
</html>
...und noch die CSS-Datei
- Code: Alles auswählen
table {
border-collapse:collapse;
margin-top:5px;
}
img {
border-style:none;
}
div.langbox {
min-width:800px;
position:absolute;
background-color:#0ff;
top:0px;
left:50px;
right:50px;
border-style:solid;
border-width:1px;
margin-top: 2px;
margin-bottom: 0px;
text-align:right;
font-size:x-small;
font-family:verdana;
text-decoration:none;
color:#444;
}
div.mainframe {
min-width:800px;
position:absolute;
top:20px;
left:50px;
right:50px;
padding-top:5px;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;
background-color:#fff;
border-style:solid;
border-width:1px;
}
div.headline {
width:100%;
height:31px;
background-color:#789;
}
div.headline_name {
float:left;
width:175px;
height:31px;
background-color:#cba;
border-style:solid;
border-width:1px;
text-align:left;
font-size:x-large;
font-family:verdana;
font-weight:bolder;
color:#fff;
}
div.headline_description {
height:28px;
padding-left:5px;
padding-top:4px;
background-color:#abc;
border-width:1px;
text-align:left;
font-size:x-small;
font-family:verdana;
font-weight:bold;
color:#333;
}
div.filter_help {
background-color:#eee;
min-height: 15px;
margin-top:2px;
border-width:0px;
border-style: solid;
}
div.filter {
float:left;
margin-top:0px;
border-style:solid;
border-width:0px;
text-align:left;
font-size:xx-small;
font-family:verdana;
font-weight:normal;
color:#f00;
}
#filter_slide {
background: #eee;
color: #f00;
padding: 0px;
border-style: solid;
border-width: 1px;
font-weight: normal;
}
div.help {
position:absolute;
right:5px;
margin-top:0px;
border-style:solid;
border-width:0px;
text-align:left;
font-size:xx-small;
font-family:verdana;
font-weight:normal;
color:#00f;
}
#help_slide {
background: #eee;
color: #00f;
border-style: solid;
border-width: 1px;
font-weight: normal;
}
div.events_toggle {
width:100%;
text-align:left;
font-size:xx-small;
font-family:verdana;
margin-top:2px;
border-style:solid;
border-width:0px;
}
div.events {
float:left;
border-width:3px;
border-style:solid;
border-color:#0a0;
}
#events_slide {
float:left;
width:250px;
padding:5px;
margin:5px;
border-style:solid;
border-color:#f0f;
border-width:1px;
}
div.info {
border-style:dotted;
border-width:2px;
text-align:center;
border-color:#bbb;
background-color:#ff6;
}
div.info_head{
margin:10px;
border-style:solid;
border-width:0px;
text-align:center;
background-color:#990;
}
@media all {
a:link
{
color : #333;
text-decoration : none;
font-style : normal;
}
a:visited
{
color : #333;
text-decoration : none;
font-style : normal;
}
a:hover
{
color : #00f;
text-decoration : none;
font-style : normal;
font-weight:normal;
}
a:active
{
color : #333;
text-decoration : none;
font-style : normal;
}
a:focus
{
color : #333;
text-decoration : none;
font-style : normal;
}
}
VIELEN DANK FUER jegliche Hinweise! (dazu gehoeren selbstverstaendlich auch Kritik an meiner moeglicherweise kuriosen Code-Struktur - SORRY)
Gruss, Bodo