Damian: Zweispalten-Layout mit Head und Foot

SELF-Forum

Zweispalten-Layout mit Head und Foot

Damian
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich versuche gerade, ein Zweispalten-Layout mit Head und Foot über CSS zu realisieren. Links steht dabei eine per JS integrierte Navigation, grafisch per eigenem Hintergrund abgehoben. Der Text in der "Hauptbox" wird nun aber leider immer erst unterhalb der Navigation begonnen (wenn auch horizontal daneben). Wie kann ich erreichen, dass Navigation und Inhalt auf gleicher Höhe beginnen?!?

Hier mal der Code:

index.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Intranet</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="layout.css">
<style type="text/css"></style>

<script language="JavaScript" type="text/javascript">
<!--
function outline(id)
{
 if(document.getElementById(id).style.display == 'none')
 {
  document.getElementById(id).style.display = '';
 }
 else
 {
  document.getElementById(id).style.display = 'none';
 }
}
//-->
</script>

</head>
<body>

<div id="page">

<h1>TOOLS</h1>

<div id=navi>
<script language="javascript" src="navi.js"></script>
</div>

<div id="content">
<h2>Herzlich Willkommen...</h2>
<p>... auf den Tool-Seiten!</p>
</div>

<p id="footer">Intranet</p>

</div>
</body>
</html>

layout.css:

body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em 0;
    text-align: center;  /* Zentrierung im Internet Explorer */
  }

div#page {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 960px;
    padding: 0;
    background: #ffffe0 url(background.gif) repeat-y;
    border: 2px ridge silver;
  }
  html>body div#page {
    border-color: gray;  /* Farbangleichung an den Internet Explorer  */
  }

h1 {
    font-size: 1.5em;
    margin: 0; padding: 0.3em;
    text-align: center;
    background-color: #fed;
    border-bottom: 1px solid silver;
  }

ul#navi {
    font-size: 0.83em;
    float: left; width: 200px;
    margin: 0 0 1.2em; padding: 0;
  }
  ul#navi li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }
  ul#navi a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#navi a:link {
    color: black; background-color: white;
  }
  ul#navi a:visited {
    color: #666; background-color: white;
  }
  ul#navi a:hover {
    color: black; background-color: #eee;
  }
  ul#navi a:active {
    color: white; background-color: gray;
  }

div#content {
    margin: 0 0 1em 220px;
    padding: 0 1em;
    border: 5px black;
  }
  * html div#content {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
    margin-bottom: 0;
    boder: 5px black;
  }
  div#content h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
    color: navy;
  }
  div#content p {
    font-size: 1em;
    margin: 1em 0;
  }

p#footer{
    clear: both;
    font-size: 0.83em;
    margin: 0; padding: 0.1em;
    text-align: center;
    background-color: #fed;
    border-top: 1px solid silver;
  }

navi.js:

<!--
//edit the links as you would with regular html but remeber the '/" changes and follow the examples as a guide
document.write('<div><a href=# onclick=outline('projectA') return false><b>Projekt A</b></a>');
document.write('<br><span id=projectA style=display:none>');
document.write('&nbsp;&nbsp;&nbsp;Aktuelles<br>');
document.write('&nbsp;&nbsp;&nbsp;Informationen<br>');
document.write('&nbsp;&nbsp;&nbsp;Software/Downloads<br>');
document.write('&nbsp;&nbsp;&nbsp;AddOn<br>');
document.write('&nbsp;&nbsp;&nbsp;Kontakt');
document.write('</span></div>');
document.write('<div><a href=# onclick=outline('projectB') return false><b>Projekt B</b></a>');
document.write('<br><span id=projectB style=display:none>');
document.write('&nbsp;&nbsp;&nbsp;Aktuelles<br>');
document.write('&nbsp;&nbsp;&nbsp;Informationen<br>');
document.write('&nbsp;&nbsp;&nbsp;Software/Downloads<br>');
document.write('&nbsp;&nbsp;&nbsp;AddOn<br>');
document.write('&nbsp;&nbsp;&nbsp;Kontakt');
document.write('</span></div>');
document.write('<div><a href=# onclick=outline('projectC') return false><b>Projekt C</b></a>');
document.write('<br><span id=projectC style=display:none>');
document.write('&nbsp;&nbsp;&nbsp;Aktuelles<br>');
document.write('&nbsp;&nbsp;&nbsp;Informationen<br>');
document.write('&nbsp;&nbsp;&nbsp;Software/Downloads<br>');
document.write('&nbsp;&nbsp;&nbsp;AddOn<br>');
document.write('&nbsp;&nbsp;&nbsp;Kontakt');
document.write('</span></div>');
//-->

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Zweispalten-Layout mit Head und Foot

    L00NIX
    – Informationen zu den Bewertungsregeln

    Hallo.

    ich versuche gerade, ein Zweispalten-Layout mit Head und Foot über
    CSS zu realisieren. Links steht dabei eine per JS integrierte
    Navigation, grafisch per eigenem Hintergrund abgehoben.

    Navigation mit JavaScript? Ojeoje... ;-)

    So wie du sie eingebunden hast, sehen Leute ohne JavaScript bzw. mit
    deaktiviertem JavaScript dann gar nichts. -> Schlecht

    Probiers mal, die Tags <noscript> auch noch einzubinden (möglichst
    ohne document.write).

    Der Text in der "Hauptbox" wird nun aber leider immer erst
    unterhalb der Navigation begonnen (wenn auch horizontal daneben).
    Wie kann ich erreichen, dass Navigation und Inhalt auf gleicher
    Höhe beginnen?!?

    Die Navi mit Breite und float versehen, z.B.?

    div#navi
    {
     width: 20em;
     float: left;
    }

    Gruß
    L00NIX

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Zweispalten-Layout mit Head und Foot

      Damian
      – Informationen zu den Bewertungsregeln

      Hallo LOONIX!

      Navigation mit JavaScript? Ojeoje... ;-)

      So wie du sie eingebunden hast, sehen Leute ohne JavaScript bzw. mit
      deaktiviertem JavaScript dann gar nichts. -> Schlecht

      1. Ist eine Intranet-Lösung, sollte kein Problem sein.
      2. Hast du eine bessere Idee für eine zentral organisierte Navigation, die man außerdem per Click erweitern kann?!? Serverseitige Lösungen (php o.ä.) sind nicht möglich!

      Probiers mal, die Tags <noscript> auch noch einzubinden (möglichst
      ohne document.write).

      Wo und wie meinst du das?!? (Sorry, bin Java-Anfänger)

      Die Navi mit Breite und float versehen, z.B.?

      div#navi
      {
      width: 20em;
      float: left;
      }

      Habe ich doch bereits! Auszug aus der css-Datei:

      ul#navi {
          font-size: 0.83em;
          float: left; width: 200px;
          margin: 0 0 1.2em; padding: 0;
        }

      Anm.: die Breite muss auf Grund der Hintergrundgrafik in diesem Fall eben absolut sein.

      Hoffe, dass es noch weitere Lösungsvorschläge gibt und danke soweit!

      MfG
      Damian

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Zweispalten-Layout mit Head und Foot

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hello out there!

    Links steht dabei eine per JS integrierte Navigation,

    Also für unzählige Clients gar keine Navigation. Das dürfte deine Seite in die Nähe der Wertlosigkeit rücken.

    Wennschon JavaScript für Navigationszwecke, dann IMMER nur mit JavaScript-freier alternativer Zugangsmöglichkeit!

    Hier mal der Code:
    <div id=navi>
    <script language="javascript" src="navi.js"></script>

    Vorgeschriebenes type-Attribut fehlt.

    ul#navi

    Was soll das selektieren? Dein HTML und dein CSS haben eine Beziehungskrise..

    document.write('&nbsp;&nbsp;&nbsp;Aktuelles<br>');

    Sobald &nbsp; in Rudeln auftritt, machst du was falsch. Du möchtest margin/padding verwenden. Und das Ganze als Liste auszeichnen?

    See ya up the road,
    Gunnar

    --
    “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Zweispalten-Layout mit Head und Foot

      Damian
      – Informationen zu den Bewertungsregeln

      Hallo nochmal!

      ul#navi

      Was soll das selektieren? Dein HTML und dein CSS haben eine Beziehungskrise..

      Momentan noch gar nichts, richtig erkannt! Liegt daran, dass ich mir den Code bislang aus verschiedenen Beispielen zusammengebastelt habe. Aber das hat ja wohl nichts mit meinem eigentlichen Problem zu tun, oder?!?

      document.write('&nbsp;&nbsp;&nbsp;Aktuelles<br>');

      Sobald &nbsp; in Rudeln auftritt, machst du was falsch. Du möchtest margin/padding verwenden. Und das Ganze als Liste auszeichnen?

      s.o.!!!

      Würde mich freuen, auch noch eine Antwort auf mein eigentliches Problem zu bekommen. Habe im Forum schon einige gute Antworten von dir gelesen, aber darunter leider noch nichts zu diesem speziellen Problem gefunden.

      Noch eine Anmerkung: diese Seite wird ausschließlich mit dem IE6 angesehen (da nur im Intranet).

      Danke und Grüße
      Damian

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Zweispalten-Layout mit Head und Foot

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hello out there!

        ul#navi
        Was soll das selektieren?
        Momentan noch gar nichts, richtig erkannt!

        Wenn du für dein Element mit der ID 'navi' (Anführungszeichen wären da auch bei HTML nicht schlecht) keinerlei Style-Angaben machst, solltest du dich auch nicht wundern, dass du keine keinerlei Style-Angaben gemacht hast.

        Aber das hat ja wohl nichts mit meinem eigentlichen Problem zu tun, oder?!?

        Oder.

        Würde mich freuen, auch noch eine Antwort auf mein eigentliches Problem zu bekommen.

        Hast du schon.

        See ya up the road,
        Gunnar

        --
        “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. Zweispalten-Layout mit Head und Foot

        Ingo Turski Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hi,

        Noch eine Anmerkung: diese Seite wird ausschließlich mit dem IE6 angesehen (da nur im Intranet).

        Bist Du sicher?
        Ich war schon in verschieden Intranets und hatte mir immer meinen Firefox installiert oder notfalls vom Stick aus laufen lassen...

        Einen Grund für Dein Problem kann ich nicht erkennen. Stell doch mal eine Beispielseite online.
        Aber ein Tip: Das Beispiel aus SELFHTML geht vom standardkompatiblen Modus aus, der über den DOCTYPE aktiviert wird. Übernehme diesen bitte auch und nicht den eines völlig veralteten Codes.

        freundliche Grüße
        Ingo

        --
        [barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln