Frage stellen
Ich bin insgesamt noch sehr unbedarft, was die Anwendung von CSS betrifft, will aber meine Seite trotzdem mit DIV-Elementen, anstatt von tables aufbauen.
Meine Page basiert auf HTML/PHP und einem externen CSS Stylesheet.
Es soll ein 3 Column Liquid Design mit Header und Footer werden.
Ich bin derzeit noch fast ausschließlich mit dem coding beschäftigt. Meine Entscheidung bezüglich Farben, Buttons und so weiter wird erst fallen, wenn ich diese anfänglichen Probleme in den Griff bekommen habe. Also nicht wundern, dass es alles so ein bunter Mix ist
Problem:
Die Einteilung der Breite in insgesamt 100% width funktioniert. Aber ich will auch, dass die 3 mittleren columns die Höhe vollständig nutzen. Also height: 100%
Aber auch mit Hilfe von diversen Tutorials will es mir nicht gelingen - sobald ich keine Angabe in Pixel mehr habe, fällt alles in sich zusammen.
Wenn ihr euch meine Page mit festen Pixelangaben für die Höhe anseht, dann bleibt bei meiner Auflösung und festem Footer freier Hintergrund (in rot).
(Ich bin mir sicher, dass es noch viele weiter Fehler gibt, aber das hier ist für meinen Fortschritt am wichtigsten, denn es blockiert grade alles.
------------------
Hier die Codes (mit height 600px, damit der aktuelle Grundaufbau richtig abgebildet wird):
Der Source Code:
- 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href=favicon.ico" type="image/x-icon">
<title>The East Asia Experience</title>
<link href="style.css" rel="stylesheet" type="text/css"> <style type="text/css" media="screen"></style>
</head>
<body>
<?php
//php Content Script
$content = "";
$module = $_GET['module'];
$aticles = $_GET['articles'];
if ( $module=="")
{
$module=main;
}
if( $module=="articles" )
{
$content="pagecontent/".$module."/".$articles.".html";
}
else
{
$content="pagecontent/".$module.".html";
}
//___________________________________
//Keep menue points
if ( ($module=="pagecontent") )
{
echo "
<style type='text/css'>
#news { visibility: hidden; }
#pagecontent { visibility: visible;}
#main { visibility: hidden; }
</style>";
}
else if ( ($module=="home") || ($module=="aboutme") || ($module=="project") || ($module=="donation") || ($module=="contact") || ($module=="imprint") || ($module=="links") )
{
echo "
<style type='text/css'>
#news { visibility: hidden; }
#pagecontent { visibility: hidden; }
#main { visibility: visible;}
</style>";
}
?>
<div id="box">
<div id="header"><div align="center"><img src="layout/banner.png" width="1000" height="200" /> </div></div>
<div id="leftcol"><div id="news">
<p><b>News:</b><br>
<a href="index.php?module=website" class="menu">Website</a><br>
<a href="index.php?module=events" class="menu">Events</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><br>
</p>
</div>
<div id="pagecontent">
<b>Content:</b><br>
<a href="index.php?module=pageconent" class="menu">Content</a><br>
</div>
<div id="main">
<b>Main:</b><br>
<a href="index.php?module=aboutme" class="menu">About Me</a><br>
<a href="index.php?module=project" class="menu">The Project</a><br>
<a href="index.php?module=donation" class="menu">Donation</a><br>
<a href="index.php?module=contact" class="menu">Contact</a><br>
<a href="index.php?module=imprint" class="menu">Imprint</a><br>
<a href="index.php?module=links" class="menu">Links</a><br>
</div>
</div>
<div id="content">
<?php include($content);?>
</div>
<div id="rightcol">
<p>Right Column</p>
</div>
<div id="footer"><div align="center">Copyright © 2009 <a href="http://www.east-asia.info">The East Asia Project</a> || All Rights Reserved.</div></div>
</div>
</body>
</html>
Der CSS Code:
- Code: Alles auswählen
@charset "utf-8";
/* CSS Document */
html, body {
margin: 0px;
padding: 0px;
height: 100%;
background: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-decoration: none;
color: #FFFFFF;
text-align: left;
}
#box {
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
}
#header {
background: green;
width: 100%;
}
#leftcol {
min-height: 100%;
background: #778899;
float: left;
width: 10%;
height: 600px;
}
#content {
min-height: 100%;
background: #808080;
float: left;
width: 80%;
height: 600px;
}
#rightcol {
min-height: 100%;
background: #778899;
float: right;
width: 10%;
height: 600px;
}
#footer {
background: #2F4F4F;
position: absolute;
bottom: 0;
clear: both;
width: 100%;
}
#news
{
visibility: visible;
color: #696969;
position: absolute;
}
#pagecontent
{
visibility: hidden;
color: #696969;
position: absolute;
}
#main
{
visibility: hidden;
color: #696969;
position: absolute;
}
a:link {
COLOR: #FFFFFF;
}
a:visited {
COLOR: #FFFFFF;
}
a:hover {
COLOR: #778899;
}
a:active {
COLOR: #778899;
}
--------------------------
Vielen Dank für eure Hilfe!
Heliaca
