שלח תשובה

זירת השאלות

520
צפיות
9
תשובות

הוספת פריט לתפריט הנפתח ב CSS

,‏ 14 בינואר, 2007

מצאתי את המאמר בנושא תפריט נפתח בCSS.

נתקלתי בשתי בעיות בעת נסיון להתאים אותו לצרכי.
1. כשהוספתי פריט לתפריט, במסך 1024 ראו שישה פריטים אחד ליד השני, במסך 800 פריט אחד של התפריט נודד לשורה השניה כמו בצילום המסך המצורף. לא הצלחתי להבין מה לשנות בכדי שכל הפריטים יוצגו.
2. אם שומרים על חמישה פריטים, במסך 1024 התפריט לא פרוש מצד לצד אלא מוצמד לימין, גם כאן לא הצלחתי להבין מה לשנות בכדי שכל הפריטים יתפרשו על רוחב המסך.

בתודה מראש

תגיות:

9 תשובות

  1. איך ניסית?
    בא תראה לנו קצת קוד שננסה לעזור…

    ניסית להגדיר רוחב באחוזים? רוחב קבוע?

  2. דאל הגיב:

    קביעת רוחב של 20%
    שיניתי את שני המקומות בהם מדובר על רוחב LI
    ותפריט המשנה השתבש

  3. דאל הגיב:

    אולי היום יסכים להצטרף


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1255" />
    <title>פיזור שווה באחוזים</title>
    <style type="text/css">
    html, body {
    background:#F4F4EC;
    margin: 0;
    padding: 0;
    direction: rtl;
    text-align: right;
    font: 14px Vardana, Arial, sans-serif;
    behavior: url("http://www.webmaster.org.il/uploadedFiles/Articles/Examples/DDMenu/csshover.htc&quot;);
    }
    div#menu {
    float: right;
    width: 100%;
    border: 1px solid silver;
    background: #DAE8F8;
    }
    div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #DAE8F8;
    border: solid silver;
    border-width: 0 1px;}
    div#menu li {
    position: relative;
    margin: 0 -1px 0 0;
    display: block;
    float: right;
    width: 20%;}
    * html div#menu li {
    float: right;}
    div#menu li.submenu {
    background: url("http://www.webmaster.org.il/uploadedFiles/Articles/Examples/DDMenu/submenu_down.gif&quot😉 no-repeat center left;
    }
    div#menu li.submenu li.submenu {
    background: url("http://www.webmaster.org.il/uploadedFiles/Articles/Examples/DDMenu/submenu.gif&quot😉 no-repeat center left;
    }
    div#menu li.submenu li.submenu:hover {
    background-color: #fcc;}
    div#menu li:hover {
    background-color: #fcc;}
    div#menu li a {
    display: block;
    text-decoration: none;
    padding: 0.15em 0.5em 0.15em 0;
    width: 20%;}
    div#menu>ul a {width: auto;}
    div#menu ul ul {
    position: absolute;
    display: none;
    margin-top: -1px;
    width: 9.4em;
    border-top: 1px solid silver;}
    * html div#menu ul ul {
    margin-right: -1px;}
    div#menu ul ul li {
    border-bottom: 1px solid silver;}
    div#menu ul.first li.submenu:hover ul.second,
    div#menu ul.second li.submenu:hover ul.third {
    display: block;}
    div#menu ul.second {top: 1.5em;right: -1px;}
    div#menu ul.third {top: 0;    right: 9.55em;}
    </style>
    </head>
    <body>
    <div id="menu">
    <ul class="first">
    <li><a href="http://webmaster.org.il">דף הבית</a></li>
    <li class="submenu"><a href="#">פורומים</a>
    <ul class="second">
    <li><a href="http://webmaster.org.il">פורום משוב</a></li>
    <li><a href="http://webmaster.org.il">תכנות צד שרת</a></li>
    <li><a href="http://webmaster.org.il">בניית אתרים – צד לקוח</a></li>
    </ul>
    </li>
    <li><a href="http://webmaster.org.il/">לוח מודעות</a></li>
    <li><a href=http://webmaster.org.il>עזרי בנייה</a></li>
    <li class="submenu"><a href="#">מדורים</a>
    <ul class="second">
    <li><a href=http://webmaster.org.il</a></li>
    <li><a href=http://webmaster.org.il</a></li>
    <li class="submenu"><a href=http://webmaster.org.il</a>
    <ul class="third">
    <li><a href="http://webmaster.org.il">מדריך CSS</a></li>
    <li><a href="http://webmaster.org.il">מבחן ידע</a></li>
    <li><a href="http://webmaster.org.il">מאמרים</a></li&gt;
    </ul>
    </li>
    <li><a href="http://webmaster.org.il">מדור כללי</a></li>
    </ul>
    </li>
    </ul>
    </div>
    </body>
    </html>

  4. דאל הגיב:

    הקוד נמצא בהודעה שמעל זו
    האם יש מישהו שיודע? יכול להתייחס?
    תודה

  5. קשה להיתייחס לבעיה…
    בא תעלה את זה כקובץ מצורף htm עם קוד מוזח כמו שצריך, ואז נוכל לנסות לסייע בלי צורך להעתיק למחשב ולסדר את הקוד ולהריץ – פעולות שיקחו זמן מיותר.

  6. דאל הגיב:

    ניסיתי פעמיים
    פעם כטקסט ופעם כhtm ופעמיים משום מה הקובץ לא עלה

  7. דאל הגיב:

    העליתי את הקבצים לאתר
    באדיבותו של מוטי קרניאל שנתקל בבעיה דומה

    קובץ מקורי:
    http://www.buchach.org/tafrit

    קובץ שבו ניסיתי לפזר את העמודות באופן שווה
    http://www.buchach.org/tafrit/tafrit1.htm

  8. דאל הגיב:

    נסיון הוספת פריט לתפריט
    ניסיתי להגדיר תפריט בן שישה פריטים
    ההסברים בתוך הקובץ המצורף
    http://www.buchach.org/tafrit/tafrit2.htm

שלח תשובה

חדש! אחסון אתרים של וובמאסטר

שירות אחסון אתרים
המקצועי של וובמאסטר!

מומחים באירוח אתרי
WordPress, Joomla, Drupal

  • שרתי לינוקס עם CloudLinux, LiteSpeed
  • 1GB דיסק SSD, 10GB תעבורה חודשית
  • ממשק ניהול cPanel, תעודת SSL חינם

עכשיו במחיר היכרות:
רק 420 ש"ח לשנה!