Problem z :before i :after

0

Witam,
natknąłem się na pewien problem. Działam w przeglądarce Firefox i próbuję zrobić "przycisk" z zaokrąglonymi bokami. Oba boki mają wymiar 7x25px oraz tło ma wymiar 1x25px. Oto kod css:

li.Context:before
{
	content: url("images/contextLeft.png");
	float: left;

}

li.Context:after
{
	content: url("images/contextRight.png");
	float: right;
}

li.Context
{
	background: url('images/contextBg.png') 0 0 repeat-x;
	display: inline-block;
	color: #555657;
	font: 14px Trebuchet MS;
	text-shadow: 1px 1px 1px #AAABAB;
}

ul.Context
{
	margin: 0 0 10px 0;
	padding: 0px;
}

Jeżeli nie nadam float: left; i float: right; to napis jest pod spodem, natomiast jak dodałem to napis jest na górze. Nie potrafię tego wyrównać. Próbowałem już wszystkie możliwości z:

  • float
  • clear
  • vertical-align
  • padding
  • margin

Za każdym razem coś się przesuwa, rozjeżdża lub nic się nie dzieje.

Co zrobić żeby manewrować tekstem w stosunku do :before i :after?

0

Skoro w li masz display: inline-block, to daj to samo do :before i :after (i usuń float). Jak to nie zadziała, to weź wrzuć tu pełny dokument HTML z wbudowanym arkuszem stylów. Z HTML-a wyrzuć wszystko co niezwiązane z tym przykładem, ale zostaw to co ważne. Zobaczymy co tu się dzieje. Tak "na szybko" to wydaje mi się, że float + padding-top dla :before/:after powinno działać, ale mówisz, że nic to nie dało...

0

Nie działa. Tym bardziej że na :before i :after nie działa display.

Oto sam kos tych elementów:

<html>
<head>
<link rel=stylesheet href="style.css" type="text/css">
</head>
<body>
<ul class="Context">
	<li class="Context">Tekst</li>
	<li class="Context">Tekst</li>
	<li class="Context">Tekst</li>
	<li class="Context">Tekst</li>
	<li class="Context">Tekst</li>
    </ul>
</body>

A to style.css

li.Context:before
{
	content: url("contextLeft.png");
	float: left;

}

li.Context:after
{
	content: url("contextRight.png");
	float: right;
}

li.Context
{
	background: url('contextBg.png') 0 0 repeat-x;
	display: inline-block;
	color: #555657;
	font: 14px Trebuchet MS;
	text-shadow: 1px 1px 1px #AAABAB;
}

ul.Context
{
	margin: 0 0 10px 0;
	padding: 0px;
}

Prawy i lewy obrazek ma 7x25px i jest to zaokrąglony róg. Natomiast tło ma 1x25px i na górze i dole jest linia która ma 2px.

A to obrazek:
user image

0

A użycie:

  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;

Aż tak cię zaboli zamiast używania :after i :before?

0

A czemu ma boleć? Nie znam tego. Gdzie można o tym trochę poczytać?

0

Znalazłem to z CSS3. Ale nie działa pod IE więc będę musiał coś zrobić ...

0
Zi00mal napisał(a)

Nie działa. Tym bardziej że na :before i :after nie działa display.

To niezupełnie tak. display działa, ale w ograniczony sposób. Oczywiście tego nie pamiętałem, a sprawdzić w specyfikacji mi się nie chciało. Czyli lamer+leń. Wyszło szydło z worka :).

display działa, ale nie inline-block. Jeśli elementy listy miałyby display: block (ew. gdybyś skasował dla nich deklarację display), to dałoby się ustawić dispaly: block dla zawartości generowanej. Z tego co sprawdziłem, to wtedy dla zawartości generowanej działa także float.

Dobra. Chcesz bamberskiego sposobu, to go dostaniesz.

Wywal display: inline-block; dla elementów listy i dla zawartości generowanej. Zamiast tego daj obu float: left.

Dla zawartości generowanej daj display: block. W content wstaw po prostu kropkę (czyli '.'), którą ukryjesz za pomocą text-indent: -9999em;. Zdefiniuj width i height zawartości generowanej na wymiary obrazka. Obrazek umieść w tle za pomocą background.

Sorki, ale nie mam teraz czasu/chęci na wymyślenie czegoś lepszego.

0

Siema,
w sumie nie wyszło. Jest duże odsunięcie oraz wypunktowanie (ale je da się usunąć). Projekt jednak w tym miejscu został zmieniony, ale wielkie dzięki za pomoc. Miło mi że można na forum spotkać tak miłą osobę, a nie to co przedmówca winerfresh.

Pozdrawiam

1 użytkowników online, w tym zalogowanych: 0, gości: 1