navi bestehend aus 3 bildern

<tobi> · 21. Februar 2009

hallo, hab mich jez auch mal wieder mit html und css beschäftigt und wollte ne navi erstellen die aus 3 bildern besteht, einem oberteil nem mittelteil und dem unterteil.
das ober und unterteil sollten immer gleich sein und das mittelteil sollte sich dann je nach anzahl der links wiederholen,
so weit hat das auch geklappt nur ist dabei immer eine lücke zwischen oberteil und mittelteil und zwischen unterteil entstanden: zu sehen auf http://www.wein-garten.eu
meine frage jez wie krieg ich das wech?
schonmal danke im voraus
MfG
Tobi

lauras · 21. Februar 2009

kannst du mal den code reinstellen?

<tobi> · 21. Februar 2009

naja is ja auf der seite aber egal:

Html:

Code

<body>
<div id="bereich">







<div id="navi">
<div id="navitop"></div>
<div id="navimiddle">




<ul>
<li>Home</li>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>...</li>
</ul>




</div>
<div id="navibottom"></div>
</div>










</div>
</body>

Alles anzeigen

Css:

Code

#bereich {
               width:900px;
               background-color:;
               margin:0 auto;
               text-align:center;
}
#navi {
      width:200px;
      text-align:left;
}
#navitop {
         background-image:url(images/navitop.jpg);
         width:200px;
         height:10px;
         background-repeat:no-repeat;
}
#navimiddle {
            background-image:url(images/navimiddle.jpg);
            background-repeat:repeat-y;
}
#navibottom {
            background-image:url(images/navibottom.jpg);
            width:200px;
            height:10px;
            background-repeat:no-repeat;
}

Alles anzeigen

lauras · 21. Februar 2009

ich verstehe, wa du meinst, aber wäre es nicht viel einfacher, einfach ein bild zu verwenden, und dieses einfach auf height: auto zu stellen, sodass es sich anpasst und streckt?

zu dem problem: du hast divs verwendet, divs erzeugen einen abstand zwischeneinander. probiers mal mit dem attributen margin: 0px und padding: 0px, oder verwende ganz einfach eine tabelle.

hoffe es hilft.

LG
Laura

PS: Quellcodes bitte immer angeben, da CSS-Dateien tw. nicht eingesehen werden können und php-Auszeichnungen gar nicht angezeigt werden!

<tobi> · 21. Februar 2009

hm das mit heigth:auto klingt logisch wär auch gut aber dann ergibt sich bei mir aber das problem das sich das bild wiederholt und nicht streckt
füge ich dann ein no-repeat hinzu wird die grafik nur einmal angezeigt

Code

#navi {
      text-align:left;
      background-image:url(images/navi.jpg);
      background-repeat:no-repeat;
      height:auto;
      width:200px;

und

Code

<div id="navi">







<ul>
<li>Home</li>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>...</li>
</ul>







</div>

Alles anzeigen

auch das mit margin und padding funktioniert nich hatte ich aber auch schonmal probiert...

lauras · 21. Februar 2009

dann probier folgendes:

schätze, wieviele punkte maximal auftauchen und bestimme die maximale höhe des bereichs, wenn der maximalfall auftritt. diese höhe nimmst du einfach immer, dann stehen die punkte halt oben. wenn du dann eine höhe und eine breite eingibst, streckt sich da bild.

lauras · 21. Februar 2009

achso, und wenn du es unbedingt angepasst haben möchtest, probiers mal mit tabelle, das ist einfacher, in dem fall^^

<tobi> · 21. Februar 2009

also ich weiß ja nich was ich falsch mache aber bei mir streckt sich das bild nich sonder wiederholt sich immer wieder....
aber trotzdem danke
ich werde das dann wohl über tabellen machen auch wenn ich damit nich so klarkomm^^

lauras · 21. Februar 2009

So oder so ähnlich...

HTML:

Code

<table id="navi">
<tr>
<td class="toppic">oberes Bild</td>
</tr>




<tr>
<td class="middlepic">Menüpunkt 1</td>
<td class="middlepic">Menüpunkt 2</td>
<td class="middlepic">Menüpunkt 3</td>
<td class="middlepic">Menüpunkt 4</td>
</tr>




<tr>
<td class="bottompic">unteres Bild</td>
</tr>




</table>

Alles anzeigen

CSS:

Code

#navi {
width: 200px;
height: auto;
background-color: blue;







}




.toppic {
background-image: toppic.jpg;




}







.middlepic {
background-image: middlepic.jpg;
}







.bottompic {
background-image: bottompic.jpg
}

Alles anzeigen

<tobi> · 21. Februar 2009

hey vielen dank das klappt nach n paar kleinen änderungen super
aber eine letzte frage: wie krieg ich die lücken noch weg: http://www.wein-garten.eu/vorschau.jpg
weil mit padding hats nich geklappt oder ich hab das an die falschen stellen geschrieben....

lauras · 21. Februar 2009

mmhmmm... probiers mal mit border 0 oder mach einfach die hintergrundfarbe genauso wie das bild^^ dann siehste die lücken nicht...^^

<tobi> · 22. Februar 2009

also das mit border 0 hat nich geklappt konnte ich mir auch nich vorstellen weil ich ja gar keinen rahmen hatte...
das mit der hintergrundfarbe war auch nich so gut weil dann immer noch kleine lücken blieben....
letzendlich hab ich das problem aber dochnoch hingekriegt mit cellspacig="0px"
MfG
Tobi

sry muss heißen cellspacing="0"

lauras · 22. Februar 2009

stimmt, daran hatte ich nicht gdacht...

<tobi> · 23. Februar 2009

so ich melde mich jez nochmal bezüglich der divs
es muss doch irgendeine möglichkeit geben den abstand zischen zwei oder mehreren von denen wegzukriegen...
und zwar entsteht der immer nur sobald inhalt eingegeben wird oder ein hintergrund bild bestimmt wird????
ich könnte das jez zwar mit tabellen machen aber das will ich nich da das ganze noch öfters in meinem desing vorkommt und eig ja gesagt wird das das design nicht merh mit tabellen sondern halt über css gemacht wird....

lauras · 23. Februar 2009

das ist meistens einfacher.

hab das problem gefunden, und auch eine einigermaßen annehmbare lösung.

problem: deine liste erzeugt einen Abstand ober- und unterhalb.
woran das liegt: keine ahnung.

lösung: mit margin-top und margin bottom ist der abstand weg. hier der fertige code:

HTML:

Code

<body>
<div id="bereich">







<div id="navi">
<div id="navitop"></div>
<div id="navimiddle">




<ul>
<li>Home</li>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>...</li>
</ul>




</div>
<div id="navibottom"></div>
</div>










</div>
</body>

Alles anzeigen

CSS:

Code

#bereich {
               width:900px;
               background-color:;
               margin:0 auto;
               text-align:center;
}
#navi {
      width:200px;
      text-align:left;
}
#navitop {
         background-image:url(images/navitop.jpg);
         width:200px;
         height:10px;
         background-repeat:no-repeat;
}
#navimiddle {
            background-image:url(images/navimiddle.jpg);
            background-repeat:repeat-y;
}
#navibottom {
            background-image:url(images/navibottom.jpg);
            width:200px;
            height:10px;
            background-repeat:no-repeat;
} 




ul {
margin-top: 0px;
margin-bottom: 0px;
}

Alles anzeigen

Wichtig dabei: nicht einfach nur mergin angeben, sond verschwinden die punkte der liste, und dann kannst du die auch weglassen

Zum Tabellendesign: man kann auch ganz einfach eine Tabelle erstellen und diese über ein PHP-include einbinden, dann muss man das ganze nicht immer kopieren, das geht bei dieser div-schachtelung auch.

Hoffe es funktioniert jetzt.

LG
Laura

<tobi> · 23. Februar 2009

hey ja das klappt jez super
vielen dank

lauras · 23. Februar 2009

kein problem ich hab ferein und eh nix zu tun

navi bestehend aus 3 bildern

Jetzt mitmachen!

Teilen