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;

}
4

1 に答える 1