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 [url=http://dev.opera.com/articles/view/css3-linear-gradients/]jest dostępna[/url] (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 [tt]position: fixed[/tt].

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 [i]placehodera[/i] 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 [url]pinkflood.uphero.com/kites.html[/url] 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)

Time (s)	Query
0.00010	SET CHARSET latin2
0.00004	SET NAMES latin2
0.00128	SELECT u., g., o.logged FROM punbb_users AS u INNER JOIN punbb_groups AS g ON u.group_id=g.g_id LEFT JOIN punbb_online AS o ON o.ident='18.116.40.151' WHERE u.id=1
0.00071	REPLACE INTO punbb_online (user_id, ident, logged) VALUES(1, '18.116.40.151', 1732301109)
0.00025	SELECT * FROM punbb_online WHERE logged<1732300809
0.00061	SELECT topic_id FROM punbb_posts WHERE id=185750
0.00005	SELECT id FROM punbb_posts WHERE topic_id=19931 ORDER BY posted
0.00032	SELECT t.subject, t.closed, t.num_replies, t.sticky, f.id AS forum_id, f.forum_name, f.moderators, fp.post_replies, 0 FROM punbb_topics AS t INNER JOIN punbb_forums AS f ON f.id=t.forum_id LEFT JOIN punbb_forum_perms AS fp ON (fp.forum_id=f.id AND fp.group_id=3) WHERE (fp.read_forum IS NULL OR fp.read_forum=1) AND t.id=19931 AND t.moved_to IS NULL
0.00027	SELECT search_for, replace_with FROM punbb_censoring
0.00440	SELECT u.email, u.title, u.url, u.location, u.use_avatar, u.signature, u.email_setting, u.num_posts, u.registered, u.admin_note, p.id, p.poster AS username, p.poster_id, p.poster_ip, p.poster_email, p.message, p.hide_smilies, p.posted, p.edited, p.edited_by, g.g_id, g.g_user_title, o.user_id AS is_online FROM punbb_posts AS p INNER JOIN punbb_users AS u ON u.id=p.poster_id INNER JOIN punbb_groups AS g ON g.g_id=u.group_id LEFT JOIN punbb_online AS o ON (o.user_id=u.id AND o.user_id!=1 AND o.idle=0) WHERE p.topic_id=19931 ORDER BY p.id LIMIT 50,25
0.00080	UPDATE punbb_topics SET num_views=num_views+1 WHERE id=19931
Total query time: 0.00883 s

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

Informacje debugowania