Заголовок ссылки на сайт - HTML и CSS

0

Может ли кто-нибудь указать, как получить пустое пространство, оставшееся до поля входа, чтобы быть выделено как часть ссылки в заголовке заголовка? Очевидно, я не хочу, чтобы люди нажимали на окно входа в систему и возвращались на главную страницу. Пробовал плавать элемент loginBox и действительно не уверен, что делать. Здесь код:

 <html>
    <head>
        <link rel="stylesheet" href="css.css"/>
    </head>
    <body>
        <div id="container">
            <a href="#" style="display:block">
                <div id="title">
                <h1>Record Store</h1>
                <img src="images/vinyl.jpg" height="80px" width="auto" />
                </div>
            </a>

                <div id="loginBox">
                    <form action="#">
                        <label>User Name: </label>
                        <input type="text" />
                        <label>Password: </label>
                        <input type="password" />
                        <input type="submit" value="Login"/>
                    </form>
                </div>  

            <div id="navigation" >
                <ul class="navbar">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Vinyl Stock</a></li>
                    <li><a href="#">Online Offers</a></li>
                    <li><a href="#">Collectors News</a></li>
                    <li><a href="#">Join</a></li>
                </ul>
            </div>
            <div id="content">
                <p>You'd be a fool to believe anything on this site</p>
            </div>
            <div id="footer">
                <span id="adminLogin"><a href="#">Admin Login</a></span>
                <p id="copyright">&copy;</p>
            </div>
        </div>
    </body>
</html>

а также

* {
        padding: 0;
    margin:0;
}

body{
    font-family: Arial, Verdana, Helvetica;
}

h1{
    font: bold 2.8em Arial, Verdana, Helvetica;
    position:absolute;
    left: 10px;
    top:5px;

}

img { 
    position: absolute;
    left:300px;
    /*top:5px;*/

    }


#container {
    margin: auto;
    width: 800px;
    border: 1px solid black;
    z-index: -9;
}

#title {

    margin:auto;
    /*border: 1px solid black;*/
    height: 16%;
    position: relative;
}

#loginBox{
    float:right;
    border: 1px solid black;
}

#navigation{
    clear:both;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    height: auto;
    overflow: auto;
    background-color: blue;
}

#content{
    min-height:400px;
    background-color: white;
}

#adminLogin{
    float:right;
    margin-right: 60px;
    margin-top: 20px;
}

#footer{
    height:100px;
    background-color: red;
}

#copyright{
    clear: both;
    text-align: center;

}




.navbar {

}

.navbar ul {

}


.navbar li {

    font: bold 12px/1.2em Arial, Verdana, Helvetica;
    height: auto;
    list-style: none;
    text-align: center;
    width: 20%;
    float:left;
    background-color: blue;
    padding: 1% 0px;



}
.navbar a {
    border-right: 1px solid #1F5065;
    color: white;
    display: block;
    text-decoration: none;

}

.navbar li:hover a {
    color: black;

}

.navbar li:hover{
    background-color: white;

}
  • 2
    Можете ли вы сделать из этого скрипку? Итак, мы можем увидеть, как это выглядит.
  • 0
    Первая попытка использования JFiddle: jsfiddle.net/m4vUr . Не очень хорошо выглядит в IE.
Показать ещё 4 комментария
Теги:

1 ответ

0

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

h1 {
    font: bold 2.8em Arial,Verdana,Helvetica;
    display: inline-block;
    vertical-align: top;
}

#header {
    position: relative;
    margin:auto;
}
#title {
    padding: 5px 0 24px 10px;
}
#loginBox{
    border: 1px solid black;
    position:absolute;
    right:0;
    bottom:0;
}

Затем добавьте свой относительный div, например

    <div id="header">
        <a href="#" style="display:block">
            <div id="title">
            <h1>Record Store</h1>
            <img src="images/vinyl.jpg" height="80px" width="auto" />
            </div>
        </a>

        <div id="loginBox">
            <form action="#">
                <label>User Name: </label>
                <input type="text" />
                <label>Password: </label>
                <input type="password" />
                <input type="submit" value="Login"/>
            </form>
        </div>  
    </div>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню