tag:forum.selfhtml.org,2005:/self Layout für page – SELFHTML-Forum 2006-10-03T21:50:46Z https://forum.selfhtml.org/self/2006/sep/30/layout-fuer-page/1028573#m1028573 pernix danhyn2@icqmail.com 2006-09-30T18:47:06Z 2006-09-30T18:47:06Z Layout für page <p>Hallo an alle,</p> <p>ich möchte ein Layout erstellen, welches ich später mit dem CMS Redaxo weiterverarbeiten werde.</p> <p>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.<br> Zur Zeit sieht das ganze bei mir so aus:<br> http://wp1044892.wp072.webpack.hosteurope.de/index.php?article_id=1</p> <p>Ich möchte es aber ungefähr hinbekommen wie hier:<br> http://de.selfhtml.org/css/layouts/anzeige/kopfundfuss.htm</p> <p>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.</p> <p>Kann mir jemand helfen, was muss man in der CSS Datei umschreiben, damit es funktioniert, wie ich es haben will?</p> <p>Vielen Dank und Viele Grüße<br> Daniel H.</p> https://forum.selfhtml.org/self/2006/sep/30/layout-fuer-page/1028575#m1028575 stareagle stareagle@stareagle.de 2006-09-30T20:56:04Z 2006-09-30T20:56:04Z Layout für page <p>Hallo,</p> <blockquote> <p>Kann mir jemand helfen, was muss man in der CSS Datei umschreiben, damit es funktioniert, wie ich es haben will?</p> </blockquote> <p>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:</p> <p>[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]</p> <p>(Falls du dass in deutsch bevorzugst kannst du auch den Validator hier nutzen: [a href="http://validator.de.selfhtml.org/validate"}SelfHTML Validator[/a]</p> <p>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.</p> <p>Gruß</p> <p>Stareagle</p> https://forum.selfhtml.org/self/2006/sep/30/layout-fuer-page/1028574#m1028574 Austin 2006-09-30T21:14:40Z 2006-09-30T21:14:40Z Layout für page <p>Hi.</p> <blockquote> <p>ich möchte ein Layout erstellen, welches ich später mit dem CMS Redaxo weiterverarbeiten werde.</p> </blockquote> <p>Oho, schön. Ich arbeite auch mit Redaxo.*</p> <blockquote> <p>Ich möchte es aber ungefähr hinbekommen wie hier:<br> http://de.selfhtml.org/css/layouts/anzeige/kopfundfuss.htm</p> </blockquote> <blockquote> <p>Kann mir jemand helfen, was muss man in der CSS Datei umschreiben, damit es funktioniert, wie ich es haben will?</p> </blockquote> <p>Du hast die an sich gute Demo-Vorlage ja ziemlich ruiniert. Hier hast du einen Neuanfang.</p> <p>Herzliche Grüße<br> Austin</p> <p>(*) Deshalb bin ich mal etwas großzügig. ;-)<br> ----------------------------------------------</p> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></p> <p><html xmlns="http://www.w3.org/1999/xhtml"></p> <p><head><br>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /><br>   <title>Dr. Splettsen | Home</title><br>   <meta name="keywords" content="" /><br>   <meta name="description" content="" /><br>   <!--[if IE]><br>             <style type="text/css">@import url(css/defaultIE.css);</style><br>         <![endif]--><br>   <link title="RSS" href="http://www.paralapse.com/feed.php5" type="application/rss+xml" rel="alternate" /><br>   <style type="text/css" media="screen"><!--<br> 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 }<br> a:link { color: #787878; text-decoration: none; border-bottom: 1px dashed #ababab }<br> a:visited { color: #787878; text-decoration: none; border-bottom: 1px dashed #ababab }<br> a:active { color: #fff; text-decoration: none }<br> a:hover { color: #000; text-decoration: none }<br> #container { background-color: #ccc; margin-right: auto; margin-left: auto; width: 750px }<br> #logo { background: #fc0 url("Dr.%20Splettsen%20_%20Home_files/20000000.htm"); width: 750px; height: 120px }<br> #navi { font-size: 0.8em; background-color: #343434; margin: 0; padding: 0; width: 240px; float: left }<br> #navi a:link { color: #dedede; font-weight: bold; text-decoration: underline }<br> #navi a:visited { color: #dedede; font-weight: bold; text-decoration: none }<br> #navi a:active { color: #fff; font-weight: bold; text-decoration: underline }<br> #navi a:hover { color: #fff; font-weight: bold; text-decoration: underline overline }<br> #main { font-size: 0.8em; background-color: #eeeeee; margin: 0; padding: 10px 0 40px; width: 500px; float: right }<br> #main p { padding-right: 30px; padding-left: 20px }<br> #foot { color: #000; font-size: 0.8em; line-height: 30px; background-color: #c90; width: 750px; height: 30px; clear: both }<br> #foot p { padding-left: 30px }<br> #img { text-align: center; width: 150px; height: 150px; float: left }<br> #newshead { color: #6e6e7e; font-size: 1.5em; font-weight: bold }<br> #article { }<br> .input { background-color: #cdcdcd; margin-bottom: 1px; border: solid 1px #fff }<br> .left { margin: 0 1em 0.2em 0; float: left }<br> .right { margin: 0 0 0.2em 1em; float: right }<br> h1 { color: #6e6e7e; font-size: 1.5em; margin-left: 20px }<br> h2 { color: #6e6e7e; font-size: 1.2em; margin-left: 20px }<br> ul.contact { list-style-type: none }<br> --></style><br>  </head></p> <p><body><br>   <div id="container"><br>    <div id="logo"></div><br>    <div id="navi"><br>     <div id="header-nav"><br>      <ul class="nav1st"><br>       <li class="active"><a class="current" href="">Home</a></li><br>       <li><a href="http://wp1044892.wp072.webpack.hosteurope.de/index.php?article_id=20">Praxis</a></li><br>       <li><a href="http://wp1044892.wp072.webpack.hosteurope.de/index.php?article_id=3">Philosophie</a></li><br>       <li><a href="http://wp1044892.wp072.webpack.hosteurope.de/index.php?article_id=2">Hom&ouml;opathie</a></li><br>       <li><a href="http://wp1044892.wp072.webpack.hosteurope.de/index.php?article_id=4">Kontakt</a></li><br>       <li><a href="http://wp1044892.wp072.webpack.hosteurope.de/index.php?article_id=5">Impressum</a></li><br>      </ul><br>     </div><br>    </div><br>    <div id="main"><br>     <h1>Geschafft. Die Demo l&auml;uft.</h1><br>     <p>Hallo und herzlich willkommen bei REDAXO.</p><br>     <p>Diese kleine Demo soll euch zeigen, wie REDAXO arbeitet.</p><br>     <h2>hilfreiche und n&uuml;tzliche Links</h2><br>     <ul><br>      <li>die <a href="http://www.redaxo.de/4-0-doku-redaxo-de.html">Dokumentation</a> zu Redaxo</li><br>      <li>das <a href="http://forum.redaxo.de/">Forum</a> f&uuml;r spezielle Fragen</li><br>      <li><a href="http://www.redaxo.de/16-0-exportedemos.html">Exporte und andere Demos</a></li><br>      <li><a href="http://www.redaxo.de/17-0-module.html">Module</a> geben der Webseite einen Inhalt</li><br>      <li><a href="http://www.redaxo.de/18-0-addons.html">Addons</a> erweitern den Funktionsumfang</li><br>     </ul><br>     <p><strong>Anmerkung:</strong> Die hier verwendeten Bilder unterliegen dem Copyright und dienen hier nur der Anschauung. <strong>Bitte benutzt eigene Bilder!</strong></p><br>    </div><br>    <div id="foot"><br>     <p>Footer</p><br>    </div><br>   </div><br>  </body><br> </html></p> https://forum.selfhtml.org/self/2006/sep/30/layout-fuer-page/1028576#m1028576 pernix danhyn2@icqmail.com 2006-10-01T11:14:18Z 2006-10-01T11:14:18Z Layout für page <p>Hallo und vielen Dank schonmal für die netten Antworten!<br> Ich versuche das gleich mal aus. Wenn weiterhin ein Problem auftreten sollte, melde ich mich einfach nochmal!</p> <p>LG<br> Daniel</p> https://forum.selfhtml.org/self/2006/sep/30/layout-fuer-page/1028577#m1028577 pernix danhyn2@icqmail.com 2006-10-03T15:00:16Z 2006-10-03T15:00:16Z Layout für page <p>Hallo,</p> <p>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.<br> Hat jemand einen Tipp wie man das am schönsten und professionellsten umsetzen könnte? Bin auch offen für neue Ideen!</p> <p>Hier erstmal der Link zum momenatenen Status der Seite:</p> <p>http://wp1044892.wp072.webpack.hosteurope.de/index.php?article_id=1</p> <p>Vielen Dank für Antworten und Viele Grüße<br> Daniel</p> https://forum.selfhtml.org/self/2006/sep/30/layout-fuer-page/1028578#m1028578 Ingo Turski http://www.1ngo.de/web/ 2006-10-03T21:50:46Z 2006-10-03T21:50:46Z Layout für page <p>Hi,</p> <p>setze die Fotografie in den Hintergrund. Du kannst sie evtl. zentrieren oder links ausrichten.<br> 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.</p> <p>freundliche Grüße<br> Ingo</p> <div class="signature">-- <br> [<a href="http://www.1ngo.de/web/" rel="nofollow noopener noreferrer">barrierefreie Webseitenerstellung</a> » <a href="http://www.1ngo.de/web/seo.html" rel="nofollow noopener noreferrer">Suchmaschinenoptimierung</a> | <a href="http://www.1ngo.de/web/em.html" rel="nofollow noopener noreferrer">em?</a>] (<a href="http://www.1ngo.de/hommingberger-gepardenforelle/" rel="nofollow noopener noreferrer">Hommingberger Gepardenforelle</a>;-) </div>