[HTML, Css] - Задай вопрос, получи ответ

Discussion in 'PHP' started by banned, 28 Jun 2007.

Thread Status:
Not open for further replies.
  1. swordfishik

    swordfishik New Member

    Joined:
    9 Sep 2009
    Messages:
    151
    Likes Received:
    1
    Reputations:
    0
    Всем привет, вот реализовываю резиновый макет в 3 колонки и столкнулся с проблемой в меню, в нем 7 элементов, первый и последний прибиты по краям, а остальные отталкиваются от краев блока. Приведу код:
    HTML:
    #menu_footer{
    	float:left;
    	width:100%;
    	margin-top:10px;
    	position:relative;
    	height:16px;
    }
    HTML:
    <div id="menu_footer">
    <a style="position:absolute;top:0;left:0;" href="/ru/">Главная</a>
    <a style="position:absolute;top:0;left:50%;margin-left:-35%;" href="/ru/pages/about/">О проекте</a>
    <a style="position:absolute;top:0;left:50%;margin-left:-18%;" href="/ru/news/">Новости</a>
    <a style="position:absolute;top:0;left:50%;margin-left:-3%;" href="/ru/articles/">Статьи</a>
    <a style="position:absolute;top:0;right:50%;margin-right:-18.8%;" href="/ru/pages/history_dvs/">История</a>
    <a style="position:absolute;top:0;right:50%;margin-right:-35.4%;" href="/ru/pages/contact/">Контакты</a>
    <a style="position:absolute;top:0;right:0;" href="/ru/pages/help/">Помощь</a>
    </div>
    menu_footer - центральный блок, который тянется. Сейчас меню при 1024 смотрится нормально, все пункты относительно друг друга на одинаковом расстоянии, а при большем разрешении, расстояние у всех разное, почему так? и как бы можно реализовать это меню проще, чтобы все пункты были на одинаковом расстоянии друг от друга. Спасибо.
     
  2. admink1

    admink1 Member

    Joined:
    12 Jun 2009
    Messages:
    63
    Likes Received:
    21
    Reputations:
    1
    как оцентрировать по вертикали? :)
     
  3. swordfishik

    swordfishik New Member

    Joined:
    9 Sep 2009
    Messages:
    151
    Likes Received:
    1
    Reputations:
    0
    HTML:
    vertical-align:middle
    работает в таблицах
     
  4. Edward

    Edward Banned

    Joined:
    11 Feb 2010
    Messages:
    329
    Likes Received:
    21
    Reputations:
    -1
    Может попробовать размеры в процентах задать?
     
  5. swordfishik

    swordfishik New Member

    Joined:
    9 Sep 2009
    Messages:
    151
    Likes Received:
    1
    Reputations:
    0
    кого именно?
     
  6. Edward

    Edward Banned

    Joined:
    11 Feb 2010
    Messages:
    329
    Likes Received:
    21
    Reputations:
    -1
    Ширину блоков, что б на при разных размерах экрана у людей растягивалось по ширине и выглядело пропорционально. 2-й способ это сделать фиксированную ширину и вообще все размеры фиксированные в пикселях, только при надобности в высоту резину сделать, если динамические страницы, поместить все в отдельный div, для него задать <div align="center" либо через css прописать правило margin: auto, тогда основной блок будет центрироваться, при этом если ширина юзера = ширине сайта, то будет нормально, если ширина юзера > ширины сайта, то справа и слева равные участки будут заполняться background`ом
     
  7. banned

    banned Banned

    Joined:
    20 Nov 2006
    Messages:
    3,324
    Likes Received:
    1,193
    Reputations:
    252
    Во-первых, свойство absolute придумали не для такого извращенства
    Во-вторых, у меня твой код работает на разрешении 1680*1050, окна браузера менял, все ок

    PHP:
    <!DOCTYPE html>
    <
    html dir="ltr" lang="ru">
    <
    head>
        <
    title>1</title>
            <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <
    style>#menu_footer{
        
    float:left;
        
    width:100%;
        
    margin-top:10px;
        
    position:relative;
        
    height:16px;
    }</
    style>
    </
    head>
    <
    body
    <div id="menu_footer">
        <
    a style="position:absolute;top:0;left:0;" href="/ru/">Главная</a
        <
    a style="position:absolute;top:0;left:50%;margin-left:-35%;" href="/ru/pages/about/">О проекте</a>
        <
    a style="position:absolute;top:0;left:50%;margin-left:-18%;" href="/ru/news/">Новости</a
        <
    a style="position:absolute;top:0;left:50%;margin-left:-3%;" href="/ru/articles/">Статьи</a
        <
    a style="position:absolute;top:0;right:50%;margin-right:-18.8%;" href="/ru/pages/history_dvs/">История</a
        <
    a style="position:absolute;top:0;right:50%;margin-right:-35.4%;" href="/ru/pages/contact/">Контакты</a
        <
    a style="position:absolute;top:0;right:0;" href="/ru/pages/help/">Помощь</a
    </
    div>
    Может у тебя доктайп не стоит?
     
    #1667 banned, 23 Nov 2010
    Last edited: 23 Nov 2010
  8. swordfishik

    swordfishik New Member

    Joined:
    9 Sep 2009
    Messages:
    151
    Likes Received:
    1
    Reputations:
    0
    есть доктайп, ты не заметил разницы, ну и хорошо:) есть небольшая разница в расстоянии между пунктами
     
  9. banned

    banned Banned

    Joined:
    20 Nov 2006
    Messages:
    3,324
    Likes Received:
    1,193
    Reputations:
    252
    Ты, наверно, имеешь проблемы со зрением или сам не знаешь что хочешь. Но в том коде что ты дал проблем нет
     
  10. swordfishik

    swordfishik New Member

    Joined:
    9 Sep 2009
    Messages:
    151
    Likes Received:
    1
    Reputations:
    0
    я мерял расстояния фотошопом, то разница есть
     
  11. Andres

    Andres Elder - Старейшина

    Joined:
    4 Apr 2008
    Messages:
    320
    Likes Received:
    119
    Reputations:
    0
    Isis, когда не зайду - ты всегда с кем-то ссоришься))
     
  12. Fuckel

    Fuckel Banned

    Joined:
    16 Jan 2008
    Messages:
    274
    Likes Received:
    59
    Reputations:
    6
    HTML:
    <style>
    #t {
    width: 100%;
    text-align: center;
    }
    
    #t tr td:last-child { text-align: right }
    #t tr td:first-child { text-align: left }
    </style>
    
    <table id="t">
    <tr>
    <td>
        <a href="/ru/">Главная</a>
    </td>
    <td>
        <a href="/ru/">О проекте</a>
    </td>
    <td>
        <a href="/ru/">Новости</a>
    </td>
    <td>
        <a href="/ru/">Статьи</a>
    </td>
    <td>
        <a href="/ru/">История</a>
    </td>
    <td>
        <a href="/ru/">Контакты</a>
    </td>
    <td>
        <a href="/ru/">Помощь</a>
    </td>
    </tr>
    </table>
    
     
  13. swordfishik

    swordfishik New Member

    Joined:
    9 Sep 2009
    Messages:
    151
    Likes Received:
    1
    Reputations:
    0
    таблицами проще простого это сделать
     
  14. Fuckel

    Fuckel Banned

    Joined:
    16 Jan 2008
    Messages:
    274
    Likes Received:
    59
    Reputations:
    6
    А в чем проблема тогда? Предрассудки?
     
  15. swordfishik

    swordfishik New Member

    Joined:
    9 Sep 2009
    Messages:
    151
    Likes Received:
    1
    Reputations:
    0
    верстка полностью на дивах!
     
  16. Fuckel

    Fuckel Banned

    Joined:
    16 Jan 2008
    Messages:
    274
    Likes Received:
    59
    Reputations:
    6
    Это не проблема. Это функционал всех браузеров и грех его не использовать, если это упрощает работу.
     
  17. swordfishik

    swordfishik New Member

    Joined:
    9 Sep 2009
    Messages:
    151
    Likes Received:
    1
    Reputations:
    0
    цель дивы, таблицами я бы уже дааавно сделал :)
     
  18. Fuckel

    Fuckel Banned

    Joined:
    16 Jan 2008
    Messages:
    274
    Likes Received:
    59
    Reputations:
    6
    HTML:
    <style>
    div#d
    { width: 100%; }
    
    div#d div
    { float: left; width: 14.28%; text-align: center; }
    
    div#d div:first-child
    { text-align: left }
    
    
    div#d div:last-child
    { text-align: right }
    
    </style>
    
    <div id="d">
    
    <div><a href="#">меню 1</a></div>
    <div><a href="#">меню 2</a></div>
    <div><a href="#">меню 3</a></div>
    <div><a href="#">меню 4</a></div>
    <div><a href="#">меню 5</a></div>
    <div><a href="#">меню 6</a></div>
    <div><a href="#">меню 7</a></div>
    
    </div>
     
  19. AnGeI

    AnGeI Elder - Старейшина

    Joined:
    8 Dec 2008
    Messages:
    395
    Likes Received:
    79
    Reputations:
    16
    посоветуйте любые html теги, в которых есть обработчик js кода.
    Типа: <body onload="javascript: alert()"></body>
     
  20. mrxh8

    mrxh8 New Member

    Joined:
    16 Apr 2009
    Messages:
    69
    Likes Received:
    4
    Reputations:
    0
    onload есть только у боди и фреймсет
    есть же куча других событий (типа onclik, onmouseover и т.д.), а они в могут быть в куче хтмл тегов
     
Thread Status:
Not open for further replies.