Creative tester: CSS

Pokazywanie postów oznaczonych etykietą CSS. Pokaż wszystkie posty

środa, 21 marca 2012

Testowanie strony pod przeglądarkami

Testowanie, oczywiście, pod różnymi przeglądarkami.

Nie ma problemu, jeśli chcemy podejrzeć wygląd strony pod różnymi wersjami np. Firefox'a. Po prostu pobieramy starsze wersje i instalujemy na komputerze. Problem pojawia się z Internet Explorerem i starszymi jego wersjami. Można kombinować z wirtualnymi maszynami, czemu nie?

Trochę prościej i bez zbędnego wysiłku można pobrać programik IETester, pracujący jak przeglądarka i zawierający właśnie starsze wersje IE (do pobrania tutaj).

Lub zainstalować Expression Studio4 Ultimate, który zawiera min. Expression Web4 (i o niego właśnie chodzi). Mamy tu możliwość przetestowania strony min. pod starszymi wersjami IE. Dodatkowo możemy odszukać "błąd" w kodzie CSS i miejsce, w którym się pojawił, powodując odmienną interpretację w wyświetlaniu strony przez przeglądarki. Bardzo prosto odszukać i od razu skorygować kod CSS (filmik do obejrzenia) Dla mnie bomba- w jednym miejscu wszystko można zrobić: napisać kod, wstawić elementy i przetestować wygląd strony pod różnymi przeglądarkami.

środa, 14 marca 2012

Wyśrodkowanie układu w IE6

Mając przykładowo taki szkielet strony w html'u:

<body>
<div id="wrapper">
treść
</div>
</body>

stylami CSS wyśrodkowujemy układ w IE6 jak poniżej:

body {text-align: center;}/*reguła wyśrodkowująca układ w IE6*/
#wrapper {width: 90%; /*dla układu płynnego (fluid) szerokość w procentach*/
margin: 0 auto; /*wyśrodkowuje układ w oknie przeglądarki*/
text-align:left; /*resetuje regułę środkującą w IE6*/
}

Kod wg Charles'a Wyke- Smith'a.

poniedziałek, 5 marca 2012

Galeria CSS

Prosta galeria zdjęć wyświetlana za pomocą CSS.

Przykład działania galerii CSS

Kod HTML:

<div class="galeria">

<div class="miniatury">

<div class="male-foto"><img src="img/obrazek.jpg" alt="" /><div class="duze-foto nuns"></div></div>

<div class="male-foto"><img src="img/obrazek.jpg" alt="" /><div class="duze-foto nuns1"></div></div>

<div class="male-foto"><img src="img/obrazek.jpg" alt="" /><div class="duze-foto nuns2"></div></div>

<div class="male-foto"><img src="img/obrazek.jpg" alt="" /><div class="duze-foto nuns3"></div></div>

<div class="male-foto"><img src="img/obrazek.jpg" alt="" /><div class="duze-foto nuns4"></div></div>

</div>

</div>

CSS:

.galeria

{

padding-top: 470px; /* tu ustawiamy miejsce na duże zdjęcie. Po najeździe tu pojawi się span */

position: relative; /* nasz span będzie się pozycjonował względem tego elementu bo jako ostatni ma position inne od static*/

left:40px;

}

.miniatury

{

padding-left: 35px; /* Tylko wygląd */

display:block;

}

.miniatury > div

{

float:left;

padding-right: 5px; /* Tylko wygląd */

padding-bottom:5px;

}

.miniatury > div > div

{

position: absolute; /* pozycjonujemy */

left: 80px; /* w lewy */

top: 0; /* górny róg diva .galeria */

display: none; /* normlanie span jest ukryty */

width: 505px; /* jakas szerokosc */

height: 450px; /* jakas wyskosc */

}

.miniatury > div:hover img

{

 background-color: #999; /* Tylko wygląd */

}

.miniatury > div:hover > div

{

display: block; /* kiedy nadrzędny span jest hoverowany, pokazujemy naszego spana z duzym zdjeciem */

}

div.nuns

{

background: transparent url(img/obrazek.jpg) 50% 50% no-repeat; /* ustawienie dużego zdjęcia */

}

div.nuns1

{

background: transparent url(img/obrazek.jpg) 50% 50% no-repeat; /* ustawienie dużego zdjęcia */

}

div.nuns2

{

background: transparent url(img/obrazek.jpg) 50% 50% no-repeat; /* ustawienie dużego zdjęcia */

}

div.nuns3

{

background: transparent url(img/obrazek.jpg) 50% 50% no-repeat; /* ustawienie dużego zdjęcia */

}

div.nuns4

{

background: transparent url(img/obrazek.jpg) 50% 50% no-repeat; /* ustawienie dużego zdjęcia */

} 

Galeria zachomikowana z jednego z istniejących w sieci blogów.