Jump to content
demo1

Zmiana kolorów linków /klasa #menu

Recommended Posts

Witam

potrzebuje zmienić kolor jednego linka(odnosnika)

mam podklase #menu

i oczywiscie jesli zmieniam tam na inny kolor to rzecz jasna wszystkie linki które są… w tej klasie zmieniają… kolor. a ja chciałbym aby 1 link był taki a drugi inaczej

 

bardzo prosze o pomoc

 

 

jak podlinkować ten styl we właściwe miejsce ?

 

moj header wyglada tak jak poniżej: (chodzi o ten styl i o belke górną…)

Hidden Content

    Give reaction or reply to this topic to see the hidden content.
a tutaj juzsam styl:

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

Np. jest taka klasa:

<li class="page_item page-item-6"></li>
w tym menu.. jak dodać ją… do CSS do #menu li ?

#menu li {
float: left;
list-style: none;
margin: 0px 1px 0px 0px;
padding: 0px;
}

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> ? Blog Archive <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<meta name="description" content="<?php bloginfo('description') ?>" />

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/swfobject/swfobject.js"></script>

<?php 
wp_enqueue_script('jquery');
wp_enqueue_script('cufon', get_stylesheet_directory_uri() . '/js/cufon.js');
wp_enqueue_script('Rockwell', get_stylesheet_directory_uri() . '/js/Rockwell_Std_400.font.js');
wp_enqueue_script('Effects', get_stylesheet_directory_uri() . '/js/effects.js');
?>

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
if (!document.getElementsByTagName) return false;
var sfEls1 = document.getElementById("catmenu").getElementsByTagName("li");
for (var i=0; i<sfEls1.length; i++) {
	sfEls1[i].onmouseover=function() {
		this.className+=" sfhover1";
	}
	sfEls1[i].onmouseout=function() {
		this.className=this.className.replace(new RegExp(" sfhover1\\b"), "");
	}
}
	var sfEls1 = document.getElementById("menu").getElementsByTagName("li");
for (var i=0; i<sfEls1.length; i++) {
	sfEls1[i].onmouseover=function() {
		this.className+=" sfhover";
	}
	sfEls1[i].onmouseout=function() {
		this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
	}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php 
if ( is_singular() ) wp_enqueue_script( 'comment-reply' );
wp_head(); ?>



</head>
<body <?php body_class(); ?>>
<div id="wrapper">
<div id="foxmenucontainer">
<div id="menu">
	<ul>
		<li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="Home">Strona Główna</a></li>
		<?php wp_list_pages('title_li=&sort_column=menu_order');?>
	</ul>
</div>		
</div>

<div class="clear"></div>
<div id="header">
<div class="blognames">		
<h1 id="blog-title"><span><a href="<?php bloginfo('home') ?>/" title="<?php echo wp_specialchars( get_bloginfo('name'), 1 ) ?>" rel="home"><?php bloginfo('name') ?></a></span></h1>
<h2 id="blog-desc"><span><?php bloginfo('description'); ?></span></h2>
</div>

</div>
<div class="clear"></div>

<div id="casing">	
<?php if (is_front_page()) { ?>
<div id="featured">
<?php include (TEMPLATEPATH . '/slide.php'); ?>	
</div>
<?php } else {?>
<?php include (TEMPLATEPATH . '/ad2.php'); ?>
<?php } ?>

Share this post


Link to post
Share on other sites

No przecież właśnie podałem Ci kontrukcję.

 

#menu li.page_item page-item-6{ color: pink }

 

i tylko ten jeden element będzie różowy.


baner.png

f.jpg t.png l.jpg

m.jpg

Share this post


Link to post
Share on other sites

No przecież właśnie podałem Ci kontrukcję.

 

#menu li.page_item page-item-6{ color: pink }

 

i tylko ten jeden element będzie różowy.

 

I to ma być w obojętnie ktorym miejscu w tym CSS ?

 

jest jeszcze jeden problem, gdyż

page_item page-item-6 << jest pisany ze spacją… i CSS widzi poprostu jako tekst a nie jako klasa..

i nie działa

Share this post


Link to post
Share on other sites

page_item page-item-6 to dwie klasy

 

Spróbuj to zapisać jako

.page-item-6 {color:pink !important;}

 

@Elektryk śmiem twierdzić, że Twoja konstrukcja (#menu li.page_item page-item-6{ color: pink }) jest nieprawidłowa, gdyż wskazuje na selektor page-item-6 znajdują…cy się w klasie elementu <li> page_item, który znajduje się wewną…trz identyfikatora #menu, czyli jeśli dobrze rozumiem zapis HTML powinien wyglą…dać tak:

<ul id="menu">
<li class="page_item">
<page-item-6> TEKST </page-item-6>
</li>
</ul>

Share this post


Link to post
Share on other sites

page_item page-item-6 to dwie klasy

 

Spróbuj to zapisać jako

.page-item-6 {color:pink !important;}

 

Niestety nie działa.

Share this post


Link to post
Share on other sites

Na stronie nie widzę klasy page-item-6. Odwołaj się do klasy page_item

.page_item {color:pink !important;}

 

niestety nie działa.. (a chociaz by działał to by w danym kolorze był wyświetlany każdy tekst, a ja chce kazdy link w innym kolorze)

gdzieś musi być chyba priorytet ustawiony że nie widać żadnych zmian w CSS

hmmmmmmm

Share this post


Link to post
Share on other sites

Jeśli to link, to dodatkowo musisz odwołać się do "a".

 

Czyli np.

.page-item-6 a {color:pink !important;}

 

Dojdź tylko do odpowiedniego numerka w tej klasie :)

 

No w końcu, dzięki bardzo zadziałało. Małe a a tyle może :P

 

p.s jak mogę poszukać numerka w tej klasie ?

 

Dodatkowo jeśli możesz mi pomóc to wskaż mi co mogę zrobić aby dany link przesuną…ć w prawą… bą…dź lewą… stronę ?

chodzi mi o tą… klasę powyżej tylko żeby dana klasa byla przesunieta , gdzie moge wstawic spację ? " " ??

Share this post


Link to post
Share on other sites

Linki kolorowane są… inaczej, niż tekst, stą…d wymóg dodania "a".

 

Numerek najlepiej chyba znaleźć przeglą…dają…c źródło.

 

Co do spacji, to musisz poszukać w kodzie, bą…dź ustawić padding-left dla danej klasy.

Share this post


Link to post
Share on other sites

Linki kolorowane są… inaczej, niż tekst, stą…d wymóg dodania "a".

 

Numerek najlepiej chyba znaleźć przeglą…dają…c źródło.

 

Co do spacji, to musisz poszukać w kodzie, bą…dź ustawić padding-left dla danej klasy.

 

.page-item-6 a {color:pink !important;
   padding-left:3px;

}

 

Dlaczego takie coś nie działa ?

strona sie rozjezdza.

 

W kodzie CSS ? czy zrodla strony ? bo teraz nie wiem , szukac znaku spacji ?

Share this post


Link to post
Share on other sites

Nie działa zapewne dlatego, że padding zwiększa width elementu. Zatem nie mieści on się w swoim kontenerze i z niego wypływa.

 

W kodzie źródła strony miejsca, gdzie chcesz spacje. Ale jeśli menu generowane jest za pomocą… wbudowanej funkcji, to nie wstawisz tam spacji.

 

Najlepszym rozwią…zaniem będzie zmniejszenie width elementu, którego padding zwiększasz.

Share this post


Link to post
Share on other sites

Nie działa zapewne dlatego, że padding zwiększa width elementu. Zatem nie mieści on się w swoim kontenerze i z niego wypływa.

 

W kodzie źródła strony miejsca, gdzie chcesz spacje. Ale jeśli menu generowane jest za pomocą… wbudowanej funkcji, to nie wstawisz tam spacji.

 

Najlepszym rozwią…zaniem będzie zmniejszenie width elementu, którego padding zwiększasz.

 

Ale niestety nie mogę zmniejszyć bo to jest cała belka (obraz.png) jeśli chodzi o Odnosnik na tej belce MENU z lewej strony

jeśli natomiast chciałbym srodkowy odnosnik przesunac czy to w lewo czy w prawo to juz wogole width tu nic nie pomoze :(

 

co do funkcji.. to nic takiego nie ma.. jest zdefiniowany cały w CSS-ie

Share this post


Link to post
Share on other sites

@Elektryk śmiem twierdzić, że Twoja konstrukcja jest nieprawidłowa

 

Tak, racja. Pisałem to na szybko i nie zauważyłem spacji. Miało być;

 

#menu li.page_item.page-item-6

 

Ogólny wzór to:

 

<typ elementu>#i<id>.<klasa 1>.<klasa 2><klasa n>:<pseudoselektor, np stan lub pozycja węzła>

 

przykład: h1#title.klasa.klasa2.klasa3:hover


baner.png

f.jpg t.png l.jpg

m.jpg

Share this post


Link to post
Share on other sites

To koledzy prosze jeszcze mi zlozcie do kupy kod

do tej klasy (odnosnik link3):

.page-item-6 a {color:pink !important;}

 

aby przeniesc/przesunac LINK 3 do wskazanego miejsca (screen poniżej)

 

x.zip

post-49578-1319484224,94_thumb.png

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...