CSS Frage

[aka_Robin]

Hallo,

bei einer Website habe ich folgendes Problem. Ich arbeite dort mit px und % da ich immer die volle Bildschirmgröße nutzen möchte.
Es gibt drei div´s - Header, Navigationtob, Viewer, alle untereinander fixed positioniert mit height:xxpx und width:100%.

Jetzt kommt der Hacken an der Sache, wenn ich in der Navigationtop einen Link klicke soll ein neuer div (Navigationleft) links vom Content aufgehen, mit fester px angabe.

Habt ihr eine Idee wie ich das realisieren kann? Vielen Dank

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: black;
    background-color: #FFF;
    margin: 0px;
    padding: 0px;
}

#header {
    position: fixed;
    /*background-image: url(../images/Header.jpg);*/
    height: 100px;
    width: 100%;
}


#navigationtop {
    position: fixed;
    top: 100px;
    width: 100%;
    height: 30px;
    background-image: url(../images/navigationtop.jpg);
    background-repeat: repeat;
}


#navigationlinks {
    position: fixed;
    width: 16%;
    top: 130px;
    height: 100%;
    padding: 10px;
    background-image: url(../images/BackgroundNavigation.jpg);
    background-repeat: repeat;
    font-size: 10px;
    overflow: scroll;
}

#viewer {
    position: fixed;
    width: 84%;
    height: 100%;
    top: 130px;
    left: 16%;
    background-color: #FFF;
    background-image: url(../images/center.jpg);
    overflow: scroll;
}

 

[fexx]

AW: CSS Frage

der viewer div ist dein content? du könntest dann in diesem viewer einen div mit der unternavigation setzen ... hast du schon mal was zum zeigen? screen oder html datei?

 

[aka_Robin]

AW: CSS Frage

Ja der Viewer ist der Content.

Problem ist eigtl. nur das verschiedene Browser mir verschiedenen Darstellungen bringen, einmal ist die Scrollbar xxpx breit, bbeim anderen wieder anders. Es enstehen hässliche weisse Lücken oder es überlappt leicht.

Das ganze wird unter Ruby erstellt. Es gibt also keinen html code im klassischen Sinn.

 

[fexx]

AW: CSS Frage

schick mal bitte einen screenshot ... oder könntest du mir mal einen link per pm schicken?

 

[aka_Robin]

AW: CSS Frage

Hallo,

entschuldigt das ich mich jetzt erst melde.
Leider habe ich noch keine Lösung gefunden. Um etwas mehr Klarheit zu verschaffen gibt es einen Screen im Anhang.

das Problem ist das Gleiche, habe px und %. zudem sollte der div (naviagtionrechts/links) nur dann kommen wenn ich in navigationtop einen link klicke. Kann aber auch fest bleiben.



Vielen Dank für eure Tips...

P.S. navigatonlinks ist derzeit navigationrechts!

 

[fexx]

AW: CSS Frage

<div id="content">
<div id="navi-left">Naivgation</div>
<div id="content-inner">Content</div>
<div class="clear"></div>
</div>

#content { width: 100% }
#navi-left { float: left; width: 250px; }
#content-inner { }

.clear { clear: both; }

ungetestet ... navigation steht in dem fall links. ist #navi-left nicht vorhanden, nutzt #content-inner die komplette breite von #content.

 

[aka_Robin]

AW: CSS Frage

<div id="content">
<div id="navi-left">Naivgation</div>
<div id="content-inner">Content</div>
<div class="clear"></div>
</div>

Verstehe, allles in den Content div schmeißen,
aber was macht bitte <div class="clear"></div>?

Übrigens super schnelle Hilfe, danke

 

[fexx]

AW: CSS Frage

floats müssen gecleart werden. sonst könntest du positionierungs fehler bekommen und es wäre einfach unsauber

gib den drei divs mal verschiedene background farben (red, yellow, green zb) und dann schaus dir mal mit dem clearer an und einmal ohne. mit clearer müsstest du die farbe des #content divs sehen - ohne nicht.

 

[aka_Robin]

AW: CSS Frage

Mit float funktioniert das Einblenden.

Es gibt aber noch ein paar Probleme:
-navigationleft ist nicht bündig zum linken Rand und zu navigationtop
-navigationleft soll immer den restlichen bildschirm ausfüllen und overflow: auto haben, allerdings stellt mir Firefox eine Scrollbar dar die sich nicht bewegen lässt.
-content soll auch overflow: auto besitzen, gleiche Problem wie oben
-wenn ich den Homelink klicke bleibt die navigationleft stehen

Hättest du evtl. nochmal einen Tip hierzu?

 

[fexx]

AW: CSS Frage

-navigationleft ist nicht bündig zum linken Rand und zu navigationtop

schau mal margin/padding von den elementen an ... (firebug ist hier sehr hilfreich)

-navigationleft soll immer den restlichen bildschirm ausfüllen und overflow: auto haben, allerdings stellt mir Firefox eine Scrollbar dar die sich nicht bewegen lässt.
-content soll auch overflow: auto besitzen, gleiche Problem wie oben

warum overflow auto?

-wenn ich den Homelink klicke bleibt die navigationleft stehen

schau mal, obs eine regel gibt, dass der navi-left block nur auf bestimmten seiten gezeigt wird.

 

[aka_Robin]

AW: CSS Frage

der overflow ist wichtig da sowohl im navigationleft als auch im content Dokumente dargestellt werden die über den Bildschirmrand gehen. Jedoch sind die Scrollbars immer fest?!?

Padding und Margin ind nicht das Problem, da hat er jeweils nichts stehen.

 

[fexx]

AW: CSS Frage

Padding und Margin ind nicht das Problem, da hat er jeweils nichts stehen.

das könnte ja gerade die lösung sein mach doch bitte nochmal einen screen

 

[aka_Robin]

AW: CSS Frage

Screenshot kommt per PN, danke