设计网站的问题 - css / html

时间：2014-04-04 14:12:19

标签： html css

我在设计网站时遇到一些问题： 在这个网站上有一个顶部导航栏，由以下内容组成：找到的搜索结果数，搜索栏，登录方法 所有我要求的是如何设置“websitelocation”div和搜索输入对齐左侧和“loginMethods”div对齐右侧（当然在顶部栏中）。
我想提一下，我试过loginMethods div left：0; css属性但它没有做任何事 这是布局的jsfiddle设置：http://jsfiddle.net/UZSpz/。

代码：
的 HTML 

<body>
    <nav>
        <a href="#"><h1 class="logo">project</h1></a>
        <ul>
            <li id="events_list">
                <a href="#events">
                    <img src="img/menu/services2.png" width="35px" height="35px" style="margin-top:0px;margin-bottom:0xp;padding:0px;" />
                    <p class="eName">Events</p>
                </a>
            </li>
            <li id="users_list">
                <a href="#following">
                    <img src="img/menu/crowdsourcing.png" width="35px" height="35px" style="margin-top:0px;margin-bottom:0xp;padding:0px;" />
                    <p class="eName">Users</p>
                </a>
            </li>
            <li>
                <a href="#messages">
                    <img src="img/menu/comment25.png" width="35px" height="35px" style="margin-top:0px;margin-bottom:0xp;padding:0px;" />
                    <p class="eName">Messages</p>
                </a>
            </li>
        </ul>
    </nav>
<div class="topbar">
    <div class="websiteLocation">
        <img src="img/dark.png" width="25px" height="15px" style="margin-top:10px;margin-right:7px;" />3 events found..
    </div>
    <input type="text" class="inputSearch" value="Search events.." />
    <div class="loginMethods">asdasds</div>
</div>
<div class="content">
    content
</div>
</body>

CSS 

html, body {
    background: #343434;
    height: 100%;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
}
/* NAVIGATION RULES (left bar) */
nav {
    background: #565656;
    color: #b4b4b4;
    margin:0px;
    top: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    border-right:7px solid #2b2b2b;
    width: 86px;
}
nav .logo {
    opacity: 0.5;
    background-color: rgb(44, 44, 44);
    background-image:url('../img/logo2.png');
    height:60px;
    border-bottom:1px solid #353535;
    margin:0px;
    padding:0px;
}
nav a {
    text-decoration: none;
    cursor:pointer;
    margin: 0px;
    padding: 0px;
}
nav .logo:hover {
    opacity: 1;
    background-position-x: 0%;
    background-position-y: 100%;
    background-size: initial;
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: rgb(44, 44, 44);
    -moz-transition: opacity .7s;
    -webkit-transition: opacity .7s;
    -o-transition: opacity .7s;
}
nav ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
nav li {
    opacity: 1;
    color:#b4b4b4;
    cursor: pointer;
    background: #676767;
    border-bottom: 1px solid #494949;
    padding: 10px 0 16px;
    height:59px;
    text-align: center;
    margin: 0px;
}
nav li:hover {
    background: #414242;
    -moz-transition: background-color .5s;
    -webkit-transition: background-color .5s;
    -o-transition: background-color .5s;
}
nav li a {
    text-decoration: none;
    color:#b4b4b4;
    font-size: 1.18em;
}
.eName {
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 14px;
    text-decoration: bold;
}
/* MENU CLASSES AND ELEMENTS */
.categories {
    display: none;
    position: absolute;
    width:200px;
    background:#383838;
    top:0;
    left:93px;
    bottom:0;
    z-index:11;
    border-right: 7px solid #0a0a0a;
}
.categoryCapHolder{
    width:100%;
    height:40px;
    padding-top:20px;
    background: #2a2a2a;
    border-bottom: 1px solid #3d3d3d;
}
.categoryCapHolder .categoryName {
    overflow: hidden;
    color:#a2a2a2;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 20px;
    text-decoration: bold;
    text-transform: uppercase;
    margin-left:25px;
}
.categoryCapHolder .categoryName:hover {
    color:#62c6ff;
}
.categories .subcategory {
    width:170px;
    height:32px;
    padding-top: 10px;
    padding-left:30px;
    border-bottom: 1px solid #5f5f5f;
    background: transparent;
    overflow: hidden;   
}
.categories .subcategory:hover {
       background: #282828;
}
.categories .subcategory .subcategory_link {
    margin-left:15px;
    color:#62c6ff;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 16px;
    text-decoration: bold;
    text-transform: uppercase;
}
/* Top navigation bar rules */
.topbar {
    z-index: 0;
    background: #1d1d1d;
    border-left: 7px solid #2b2b2b;
    border-bottom: 1px solid #5b5b5b;
    height: 60px;
    left: 86px;
    position: absolute;
    right: 0;
    top: 0;
}
/*######CUSTOMBTNS########*/
.topbar .websiteLocation {
    color:#b4b4b4;
    margin-left:50px;
    margin-top:10px;
    margin-right: 5px;
    width: 150px;
    overflow: hidden;
    font-family: "Calligraffitti", sans-serif;
    font-size:16px;
}
.topbar .inputSearch {
    font-family: "Calligraffitti", sans-serif;
    text-decoration: none;
    background: url("../img/search.png") left no-repeat;
    padding-left: 25px;
    padding-top: 3px;
    margin-top:5px;
    margin-bottom:5px;
    margin-left:5px;
    right:0px;
    width:150px;
    height:23px;
    border: 0px;
    color:#b6b6b6;
}
.topbar .inputSearch:focus {
    outline-color: transparent;
    outline-style: none;
}
.loginMethods {
    width:150px;
    left:0;
}
/* Content rules */
.content {
    bottom: 0;
    left: 120px;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 62px;
    padding: 50px 25px 25px 20px;
}
.content .card {
    background: #0e0e0e;
    color:#a4a4a4;
    width:250px;
    height:320px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin-right:20px;
    margin-bottom: 15px;
    overflow: hidden;
    float: left;
    z-index: 1;
}
.content .card .cover {
    max-width:250px;
    max-height:140px;
    background: transparent;
    float:left;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.content .card .description {
    width:100%;
    height:50%;
    display: block;
    margin-top:150px;
}
.content .card .coverDetail {
    position:absolute;
    display: none;
    color:#565656;
    width:220px;
    height:22px;
    margin: 115px 0px 0px 0px;
    padding-left:15px;
    padding-right:15px;
    background: #e8ff28;
    border-top: 1px solid #ecf97e;
    overflow:hidden;
    z-index:10;
}
.content .card .coverDetail .save {
    width:50px;
    height:16px;
    background:#565656;
    color:#c4c4c4;
    padding:1px 2px 4px 2px;
    cursor:pointer;
    border:0px;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    margin:1px 4px 0px 1px;
    text-align: center;
}
.content .card .coverDetail .card-views {
    width:50px;
    height:16px;
    background-size: 16px 16px;
    padding:1px 2px 4px 2px;
    border:0px;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    margin:1px 4px 0px 1px;
    text-align: center;
}
.content .card .description .title {
    color:#b4b4b4;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 20px;
    text-decoration: none;
    text-transform: capitalize;
    margin-top:5px;
    margin-left:10px;
    overflow: hidden;
}
.content .card .description .title:hover {
    color:#62c6ff;
    border-bottom: 1px dotted #d9f1ff;
}
.content .card .description .text {
    font-family: sans-serif;
    font-size: 11px;
    text-decoration: none;
    text-transform: uppercase;
    height: 80px;
    margin-top: 5px;
    margin-left: 10px;
    width:90%;
    overflow-y:hidden;
    overflow-x:hidden;
}
.content .card .description .text .expand-card {
    background:#565656;
    color:#c4c4c4;
    padding:2px 2px 2px 2px;
    cursor:pointer;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    width:75px;
    height:16px;
    margin:2px 1px 0px 1px;
    text-align: center;
}
.content .card .description .author {
    background:url('../img/user91.png');
    background-size:10px 10px;
    background-repeat:no-repeat;
    color:#62c6ff;
    bottom: 0;
    font-family: sans-serif;
    text-decoration: none;
    text-transform: lowercase;
    font-size: 9px;
    padding-left:10px;
    margin-left: 10px;
    margin-top: 5px;
}
.authorlink {
    text-decoration: none;
    color:#62c6ff;
}
.content .card .description .category {
    background:url('../img/category.png');
    background-size:13px 13px;
    background-repeat:no-repeat;
    color:#62c6ff;
    font-family: sans-serif;
    text-decoration: none;
    text-transform: lowercase;
    font-size: 9px;
    padding-left: 13px;
    margin-left: 10px;
    margin-top: 5px;
}
.categorylink {
    text-decoration: none;
    color: #62c6ff;
    text-transform: capitalize;
}


很抱歉，如果我的代码出错了。
谢谢！

2 个答案:

答案 0 :(得分：2)

<强> DEMO

将此添加到您的CSS：

.websiteLocation{
    float:left;
}

.loginMethods{
    float:right;
}

.loginMethods在深灰色背景上有黑色文字，因此很难看到，但它就在那里。

答案 1 :(得分：0)

left, right, top, bottom仅适用于position:absolute。

.topbar .inputSearch {
    position: absolute;
    font-family: "Calligraffitti", sans-serif;
    text-decoration: none;
    background: url("../img/search.png") left no-repeat;
    padding-left: 25px;
    margin-bottom:5px;
    margin-left:5px;
    right:0px;
    width:150px;
    height:23px;
    border: 0px;
    color:#b6b6b6;
}

.loginMethods {
    width:150px;
    position: absolute;
    left:0;
}

您可以使用表

中的其他方法 
<input type="text" class="inputSearch" placeholder="Search events.." />
相关问题
最新问题