layout und link problem von suit, 15.12.2008 18:57

layout und link problem

Pascal 15.12.2008 18:42

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 (auch 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 Website habe ich mein Projekt schon mal
hochgeladen um zu sehen wo das Problem liegt:
www.boezberg.ch.vu

Mein Problem:
-alle Links mit Umlaut funktionieren 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 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>&nbsp;&nbsp;&nbsp;<a href="../Galerie/galerie.html">Galerie</a>&nbsp;&nbsp;&nbsp;<a href="../Gästebuch/gästebuch.html">G&auml;stebuch</a>&nbsp;&nbsp;&nbsp;<a href="../Kontakt/kontakt.html">Kontakt</a>&nbsp;&nbsp;&nbsp;  
</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&auml;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&auml;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&auml;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-->  
&copy; 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:

 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

Beitrag melden

– Informationen zu den Bewertungsregeln

layout und link problem
suit Homepage des Autors 15.12.2008 18:57

css
– Informationen zu den Bewertungsregeln
Mein Problem:
-alle Links mit Umlaut funktionieren nicht! (gibt es eine andere Lösung als ae zu schreiben?)ich habe schon mit ä probiert, geht auch nicht.

die zeichen müssen kontextgerecht codiert werden - entitäten (bzw referenzen darauf) sind in diesem kontext falsch - hier ist url-encoding gefragt

-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

die elemente haben eine feste höhe - darum wachsen sie nicht mit - dank overflow: visible; wächst aber der inhalt raus
Beitrag melden

–
Informationen zu den Bewertungsregeln
layout und link problem
Gunnar Bittersmann Homepage des Autors 19.12.2008 01:33

css
– Informationen zu den Bewertungsregeln
@@Pascal:

Ich bin nun eigentlich schon fertig mit der Website.... (wurde sie noch
nicht mit Inhalt gefüllt)

Oh-oh. „Wir brauchen noch Texte!“ [Dölling]

<html xmlns="http://www.w3.org/1999/xhtml">
--8<--
<meta name="content-language" content="de" />

Die Sprachangabe solltest du auch mit @lang und @xml:lang machen:
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

Tutorial: Declaring Language in XHTML and HTML
Internationalization Best Practices: Specifying Language in XHTML & HTML Content, bes. k/π 4–6

Live long and prosper,
Gunnar

--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Pascal: layout und link problem