pernix: Layout für page

Hallo an alle,

ich möchte ein Layout erstellen, welches ich später mit dem CMS Redaxo weiterverarbeiten werde.

Ich stehe zur Zeit total auf dem Schlauch. Ich möchte ein Layout erstellen, in dem die Navigation links am Rand ist, rechts daneben der Inhalt und oben ein header und unten ein footer.
Zur Zeit sieht das ganze bei mir so aus:
http://wp1044892.wp072.webpack.hosteurope.de/index.php?article_id=1

Ich möchte es aber ungefähr hinbekommen wie hier:
http://de.selfhtml.org/css/layouts/anzeige/kopfundfuss.htm

Der Inhalt, der zur Zeit in meinen Basteleien zu sehen ist, soll erst mal nicht stören, es geht lediglich um das Gerüst, so wie ich es beschrieben habe.

Kann mir jemand helfen, was muss man in der CSS Datei umschreiben, damit es funktioniert, wie ich es haben will?

Vielen Dank und Viele Grüße
Daniel H.

  1. Hallo,

    Kann mir jemand helfen, was muss man in der CSS Datei umschreiben, damit es funktioniert, wie ich es haben will?

    Die CSS-Datei ist (möglicherweise) nicht das Problem. Du solltest erst mal den HTML-Code bereinigen. Sprich: Die Fehler die die Validatorer anzeigen beheben:

    [a href="http://validator.w3.org/check?verbose=1&uri=http%3A//wp1044892.wp072.webpack.hosteurope.de/index.php%3Farticle_id%3D1"]W3C-Validator[/a]

    (Falls du dass in deutsch bevorzugst kannst du auch den Validator hier nutzen: [a href="http://validator.de.selfhtml.org/validate"}SelfHTML Validator[/a]

    Der Browser springt durch den fehlenden Doctype in den Quirksmodus, wodurch die falsche Darstellung verursacht wird. Falls das Problem damit nicht gelöst ist, melde dich nochmal hier.

    Gruß

    Stareagle

    1. Hallo und vielen Dank schonmal für die netten Antworten!
      Ich versuche das gleich mal aus. Wenn weiterhin ein Problem auftreten sollte, melde ich mich einfach nochmal!

      LG
      Daniel

      1. Hallo,

        Ich möchte nun alles etwas abwechslungsreicher gestalten und zwar mit Fotografie. Diese möchte ich gerne im Header unterbringen. Jetzt habe ich ein kleines Problem und zwar ist die Breite des Headers in unterschiedlichen Auflösungen unterschiedlich groß. Die "Headergrafik" würde also unschön verschoben werden. Dies geschieht auch bei Skalieren des Fensters.
        Hat jemand einen Tipp wie man das am schönsten und professionellsten umsetzen könnte? Bin auch offen für neue Ideen!

        Hier erstmal der Link zum momenatenen Status der Seite:

        http://wp1044892.wp072.webpack.hosteurope.de/index.php?article_id=1

        Vielen Dank für Antworten und Viele Grüße
        Daniel

        1. Hi,

          setze die Fotografie in den Hintergrund. Du kannst sie evtl. zentrieren oder links ausrichten.
          Entweder Du nimmst ein überbreites Bild, das selbst ein 1600er Fenster ausfüllt, oder Du wählst eine zum Foto passende Hintergrundfarbe, die dann den Rest in breiteren Fenstern ausfüllt. Je nach Motiv und/oder Fotobearbeitung fällt der Übergang auch kaum auf.

          freundliche Grüße
          Ingo

  2. Hi.

    ich möchte ein Layout erstellen, welches ich später mit dem CMS Redaxo weiterverarbeiten werde.

    Oho, schön. Ich arbeite auch mit Redaxo.*

    Ich möchte es aber ungefähr hinbekommen wie hier:
    http://de.selfhtml.org/css/layouts/anzeige/kopfundfuss.htm

    Kann mir jemand helfen, was muss man in der CSS Datei umschreiben, damit es funktioniert, wie ich es haben will?

    Du hast die an sich gute Demo-Vorlage ja ziemlich ruiniert. Hier hast du einen Neuanfang.

    Herzliche Grüße
    Austin

    (*) Deshalb bin ich mal etwas großzügig. ;-)
    ----------------------------------------------

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
      <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
      <title>Dr. Splettsen | Home</title>
      <meta name="keywords" content="" />
      <meta name="description" content="" />
      <!--[if IE]>
                <style type="text/css">@import url(css/defaultIE.css);</style>
            <![endif]-->
      <link title="RSS" href="http://www.paralapse.com/feed.php5" type="application/rss+xml" rel="alternate" />
      <style type="text/css" media="screen"><!--
    body { color: #ccc; font-size: 100.01%; font-family: verdana, arial, sans-serif; line-height: 140%; background-color: #f7f7f7; margin: 0; padding: 0; float: left }
    a:link { color: #787878; text-decoration: none; border-bottom: 1px dashed #ababab }
    a:visited { color: #787878; text-decoration: none; border-bottom: 1px dashed #ababab }
    a:active { color: #fff; text-decoration: none }
    a:hover { color: #000; text-decoration: none }
    #container { background-color: #ccc; margin-right: auto; margin-left: auto; width: 750px }
    #logo { background: #fc0 url("Dr.%20Splettsen%20_%20Home_files/20000000.htm"); width: 750px; height: 120px }
    #navi { font-size: 0.8em; background-color: #343434; margin: 0; padding: 0; width: 240px; float: left }
    #navi a:link { color: #dedede; font-weight: bold; text-decoration: underline }
    #navi a:visited { color: #dedede; font-weight: bold; text-decoration: none }
    #navi a:active { color: #fff; font-weight: bold; text-decoration: underline }
    #navi a:hover { color: #fff; font-weight: bold; text-decoration: underline overline }
    #main { font-size: 0.8em; background-color: #eeeeee; margin: 0; padding: 10px 0 40px; width: 500px; float: right }
    #main p { padding-right: 30px; padding-left: 20px }
    #foot { color: #000; font-size: 0.8em; line-height: 30px; background-color: #c90; width: 750px; height: 30px; clear: both }
    #foot p { padding-left: 30px }
    #img { text-align: center; width: 150px; height: 150px; float: left }
    #newshead { color: #6e6e7e; font-size: 1.5em; font-weight: bold }
    #article { }
    .input { background-color: #cdcdcd; margin-bottom: 1px; border: solid 1px #fff }
    .left { margin: 0 1em 0.2em 0; float: left }
    .right { margin: 0 0 0.2em 1em; float: right }
    h1 { color: #6e6e7e; font-size: 1.5em; margin-left: 20px }
    h2 { color: #6e6e7e; font-size: 1.2em; margin-left: 20px }
    ul.contact { list-style-type: none }
    --></style>
     </head>

    <body>
      <div id="container">
       <div id="logo"></div>
       <div id="navi">
        <div id="header-nav">
         <ul class="nav1st">
          <li class="active"><a class="current" href="">Home</a></li>
          <li><a href="http://wp1044892.wp072.webpack.hosteurope.de/index.php?article_id=20">Praxis</a></li>
          <li><a href="http://wp1044892.wp072.webpack.hosteurope.de/index.php?article_id=3">Philosophie</a></li>
          <li><a href="http://wp1044892.wp072.webpack.hosteurope.de/index.php?article_id=2">Hom&ouml;opathie</a></li>
          <li><a href="http://wp1044892.wp072.webpack.hosteurope.de/index.php?article_id=4">Kontakt</a></li>
          <li><a href="http://wp1044892.wp072.webpack.hosteurope.de/index.php?article_id=5">Impressum</a></li>
         </ul>
        </div>
       </div>
       <div id="main">
        <h1>Geschafft. Die Demo l&auml;uft.</h1>
        <p>Hallo und herzlich willkommen bei REDAXO.</p>
        <p>Diese kleine Demo soll euch zeigen, wie REDAXO arbeitet.</p>
        <h2>hilfreiche und n&uuml;tzliche Links</h2>
        <ul>
         <li>die <a href="http://www.redaxo.de/4-0-doku-redaxo-de.html">Dokumentation</a> zu Redaxo</li>
         <li>das <a href="http://forum.redaxo.de/">Forum</a> f&uuml;r spezielle Fragen</li>
         <li><a href="http://www.redaxo.de/16-0-exportedemos.html">Exporte und andere Demos</a></li>
         <li><a href="http://www.redaxo.de/17-0-module.html">Module</a> geben der Webseite einen Inhalt</li>
         <li><a href="http://www.redaxo.de/18-0-addons.html">Addons</a> erweitern den Funktionsumfang</li>
        </ul>
        <p><strong>Anmerkung:</strong> Die hier verwendeten Bilder unterliegen dem Copyright und dienen hier nur der Anschauung. <strong>Bitte benutzt eigene Bilder!</strong></p>
       </div>
       <div id="foot">
        <p>Footer</p>
       </div>
      </div>
     </body>
    </html>