[CSS] Ukrycie konkretnego pola i tekstu oraz podmiana obrazka

[owidiusz]

Witajcie!

Na początku chciałbym się z Wami przywitać jako, że jest to mój pierwszy post na tym forum.
I razu przechodzę do meritum. Jestem początkujący i problemy ze swoją stroną staram się rozwiązywać samodzielnie jednak opisane tu sprawy przerosły mnie dlatego bardzo proszę Was o pomoc.

Pozwólcie, że zawrę wszystko w jednym temacie i miejscu. Dla wygody ponumeruję dręczące mnie problemy.

Korzystam z usług firmy zewnętrznej, która modyfikację layoutu umożliwia jedynie poprzez ingerencję w css. Gdybym miał możliwość edycji html sprawa byłaby dla mnie banalna, ale niestety nie jest.

1. Ukrycie pola
Chcę ukryć dwa pola w formularzu rejestracyjnym, które są zbędne. Kod html:

Kod:

<p>
<label for="company_name">Nazwa firmy: </label>
<input class="width170px" type="text" id="company_name" name="company_name" value="" maxlength="200"/>
</p>

i css do całego formularza:

Kod:

#colMain p {
padding-bottom: 1px;
}
p {
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}
p {
display: block;
}

Jak odnieść się do tego konkretnego pola? Dając display: none; lub visibility: hidden; znikają mi wszystkie pola, a chcę ukryć tylko to konkretne.

2. Sprawa podobna jednak tym razem chodzi o ukrycie tekstu. Html:

Kod:

<div class="myAccountSurround">
<br/>
<p>
<strong>
<a href="/account/favourites" onclick="disableFrontendButtons()">Moje ulubione produkty</a>
</strong>
<br/>
Tutaj możesz przeglądać listę swoich ulubionych produktów.
</p>

i css

Kod:

#colMain p {
padding-bottom: 1px;
}
p {
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}
p {
display: block;
}

3. Czy za pomocą css'a da się zastąpić obrazek, który jest podlinkowany w html? Zaznaczam - zastąpić. Background-image, content nie działają w tym przypadku. Niepotrzebnego gifa muszę zastąpić odpowiedniejszym. Mogę to zrobić za pomocą css'a?

To chyba tyle jak na razie. Mam nadzieję, że zrozumieliście o co mi chodzi.
Pozdrawiam gorąco i liczę na Waszą pomoc

[Kartofelek]

Mógłbyś użyć CSS3 do pobierania nazwy elementy i go ukrywać.
http://www.css3.info/modules/selector-compat/

Ale to jest nie obsługiwane w każdej przeglądarce wiec pewnie musisz zapodać
http://selectivizr.com/

O wiele lepiej jednak po prostu dodać dodatkową klasę np class="width170px hide"

Ludzie myślą że za pomocą CSS można wszystko. Np kiedyś dostałem zadanie od speców żeby zrobić "frameworka" dla CSS w którym można było zrobić KAŻDY layout ;}

[Pedro84]

Ludzie myślą że za pomocą CSS można wszystko. Np kiedyś dostałem zadanie od speców żeby zrobić "frameworka" dla CSS w którym można było zrobić KAŻDY layout ;}

Widziałem magika, który takowy... sprzedawał

[owidiusz]

Czyli nie da się tego zrobić normalnie za pomocą selektorów id lub klas?

[Kartofelek]

Dać się da, problem w tym że ty masz kiepski kod. Inputa wyłapiesz. A co z labelem? Podobnie w 2 przypadku i 3 przyadku. Jak pisałem - CSS nie służy do takich rzeczy. Nawet jeżeli było by to możliwe to takie działanie było by wielce niestosowne i złe po prostu.

[owidiusz]

Ja wszystko rozumiem. Problem w tym, że to jest moja jedyna droga działania i innego wyjścia nie mam, dlatego też chciałbym to ogarnąć.

Co to znaczy, że wyłapię inputa? I jeśli twierdzisz, że się da to może podpowiedz jak bo już resztkę włosów sobie wyrywam

Pozdro

[Kartofelek]

1) #company_name {display:none;}
w css3 masz też pseudo selektor pobierający element przed
Można też w jquery $('#company_name').hide().prev().hide();

2) .myAccountSurround {display:none;}
3) 3 nie rozumiem.

[owidiusz]

No i właśnie tutaj leży problem, że podane przez Ciebie rozwiązanie w przypadku 1 ukrywa jedynie pole do wpisywania tekstu, a nie ukrywa nazwy tego pola (label?). Próbowałem ##company_name label {display:none;} ale nie działa...

W przypadku drugim ukrywa cały tekst a ja chcę, żeby schować jedynie to co jest w

Kod:

<p>
<strong>
<a href="/account/favourites" onclick="disableFrontendButtons()">Moje ulubione produkty</a>
</strong>
<br/>
Tutaj możesz przeglądać listę swoich ulubionych produktów.
</p>

Natomiast jeśli chodzi o ten obrazek to moje pytanie brzmi czy mogę za pomocą css zastąpić obrazek, który jest podlinkowany w html. Po prostu przy dodawaniu produktu do koszyka wyskakuje gif, który chcę zamienić na własny. Jest on podlinkowany w kodzie, którego nie mogę edytować. Mogę to zrobić jedynie za pomocą css. Czy jest to w ogóle możliwe?

[Kartofelek]

2) .myAccountSurround p {display:none;}
3) do tego CSS nie służy. Do tego służy JS

[owidiusz]

2) .myAccountSurround p {display:none;}

a jeśli jest kilka <p> to jak odnieść się do tego konkretnego?

w ogóle dzięki Kartofelek, że poświęcasz mi swój czas i odpisujesz jako jedyny.