Nie jesteś zalogowany.
Jeśli nie posiadasz konta, zarejestruj je już teraz! Pozwoli Ci ono w pełni korzystać z naszego serwisu. Spamerom dziękujemy!

Ogłoszenie

Prosimy o pomoc dla małej Julki — przekaż 1% podatku na Fundacji Dzieciom zdazyć z Pomocą.
Więcej informacji na dug.net.pl/pomagamy/.

#51  2011-11-11 21:22:07

  pink - Użytkownik

pink
Użytkownik
Skąd: P17PY93
Zarejestrowany: 2005-09-16

Re: Strona w budowie

dwa rozne style odsylaczy <a href> jak???

jedem mam taki zbajerowany jak widac w linku.
a chcialbym takiego najzwyklejszego czasem uzyc.


T430 think-box 4.9-custom x86_64 Intel(R) Core(TM) i5-3230M CPU @ 2.60GHz GenuineIntel GNU/Linux
"Doktor plama i maharadża są pod złotym leszczem." "Człowieka od zwierzęcia odróżnia ciekawość świata. Patrze słucham i wyciągam wnioski."
https://www.behance.net/przemyslawmamon

Offline

 

#52  2011-11-11 22:23:56

  kamikaze - Administrator

kamikaze
Administrator
Zarejestrowany: 2004-04-16

Re: Strona w budowie

Użyj CSS, stwórz dwie różne klasy styli dla elementów <a />. To podstawowa funkcjonalność CSS, może weź poczytaj trochę. Będziesz tak pytał ciągle o byle co? Polecam ten tutorial http://www.w3schools.com/css/ . Zawsze możesz znaleźć coś po polsku jak ten nie pasuje.

Ostatnio edytowany przez kamikaze (2011-11-11 22:27:23)

Offline

 

#53  2011-11-11 22:40:28

  Minio - Użyszkodnik

Minio
Użyszkodnik
Skąd: Poznań, Polska
Zarejestrowany: 2007-12-22
Serwis

Re: Strona w budowie

Ponieważ masz te odnośniki umieszczone w różnych miejscach na stronie, najprościej będzie im wszystkim nadać pewną klasę i w CSS te reguły dać tylko do tych odnośników, które mają tę klasę:

Kod:

a.klasa:link {
  border: 2px grey inset;
  padding: 6px;
  // i tak dalej
}

W ten sposób dla odnośników bez klasy przeglądarka będzie aplikować swoje domyślne style (zazwyczaj jest to podkreślenie i jakiś odcień niebieskiego).

Przy czym ze względu na to, że Twoje strony mają różne kolory tła, może się zdarzyć, że niektóre odnośniki będą mało czytelne.
(Osobiście w ogóle uważam, że strona jest mało czytelna — jest na niej zbyt napaćkane. Ale to tylko moje zdanie.)

Offline

 

#54  2011-11-13 22:46:52

  pink - Użytkownik

pink
Użytkownik
Skąd: P17PY93
Zarejestrowany: 2005-09-16

Re: Strona w budowie

wersja ostateczna chyba i problem z galeria powiekszene obrazka pojawia sie pod bocznymi kolumnami, (zamiast nad i czesc obrazka jest niewidoczna),
z-index probowalem ale nie wiem gdzie go ustawic a jak ustawie nie tam gdzie trzeba to mi sie caly layout sypie.


T430 think-box 4.9-custom x86_64 Intel(R) Core(TM) i5-3230M CPU @ 2.60GHz GenuineIntel GNU/Linux
"Doktor plama i maharadża są pod złotym leszczem." "Człowieka od zwierzęcia odróżnia ciekawość świata. Patrze słucham i wyciągam wnioski."
https://www.behance.net/przemyslawmamon

Offline

 

#55  2011-11-14 00:16:56

  Minio - Użyszkodnik

Minio
Użyszkodnik
Skąd: Poznań, Polska
Zarejestrowany: 2007-12-22
Serwis

Re: Strona w budowie

Ten układ podoba mi się bardziej niż poprzedni.

W każdym razie przechodząc do problemu: możesz go wyeliminować, wykorzystując właściwość CSS3 do tworzenia gradientów. Poniżej działający przykład. Działa właściwie we wszystkim obsługującym pseudoelementy ::before i ::after. IE robi to dobrze bodaj dopiero od 8 wersji. W Internecie znajdziesz sposoby obejścia problemu, jeżeli ma to dla Ciebie jakieś znaczenie.

Sam kod gradientu powinien działać w IE 5.5, Firefoksie 3.6, Operze 11.10, Safari 4, Chrome i Konquerorze (o ile korzysta z Webkita).

Kod:

<!DOCTYPE html>
<html>
        <head>
                <style type="text/css">
                        html {
                                background-color: black;
                                height: 100%;
                                margin: 0;
                                padding: 0;
                        }
                        body {
                                height: 100%;
                                width: 70%;                                                                                                            
                                margin: 0 auto;                                                                                                        
                                padding: 0;                                                                                                            
                                background-color: red;                                                                                                 
                        }                                                                                                                              
                        p {                                                                                                                            
                                margin: 0;                                                                                                             
                                padding: 0;                                                                                                            
                        }                                                                                                                              
                        body::before {                                                                                                                 
                                display: block;                                                                                                        
                                background: -o-linear-gradient(left, black, red);                                                                      
                                background: -moz-linear-gradient(left, black, red);                                                                    
                                background: -webkit-gradient(linear, left top, right top, from(black), to(red));                                       
                                filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#FF0000', EndColorStr='#000000', GradientType=1);    
                                background: linear-gradient(left, black, red);                                                                         
                                height: 100%;                                                                                                          
                                content: " ";
                                width: 10%;
                                position: absolute;
                                left: 5.1%;
                        }
                        body::after {
                                display: block;
                                background: -o-linear-gradient(right, black, red);
                                background: -moz-linear-gradient(right, black, red);
                                background: -webkit-gradient(linear, right top, left top, from(black), to(red));
                                filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#000000', EndColorStr='#FF0000', GradientType=1);
                                background: linear-gradient(left, black, red);
                                height: 100%;
                                content: " ";
                                width: 10%;
                                position: absolute;
                                right: 5.1%;
                                top: 0;
                        }
                        img {
                                position: relative;
                                left: 80%;
                                height: 60px;
                                width: 60px;
                        }
                        img:hover {
                                border: 2px solid black;
                                width: 350px;
                                height: 350px;
                                z-index: 1;
                        }
                </style>
        </head>
        <body>
                <p>Lorem ipsum etc.</p>
                <img src="/tmp/obrazek.jpg">
        </body>
</html>

Offline

 

#56  2011-11-14 00:39:09

  pink - Użytkownik

pink
Użytkownik
Skąd: P17PY93
Zarejestrowany: 2005-09-16

Re: Strona w budowie

no ale to jest przepis na gradient color to color
a ja mam color to transparent???.


T430 think-box 4.9-custom x86_64 Intel(R) Core(TM) i5-3230M CPU @ 2.60GHz GenuineIntel GNU/Linux
"Doktor plama i maharadża są pod złotym leszczem." "Człowieka od zwierzęcia odróżnia ciekawość świata. Patrze słucham i wyciągam wnioski."
https://www.behance.net/przemyslawmamon

Offline

 

#57  2011-11-14 00:57:41

  Minio - Użyszkodnik

Minio
Użyszkodnik
Skąd: Poznań, Polska
Zarejestrowany: 2007-12-22
Serwis

Re: Strona w budowie

Ja tam widzę kolor do koloru a nie przezroczystości, ale jeśli faktycznie koniecznie potrzebujesz przezroczystości, to jest dostępna (przy określeniu koloru przy pomocy RGBA). Nie wiem jednak na ile to rozwiązanie jest przenośne.

Offline

 

#58  2011-11-14 09:44:09

  pink - Użytkownik

pink
Użytkownik
Skąd: P17PY93
Zarejestrowany: 2005-09-16

Re: Strona w budowie

Kod:

#page-container {
margin-left: -2px;
width: 650px;
position: relative;

}

.pg {
width: 650px;
list-style: none none;
}

.pg:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}

.pg li {
list-style: none none;
display: inline;
}

.pg li a {
margin: 2px;
border: 4px solid #000;
padding: 4px;
position: relative;
float: left;
display: block;
width: 100px;
height: 75px;
border-radius: 10px; border-bottom-left-radius: 0px; box-shadow: -8px 8px 4px rgba(0,0,0,.4);
}

.pg li a:hover {
font-size: 100%;
}

.pg li a img {
border: none;
position: absolute;
width: 100px;
height: 75px;
}

.pg li a:hover img,.pg li a:active img,.pg li a:focus img {
border: 2px solid black;
width: auto;
position: absolute;
height: 350px;
left: -45px;
top: -107px;
z-index: 1;
}

to jest kod tej galerii:  jak umiescic powiekszenie w jednym miejscu w jakiejs ramce obok na stale do kazdego obrazka.
---------------
|*|*|*| ****|
-------- ****|
|*|*|*| ****|
---------------


T430 think-box 4.9-custom x86_64 Intel(R) Core(TM) i5-3230M CPU @ 2.60GHz GenuineIntel GNU/Linux
"Doktor plama i maharadża są pod złotym leszczem." "Człowieka od zwierzęcia odróżnia ciekawość świata. Patrze słucham i wyciągam wnioski."
https://www.behance.net/przemyslawmamon

Offline

 

#59  2011-11-14 11:22:12

  Minio - Użyszkodnik

Minio
Użyszkodnik
Skąd: Poznań, Polska
Zarejestrowany: 2007-12-22
Serwis

Re: Strona w budowie

Generalnie to position: fixed.

Przy czym może to spowodować nieeleganckie miganie obrazka przy najmniejszym poruszeniu kursorem myszy. Do tego przy aktualnym układzie obrazek ze swojego miejsca „wyfrunie” do tej ramki obok. Obrazek również zniknie tak szybko, jak szybko użytkownik przesunie kursor znad niego.

Dlatego sądzę że przy tym pomyśle dużo lepszym pomysłem jest zaangażowanie JS, który spowoduje, że obrazek zostanie wyświetlony w jakimś miejscu jeśli znajdzie się nad nim kursor myszy. Obrazek nie powinien znikać, jeśli kursor zostanie przesunięty w takie miejsce, gdzie nie ma obrazka.

Przy zrobieniu pustego placehodera na obrazek w strukturze dokumentu, sam JS powinien zająć dosłownie kilka linijek. Potrzebne będzie zdarzenie mouseover.

Offline

 

#60  2011-11-14 11:43:20

  pink - Użytkownik

pink
Użytkownik
Skąd: P17PY93
Zarejestrowany: 2005-09-16

Re: Strona w budowie

dzieki Minio : fixed i odpowiednie pozycjonowanie zalatwilo sprawe, moze to nie jest najlepsze rozwiazanie ale dziala.


T430 think-box 4.9-custom x86_64 Intel(R) Core(TM) i5-3230M CPU @ 2.60GHz GenuineIntel GNU/Linux
"Doktor plama i maharadża są pod złotym leszczem." "Człowieka od zwierzęcia odróżnia ciekawość świata. Patrze słucham i wyciągam wnioski."
https://www.behance.net/przemyslawmamon

Offline

 

#61  2011-11-14 23:21:01

  pink - Użytkownik

pink
Użytkownik
Skąd: P17PY93
Zarejestrowany: 2005-09-16

Re: Strona w budowie

chce to opakowac w diva aby mialo stala szerokosc, bo sie rozjezdza na wiekszych monitorach ale nie wychodzi, jakis pomysł????


T430 think-box 4.9-custom x86_64 Intel(R) Core(TM) i5-3230M CPU @ 2.60GHz GenuineIntel GNU/Linux
"Doktor plama i maharadża są pod złotym leszczem." "Człowieka od zwierzęcia odróżnia ciekawość świata. Patrze słucham i wyciągam wnioski."
https://www.behance.net/przemyslawmamon

Offline

 

#62  2011-11-21 11:42:57

  pink - Użytkownik

pink
Użytkownik
Skąd: P17PY93
Zarejestrowany: 2005-09-16

Re: Strona w budowie

done & dusted, finalna wersja dziekuje za wszystkie krytyczne rady, sugestie i pomoc przydaly sie.


T430 think-box 4.9-custom x86_64 Intel(R) Core(TM) i5-3230M CPU @ 2.60GHz GenuineIntel GNU/Linux
"Doktor plama i maharadża są pod złotym leszczem." "Człowieka od zwierzęcia odróżnia ciekawość świata. Patrze słucham i wyciągam wnioski."
https://www.behance.net/przemyslawmamon

Offline

 

#63  2012-02-09 14:01:41

  pink - Użytkownik

pink
Użytkownik
Skąd: P17PY93
Zarejestrowany: 2005-09-16

Re: Strona w budowie

Kod:

html, body, #tabs, section,li {
                        margin: 0;
                        padding: 0;
                        font-family:Verdana,Helvetica,Sans;
                        }
                        #main{
                        background: grey;
                        width: 940px;
                        margin-left: auto;
                        margin-right: auto;
                        margin-top: 10px; 
                        border: 12px solid blanchedalmond;
                                          
                                }
                                #layer1 {
                                background: #707070;
                                color: #fff;
                                position: relative;
                                width: 940px;
                                height: 600px;
                                margin-top: 30px;
                                border-top: 13px solid gainsboro;
                                }
                                #layer2 {
                                background: #f9ad81;
                                color: #fff;
                                position: absolute;
                                top: 40px;
                                left: -50px;
                                width: 200px;
                                height: 500px;
                                z-index: 1;
                                border-top: 13px solid gainsboro;
                                border-bottom: 13px solid gainsboro;
                                  /* TRANSPARENCY Theoretically for IE 8 & 9 (more valid) */
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=80);

    /* Older than Firefox 0.9 */
    -moz-opacity:0.8;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.8;

    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 0.8;

                                }
                                #layer3 {
                                background: #f9ad81;
                                color: #fff;
                                position: absolute;
                                top: 40px;
                                left: 160px;
                                width: 300px;
                                height: 500px;
                                z-index: 1;
                                border-top: 13px solid gainsboro;
                                border-bottom: 13px solid gainsboro;
                                  /* TRANSPARENCY Theoretically for IE 8 & 9 (more valid) */
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=80);

    /* Older than Firefox 0.9 */
    -moz-opacity:0.8;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.8;

    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 0.8;

                                }
                                #layer4 {
                                background: #f9ad81;
                                color: #fff;
                                position: absolute;
                                top: 40px;
                                left: 470px;
                                width: 500px;
                                height: 500px;
                                z-index: 1;
                                border-top: 13px solid gainsboro;
                                border-bottom: 13px solid gainsboro;
                                  /* TRANSPARENCY Theoretically for IE 8 & 9 (more valid) */
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=80);

    /* Older than Firefox 0.9 */
    -moz-opacity:0.8;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.8;

    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 0.8;

                                }

jak to skrocic???


T430 think-box 4.9-custom x86_64 Intel(R) Core(TM) i5-3230M CPU @ 2.60GHz GenuineIntel GNU/Linux
"Doktor plama i maharadża są pod złotym leszczem." "Człowieka od zwierzęcia odróżnia ciekawość świata. Patrze słucham i wyciągam wnioski."
https://www.behance.net/przemyslawmamon

Offline

 

#64  2012-02-27 22:32:36

  pink - Użytkownik

pink
Użytkownik
Skąd: P17PY93
Zarejestrowany: 2005-09-16

Re: Strona w budowie

panowie mozecie luknac znowu i powiedziec co trzeba poprawic, facet mnie molestuje ze powinny byc jakies przyciski przewijania dla tych co nie moga trafic w scrollbar.
http://pinkflood.uphero.com/

Ostatnio edytowany przez pink (2012-02-27 22:33:02)


T430 think-box 4.9-custom x86_64 Intel(R) Core(TM) i5-3230M CPU @ 2.60GHz GenuineIntel GNU/Linux
"Doktor plama i maharadża są pod złotym leszczem." "Człowieka od zwierzęcia odróżnia ciekawość świata. Patrze słucham i wyciągam wnioski."
https://www.behance.net/przemyslawmamon

Offline

 

#65  2012-02-28 09:46:13

  ArnVaker - Kapelusznik

ArnVaker
Kapelusznik
Skąd: Midgard
Zarejestrowany: 2009-05-06

Re: Strona w budowie

Na pinkflood.uphero.com/kites.html scrollbare w ramkach się chowają i trzeba kombinować żeby przewinąć góra/dół (np. użyć rolki myszy). Ten z ramki po lewej jest całkiem schowany, a ten z ramki po prawej akurat nie mieści mi się na ekranie (1280x1024).

Offline

 

#66  2012-02-28 11:42:59

  pink - Użytkownik

pink
Użytkownik
Skąd: P17PY93
Zarejestrowany: 2005-09-16

Re: Strona w budowie

no wlasnie, o to sie czepil i mam problem bo na tej mam z-indeks i jeden div jest nad drugim wiec myslalem by przeniesc scroll na lewo ale to nie takie proste.

troche poprawilem, ale zastanawiam sie nad jakos inna opcja przewijania moze cos z .js ( z wielkimi przyciskami) macie jakies polmysly.


T430 think-box 4.9-custom x86_64 Intel(R) Core(TM) i5-3230M CPU @ 2.60GHz GenuineIntel GNU/Linux
"Doktor plama i maharadża są pod złotym leszczem." "Człowieka od zwierzęcia odróżnia ciekawość świata. Patrze słucham i wyciągam wnioski."
https://www.behance.net/przemyslawmamon

Offline

 

#67  2013-12-13 20:32:10

  pink - Użytkownik

pink
Użytkownik
Skąd: P17PY93
Zarejestrowany: 2005-09-16

Re: Strona w budowie

pomylka

Ostatnio edytowany przez pink (2013-12-13 21:06:55)


T430 think-box 4.9-custom x86_64 Intel(R) Core(TM) i5-3230M CPU @ 2.60GHz GenuineIntel GNU/Linux
"Doktor plama i maharadża są pod złotym leszczem." "Człowieka od zwierzęcia odróżnia ciekawość świata. Patrze słucham i wyciągam wnioski."
https://www.behance.net/przemyslawmamon

Offline

 

Stopka forum

Powered by PunBB
© Copyright 2002–2005 Rickard Andersson
Nas ludzie lubią po prostu, a nie klikając w przyciski ;-)