Hilfe beim Design

CSS, Java Script u.s.w

Moderator: HTML-Laie

Benutzeravatar
npage-user
Webmaster Alt Meister
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

Beitrag 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 ...

Bild

Und so soll es aussehen (Footer-Text hab ich jetzt wegggelassen) ...

Bild

Kann mir jemand einen Tipp geben? Hab's schon mit "height: auto;" und mit Prozentangaben versucht, klappt aber nicht. :D
Benutzeravatar
Jasko
Globaler Moderator
Globaler Moderator
Beiträge: 3277
Registriert: Di 21. Feb 2012, 06:59
Mein Vorname: Herr Jasmin ;)
Wohnort: Rheinland-Pfalz
Kontaktdaten:

Re: Hilfe beim Design

Beitrag 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.
Benutzeravatar
npage-user
Webmaster Alt Meister
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

Beitrag 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. :D

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;
}
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8335
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: Hilfe beim Design

Beitrag von moni »

Nehme das height: 800px; in den Zentrum weg ...dann musst das passen !
Viele Grüße ...Monika
Benutzeravatar
Jasko
Globaler Moderator
Globaler Moderator
Beiträge: 3277
Registriert: Di 21. Feb 2012, 06:59
Mein Vorname: Herr Jasmin ;)
Wohnort: Rheinland-Pfalz
Kontaktdaten:

Re: Hilfe beim Design

Beitrag 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:

Code: Alles auswählen

position: relative;
left:277px;
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
Benutzeravatar
npage-user
Webmaster Alt Meister
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

Beitrag 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. :?
Benutzeravatar
awardfan
Erfahrener Webmaster
Erfahrener Webmaster
Beiträge: 372
Registriert: Mi 9. Jan 2013, 13:50
Mein Vorname: BPG
Kontaktdaten:

Re: Hilfe beim Design

Beitrag 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.
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8335
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: Hilfe beim Design

Beitrag 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
Viele Grüße ...Monika
Benutzeravatar
npage-user
Webmaster Alt Meister
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

Beitrag von npage-user »

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
Hab's probiert, hätte es aber doch besser gelassen. Jetzt ist nämlich das gesamte Design zerschossen.

Bild

Also muss wieder alles raus aus dem Code ...
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8335
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: Hilfe beim Design

Beitrag von moni »

Michael ja tut mir aber Leid... wen man dir was helfen soll da lasse hier den Code !
Viele Grüße ...Monika
Antworten

Zurück zu „Fragen zu HTML & Programmiersprachen“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 16 Gäste