Как разместить это меню в правом нижнем углу родительского элемента div?

Question

Как разместить это меню в правом нижнем углу родительского элемента div?

0

Я пытался полностью позиционировать свою навигацию в правом нижнем углу своего родительского div (header> nav>), и я немного потерялся. Помощь будет оценена!

Я пытаюсь относительно позиционировать родительский div, но каждое свойство, которое я пытаюсь, оно либо исчезает из браузера, выравнивается полностью в правом нижнем углу страницы, а не его родительском div, или где-то еще я не хочу это идти.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="/style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="images/favicon.png" />
</head>

<body>

    <div id="wrapper">

        <header>
            <div class="logo">
                <img src="images/logo.png" / id="logo">
            </div>
            <nav>
                <ul id="menu">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="career.html">Career</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>             
            </nav>
        </header>

    </div>

</body>
</html>

body {
    margin:auto;
    width:960px;
}

.logo {
    display:block;
    float:left;
    width:242px;
    height:141px;
    margin:0px;
}



#header {
    position:relative;
    height:100%;
}

#nav .menu {
    position:absolute;
    bottom:0px;
    right:0px;
    margin:0px;
    padding:0px;
    float:right;
}

#menu ul {
    list-style:none;
}

#menu li {
    display:inline;
    float:left;
}

#menu a {
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}

#menu a:hover,a:active
{
background-color:#7A991A;
}

Corey 09 апр. 2014, в 06:50

Источник

Теги:

html

css

css3

absolute

positioning

2 ответа

2

вы определяете в своем css nav tag element не id или menu - это id not class Пожалуйста, перейдите на свой css и определите как это

Переход к этому

#nav .menu

в этот

nav #menu

демонстрация

Rohit Azad 09 апр. 2014, в 01:45

0

Я ценю помощь, однако, я попробовал это, и он перемещает его в правом нижнем углу экрана. Может быть, мне нужно добавить высоту к родительскому div?
Corey 09 апр. 2014, в 04:01
0

Обновлена проверка ссылок на ваш css. Я изменяю некоторые css jsfiddle.net/9NNDD/1.
Rohit Azad 09 апр. 2014, в 04:05
0

Вот где я нахожусь: jsfiddle.net/dRPyJ По-прежнему не отображается должным образом. Я думаю, что это вне экрана над оберткой.
Corey 09 апр. 2014, в 04:33

Показать ещё 1 комментарий

Ещё вопросы

Я ценю помощь, однако, я попробовал это, и он перемещает его в правом нижнем углу экрана. Может быть, мне нужно добавить высоту к родительскому div?
Обновлена проверка ссылок на ваш css. Я изменяю некоторые css jsfiddle.net/9NNDD/1.
Вот где я нахожусь: jsfiddle.net/dRPyJ По-прежнему не отображается должным образом. Я думаю, что это вне экрана над оберткой.

interstellarDust · Accepted Answer · 2014-04-09T01-54-00.000Z

Вы допустили некоторые ошибки,

вы используете #header в css, но вы не ставите заголовок id в <header>,
вы используете #nav в css вместо тега nav, потому что нет идентификатора в теге nav,
Высота #header составляет 100%. он займет высоту родителя. положить height:auto; так что ему потребуется только высота, необходимая для его содержания.

Я сделал JSFiddle. пожалуйста, проверьте. надеюсь, что это решит вашу проблему.

http://jsfiddle.net/banded_krait/Q4Zjj/

Огромное спасибо, полосатый Крайт! Я вижу, что я сделал там благодаря тебе! Простые проблемы приводят к сложному беспокойству, ха-ха. <3