tag:forum.selfhtml.org,2005:/self css horizontal – SELFHTML-Forum 2006-07-21T18:23:53Z https://forum.selfhtml.org/self/2006/jul/18/css-horizontal/996385#m996385 Jule 2006-07-18T09:48:07Z 2006-07-18T09:48:07Z css horizontal <p>hallo,<br> ich habe ziemliche probleme mein 750 width, horizontal-layout zusammen zu bekommen wie vorgestellt.<br> eigentlich sollte es vier-spaltig horizontal werden:<br> ganz oben ein bild, width 750px und height 100,<br> direkt daran anschliessend die navigation - auch horizontal,<br> dann der content bereich, eigentlich mit einer min-width (was ich für den IE nicht hinbekomme).<br> am ende der footer der mit dem seitenende abschliessen soll, egal wieviel inhalt im content div.<br> anbei das was ich bisher wild zusammengeschrieben/gesammelt habe, im IE haben weder footer noch navi die gesammte breite des wrapper (container) und schliessen so nach rechts nich ab.<br> vielen dank für die hilfe!</p> <p>/* global styles<br> -----------------------------------------------------------------------------*/</p> <p>* { margin:0; padding:0; border:0; }</p> <p>body {<br>  font:62,5% arial, helvetica, sans-serif<br>  text-align:center;<br>  margin:0px 10px;<br>  background:#666 url(../img/shadow-back.gif) repeat-y center;<br>  }<br> h1 {<br>  color:#5F6469;<br>  background-color:#F4F4F4;<br>  font:bold 2em/1.5em arial, helvetica, sans-serif;<br>  margin:0 0 0.5em 0;<br>  }<br> h3 {<br>  color:#5F6469;<br>  background-color:#D4D4D4;<br>  font:normal 1em/1.5em arial, helvetica, sans-serif;<br>  padding:0.1em 0 0 0.55em;<br>  margin:1.5em 0 0 0;<br>  }<br> h4 {<br>  color:#5F6469;<br>  font:bold 1.3em/1.3em arial, helvetica, sans-serif;<br>  margin:1.5em 0 0.2em 0;<br>  }<br> h5 {<br>  color:#4A525A;<br>  margin:1em 0 0.5em 0;<br>  font:normal 1em/0.5em arial, helvetica, sans-serif;<br>  }<br> p {<br>  margin:0 0 15px 0;<br>  }<br> b {<br>  color:#4D5257;<br>  }<br> table {<br>  border-collapse:collapse;<br>  }<br> td {<br>  border:1px solid grey;<br>  }</p> <p>/* divs<br> -----------------------------------------------------------------------------*/</p> <p>/*--- centering */</p> <p>#wrapper {<br>  height:100%;<br>  width:740px;<br>  margin-top:1px;<br>  margin-bottom:0px;<br>  margin-right:auto;<br>  margin-left:auto;<br>  padding:0px;<br>  text-align:left;<br>  border-left:2px solid #ADADAD;<br>  border-right:2px solid #ADADAD;<br>  background-color:#F4F4F4;<br>  }</p> <p>/*--- banner */</p> <p>#banner {<br>  height:100px;<br>  background-color:#F4F4F4;<br>  }<br> #banner img {<br>  display:block;<br>  }<br> #banner h1 {<br>  display:none;<br>  font-size:1em;<br>  }</p> <p>/*--- topnavi */</p> <p>#topnavi {<br>  color:#4A525A;<br>  float:left;<br>  width:100%;<br>  border-bottom:1px solid #4A525A;<br>  border-top:1px solid #4A525A;<br>  background-color:#818987;<br>  }<br> #topnavi ul {<br>  padding-left:0px;<br>  list-style-type: none;<br>  }<br> #topnavi li {<br>  border-left:1px solid #4A525A;<br>  }<br> #topnavi ul li {<br>  display: block;<br>  float:left;<br>  font: 0.8em/20px arial, helvetica, sans-serif;<br>  text-align:center;<br>  }<br> #topnavi a {<br>   display:block;<br>  padding:0px 15px;<br>   background-color:#818987;<br>   text-decoration:none;<br>  }<br> #topnavi a:link, #topnavi a:visited {<br>  color:#F4F4F4;<br>  text-decoration:none;<br>  }<br> #topnavi a:hover {<br>  background-color:#A8ADAC;<br>  color:#F4F4F4;<br>  }<br> #topnavi .red {<br>  background-color:#CC0000;<br>  }<br> #topnavi .border {<br>  border-right:1px solid #4A525A;<br>  }</p> <p>/*-- content */</p> <p>#content {<br>  height:100%;<br>  padding:10px;<br>  color:#4A525A;<br>  margin:30% 0 0 0;<br>  width:740px;<br>  }</p> <p>/*--- footer */</p> <p>#footer {<br>  width:740px;<br>  padding:0px;<br>  color:#4A525A;<br>  text-align:center;<br>  font:.7em/1.5em arial, helvetica, sans-serif;<br>  border-top: 1px solid #96958B;<br>  background-color:#ccc;<br>   }</p> https://forum.selfhtml.org/self/2006/jul/18/css-horizontal/996386#m996386 MudGuard http://www.andreas-waechter.de/ 2006-07-18T10:06:40Z 2006-07-18T10:06:40Z css horizontal <p>Hi,</p> <blockquote> <p>ich habe ziemliche probleme mein 750 width, horizontal-layout zusammen zu bekommen wie vorgestellt.<br> eigentlich sollte es vier-spaltig horizontal werden:</p> </blockquote> <p>Was meinst Du mit vier-spaltig horizontal?</p> <blockquote> <p>ganz oben ein bild, width 750px und height 100,<br> direkt daran anschliessend die navigation - auch horizontal,<br> dann der content bereich, eigentlich mit einer min-width (was ich für den IE nicht hinbekomme).<br> am ende der footer der mit dem seitenende abschliessen soll, egal wieviel inhalt im content div.</p> </blockquote> <p>Also 4 untereinanderliegende Teile. Keine Spalten.</p> <p>Aber irgendwas wolltest Du doch mit vier-spaltig.</p> <p>Paßt nicht zusammen.</p> <p>Erklär das mal genauer.</p> <p>cu,<br> Andreas</p> <div class="signature">-- <br> <a href="http://MudGuard.de/" rel="nofollow noopener noreferrer">Warum nennt sich Andreas hier MudGuard?</a><br> <a href="http://www.schreinerei-waechter.de/" rel="nofollow noopener noreferrer">Schreinerei Waechter</a><br> <a href="http://ostereier.andreas-waechter.de/" rel="nofollow noopener noreferrer">O o ostern ...</a><br> Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.<br> </div> https://forum.selfhtml.org/self/2006/jul/18/css-horizontal/996387#m996387 Jule 2006-07-18T10:11:13Z 2006-07-18T10:11:13Z css horizontal <p>hi, ja - du hast recht, da hab ich mich falsch ausgedrückt. 4 untereinander liegende teile möchte ich. (ging davon aus das das gleich 4 horizontale spalten wären?)<br> danke das du mich drauf aufmerksam machst</p> https://forum.selfhtml.org/self/2006/jul/18/css-horizontal/996388#m996388 Peter Müller pmmueller@gmail.com http://infotekten.de 2006-07-18T15:15:53Z 2006-07-18T15:15:53Z css horizontal <p>Schau dir mal folgende Webseite an:</p> <p><a href="http://www.little-boxes.de/beispielseiten/03/01_html/" rel="nofollow noopener noreferrer">Ungestaltete Beispielseite</a> (nur HTML, ohne CSS) und dann dieselbe Seite ...</p> <p>1.  ... mit <a href="http://www.little-boxes.de/beispielseiten/07/01_SimpleNav//" rel="nofollow noopener noreferrer">einfacher Navigation</a></p> <p>2. ... mit <a href="http://www.little-boxes.de/beispielseiten/09/04_float/" rel="nofollow noopener noreferrer">Tabbed-Navigation</a></p> <p>3. ... mit <a href="http://www.little-boxes.de/beispielseiten/10/01_float-2spaltig/" rel="nofollow noopener noreferrer">senkrechter Navigation</a></p> <p>Allen drei Seiten liegt dasselbe HTML mit folgenden div-Bereiche zu Grunde:</p> <ul> <li>#wrapper als Schutzumschlag</li> <li>#kopfbereich (Logo und Slogan)</li> <li>#navibereich (Die Navigation)</li> <li>#textbereich (Der Inhalt)</li> <li>#fussbereich (Adresse etc.)</li> </ul> <p>Ist das in etwa so, wie du dir das vorstellst? Nicht von Farbe und Art der Navigation (Reiter) etc. her, sondern vom Aufbau.</p> <div class="signature">-- <br> <a href="http://little-boxes.de" rel="nofollow noopener noreferrer">Little Boxes</a> - Webseiten gestalten mit CSS. Grundlagen. </div> https://forum.selfhtml.org/self/2006/jul/18/css-horizontal/996389#m996389 Jule 2006-07-19T09:49:52Z 2006-07-19T09:49:52Z css horizontal <blockquote> <p>1.  ... mit <a href="http://www.little-boxes.de/beispielseiten/07/01_SimpleNav//" rel="nofollow noopener noreferrer">einfacher Navigation</a></p> <ol start="2"> <li>... mit <a href="http://www.little-boxes.de/beispielseiten/09/04_float/" rel="nofollow noopener noreferrer">Tabbed-Navigation</a></li> </ol> </blockquote> <p>danke, ja - das ist was ich mir vorstelle. allerdings soll der footer immer am seitenende (fensterende (aber nicht position:fixed;) da der content div auf fensterhöhe oder textinhalt des content bereichs sich automatisch anpassen soll (min-height:100% ?)<br> entsprechende der header ganz oben im fenster, aber auch nicht position:fixed;<br> eigentliche frage also im klartext:<br> was muss ich eingeben damit sich der content bereich immer auf mind. fensterhöhe/platz zwischen header/menue - content - footer fensterhöhe anpasst?<br> vielen dank!</p> https://forum.selfhtml.org/self/2006/jul/18/css-horizontal/996390#m996390 at 2006-07-21T12:53:28Z 2006-07-21T12:53:28Z css horizontal <p>Hallo.</p> <blockquote> <p>allerdings soll der footer immer am seitenende (fensterende (aber nicht position:fixed;) da der content div auf fensterhöhe oder textinhalt des content bereichs sich automatisch anpassen soll (min-height:100% ?)</p> </blockquote> <p>Hast du diese Angabe ausprobiert? Falls ja, für welche Elemente. Außerdem willst die Fußzeile doch offenbar absolut positionieren.</p> <blockquote> <p>entsprechende der header ganz oben im fenster, aber auch nicht position:fixed;</p> </blockquote> <p>Ergibt sich das nicht ohne jedes Zutun?</p> <blockquote> <p>was muss ich eingeben damit sich der content bereich immer auf mind. fensterhöhe/platz zwischen header/menue - content - footer fensterhöhe anpasst?</p> </blockquote> <p>Du solltest dem Hauptteil unten einen Rand verpassen, damit die Fußzeile nicht den Inhalt überdeckt.<br> MfG, at</p> https://forum.selfhtml.org/self/2006/jul/18/css-horizontal/996391#m996391 Jule 2006-07-21T18:04:47Z 2006-07-21T18:04:47Z css horizontal <p>habe ne alternative möglichkeit gefunden und den css code komplett neu geschrieben, jetzt klappts - danke</p> https://forum.selfhtml.org/self/2006/jul/18/css-horizontal/996392#m996392 at 2006-07-21T18:23:53Z 2006-07-21T18:23:53Z css horizontal <p>Hallo.</p> <blockquote> <p>habe ne alternative möglichkeit gefunden und den css code komplett neu geschrieben, jetzt klappts - danke</p> </blockquote> <p>Würdes es dir viel ausmachen, diese Alternative hier näher auszuführen, so dass sie als Lösung mit diesen Thread archiviert wird und damit später Suchenden zur Verfügung steht?<br> MfG, at</p>