[html] i [css] Zamykanie w CSS

[Michał 1234]

Jak przenieś:

Kod: Zaznacz cały

onMouseover="this.style.backgroundColor='#7DBEFF'" onMouseout="this.style.backgroundColor='#A4D1FF'" bgcolor="#A4D1FF"


Do pliku css aby zamiast:

Kod: Zaznacz cały

<TR onMouseover="this.style.backgroundColor='#7DBEFF'" onMouseout="this.style.backgroundColor='#A4D1FF'" bgcolor="#A4D1FF">


było:

Kod: Zaznacz cały

<TR class="tabela_bg>


Chyba to "czytelnie" przedstawiłem. Z góry dzięki za pomoc.

[Adrianer]

onmouseover to moim zdaniem nie CSS...

[Michał 1234]

A nie da się tego jakoś zmienic, przekształcic, zeby się dało zamknąc to w CSS i aby prowadziało do tego "class" ??

[marcin_ktos]

Da się. Jeżeli dobrze zrozumiałem to pseudoklasa :hover

.klasa { background-color: #a4d1ff; }
.klasa:hover { background-color: #7dbeff; }

tylko jedna rzecz - to nie zadziała w Internet Explorerze, który pseudoklasę :hover potrafi zastosować tylko do znacznika <a>.

[Michał 1234]

Nom. To działa ale nie w IE. A ja potrzebuje takiego "uniwersalnego" bo z badań wynika, że okolo 80% ludzi ma IE a ten "trick" jest ważną częścią mojej strony... Nom istnieje tez inna możliwośc. Można by było zamiast do CSS przenieśc to do JS. Ale bardziej "wygodne" jest chyba CSS.

[Zajec]

Jest jedno rozwiązanie, ale strasznie odradzam. Można zastąpić <tr> przez <a> a następnie przy pomocy CSS zamienić a (element liniowy) na wiersz tabeli. Pomyś jednak co oznaczałoby to dla przeglądarki, która oleje CSS.

Innego rozwiązania nie ma. Osobiście z chęcią olałbym ludzi z IE i dał jeszcze infobar.

[Michał 1234]

Nom szkoda ze Windows nie "daje" od początku Mozilli...
No jak się inaczej nie da to trudno. Ja chciałem sobie zrobic taki "panel administracyjny" strony w CSS. Tylko w jednym pliki CSS zmieniałbym kolory i automatycznie zmieniałyby się one na wszystkich podstronach... Jak narazie wszystko szło dobrze. Wszystko zamknąłem w CSS tylko mi właśnie "to" zostało.

Jak ktoś miałby jakieś inne pomysły to niech napisze.

[JBG]

Nom. To działa ale nie w IE. A ja potrzebuje takiego "uniwersalnego" bo z badań wynika, że okolo 80% ludzi ma IE a ten "trick" jest ważną częścią mojej strony...

Dla IE przygotuj alternatywny arkusz styli, przez co sprawisz, że IE bedzie wyświetlała w miarę poprawnie stronę i umieść infobar tak jak radził Zajec.
Tu znajdziesz informacje na temat Infobar'u.

[Zajec]

A na pewno wykorzystujesz dobrze tabelkę? Nie chodzi czasem o proste podświetlanie linków leżących jeden pod drugim? Albo jeden obok drugiego?

[riddle]

Oczywiście, że jest!

Plik .htc dla IE który emuluje działanie :hover

http://www.aplus.co.yu/adxmenu/examples ... DxMenu.htc

Kod: Zaznacz cały

<style type="text/css" media="screen, tv, projection">
   @import "CSSPATH/Menu.css";
</style>
<!--[if lte IE 6]>
<style type="text/css" media="screen, tv, projection">
   @import "CSSPATH/Menu4IE.css";
   body { behavior:url("HTCPATH/ADxMenu.htc"); }
</style>
<![endif]-->

Możesz to teraz zmodować, aby działało nie na <li/> tylko na <td/>

Albo poszukaj IE7.js na sieci

[Michał 1234]

Jak chodzi o przykład to:
http://www.kasten.republika.pl/tabelka/index.html
a kawałek kodu:

Kod: Zaznacz cały

<TR onMouseover="this.style.backgroundColor='#7DBEFF'" onMouseout="this.style.backgroundColor='#A4D1FF'" bgcolor="#A4D1FF">
<TD class="boki_tabeli1px">
<A href="1.html" target="_blank" style="display: block; width:100%; height:100%;" class="button">
&nbsp;&nbsp;&nbsp;<FONT size="-1"><B>menu1</B></FONT></A>
</TD>
</TR>


Oczywiscie jeszcze musze zastąpic te "&nbsp;" i "b" stylem ale jakos nie miałem czasu... Ale nie o tym mowa.

Próbowałem tych propozycji powyżej i jak nic innego mi nie przyjdzie do głowy to pewnie tak zrobię.

[Zajec]

Jak chodzi o przykład to:
http://www.kasten.republika.pl/tabelka/index.html
a kawałek kodu:

Tego się domyślałem/obawiałem.

Zobacz jak można było zrobić takie menu za pomocą XHTML. Działa szybciej, bez obrazków, nie wymaga JS, zajmuje 5 bazy mniej miejsca.

http://zajec.no-ip.com/michal

[Michał 1234]

Ok już poprawiłem.
Dzięki za pomoc.

[athantor]

Zobacz jak można było zrobić takie menu za pomocą XHTML. Działa szybciej, bez obrazków, nie wymaga JS, zajmuje 5 bazy mniej miejsca.

http://zajec.no-ip.com/michal

[1] IMHO raczej coś w ten deseń.

[Zajec]

[1] IMHO raczej coś w ten deseń.

A w czym to jest lepsze?

[athantor]

[1] IMHO raczej coś w ten deseń.

A w czym to jest lepsze?

Stara się być semantyczne?

Poza tym, IMHO, ładniej wygląda (pomijając tło) i bardziej przypomina układ pierwotnego menu.

[Michał 1234]

OK. A można następujące ułorzenie tabeli zamienic na CSS??

Kod: Zaznacz cały

<style>
.linia_boczna { color: #0F87FF; background: #0F87FF; border: 1px solid #0F87FF; border-left: 5px solid #0F87FF; height: 1200px; }
.height { height: 40px; }
</style>
<TABLE border="0" align="right" cellpadding="0" cellspacing="0">
<TR>
<TD width="5">
<DIV class="linia_boczna"></DIV>
</TD>
<TD width="30">
<!--Odstęp-->
</TD>
<TD width="175" height="1200">
Pasek menu itd.
</TD>
</TR>
</TABLE>


Jak koś woli to przykład.
Dla ułatwienia można zamienic "border=0" na "2".
Ja próbowałem to zrobic za pomocą "div" ale mi nie wychodziło...

[radek.kaba]

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
http://www.intensivstation.ch/en/templates/
...
oraz google.com, a może nawet http://del.icio.us/tag/layout...

[Gość]

Nazwa klasy nie może zaczynać się cyfrą:

Kod: Zaznacz cały

.40 { height: 40px; }

[Michał 1234]

Jak zmieniałem ustawienie na CSS to przy okazji wpadłem na pomysł zrobienia takiego układu w DIV-ach.

Kod: Zaznacz cały

<STYLE>
.linia_boczna { color: #0F87FF; background: #0F87FF; border: 1px solid #0F87FF; border-left: 5px solid #0F87FF; height: 1200px; width: 5px; float: left }
</STYLE>
<DIV style="width: 210; height: 1210; border: 0px solid Red; float: right">
<DIV class="linia_boczna"></DIV>
<DIV style="float: right; width: 175; height: 1200;">
TEXT
</DIV>
</DIV>


Jedyny błąd, który popełniałem to to, że zamiast "float: rozmieszczenie" dawałem zwykłe "align", które było nie skuteczne.
Ale i tak użyje CSS. Mam już za dużo "divów" na stronie...

EDIT //
Upsssss
Niepotrzebnie dałem to "solid Red".