Позиционирование

Dumle · September 4, 2011

Здравствуйте

Хочу сделать так чтобы меню выходило за рамки таблицы. Примерно вот так..

Само меню запихано в див, как выравнить див по центру ровненько, чтоб как через margin:0 auto;?


#nav1{
width:700px;
z-index:2;
position:absolute;
top:30%;
left:450px;
}

вот так пытался добиться желаемого, но так не выравнить автоматически и при изменении размера окна браузера он все равно останется на том месте и будет ужас...)

какие есть пути решения?

Edited September 4, 2011 by Dumle

Temiks · September 4, 2011

изображение не увидел

если правильно понял задачу, то


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css" >
           html, body {
               margin: 0;
               padding: 0;
           }
           div {
               position: relative;
               text-align: center;
           }
           div div {
               position: absolute;
               display: inline;
               width: 100px;
               height: 100px;
               background: red;
           }
        </style>
    </head>
    <body>
        <div>
            <div>
                text
            </div>
        </div>
    </body>
</html>

Dumle · September 4, 2011

Картинку перезалил, надеюсь отображается

Temiks · September 4, 2011

Вот


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css" >
           html, body {
               margin: 0;
               padding: 0;
           }
           ul {
               margin: 0;
               padding: 0;
               list-style-type: none;
           }
           #box {
               width: 800px;
               height: 600px;
               background: red;
               margin: auto;
           }
           #nav {
               overflow: hidden;
               margin:  0 -30px;
               background: gray;
           }
           #nav li {
               float: left;
               display: inline-block;
               height: 40px;
           }
        </style>
    </head>
    <body>
        <div id="box" >
            <ul id="nav" >
                <li>
                    <a href="#">menu</a>
                </li>
                <li>
                    <a href="#">menu</a>
                </li>
                <li>
                    <a href="#">menu</a>
                </li>
                <li>
                    <a href="#">menu</a>
                </li>
            </ul>
        </div>
    </body>
</html>

Gaspode · September 4, 2011

float: left;
display: inline-block;

Чего?

Dumle · September 5, 2011

Немножко(пару часов )добился желаемого

Temiks, спасибо)

Temiks · September 5, 2011

On 9/4/2011 at 7:11 PM, Gaspode said:
float: left;
display: inline-block;
Чего?

Насчет display: inline-block; ?

Nekromancer · September 5, 2011

На счёт того где тут смысл

Sign In

Позиционирование

Question

Dumle

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Temiks

Link to comment

Share on other sites

Dumle

Link to comment

Share on other sites

Temiks

Link to comment

Share on other sites

Gaspode

Link to comment

Share on other sites

Dumle

Link to comment

Share on other sites

Temiks

Link to comment

Share on other sites

Nekromancer

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information