| 

.NET C# Java Javascript Exception

1
Hallo

Ich habe hier ein CMS das ganz oben ein Tab Menü darstellt. Die Tabs sind nicht eckig, sondern schräg. Das gefällt meiner Frau sehr gut. Die Farbe von der Vorlage gefällt mir aber nicht. Deshalb wollte ich eigene GIF's machen. Orginal sind die irgend wie 237*30.
Die Breite auf der Webseite hängt natürlich vom jweiligen Text im Tab ab. Die original GIF's passen sich an. meine GIF's aber nicht.

Müssen das spezielle GIF's ein?

Ob ein Tab selektiert ist oder nicht wird via CSS gesteuert. Ich tausche dort einfach den Namen des GIF's aus. Und schon klappt es nicht mehr.

Allerdings will ich um das eigentlich Tab herum den Hintergrund transparent. Deshalb GIF.
Aber auch mit PNG klappt es nicht.
Das GIF habe ich mit Paint.NET gemacht.
16.01.2010
GENiALi 2,5k 1 2 8
2 Antworten
1
Hallo GENiALi

Unterschiedliche GIF-Formate gibt es nicht.

Dein Problem wird wohl in der Struktur des HTML/CSS-Gerüstes liegen, mit dem du es zu tun hast.

Schräge oder abgerundete Kanten bei variabel breiten Objekten werden oft erreicht, indem zwei Elemente nebeneinander visuell zu einem (in diesem Fall dem Tab) verschmolzen werden. Dabei wird ein und dass selbe Bild in beiden Elementen als Hintergrund genutzt.

Element 1 könnte dann den text des Tabs enthalten und den Hintergrund links oben ausrichten.
Mit steigender Zeichenzahl würde das Element immer breiter.
Element 2 befände sich direkt rechts daneben, mit fixer Breite (So das die Rundungen/Schrägen Platz finden) und würde den Hintergrund dann rechts oben ausrichten.

Insgesamt entsteht so eine Form die einem variabel breiten Tab entspricht, und nur ein einzelnes Bild benötigt.

Überprüf doch mal, ob so eine Struktur bei dir vorliegt und nimm deien Anpassungen ggf. an beiden Elementen vor.

Falls nicht: Poste doch mal das erscheinungsbild und den betreffenden HTML-Schnipsel.

bis dann
huckepick
16.01.2010
huckepick 887 2 8
Liegt der Trick in diesem CSS?
.topMenu{
position: absolute;
bottom: 0px;
width: 900px;
}
.topMenu li{
float: left;
background: transparent url(MenuDimmed.gif) no-repeat 0% 0%;
padding-left: 10px;
_width: 100px;
}
.topMenu a{
display: block;
padding: 10px 14px 4px 4px;
color: #333;
background: transparent url(MenuDimmed.gif) no-repeat 100% 0%;
height: 16px;
}
.topMenu li.current, .topMenu li.current a, .topMenu li.trail, .topMenu li.trail a{
background-image: url(MenuSelected.gif);
}
.topMenu .current a, .topMenu .trail a{
font-weight: bold;
}
GENiALi 16.01.2010
Mein CSS entspricht nicht mehr ganz dem hier. Vorallem habe ich nur zwei GIF's drin und nicht drei.
GENiALi 16.01.2010
0
Ok ... ich würde sagen dein HTML sieht etwa so aus
<ul class="topMenu">
<li>
<a href="url">text</a>
<a href="url">text</a>
<a href="url" class="current">text</a>
<a href="url">text</a>
<a href="url">text</a>
</li>
</ul>

die variable Breite wird bei dir durch das padding-left im Listen-Element und das darin eingebettete a-Element erreicht.

Zu sagen wär erstmal: im IE sollte die variable Breite nicht vollständig funktionieren,
dort haben die Tabs wegen _width:100px; immer die Mindestbreite 100 Pixel

wozu die Klasse .trail da ist, leuchet mir nicht ein.

Damit das funktioniert müessen die Hintergrundbilder bei .topMenu li und .topMenu a identisch sein.
17.01.2010
huckepick 887 2 8

Stelle deine Css-Frage jetzt!