✔ CSS-Layout schematisch. Brauche Hilfe

[Eagle-PsyX-]

Hi,
ich bin es wieder, mit einem neuen Problem

Und zwar bin ich schon länger an meinem neuen Design, diesmal (so versuch ich es zumindest, mit CSS).

Mein Problem besteht im moment, das 'ganze' Design im prinzip zu fixen, außer den Mittleren Teil. Link 1 und 2 Zeigen das Problem schematisch, und Link 3 das 'gerasterte' echte Layout.

Link 1 fixed
Link 2 auto
Link 3 layout

Kann mir jemand dafür ein 'exaktes' Beispiel zeigen oder wenn möglich sogar machen? Wäre sehr nett. Ich komm zwar mit CSS 'relativ' gut zu recht, aber nicht mit CSS-Layouts, sondern nur als *erweitertes HTML* für Schrift, Farbe & Form. Die Positionierung ist wirrer, und Tabellen eindeutig^^

Danke

 

[Maik]

Hi,

ehrlich gesagt hab ich noch nicht so richtig verstanden, wie das Konzept nun im Detail funktionieren soll, bzw. wo hier nun konkret das Problem bei der Umsetzung liegt, denn aus den drei Skizzen werde ich für's Erste noch nicht so recht schlau, wie ich sie nun zu interpretieren habe

Aber ehrlich gesagt, hab ich auch keine großen Ambitionen, für jemanden nach seinen Skizzen/Vorlagen ein CSS-Layout zu entwickeln, denn schliesslich bin ich nicht hier auf der Suche nach einer Nebenbeschäftigung, sondern um den Usern unter die Arme zu greifen, wenn sie mit ihrer Entwicklungsarbeit auf der Stelle treten, weil sie z.B. den/die Fehler im Quellcode trotz mehrmaliger Überprüfung nicht finden können, oder sich mit den sonstigen "Tücken des Alltags" herumschlagen dürfen.

Möglicherweise hilft dir hier das CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken weiter?

Wenn nicht, solltest du deine Vorstellungen etwas detailierter beschreiben, also wie sich z.B. der mittlere Block bei zunehmenden Inhalt verhalten soll: in der Höhe mitwachsen, oder ab einen gewissen Punkt einen Scrollbalken in seinem Anzeigebereich einblenden - dann kann ich zumindest mal in meinen Bookmarks kramen, ob ich einen passenden Link für dich finde.

mfg Maik

 

[Eagle-PsyX-]

So, hab wieder Zeit

Maik, du sprichst mir aus der Seele. Im Bereich von CSS bin ich nicht wirklich stark, doch die PHP Fragen die als lese lassen mir das selbe Gefühl aufsteigen, wie dir hier :-D

Du kannst grundsätzlich davon ausgehen, dass ich immer irgendwelche Codebeispiele hab und daran mit die Zähne ausbeisse bevor ich frag. Poste ich den Code nicht mit, hab ich gute Gründe dafür, weil er z.B. viel zu *instabil* läuft, dass ich auf der Basis nichts versuchen will, und deshalb eine andere Möglichkeit suche.

Also das Problem ist, dass die beiden Navigationsboxen einen mindestens Abstand von ~45 Pixel haben sollen, und zwischen den Beiden Navigationsboxen sollen ungefähr ~15 Pixel Abstand sein.
Im ersten Bild im Anhang ist es "perfekt".
Doch mein Problem ist es, dass die Bo ... mom ich bearbeite das hier gleich.- Geistesblitz. Ich glaub ich hab die Lösung - ehe ich sie vergesse.

Edit: So hab es hinbekommen, für Firefox und Opera zumindest. Kann mir da jemand für IE-Fix helfen?
http://eaglepsyx.dyndns.org/OA/Template/Default/Default.html

div.Content {background:url(ContentLeft.png) repeat-y; background-color:#7c96d0; position:absolute; left:248px; right:248px; min-width:270px;}
div.Content div {background:url(ContentRight.png) right repeat-y;}
div.Content div div { background:url(ContentTop.png) repeat-x;}
div.Content div div div { background:url(ContentBottom.png) bottom repeat-x; }
div.Content div div div div { background:url(ContentTopLeft.png) left top no-repeat; }
div.Content div div div div div { background:url(ContentTopRight.png) right top no-repeat;}
div.Content div div div div div p.Title { position:relative; color:#EEE; font-size:14pt; top:7px; font-weight:bold; }
div.Content div div div div div div { background:url(ContentBottomLeft.png) left bottom no-repeat;}
div.Content div div div div div div div { background:url(ContentBottomRight.png) right bottom no-repeat; }
div.Content div div div div div div div  div.Inhalt { text-align:justify; padding: 20px 20px 20px 20px;}


div.Nav {background:url(Nav_w.png) repeat-y; background-color:#7994CF; width:188px; position:absolute;}
div.Nav div {background:url(Nav_e.png) right repeat-y;}
div.Nav div div { background:url(Nav_n.png) center top no-repeat;}
div.Nav div div div { background:url(Nav_s.png) bottom repeat-x; }
div.Nav div div div div { background:url(Nav_nw.png) left top no-repeat; }
div.Nav div div div div div { background:url(Nav_ne.png) right top no-repeat;}
div.Nav div div div div div p.Title { position:relative; color:#0c2446; font-size:14pt; top:7px; font-weight:bold; }
div.Nav div div div div div div { background:url(Nav_sw.png) left bottom no-repeat;}
div.Nav div div div div div div div { background:url(Nav_se.png) right bottom no-repeat;  }
div.Nav div div div div div div div  div.Inhalt { text-align:justify; padding: 20px 20px 20px 20px;}

und in HTML

<div class="Nav" style="float:left;left:45px;">
     <div>
          <div>

               <div>
                    <div>
                         <div><p class="Title">Test Nav</p>
                              <div>
                                   <div>
                                        <div class="Inhalt">
											Test - CSS
                                        </div>
                                   </div>

                              </div>
                         </div>
                    </div>
               </div>
          </div>
     </div>
</div>

<div class="Nav" style="float:right;right:45px;">
     <div>

          <div>
               <div>
                    <div>
                         <div><p class="Title">Test Nav2</p>
                              <div>
                                   <div>
                                        <div class="Inhalt">
											Test - CSS
                                        </div>

                                   </div>
                              </div>
                         </div>
                    </div>
               </div>
          </div>
     </div>
</div>


<div class="Content">
     <div>
          <div>
               <div>
                    <div>
                         <div><p class="Title">Test Title</p>
                              <div>
                                   <div>
                                        <div class="Inhalt">

											<p>Test - CSS
											</p>
											<p>
											Und weiter gehts mit einem Blind-Text,</p>
											<p>irgendeinen</p>
                                        </div>
                                   </div>
                              </div>

                         </div>
                    </div>
               </div>
          </div>
     </div>
</div>

Maik, der Quelltext sollte dir bekannt sein, was die Boxen betrifft ;-)

Ahja, mein Bug-Fix für IE der nicht ganz klappt, irgendwie ist da ein schwarzes Balken im Hintergrund anstatt 'nichts'. Ansonsten von der Breite klappt er.

position:fixed;
top:0;
left:0;
right:0;
bottom:0;
border-top-width:0;
border-left-width:248px;
border-bottom-width:0;
border-right-width:248px;
border-style:solid;

 

[Maik]

Hi,

von welcher IE-Version sprichst du?

Der IE7 benötigt den "Bug-Fix" überhaupt nicht, also schliess ihn mal im Conditional Comment aus.

Der IE6 (und älter) hingegen unterstützt den darin angewandten position-Wert fixed, sowie die Kombination der left/right und top/bottom-Eigenschaft nicht.

Stattdessen muß hier position:absolute, sowie width:100% und height:100% angegeben werden. right:0 und bottom:0 sind hier somit überflüssig.

Zudem fehlt in dem Regelblock eine Angabe zur Rahmenfarbe.

mfg Maik

 

[Eagle-PsyX-]

So Danke.
Aber anscheinden mit width 100 % geht es gar nicht so wie es sein soll. (Bild 1)
Mit fixed 'perfekt' bis auf dass die Linke Seite des Borders ignoriert wird...(Bild 2)

Wie krieg ich sonst einen abstand vom Rand hin, IE6 kompatible? Damit auch der Border geht.
Oder wie krieg ich 100 % - 248px mit IE6 hin?

Eagle

 

[Maik]

Mit fixed 'perfekt' bis auf dass die Linke Seite des Borders ignoriert wird...(Bild 2)

Oder wie krieg ich 100 % - 248px mit IE6 hin?

Wie gesagt, der position-Wert fixed wird vom IE6 überhaupt nicht unterstützt :suspekt:

Wie sich die 248px von 100% subtrahieren lassen, hast du doch schon selbst in deinem gezeigten "Bug-Fix" angewendet - blos halt im unvollständigen Ansatz; siehe hierzu den Hinweis in meinem letzten Post.

mfg Maik

 

[Eagle-PsyX-]

Ja, schon, aber mit absolute passiert das:
http://www.online-arts.eu/Downloads/absolute.png
Mit dem CSS Code:

position:absolute;
width:100%;
border-top-width:0;
border-left-width:248px;
border-bottom-width:0;
border-right-width:248px;
border-color:#FFF;
border-style:solid;

.. oder hab ich was übersehen?

 

[Maik]

Versuch es mal hiermit:

div.Nav {background:url(Nav_w.png) repeat-y; background-color:#7994CF; width:188px; position:absolute;z-index:2;}

div.Content {
position:absolute;
left:0;
z-index:1;
width:100%;
border-top-width:0;
border-left-width:248px;
border-bottom-width:0;
border-right-width:248px;
border-color:#FFF;
border-style:solid;
}

<div class="Nav" style="left:45px;"> ... </div>

<div class="Nav" style="right:45px;"> ... </div>

Und wie ich hier schon mal darauf hingewiesen hatte, benötigt der IE7 den "Bug-Fix" überhaupt nicht - also wird er im Conditional Comment ausgeschlossen:

<!--[if lt IE 7]><link rel="stylesheet" media="screen" type="text/css" href="StyleIE.css" /><![endif]-->

mfg Maik

 

[Eagle-PsyX-]

ok danke, ich teste es mal.
"IF lt IE 7" heißt doch "kleiner als IE 7", nicht "lte" {kleiner gleich} - damit wird er ja ausgeschloßen, da er den Bug-Fix nicht braucht - oda nicht?
EDIT: Oh danke, da steht ja echt "lte" - x-D

EDIT #2:: Okay, danke funktioniert perfekt. Ich muss mir echt mal zwingend eine große CSS Lektüre reinziehen.
Danke, Thank you very much, merci beaucoup, ???????!

 

[Maik]

So sieht's aus.

mfg Maik