hallo zusammen
Ich bin nun eigentlich schon fertig mit der Website.... (wurde sie noch
nicht mit Inhalt gefüllt)
allerdings gibt es da noch ein Problemchen, das ich leider nicht alleine
lösen konnte (ouch nicht mit googeln), deswegen schreibe ich hier in das Forum in der Hoffnung, dass
Sie mir bei meiner ersten Page weiterhelfen können.
und auf einer provisorischen Webseite habe ich mein Projekt schon mal
hochgeladen um zu sehen wo das Problem liegt:
http://www.boezberg.ch.vu
Mein problem:
-alle Links mit Umlaut funktionnieren nicht! (gibt es eine andere Lösung als ae zu schreiben?)ich habe schon mit ä probiert, geht auch nicht.
-sobald ich einen Inhalt, der länger als eine Zeile ist in den content
einfüge, so verschiebt sich der DIV content. Und zwischen content und header
soweie zwischen content und footer entsteht ein hässlicher Leerraum.
lässt sich das verhindern? Problem sichtbar bei http://www.boezberg.ch.vu unter
Galerie. (ich will dass der content zwischen footer und header den gesammten raum auffüllt, und ich will dass wenn ich in content einen langen inhalt habe, dass sich der footer automatisch nach unten verschiebt!)
html code:
<!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"><!-- InstanceBegin template="/Templates/TvBoezbergVorlage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Tv Boezberg</title>
<!-- InstanceEndEditable -->
<meta name="content-language" content="de" />
<meta name="author" content="Pascal Enderli" />
<meta name="description" content="Turnverein Bözberg" /> <!-- text noch organisieren-->
<meta name="copyright" content="Turnverein Bözberg" />
<meta name="publisher" content="Turnverein Bözberg" />
<meta name="robots" content="index,follow" />
<meta name="keywords" content="tv,turnverein,bözberg,boezberg,korbball,damenriege,u20,u-20,jugi,märi" />
<link href="../style.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div id="header"><!--Hintergrundtitelbild ist im css verankert-->
<img src="../design/trans.gif" alt="" width="1" height="190" border="0" /> <!--transparent Bild für textabstand von oben-->
<a href="../index.html">Home</a> <a href="../Galerie/galerie.html">Galerie</a> <a href="../Gästebuch/gästebuch.html">Gästebuch</a> <a href="../Kontakt/kontakt.html">Kontakt</a>
</div>
<div id="main"><!--beinhaltet left_background(hellblau),left(Musterbild) und content-->
<div id="left_background"><!--Hintergrundfarbe(hellblau) hinter dem Musterbild-->
<div id="left"><!--enthält das MusterHintergrundBild und die Menubar-->
<ul id="hichte" class="MenuBarVertical">
<li><a href="../index.html">Home</a></li>
<li><a href="../Geschichte/geschichte.html">Geschichte</a></li>
<li><a href="../Vorstand/vorstand.html">Vorstand</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Turnverein</a>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="programm.html">Programm</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Korbball</a>
<ul>
<li><a href="1_mannschaft.html">1.Mannschaft</a></li>
<li><a href="2_mannschaft.html">2.Mannschaft</a></li>
<li><a href="u20.html">U-20</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Damenriege</a>
<ul>
<li><a href="../Damenriege/home.html">Home</a></li>
<li><a href="../Damenriege/news.html">News</a></li>
<li><a href="../Damenriege/korbball.html">Korbball</a></li>
</ul>
</li>
<li><a href="../Männerriege/männerriege.html">Männerriege</a></li>
<li><a href="../Frauenriege/frauenriege.html">Frauenriege</a></li>
<li><a href="../Jugendriege/jugendriege.html">Jugendriege</a></li>
<li><a href="../Mädchenriege/mädchenriege.html">Mädchenriege</a></li>
<li><a href="../KITU/KITU.html">KITU</a></li>
<li><a href="../MUKI/MUKI.html">MUKI</a></li>
<li><a href="../Galerie/galerie.html">Galerie</a></li>
<li><a href="../Gästebuch/gästebuch.html">Gästebuch</a></li>
<li><a href="../Kontakt/kontakt.html">Kontakt</a></li>
</ul>
</div><!--left fertig (enthält das MusterHintergrundBild und die Menubar)-->
</div><!--left_background fertig (Hintergrundfarbe hellblau hinter dem Musterbild)-->
<!-- InstanceBeginEditable name="Inhalt" --><!--individuell bearbeitbar-->
<div id="content"><!--Inhalt der Website-->
</div><!--Inhalt der Website fertig-->
<!-- InstanceEndEditable -->
</div> <!-- main Fertig-->
<div id="footer"><!--Fusszeile-->
<img src="../design/trans.gif" alt="" width="1" height="25" border="0" /> <!--transparent Bild für textabstand von oben-->
© copyright Tv Boezberg
</div><!--fusszeile fertig-->
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("hichte", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
<!-- InstanceEnd --></html>
css code:
body {
background-color: #CCC;
font-size: 1em; /*normale Schriftgrösse*/
font-family: Arial, Helvetica, sans-serif;
color:#000;
padding:0px;
margin:0px;
}
#header {
height: 200px;
width: 1000px;
background-image: url(design/Tv%20boezberg%20header.jpg);
background-repeat: no-repeat;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: right;
letter-spacing: normal;
}
#main #left_background #left{/*Musterbild auf der linken seite*/
float: left;
width: 200px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: auto;
height: 600px;
background-image: url(design/left_design.jpg);
overflow: visible;
}
#main #content { /*dies ist das css zum inhalt*/
padding: 0px;
margin-left: 200px;
margin-right: 0px;
min-height:620px; /*hier wird die Mindesthöhe des content angeben */
height:expression(this.scrollHeight > 620 ? "auto":"620px"); /*hier wird aauch die Mindesthöhe des content angeben */
background-color: #FFF;
}
#main {
width: 1000px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #8cbef5;
}
#main #content #galerie {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#footer {
height: 38px;
width: 1000px;
clear: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-image: url(design/footer.gif);
background-repeat: repeat-x;
color: #000;
font-size: x-small;
font-style: oblique;
text-indent: 800px;
}
body a:hover {
text-decoration: none;
color: #60C;
font-weight: bold;
}
a:visited {
text-decoration: none;
font-weight: bold;
color: #333;
}
a:link{
text-decoration: none;
color: #333;
font-weight: bold;
}
a:active{
text-decoration: none;
color: #333;
font-weight: bold;
}
gruss Pascal