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
navi bestehend aus 3 bildern
-
-
kannst du mal den code reinstellen?
-
naja is ja auf der seite aber egal:
Html:
Code
Alles anzeigen<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>
Css:
Code
Alles anzeigen#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; }
-
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
LauraPS: Quellcodes bitte immer angeben, da CSS-Dateien tw. nicht eingesehen werden können und php-Auszeichnungen gar nicht angezeigt werden!
-
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 angezeigtCode#navi { text-align:left; background-image:url(images/navi.jpg); background-repeat:no-repeat; height:auto; width:200px;
und
Code
Alles anzeigen<div id="navi"> <ul> <li>Home</li> <li>First</li> <li>Second</li> <li>Third</li> <li>...</li> </ul> </div>
auch das mit margin und padding funktioniert nich hatte ich aber auch schonmal probiert...
-
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.
-
achso, und wenn du es unbedingt angepasst haben möchtest, probiers mal mit tabelle, das ist einfacher, in dem fall^^
-
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^^ -
So oder so ähnlich...
HTML:
Code
Alles anzeigen<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>
CSS:
-
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.... -
mmhmmm... probiers mal mit border 0 oder mach einfach die hintergrundfarbe genauso wie das bild^^ dann siehste die lücken nicht...^^
-
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
Tobisry muss heißen cellspacing="0"
-
stimmt, daran hatte ich nicht gdacht...
-
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.... -
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
Alles anzeigen<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>
CSS:
Code
Alles anzeigen#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; }
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 -
hey ja das klappt jez super
vielen dank -
kein problem ich hab ferein und eh nix zu tun
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!