Seite 1 von 1

Abgeschnitte Ecken Tabs prosilver

Verfasst: 07.02.2012 20:09
von the_zoker_09
Hallo zusammen,

Ich habe eine Frage:
Und zwar gibt es bei prosilver ja die "tabs":
[ externes Bild ]

Bei denen sind oben links und oben rechts die Ecken abgeschnitten.

Nun möchte ich aber die Ecken unten links und unten rechts abschneiden.

Was muss ich da in der CSS Datei ändern?

Hier mal ein Auszug aus der jetzigen:

Code: Alles auswählen

#tabs {
	line-height: normal;
	margin: 20px 0 -1px 7px;
	min-width: 570px;
}

#tabs ul {
	margin:0;
	padding: 0;
	list-style: none;
}

#tabs li {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: 1em;
	font-weight: bold;
}

#tabs a {
	float: left;
	background: none no-repeat 0% -35px;
	margin: 0 1px 0 0;
	padding: 0 0 0 5px;
	text-decoration: none;
	position: relative;
	cursor: pointer;
}

#tabs a span {
	float: left;
	display: block;
	background: none no-repeat 100% -35px;
	padding: 6px 10px 6px 5px;
	color: #828282;
	white-space: nowrap;
}

#tabs a:hover span {
	color: #bcbcbc;
}

#tabs .activetab a {
	background-position: 0 0;
	border-bottom: 1px solid #ebebeb;
}

#tabs .activetab a span {
	background-position: 100% 0;
	padding-bottom: 7px;
	color: #333333;
}

#tabs a:hover {
	background-position: 0 -70px;
}

#tabs a:hover span {
	background-position:100% -70px;
}

#tabs .activetab a:hover {
	background-position: 0 0;
}

#tabs .activetab a:hover span {
	color: #000000;
	background-position: 100% 0;
}
Vielen Dank
the_zoker_09

Re: Abgeschnitte Ecken Tabs prosilver

Verfasst: 07.02.2012 22:19
von Talk19zehn
Hello the_zoker_09. das hat jetzt nichts mit dem CSS zu tun, welche du rasch ändern könntest. Veranwortlich für die Effekte sind m.W. jene Grafiken:
  • bg_tabs1.gif - Bild

    und

    bg_tabs2.gif - Bild
denen an den entscheidenen Stellen, die von dir erwünschte Rundung fehlt. Du könntest ausprobieren, die Rundungen mit einem Grafikprogramm in die .gifs einzupflegen.
Ich denke die Grafiken ansich sind selbsterklärend ( Höhe 105px ). Der Hovereffekt ergibt sich bei Anwendung negativer Werte zu background-position von-35px bzw. -70px.
Die Idee finde ich grundsätzlich gut.

Beste Grüße

Edit:
Evtl. ließe sich das CSS erweitern, momentan fehlt mir die "zündende Idee".

Re: Abgeschnitte Ecken Tabs prosilver

Verfasst: 08.02.2012 10:30
von Helmut
Hallo the_zoker_09,

also prosilver bringt auch schon abgerundete Ecken unten mit, sogar in verschiedenen Farbkombinationen je nach Hintergrund. Du solltest dir mal die Bereiche in der cp.css bei /* Preferences pane layout und in der common.css bei /* Round cornered boxes and backgrounds anschauen. Bedenke dabei dass Eigenschaften vererbt werden und du vielleicht erst noch eine neue Eigenschaft oder Klasse einfügen musst, damit es angezeigt wird. Ansonsten musst du halt noch eine passende Ecke als Grafik erzeugen und einfügen wenn nichts passendes dabei ist, wie Talk19zehn schon sagte.

Gruß Helmut