Homepage Layout

smyle

Erfahrenes Mitglied
Guten Tag
Habe mit CSS ein gutes Layout hinbekommen.
Nun habe ich das Problem, dass der Inhalt welcher mit PHP automatisch geladen wird höher als 800px ist.
Dieser Inhalt wird somit über die unterste Linie angezeigt, anstelle dieser nach unten zu verschieben und die Layout-Höhe am Inhalt anzupassen.
Habe herausgefunden das man eine mindesthöhe angeben kann. Habe diese mindesthöhe mit 800px angegeben und es hat funktioniert.
Das Problem, ich habe zwei Spalten. Auf der linken Spalte sind die Links und auf der rechten Spalte ist der Inhalt.
Die Linke Seite bleibt 800px und die rechte Spalte passt sich dem Inhalt an. (Siehe Anhang)
Meine Frage ist nun ob es möglich wäre den CSS Code und die div’s so anzupassen das sich beide Spalten an der Höhe des Inhalts anpassen.
Hier ist meine php Datei.
HTML:
<body class="body">
<div class="content">
<div class="divleft">
  <div class="divLogo"><a href=" "><img src=" " width="220px"><a></div>
  <!--  <div class="divMenu">-->
	<div class="divMenuLink"><a class="button" href=" ">Home</a></div>
	<div class="divMenuLink"><a class="button" href=" ">Preisliste</a></div>
	<div class="divMenuLink"><a class="button" href="” >Events</a></div>  
 <!-- </div> -->
<div class="divTime">
   <h2 class="time">&Ouml;ffnunszeiten</h2> <br />
   <table border="0" align="center">
     <tr>
	   <td style="text-align: left;">Mo-Fr</td>
	   <td>08:00 - 17:00</td>
	 </tr>
     <tr>
	   <td style="text-align: left;">Sa</td>
	   <td>10:00 - 17:00</td>
	 </tr>	 
   </table>	
</div> 
</div>
<div class="divRight">
	<div class="divHeader">
	  <div class="divHeaderLink"><a href=" ">Kontakt</a></div>
	</div>
	<div class="divContent">

<?PHP 
if(isset($_SESSION["page"]) != "") 
  { 
    //echo $_SESSION["page"];
    if($_SESSION["page"] == "preisliste") {include'management/preisliste.htm';}
    else if($_SESSION["page"] == "event") {include'management/event.htm';}
    else if($_SESSION["page"] == "kontakt") {include'management/kontakt.htm';}
    else {include'management/home.htm';}
  }
else
  {
    include'management/home.htm';
  }  
?>
	
	</div>
</div>
<!--
<div class="divFooter">
  <div class="divCopyright">...</div>
</div>-->
</div>
<div style="margin-left:auto;margin-right:auto;width:1230px; border:0px solid black;">
  <div style="border:0px solid black; margin-left:5px;font-size:8px;">…</div>
</div>

</body>
Hier ist die CSS Datei:
CSS:
.body  {
		background-color:#EAEAEA;
		font-family:Verdana, Arial, sans-serif;
	  }

.content
              {
		margin-left:auto; 
		margin-right:auto; 
		width:1230px; 
		border:0px solid yellow; 
		background-color:#EFEFEF;
	   }			 
.divleft  {
		float:left; 
		border:1px solid; 
		width:230px; 
		height:800px;
		/*min-height:800px;*/
		/*margin-left:5px;*/
	    }	  
.divRight{
		float:right;
		border:1px solid;
		width:997px; 
		height:800px; 
		/*min-height:800px;*/
		border-left:0px solid;
        }
		
.divLogo  {
		border:0px solid black; 
		margin:5px;
		 } 
		 
img  { 
		border: 0px; 
	/*	border:2px solid #000;*/
	}

.divMenuLink {
		margin:5px;
		margin-top:4px;
			 }		  
.divCopyright   {
		border:0px solid black; 
		margin-left:5px;
		font-size:8px;
			}
.divFooter {
		border:1px solid black;
		   }
.divHeader {
		border:1px solid black; 
		border-top:0px solid; 
		border-left:0px solid; 
		border-right:0px solid;
		   }
.divHeaderLink {
		border:0px solid black; 
		text-align:right; 
		margin-left:5px; 
		margin-right:5px;
		   }
.divContent  {
		margin-left:auto; 
		margin-right:auto;
		margin-top:10px;
		margin-bottom:10px;
			}
.divTime {
		margin:5px;
		margin-top:20px;
        color:#565656;
        background-color:#EFEFEF;
        width:200px;
        padding:7px;
        font-size:14px;
        font-family:Verdana, Arial, sans-serif;
        font-weight:bold;
        text-align:center;
        border:2px solid #000;
		 }
.divTime:hover 	{
		color:black;
		background-color:#D9D9D9;
		width:200px; 
			    }
		 
/* Layout für Tables*/
.divPReise {
        color:#565656;
        background-color:#EFEFEF;
        padding:7px;
        font-size:14px;
        font-family:Verdana, Arial, sans-serif;
        font-weight:bold;
        text-align:left;
        border:2px solid #000;
		width:700px;
		margin-left:auto; 
		margin-right:auto;		
		   }
.divPReise:hover 	{
		color:black;
		background-color:#D9D9D9;
		width:700px;
		margin-left:auto; 
		margin-right:auto;		
			         }		   
.tableTitel {
        color:#565656;
        background-color:#EFEFEF;
        padding:7px;
        font-size:14px;
        font-family:Verdana, Arial, sans-serif;
        font-weight:bold;
        text-align:center;
        border:2px solid #000;
		width:700px;
			}
			
.tableContent {
	/*	border:1px solid black;
		background-color:#D9D9D9;
		width:700px;*/
        color:#565656;
        background-color:#EFEFEF;
        padding:7px;
        font-size:14px;
        font-family:Verdana, Arial, sans-serif;
        font-weight:bold;
        text-align:left;
        border:2px solid #000;
		width:700px;		
			  }	
.tableContent:hover 	{
		color:black;
		background-color:#D9D9D9;
		width:700px;
			         }
Hier der Inhalt:
HTML:
<div class="divPReise" align="center" >
<table align="center" border="0" class="tableTitel">
  <tr>
   <td><h1>Events</h1></td>
  </tr>
</table>
<table border="0" align="center" class="tableContent">
  <tr>
    <td width="50%" height="1000px"><h2>Event</h2></td>
	<td><h2>Flyer</h2></td>
  </tr>
  <tr>
    <td colspan="2"><hr style="border-bottom:1px solid black;"></hr></td>
  </tr>
  <tr>
    <td>Neuer&ouml;ffnung</td>
	<td><a href="management/eventsflyer/NEUEROEFFNUNG.pdf" target="_blank">Flyer Neuer&ouml;ffnung</a></td>
  </tr>
  <tr>
    <td></td>
	<td></td>
  </tr>
  <tr>
    <td></td>
	<td></td>
  </tr>
  <tr>
    <td></td>
	<td></td>
  </tr>  
</table>
</div>
Ich bin euch sehr dankbar wenn ihr mir helfen könnt.

Liebe Grüsse und einen schönen Tag wünsche ich euch.
Eure Smyle ;)
 

Neue Beiträge

Zurück