Forum Debian Users Gang

tajwan · 2013-03-15 18:13:27

zrobiłem sobie to menu ale mam mały problem nie umie w kodzie znaleźć formułę odpowiadającą za kolor rogów w menu

Kod:

    /* Rounded corners for the first link of the menu/submenus */
        #cssmenu > ul li:first-child>a {
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border-top: 0;
        }

        /* Rounded corners for the last link of the menu/submenus */
        #cssmenu > ul li:last-child>a {
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-bottom: 0;
        }

to są te rogi ale nie wiem gdzie jest kolor

azhag · 2013-03-15 18:22:04

dodaj

Kod:

border: 1px solid #333;

tajwan · 2013-03-15 18:26:59

gdzie ? w którym miejscu chyba nie oto mi chodziło

Ostatnio edytowany przez tajwan (2013-03-15 18:28:19)

azhag · 2013-03-15 18:31:21

Wewnątrz klamry, obok innych border-*. Chyba. :)

tajwan · 2013-03-15 18:50:01

a wielość menu gdzie znajde

Kod:

<body>

<h2>Your Menu</h2>

<style type="text/css">/* Some stylesheet reset */
#cssmenu > ul{
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    line-height: 1;
}

/* The container */
#cssmenu > ul {
    display: block;
    position: relative;
    width: 15px;
}

    /* The list elements which contain the links */
    #cssmenu > ul li {
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
        width: 15px;    
    }

        /* General link styling */
        #cssmenu > ul li a {
            /* Layout */
            display: block;
            position: relative;
            margin: 0;
            border-top: 1px dotted pink;
            border-bottom: 1px dotted pink;
            padding: 11px 20px;
            width: 110px;

            /* Typography */
            font-family:  Helvetica, Arial, sans-serif;
            color: pink;
            text-decoration: none;
            text-transform: uppercase;
            text-shadow: 0 1px 0 pink;
            font-size: 13px;
            font-weight: 300;

            /* Background & effects */
            background: pink;
        }

        /* Rounded corners for the first link of the menu/submenus */
        #cssmenu > ul li:first-child>a {

            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border-top: 0;
        }

        /* Rounded corners for the last link of the menu/submenus */
        #cssmenu > ul li:last-child>a {

            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-bottom: 0;
        }


        /* The hover state of the menu/submenu links */
        #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
            color: ;
            text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
            background: pink;
            background: -webkit-linear-gradient(bottom, pink, pink);
            background: -ms-linear-gradient(bottom, pink, pink); 
            background: -moz-linear-gradient(bottom, pink, pink);
            background: -o-linear-gradient(bottom, pink, pink);
            border-ctransparent: pink;
        }

        /* The arrow indicating a submenu */
        #cssmenu > ul .has-sub>a:pink:after {
            content: '';
            position: absolute;
            top: 16px;
            right: 10px;
            width: 0px;
            height: 0px;

            /* Creating the arrow using borders */
            border: 4px solid transparent;
            border-left: 4px solid pink; 
        }

        /* The same arrow, but with a darker color, to create the shadow effect */
        #cssmenu > ul .has-sub>a::before {
            content: '';
            position: absolute;
            top: 17px;
            right: 10px;
            width: 0px;
            height: 0px;

            /* Creating the arrow using borders */
            border: 4px solid transparent;
            border-left: 4px solid pink;
        }

        /* Changing the color of the arrow on hover */
        #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
            border-left: 4px solid pink;
        }

        #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
            border-left: 4px solid rgba(0, 0, 0, .25);
        }

    
        /* THE SUBMENUS */
        #cssmenu > ul ul {
            position: absolute;
            left: 150px;
            top: -9999px;
            padding-left: 5px;
            opacity: 0;
            /* The fade effect, created using an opacity transition */
            -webkit-transition: opacity .3s ease-in;
            -moz-transition: opacity .3s ease-in;
            -o-transition: opacity .3s ease-in;
            -ms-transition: opacity .3s ease-in;
        }

        /* Showing the submenu when the user is hovering the parent link */
        #cssmenu > ul li:hover>ul {
            top: 0px;
            opacity: 1;
        }</style>
<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div style="clear:both; margin: 0 0 30px 0;"> </div>

<h2>Installation Instructions</h2>

<ol>
   <li>Upload the <code>menu_assets</code> folder to the root directory of your website. This is usually where your 

<code>index.html</code> file is.</li>
   <li>Copy and paste the code below somewhere between the <code><head></head></code> tags.<textarea 

class='css'><link href="/menu_assets/styles.css" rel="stylesheet" type="text/css"></textarea></li>
   <li>Copy and paste the html below where ever you want your menu to show up.<textarea class='html'><div 

id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div></textarea></li>
</ol>



</body>
</html>

wszystko różowe a rogi białe i jest to ładne takie półokrągłe a ja potrzebuje inny kolor niż biały

COŚ O TO a CHODZI ALE NIE WIEM CO

Ostatnio edytowany przez tajwan (2013-03-15 18:58:43)

pink · 2013-03-15 19:35:54

Kod:

<html>
<body>

<h2>Your Menu</h2>

<style type="text/css">/* Some stylesheet reset */
#cssmenu > ul{
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    line-height: 1;
}

/* The container */
#cssmenu > ul {
    display: block;
    position: relative;
    width: 15px;
}

    /* The list elements which contain the links */
    #cssmenu > ul li {
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
        width: 15px;    
    }

        /* General link styling */
        #cssmenu > ul li a {
            /* Layout */
            display: block;
            position: relative;
            margin: 0;
            border-top: 1px dashed black;
            padding: 11px 20px;
            width: 110px;

            /* Typography */
            font-family:  Helvetica, Arial, sans-serif;
            color: pink;
            text-decoration: none;
            text-transform: uppercase;
            text-shadow: 0 1px 0 grey;
            font-size: 13px;
            font-weight: 300;

            /* Background & effects */
            background: pink;
        }

        /* Rounded corners for the first link of the menu/submenus */
        #cssmenu > ul li:first-child>a {

            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-top: 0;
        }

        /* Rounded corners for the last link of the menu/submenus */
        #cssmenu > ul li:last-child>a {

            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border-bottom: 0;
        }


        /* The hover state of the menu/submenu links */
        #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
            color: grey;
            text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
            background: whitesmoke;
          
        }

        /* The arrow indicating a submenu */
        #cssmenu > ul .has-sub>a:pink:after {
            content: '';
            position: absolute;
            top: 16px;
            right: 10px;
            width: 0px;
            height: 0px;

            /* Creating the arrow using borders */
            border: 4px solid transparent;
            border-left: 4px solid pink; 
        }

        /* The same arrow, but with a darker color, to create the shadow effect */
        #cssmenu > ul .has-sub>a::before {
            content: '';
            position: absolute;
            top: 17px;
            right: 10px;
            width: 0px;
            height: 0px;

            /* Creating the arrow using borders */
            border: 4px solid transparent;
            border-left: 4px solid pink;
        }

        /* Changing the color of the arrow on hover */
        #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
            border-left: 4px solid pink;
        }

        #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
            border-left: 4px solid rgba(0, 0, 0, .25);
        }

    
        /* THE SUBMENUS */
        #cssmenu > ul ul {
            position: absolute;
            left: 150px;
            top: -9999px;
            padding-left: 5px;
            opacity: 0;
            /* The fade effect, created using an opacity transition */
            -webkit-transition: opacity .3s ease-in;
            -moz-transition: opacity .3s ease-in;
            -o-transition: opacity .3s ease-in;
            -ms-transition: opacity .3s ease-in;
        }

        /* Showing the submenu when the user is hovering the parent link */
        #cssmenu > ul li:hover>ul {
            top: 0px;
            opacity: 1;
        }</style>
<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>




</body>
</html>

zbajerowane.

Ostatnio edytowany przez pink (2013-03-15 19:38:46)

tajwan · 2013-03-15 20:34:11

??

Kod:

http://cssmenumaker.com/builder/415208

tu masz oryginalny plik

Ostatnio edytowany przez tajwan (2013-03-15 20:35:29)

pink · 2013-03-15 20:37:24

border-radius to sa te biale rogi

skopiuj sobie ten kod wyzej i bedziesz mial samo sprite menu - tak jak chcesz (mniej wiecej).

tajwan · 2013-03-15 22:00:52

Dobra sprawa już jest prawie rozwiązana wszystko już zrobiłem tak jak chciałem więc pytania są już NIEWAŻNE.

Jedynie co bym teraz chciał zrobić to zmienić szerokość pod menu to co się wysuwa, ale z tego co ja widzę to pod menu jest ustawione na automatyczną szerokość (tak samo szerokie jakie jest główne menu z pozycjami). Może się mylę nie wiem nie znam się.

Ostatnio edytowany przez tajwan (2013-03-16 03:15:03)

Time (s)	Query
0.00010	SET CHARSET latin2
0.00004	SET NAMES latin2
0.00129	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='13.58.18.135' WHERE u.id=1
0.00099	REPLACE INTO punbb_online (user_id, ident, logged) VALUES(1, '13.58.18.135', 1732297256)
0.00026	SELECT * FROM punbb_online WHERE logged<1732296956
0.00065	SELECT topic_id FROM punbb_posts WHERE id=227544
0.00007	SELECT id FROM punbb_posts WHERE topic_id=23106 ORDER BY posted
0.00035	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=23106 AND t.moved_to IS NULL
0.00030	SELECT search_for, replace_with FROM punbb_censoring
0.00086	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=23106 ORDER BY p.id LIMIT 25,25
0.00105	UPDATE punbb_topics SET num_views=num_views+1 WHERE id=23106
Total query time: 0.00596 s

Forum Debian Users Gang

Ogłoszenie

#26 2013-03-15 18:13:27

tajwan - boss

Re: Podstrony na www

Kod:

#27 2013-03-15 18:22:04

azhag - Admin łajza

Re: Podstrony na www

Kod:

#28 2013-03-15 18:26:59

tajwan - boss

Re: Podstrony na www

#29 2013-03-15 18:31:21

azhag - Admin łajza

Re: Podstrony na www

#30 2013-03-15 18:50:01

tajwan - boss

Re: Podstrony na www

Kod:

#31 2013-03-15 19:35:54

pink - Użytkownik

Re: Podstrony na www

Kod:

#32 2013-03-15 20:34:11

tajwan - boss

Re: Podstrony na www

Kod:

#33 2013-03-15 20:37:24

pink - Użytkownik

Re: Podstrony na www

#34 2013-03-15 22:00:52

tajwan - boss

Re: Podstrony na www

Stopka forum

Informacje debugowania