• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS und relative größen

Status
Für weitere Antworten geschlossen.
Puccini

Puccini

Neues Mitglied
Hi!
Ich bin neuling auf dem gebiet css und komme da gleich mal so garnich klar XD

also:
ich hab einen div navigation links und einen div content in dem oben ein div topmenu ist und darunter ein div main.
der div main setzt sich nochmals aus 2 div zusammen, tabellenkopf und tabelleninhalt.

navigation ist fest 150px breit, div content soll den rest der seite einnehmen. hab ich also auf auto gestellt.
der div topmenü soll innerhalb des divs contetn 99% einnehmen oder auto overflow machen. klappt auch.
der div content soll overflow hidden sein, ist er auch.
da das topmenü unterschiedlich hoch sein kann, wollte ich gern das sich mein main dem anpasst und nur den rest einnimmt den div content noch zur verfügung stellt.
was muss ich da einstellen?
div content ist 600px hoch.
ich häng mal mein css an:

Code: 
div#navigation {
 height: 600px;
 margin-top: 0px;
 margin-left: 0px;
 border: 2px solid #C0C0C0;
 background-color: #FFD39B;
 width: 150px;
}
div#content{
 float: left;
 width: 99%;
 border: thin solid;
 margin-left: 1px;
 margin-right: 10px;
 height: 600px;
 overflow: hidden;
}
div#topmenu {
 padding: 0px;
 float: inherit;
 margin: 0px;
 height: auto;
 width: 99%;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 background-color: #00FFFF;
 border: 2px solid #C0C0C0;
 overflow: auto;
 min-height: 100px;
}
div#main {
 border: 1px;
 padding: 0px;
 margin: 0px;
 float: left;
 width: 99%;
 height: 500px;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 13px;
 border: 2px solid #C0C0C0;
 overflow: auto;
}
div#footer{
 float: left;
 width: 100%;
 margin-top: 3px;
 border: 2px solid Silver;
}
div#login{
 width: 200px;
 border: 2px dashed Silver;
 background-color: #FFF8DC;
}
div#tabellenkopf{
    position:fixed;
    top:0px; left:0px; right:0px;
    background:#efefef;
  height:20px;
    text-align:center;
    padding:10px;
}
div#tabelleninhalt{
 padding-top: 4.85em;
 padding-bottom: 3em;
 padding-left: 0;
 height: 350px;
 border: 2px solid Gray;
}
input.buttonSitebar{
 border-top-width: thin;
 border-right-width: thin;
 border-bottom-width: thin;
 border-left-width: thin;
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 width: 90%;
 margin-top: 2px;
 margin-bottom: 2px;
 font: Arial;
}
.checkbox{
 border: 1px solid #000000;
}

XD hoffe es ist so alles richtig :<
ich wollte auch das der tabellenkopf nicht mitgescrollt wird wenn man den tabelleninhalt scrollt.
aber das funktioniert alles garnet -.-

pls help :<
 
wär immer schön wenn du auch den html code posten würdest, macht das checken leichter, da sich auch da gern fehler einschleichen.

oder nen link posten wo das ding grad on ist
 
sorry XD
den code sollte man dazugeben LOL

:D
also, hier die index:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Dadenerfassung</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <?php
 /** Überprüfung der Anmeldung! 
  Falls der User nicht eingelogt sein sollte, wird nur das Login angezeigt.
  */ 
 if($_SESSION['login_ok']==false)
 {
  include "anmeldung.php";
 }
 else
 {
 //Erstellen der Site-Struktur
 echo '<table>';
 echo '<tr><td>';
  echo '<div id="navigation">';
   include "sitebar.php";
  echo '</div>';
 echo '</td><td>';
  /** Der Seiteninhalt
   Topmenu beinhaltet die Auswahl der möglichen Felder so wie eine Suche
   Main beinhaltet den selectierten Inhalt der Tabelle*/
  echo '<div id="content">
   <div id="topmenu">';
    include "topmenu.php";
   echo '</div>
   <div id="main">';
     if($aktiveMain=="")
      include "willkommen.php";
     else
      /** Unterscheidung welche Site angezeigt werden muss*/
      include $aktiveMain.".php";    
   echo '</div>
   </div>  
 </td></tr>
 <tr><td colspan="2">
  <!--Fussleiste-->
  <div id="footer">
   <center> '; 
     echo date("H:i")."Uhr, dem ".date('d.m.y');  
     echo "-".$_SESSION['anzabfragen']."-"; 
    echo '<br>
    Diese Website ist für eine Auflösung von 1024x768 optimiert!
   </center>
  </div>';
 echo '</td></tr>';
 echo '</table>';
 }
 ?>
</body>
</html>

und nun die seite mit dem tabelleninhalt..
Code: 
<link rel="stylesheet" type="text/css" href="style.css">
<table border="1" style="table-layout: auto;"> 
 <div id="tabellenkopf">
 <tr>
 <td>Bearbeiten</td>
  <?php 
  //$breite = sizeof($Daten[0]);
  for($i=0;$i<$breite;$i++)
  {
   echo "<td>".$Daten[0][$i]."</td>";
  }
  ?>
 <td>Löschen</td>
 </tr>
 </div>
 <div id="tabelleninhalt">
 <?php for($i=1;$i<sizeof($Daten);$i++)
 {
  if($i%2==0)
   $bgcolor="#BDBDBD";
  else
   $bgcolor="#D4D4D4";
  
  echo '<tr bgcolor="'.$bgcolor.'">'; 
  echo "<td>B</td>";
  for($k=0;$k<$breite;$k++)
  {
  
   echo "<td>".$Daten[$i][$k]."</td>";
  }
  echo '<td><input type="checkbox" name="loeschen" value="Zeile'.$k.'"></td>';
  echo "</tr>";
 }
 ?>
 </div>
</table>

da is jetzt bittel php mit drin, weil der inhalt dynamisch erzeugt wird...
aber ich denk mal ihr kommt damit klar ;)

mein ziel war es halt den tabellenkopf fest zu bekommen und nur den tabelleninhalt zum scrollen zu bringen...
hat aber so net geklappt. weil die tabelle ja erst nach dem div geschlossen wird, und eine tabelle für den kopf und eine für den inhalt geht auch ent, weil dann die spalten unterschiedlich breit sind...
ach is das kompliziert XD

könnt ihr damit was anfangen??
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben