Forum Debian Users Gang

pink · 2011-11-11 21:22:07

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

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

kamikaze · 2011-11-11 22:23:56

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)

Minio · 2011-11-11 22:40:28

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.)

pink · 2011-11-13 22:46:52

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.

Minio · 2011-11-14 00:16:56

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>

pink · 2011-11-14 00:39:09

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

Minio · 2011-11-14 00:57:41

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.

pink · 2011-11-14 09:44:09

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.
---------------
|*|*|*| ****|
-------- ****|
|*|*|*| ****|
---------------

Minio · 2011-11-14 11:22:12

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.

pink · 2011-11-14 11:43:20

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

pink · 2011-11-14 23:21:01

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

pink · 2011-11-21 11:42:57

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

pink · 2012-02-09 14:01:41

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???

pink · 2012-02-27 22:32:36

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)

ArnVaker · 2012-02-28 09:46:13

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).

pink · 2012-02-28 11:42:59

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.

pink · 2013-12-13 20:32:10

pomylka

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

Forum Debian Users Gang

Ogłoszenie

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

pink - Użytkownik

Re: Strona w budowie

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

kamikaze - Administrator

Re: Strona w budowie

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

Minio - Użyszkodnik

Re: Strona w budowie

Kod:

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

pink - Użytkownik

Re: Strona w budowie

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

Minio - Użyszkodnik

Re: Strona w budowie

Kod:

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

pink - Użytkownik

Re: Strona w budowie

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

Minio - Użyszkodnik

Re: Strona w budowie

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

pink - Użytkownik

Re: Strona w budowie

Kod:

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

Minio - Użyszkodnik

Re: Strona w budowie

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

pink - Użytkownik

Re: Strona w budowie

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

pink - Użytkownik

Re: Strona w budowie

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

pink - Użytkownik

Re: Strona w budowie

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

pink - Użytkownik

Re: Strona w budowie

Kod:

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

pink - Użytkownik

Re: Strona w budowie

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

ArnVaker - Kapelusznik

Re: Strona w budowie

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

pink - Użytkownik

Re: Strona w budowie

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

pink - Użytkownik

Re: Strona w budowie

Stopka forum