Issue with designing a website - css/html -
i have little problem @ designing website: in website have top navigation bar , composed : number of search results found, search bar, login methods.
asking how can set "websitelocation" div , search input aligned left , "loginmethods" div aligned right (in topbar of course).
want mention tried on loginmethods div left:0; css property did nothing.
here jsfiddle setup of layout : http://jsfiddle.net/uzspz/ .
code :
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 { 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 { 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 , 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; }
sorry if i've done wrong in code .
thank you!
add css:
.websitelocation{ float:left; } .loginmethods{ float:right; } .loginmethods has black text on dark grey background, hard see, it's there.
Comments
Post a Comment