Seite 1 von 5
Hilfe beim Design
Verfasst: Di 10. Jun 2014, 14:02
von npage-user
Hallo miteinander,
ich bastle gerade auf einer deaktivierten Testhomepage ein neues Design aus (ob ich es dann auch verwende, weiß ich noch nicht).
Doch kaum konnte ich erste Erfolge verzeichnen, stehe ich schon vor dem großen Rätsel: Ich möchte, dass der grüne Bereich im Hintergrund sich immer der Höhe des Inhalts anpasst (plus noch ein paar Pixel nach unten um einen kleinen Footer-Text zu schreiben), möchte aber gleichzeitig auch, dass die Navigation links immer so hoch ist wie der Inhalt (siehe Bild 2).
Also so sieht`s derzeit aus ...
Und so soll es aussehen (Footer-Text hab ich jetzt wegggelassen) ...
Kann mir jemand einen Tipp geben? Hab's schon mit "height: auto;" und mit Prozentangaben versucht, klappt aber nicht.
Re: Hilfe beim Design
Verfasst: Di 10. Jun 2014, 14:13
von Jasko
Ist den der Inhalt Bereich in dem Berreich der den Hintergrund anzeigt verschahtelt?
Wenn nein wird es schwirig da was zu machen.
Die Lösung ist es das ganze zu verschachteln, dan würde es gehen.
Re: Hilfe beim Design
Verfasst: Di 10. Jun 2014, 16:56
von npage-user
Jasko hat geschrieben:Ist den der Inhalt Bereich in dem Berreich der den Hintergrund anzeigt verschahtelt?
Wenn nein wird es schwirig da was zu machen.
Die Lösung ist es das ganze zu verschachteln, dan würde es gehen.
Ähm ... ich glaub schon, der steht zumindest in dem Div vom grünen Kasten, also der Bereich "zentrum" schließt sowohl Header, die Navi und den Inhaltsbereich ein.
Ich poste hier einfach mal den Code vom Body-Bereich.
Erläuterungen: "zentrum" ist der grüne Kasten, "header" und "content" müssten klar sein, "navi-links" ist der linke Kasten wo dann die Navigation reinkommt, und der Hintergrund steht an einer separaten Stelle unter body.
Code: Alles auswählen
<body>
<div id="zentrum">
<div id="header">
</div>
<div id="navi-links">
</div>
<div id="content">
Hier ist dann der Inhalt!
</div>
</div>
</body>
Und so ist es im CSS-Teil definiert.
Code: Alles auswählen
#zentrum {
background-color: #27a535;
width: 1000px;
height: 800px;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
margin: 0 auto;
}
#header {
background-position : center top;
border : 0px solid #008000;
width : 990px;
height: 200px;
background-color : transparent;
background-image : url(http://file2.npage.de/012600/02/bilder/testheader.jpg);
background-repeat : no-repeat;
}
#navi-links {
position: absolute;
float: left;
background-color: #ffffff;
width: 260px;
height: 580px;
}
#content {
float : right;
width : 698px;
padding : 7px;
margin-top : 0;
margin-right: 10px;
margin-bottom : 10px;
border-top : 0px solid #008000;
border-right : 0px solid #008000;
border-bottom : 0px solid #008000;
border-left : 0px solid #008000;
background-color : #ffffff;
}
Re: Hilfe beim Design
Verfasst: Di 10. Jun 2014, 20:11
von moni
Nehme das height: 800px; in den Zentrum weg ...dann musst das passen !
Re: Hilfe beim Design
Verfasst: Di 10. Jun 2014, 20:53
von Jasko
OK, dein Problem sind die float Attribute in der CSS, genauer gesagt macht hier das Problem, das float Attribut im content. Float bewirkt nämlich das sich ein Element quasi aus der Verschahtelung befreit. Also so kann man es beheben. Anstat float:right; das hier benutzen:
Und natürlich das was die Moni gesagt hat. Nicht die größe von zentrum fixiren, sonder eher so schreiben min-height:800px; oder ganz weg lassen.
MfG
Re: Hilfe beim Design
Verfasst: Mo 16. Jun 2014, 19:28
von npage-user
Hat übrigens funktioniert. Jetzt stehe ich vor einem weiteren Rätsel. Ich hab auf der Seite ein Menü eingebaut (
http://cssmenumaker.com/menu/slabbed-accordion-menu - optisch angepasst). Und dann hab ich das benötigte CSS in die CSS-Datei (
http://file2.npage.de/012600/02/html/version8.css) gepackt und anschließend noch die Javascript-Datei in den Header eingebunden (ist jQuery) -
http://file2.npage.de/012600/02/html/jquery.min.js.
Und dann hab ich das in den Head-Bereich des HTML-Codes eingefügt.
Code: Alles auswählen
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript' src='http://file2.npage.de/012600/02/html/jquery.min.js'></script>
Das Menü wird zwar angezeigt, aber die Untermenü-Funktion, die per Javascript gesteuert wird, funktioniert irgendwie nicht. Jetzt weiß ich nicht, ob das daran liegt, dass bei mir der Pfeil nach unten auf dem Menüpunkt nicht angezeigt wird oder ob das was mit der jQuery-Einbindung zu tun hat.
Re: Hilfe beim Design
Verfasst: Mo 16. Jun 2014, 20:15
von awardfan
npage-user hat geschrieben:...
Und dann hab ich das in den Head-Bereich des HTML-Codes eingefügt.
Code: Alles auswählen
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript' src='http://file2.npage.de/012600/02/html/jquery.min.js'></script>
...
Warum 2 mal jquery?
Da du deine Website nicht zugänglich machen willst musst du selbst mal die Analysetools des Browsers deiner Wahl bemühen.
Re: Hilfe beim Design
Verfasst: Mo 16. Jun 2014, 20:55
von moni
hab mal so ne Akkordeon leiste installiert .. schau an den Quelltext ob du was brauchbares für dich finden kannst
http://blicke1.npage.de/vorlagen/dynams ... eiste.html
oder auch Galerie ist auch vom jQuery
http://blicke1.npage.de/akorrdeon-galreie.html
Re: Hilfe beim Design
Verfasst: Di 17. Jun 2014, 13:40
von npage-user
Hab's probiert, hätte es aber doch besser gelassen. Jetzt ist nämlich das gesamte Design zerschossen.
Also muss wieder alles raus aus dem Code ...
Re: Hilfe beim Design
Verfasst: Di 17. Jun 2014, 16:00
von moni
Michael ja tut mir aber Leid... wen man dir was helfen soll da lasse hier den Code !