Hilfe beim Design
Moderator: HTML-Laie
- npage-user
- Webmaster Alt Meister
- Beiträge: 1277
- Registriert: Sa 19. Feb 2011, 08:53
- Mein Vorname: Michael
- Wohnort: Haßloch (Rheinland-Pfalz)
- Kontaktdaten:
Hilfe beim Design
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.
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.
- Jasko
- Globaler Moderator
- Beiträge: 3278
- Registriert: Di 21. Feb 2012, 06:59
- Mein Vorname: Herr Jasmin ;)
- Wohnort: Rheinland-Pfalz
- Kontaktdaten:
Re: Hilfe beim Design
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.
Wenn nein wird es schwirig da was zu machen.
Die Lösung ist es das ganze zu verschachteln, dan würde es gehen.
- npage-user
- Webmaster Alt Meister
- Beiträge: 1277
- Registriert: Sa 19. Feb 2011, 08:53
- Mein Vorname: Michael
- Wohnort: Haßloch (Rheinland-Pfalz)
- Kontaktdaten:
Re: Hilfe beim Design
Ä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.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.
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>
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;
}
- moni
- Held des Forums
- Beiträge: 8342
- Registriert: Mo 16. Nov 2009, 20:56
- Mein Vorname: Monika
- Wohnort: Borken
- Kontaktdaten:
Re: Hilfe beim Design
Nehme das height: 800px; in den Zentrum weg ...dann musst das passen !
Viele Grüße ...Monika
- Jasko
- Globaler Moderator
- Beiträge: 3278
- Registriert: Di 21. Feb 2012, 06:59
- Mein Vorname: Herr Jasmin ;)
- Wohnort: Rheinland-Pfalz
- Kontaktdaten:
Re: Hilfe beim Design
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
Code: Alles auswählen
position: relative;
left:277px;
MfG
- npage-user
- Webmaster Alt Meister
- Beiträge: 1277
- Registriert: Sa 19. Feb 2011, 08:53
- Mein Vorname: Michael
- Wohnort: Haßloch (Rheinland-Pfalz)
- Kontaktdaten:
Re: Hilfe beim Design
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.
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.
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>
- awardfan
- Erfahrener Webmaster
- Beiträge: 372
- Registriert: Mi 9. Jan 2013, 13:50
- Mein Vorname: BPG
- Kontaktdaten:
Re: Hilfe beim Design
Warum 2 mal jquery?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>
Da du deine Website nicht zugänglich machen willst musst du selbst mal die Analysetools des Browsers deiner Wahl bemühen.
- moni
- Held des Forums
- Beiträge: 8342
- Registriert: Mo 16. Nov 2009, 20:56
- Mein Vorname: Monika
- Wohnort: Borken
- Kontaktdaten:
Re: Hilfe beim Design
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
http://blicke1.npage.de/vorlagen/dynams ... eiste.html
oder auch Galerie ist auch vom jQuery
http://blicke1.npage.de/akorrdeon-galreie.html
Viele Grüße ...Monika
- npage-user
- Webmaster Alt Meister
- Beiträge: 1277
- Registriert: Sa 19. Feb 2011, 08:53
- Mein Vorname: Michael
- Wohnort: Haßloch (Rheinland-Pfalz)
- Kontaktdaten:
Re: Hilfe beim Design
Hab's probiert, hätte es aber doch besser gelassen. Jetzt ist nämlich das gesamte Design zerschossen.moni hat geschrieben: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
Also muss wieder alles raus aus dem Code ...
- moni
- Held des Forums
- Beiträge: 8342
- Registriert: Mo 16. Nov 2009, 20:56
- Mein Vorname: Monika
- Wohnort: Borken
- Kontaktdaten:
Re: Hilfe beim Design
Michael ja tut mir aber Leid... wen man dir was helfen soll da lasse hier den Code !
Viele Grüße ...Monika
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 9 Gäste