Abgeschnitte Ecken Tabs prosilver

[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

[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 -
  
  und
  
  bg_tabs2.gif -

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

[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