Pytanie w sprawie tekstu

0

Witam,

mam pytanie, czy da się zrobić coś w html lub css żeby jakiś tekst w przykładowym divie wyświetlał się normalnie ale po najechaniu na niego myszką aktywny był element znajdujący się pod nim?

zrobiłem przesuwanie tekstu w jquery i tam mam na dole buttony do poszczególnych stron (wszystkie takie same), w których zmienia się klasa na aktywną lub nie i zmienia się wtedy obrazek tła. Teraz potrzebuje żeby na każdym z poszczególnych buttonów widniał inny napis i dlatego stwierdziłem, że jeśli da się coś takiego zrobić o czym piszę to to będzie chyba najprostsze rozwiązanie.

0

Nie bardzo zrozumiałem Twój opis. Wiem o co Ci chodzi, ale nie rozumiem po co Ci to. Zapewne da się to zrobić "normalnie", tylko to wyjaśnij lepiej ;)

z javascriptem da rady:
robisz buttony na najniższej warstwie, nakładasz na nią tekst, na najwyższej warstwie w miejscu gdzie są te buttony tworzysz przeźroczyste buttony.
po najechaniu na te górne elementy dodajesz klasę odpowiadającemu elementowi na dole

0

No właśnie problem polega na tym, że mam te butony z przewijaniem zrobione w jquery i tam jest już skrypt, który całkiem fajnie działa tylko robiąc go nie miałem zamiaru dodawać żadnego tekstu na buttonach i teraz nie wiem jak to sprytnie ominąć.

Spróbuje to wyjaśnić bardziej szczegółowo: Są przykładowo 3 buttony i każdy z nich bazuje na #przewijak ul a i ul a.active gdzie mają podane tła jako obrazki. Samo ich wstawianie wygląda mniej/więcej w taki sposób:

<ul>
			<li><a href="realizacje1" rel="#strona-1" class="active">Realizacje1</a><a href="realizacje2" rel="#strona-2">Realizacje2</a></li>
		</ul>

Myślałem żeby w tym miejscu dodać obrazek przeźroczysty z napisem ale wtedy wyświetlał się zawsze on bez względy czy class było active czy nie, był jakby nadpisany. Stwierdziłem więc, że zrobię to trochę po partyzancku i nad tym po prostu walnąłem tekst w ten sposób:

<div style=" position: absolute; margin-left: 346px; margin-top: 8px; font-size: 14px; color:#FFFFFF;" >1 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2</div>

I teraz chciałbym żeby najeżdżając na tą napisaną 1 czy 2 nie pokazywał mi się kursor jak do zaznaczania tekstu, tylko żebym mógł nacisnąć na jeden z buttonów niżej. Bo w tej chwili mogę ale muszę omijać obszar w którym jest tekst.

0

Możesz pokazać przykład "live"?
Już na 99% czuję, że coś dziwnie kombinujesz, ale wciąż niewiele mi to mówi, wolę to zobaczyć..

0 
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" src="jquery.scrollto.js"></script>
<script type="text/javascript">
$(document).ready(function () {

	$('#jaslider ul a').click(function () {
	
		//reset all the items
		$('.active').removeClass('active'); 
		//set current item as active
		$(this).addClass('active');	
		
		//scroll it to the right position
		$('.mask').scrollTo($(this).attr('rel'), 300);
		
		//disable click event
	    return false;		
		
	});
	
}); 

#jaslider {
	text-align:justify; 
	background-color:none; 
	border:0px solid #ccc; width:750px; height: 250px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	margin:0 auto;
	font-family:arial;
	margin-top: 15px;
	margin-left:10px;
}

#jaslider .mask { 
	float:left; 
	width:730px; 
	height:185px; 
	margin:10px 0 0 10px; 
	overflow:hidden;
}

#jaslider .panel { 
	width:730px; 
	height:185px;
	text-align:justify;
}

#jaslider ul {
	list-style:none;
	height:25px;
	display:inline-block;	
	text-align:center;

}

#jaslider ul li {
	text-align: center;
	margin-top: 5px;
}

#jaslider ul a {
	display:inline-block;
	outline:none; 
	width:25px; 
	height:25px; 
	text-indent:-999em;	
	margin-left:10px;
}

#jaslider a {
	background: url(button2.png) no-repeat;
}

#jaslider ul a.active {
	background: url(button1.png) no-repeat;

}


 <body>

<div class="container">
 
  <div class="content">
    
   <div id="jaslider">
		
		<div class="mask">
			<div class="slider-body">
				<div class="strona" id="strona-1">
					  	<h2>Tekst</h2>
					<p style="margin-left:55px; max-width:600px; margin-right:30px;">jakis tam tekst</p>
				</div>
				<div class="strona" id="strona-2">
				<p style="margin-left:55px; max-width:600px; margin-right:30px;">jakis tam tekst</p>
				 </div>
			</div>
		</div> <!-- .mask -->
		<div class="clear"></div>
		<div class="srodek">
			<div style=" position: absolute; margin-left: 346px; margin-top: 8px; font-size: 14px; color:#FFFFFF;" >1 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2</div>
		<ul>
			<li><a href="realizacje1" rel="#strona-1" class="active">Realizacje1</a><a href="realizacje2" rel="#strona-2">Realizacje2</a></li>
		</ul></div><!-- #srodek -->
	</div> <!-- #jaslider -->

</div> <!-- .content -->
</div> </body>
0

Wysłało mi się za szybko a nie widzę tu możliwości edycji, więc prześlę jeszcze jeden fragment przy stylach, który może być pomocny. Wydaje mi się, że chyba te fragmenty wystarczą.

 .strona h2 {
	padding: 0 0 0 0;
	color:#000;
	text-align: center;
}

.strona p {
	color:#000;
	text-align: justify;
	font-size: 100%;
}

.clear {clear:both}

.srodek {
	text-align:center;
	margin-right: 50px;
}
0

byłbyś łaskaw wrzucić to na jakiś hosting? bo prosząc o przykład "live" chciałem coś co mogę już poklikać, gdzie nie muszę szukać skryptów itd, bo to po prostu jest.

A przy okazji uwaga:
używasz:
-moz-border-radius oraz -webkit-border-radius - większość tutoriali i opisów css3 jest debilna, bo nie uwzględnia tego, że kiedyś się to wszystko ustandaryzuje i przeglądarki wszystkie będą rozumiały css3 - zawsze sugerują wpisy w css w wersjach z prefixami.
Firefox i Chrome już parę wersji wstecz obsługują zaokrąglone rogi bez prefixów. Opera jeszcze dawniej. IE9 także. Używając prefixów ograniczasz teraz ilość osób, które zobaczą Twoją stronę tak jak byś chciał. Być może też przeglądarki usuną wsparcie wersji prefixowanych (nie wiem jak jest teraz). I nikt nie zobaczy zaokrąglonych rogów. Okej, prefixy są w porządku, ale tylko, jeżeli używasz też wersji czysto css3.

0

Dzięki za radę, skorzystam =)

A stronkę wrzuciłem na jakiś taki darmowy serwer, którego dane odgrzebałem z dawien dawna, więc się nie sugeruj adresem:

http://unholytavern.cba.pl/

W zakładce "o nas" i "oferta" jest to przewijanie zrobione tak jak było zrobione na samym początku. W zakładce "realizacje" tak jak mówiłem próbowałem po partyzancku trochę dodać te napisy na tych przyciskach, ale sam widzisz jaki jest efekt. I nie wiem jak to najlepiej zrobić żeby było dobrze.

0

A nie można po prostu tak:
http://i.imgur.com/SsLza.png

Tym, że jedynka wygląda jakby była 1px za bardzo w lewo się nie przejmuj - i tak u kogoś kto ma włączone rozmycie wszystkich czcionek będzie wyglądać to ciut inaczej, u tych co mają rozmycie na Win7, w porównaniu do XP też będzie inaczej. Dodatkowo niektóre czcionki mogą wyglądać inaczej. Ja użyłem Verdany, bo za bardzo różnicy na cyferkach nie widać i to w takim rozmiarze od Ariala - a moim zdaniem mniej się rozjeżdza - takie są te fonty, że jedynka ma np dwa puste pixele po prawej - ty masz text-align: center i to powinno wystarczyć.

Wywal tego absoluta, bo to jest w ogóle bez sensu. Kod HTML popraw tak jak widać na screenie.

Po prawej masz regułki CSS. Wcięcie tekstu wywaliłem. Dodałem te otoczone obrysem. line-height jest równy wysokości boksu - powoduje to, że tekst, który mieści się w jednej linii jest wyrównany pionowo do środka.

No i to tyle.

0

Dzięki wielkie no teraz to śmiga ładnie i to optymalne rozwiązanie =)

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