tag:forum.selfhtml.org,2005:/selfcss horizontal – SELFHTML-Forum2006-07-21T18:23:53Zhttps://forum.selfhtml.org/self/2006/jul/18/css-horizontal/996385#m996385Jule2006-07-18T09:48:07Z2006-07-18T09:48:07Zcss 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#m996386MudGuardhttp://www.andreas-waechter.de/2006-07-18T10:06:40Z2006-07-18T10:06:40Zcss 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#m996387Jule2006-07-18T10:11:13Z2006-07-18T10:11:13Zcss 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#m996388Peter Müllerpmmueller@gmail.comhttp://infotekten.de2006-07-18T15:15:53Z2006-07-18T15:15:53Zcss 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#m996389Jule2006-07-19T09:49:52Z2006-07-19T09:49:52Zcss 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#m996390at2006-07-21T12:53:28Z2006-07-21T12:53:28Zcss 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#m996391Jule2006-07-21T18:04:47Z2006-07-21T18:04:47Zcss 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#m996392at2006-07-21T18:23:53Z2006-07-21T18:23:53Zcss 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>