Forum PHP.pl

mam sobie stronę http://vanilagroup.com/wiadomosci/index.php?section=news

i teraz z z pierwszego elementu (li) każdej listy chciałbym usunąć pointer (kropkę) oraz pogrubić tekst, jak to zrobić za pomocą first-child?

Jak dodaję takie coś do style.css:

[CSS] pobierz, plaintext 
ul:first-child {
list-style-type: none;
}
[CSS] pobierz, plaintext 

to nie działa i nie wiem czemu

Kropka jest nadawana dla LISTY, a nie dla jej elementów.

Rozwiązaniem byłoby nadanie kropki jako tła dla LI, potem:

[CSS] pobierz, plaintext 
li:first-child { font-weight: bold; background: none; }
[CSS] pobierz, plaintext 

jak nie dla listy? przeciez dla dowolnego elementu mogę sobie ustawić:

[HTML] pobierz, plaintext 
<li style="list-style-type: none">cos</li>
[HTML] pobierz, plaintext 

i tak by to zadziałało, ale ja chcę to zrobić za pomocą CSS bardziej uniwersalnie, czyli próbuję kombinować z first-child.

Jak to zrobić?

Poza tym jak bym zrobił tak jak mowisz to by mi pierwsze dziecko z kazdego li pogrubilo, a ja chce pogrubic tylko pierwszy li z calej listy ul

http://www.w3schools.com/css/pr_pseudo_first-child.asp

Pytania?

Nie. Zagiąłeś moją niewiedzę (IMG:style_emoticons/default/winksmiley.jpg)

Jednak mam pytanie... dodaję regułę do style.css:

[CSS] pobierz, plaintext 
li:first-child {
font-weight: bold;
}
[CSS] pobierz, plaintext 

ale nie wiem czemu nie działa. w firebugu reguła jest przekreślona, ale nie wiem czemu.

może być nadpisana przez jakąś bardziej szczegółową regółę,zrób dla próby font-weight: bold !important; i zobacz czy zadziała

już próbowałem, nie działa

Pokaż cały CSS.

Ok, z tym jakoś udało mi się rozwiązać problem, ale teraz jest inny:

w Mozilli jest wszystko ok, ale nie wiem czemu w IE nie pokazują się kropki dla li i w niektórych miejscach się pogrubiają 2 li zamiast 1

CSS wygląda tak:

[CSS] pobierz, plaintext 
@import url('reset.css');
 
body {
background-color: #E5ECF4;
}
 
a, a:link, a:active, a:visited, a:hover {
color: #018AD8;
font-family: Arial;
font-size: 13px;
text-decoration: none;
font-weight: lighter;
}
 
a:hover {
text-decoration: underline;
}
 
#mainDiv {
margin-left: auto;
margin-right: auto;
width: 1200px;
}
 
#navigationBar {
width: 100%;
height: 35px;
background-color: #B70002;
}
 
#navigationElements {
margin-left: auto;
margin-right: auto;
width: 1080px;
color: white;
height: 100%;
list-style-type: none;
}
 
#navigationElements li, #navigationElements li a, #navigationElements li a:link, #navigationElements li a:active, #navigationElements li a:visited, #navigationElements li a:hover {
color: white;
font-weight: bold;
font-size: 14px;
width: 135px;
float: left;
font-family: Arial;
text-align: center;
padding-top: 3px;
}
 
#navigationElements li a:hover {
text-decoration: underline;
}
 
#top {
margin-top: 10px;
width: 1200px;
height: 136px;
background-color: red;
}
 
#newsDiv {
width: 1152px;
background-color: white;
margin-top: 10px;
padding-top: 56px;
padding-bottom: 56px;
padding-left:22px;
padding-right: 22px;
}
 
.newsListDiv {
width: 315px;
height: 500px;
margin: 7px 13px;
border-style: solid;
border-color: #C6C6C6;
border-width: 1px;
padding: 24px 20px;
float: left;
overflow: hidden;
}
 
#newsDiv ul {
color: #909495;
width: 100%;
margin-top: 7px;
}
 
#newsDiv ul:first-child {
list-style-type: none;
}
 
#newsDiv ul li {
list-style-type: disc;
margin-top: 5px;
margin-bottom: 5px;
clear: left;
}
 
ul li span {
color: #018AD8;
font-family: Arial;
font-size: 13px;
}
 
ul li img {
float: left;
}
 
.newsSource {
background-image:  url('images/titleBackground.jpg');
background-repeat: repeat-x;
text-align: center;
width: 100%;
height: 23px;
font-family: Arial;
font-size: 15px;
text-transform: uppercase;
color: white;
display: block;
padding-top: 3px;
}
 
.newsSource a, .newsSource a:link, .newsSource a:visited, .newsSource a:hover, .newsSource a:active {
font-family: Arial;
font-size: 15px;
text-transform: uppercase;
color: white;
}
 
li:first-child a, li:first-child a:link, li:first-child a:hover, li:first-child a:visited, li:first-child a:active {
font-weight: bold !important;
}
 
li:first-child {
list-style-type: none !important;
}
[CSS] pobierz, plaintext 

DOCTYPE jest zadeklarowany

Zapomnij o first-child w większości wersji IE.

no, na siłę można stosować http://code.google.com/p/ie7-js/ (IMG:style_emoticons/default/winksmiley.jpg)

Skoro mam zapomnieć o first-child to po co ono jest? I najważniejsze... to co mam zrobić żeby działało pod każdą przzeglądarką?

W takim razie chociaż jak zrobić żeby te kropki do listy się wyświetlały w IE?

to, że coś istnieje nie oznacza, że wszyscy się do tego stosują... a IE słynie z tego, że odbiega od standardów (IMG:style_emoticons/default/smile.gif)


nadaj ręcznie klasę, np. ".first"

Albo, gdy masz już klasę, posłuż się pewnym diabelskim trickiem:

[CSS] pobierz, plaintext 
li
    { -patch: expression((function(obj){
            if(!obj.parsed){
                obj.parentNode.childNodes[0].className = 'first';
 
                obj.parsed = true;
            }} )(this) , 'auto');
    }
[CSS] pobierz, plaintext 

@erix, a można spytać co to jest? bo nie wygląda mi to ani jak CSS ani jak JS (IMG:style_emoticons/default/tongue.gif)

Czy to działa w ten sposob, że jak uzyję tego w kodzie to każde pierwsze li z każdej listy zostanie przypisany klasie .first?

To jest CSS dla IE. (IMG:style_emoticons/default/tongue.gif)

Google: expression. I wygląda jak CSS, tylko musisz poczytać i wszystko stanie się jasne.


A jeśli spróbujesz, to komp Cię wciągnie do środka i pożre?