I have a sidebar with some lists. Each list is preceded by a title bar div. The sidebar has a fixed width and overflow-x: auto. Lists content can overflow, making the parent sidebar to show the scroll bar.
The issue is that the title bar div doesn´t expand when the scroll bar appears. I would like either, don't move it when scrolling or to expand the 'div' to fit the extra space generated by the scroll bar: JS Bin
Is it possible to resolve this issue using CSS?
May be its possible with CSS, but in my opinion, you will need to use some JavaScript to fix this issue:
Here is the trick:
var sidebar = $('.sidebar');
sidebar.scroll(function(e) {
sidebar.find('.title').css({
marginLeft: sidebar.scrollLeft()
});
});
We will add some margin-left on the .title elements equal to the number of pixels of horizontal scroll. This will always show the title bar stick to the right of the scroll able element.
$(function() {
var sidebar = $('.sidebar');
sidebar.scroll(function(e) {
sidebar.find('.title').css({
marginLeft: sidebar.scrollLeft()
});
});
});
.sidebar {
overflow-x: auto;
width: 160px;
height: 195px;
background-color: lightgrey;
padding-top: 20px;
}
.title {
width: 100%;
text-align: right;
background-color: grey;
}
.list {
margin-top: 20px;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
<div class="title">
Title
</div>
<ul class="list">
<li>
This is a very long long line
</li>
</ul>
<div class="title">
Title2
</div>
<ul class="list">
<li>
This is a very long long line
</li>
</ul>
</div>
Please find the solution below with CSS only.
.sidebar {
overflow-x: auto;
width: 160px;
height: 200px;
background-color: lightgrey;
padding-top: 20px;
overflow-x: scroll;
}
.title {
width: 160px;
text-align: right;
position: fixed;
background-color: grey;
}
.list {
margin-top: 30px;
white-space: nowrap;
float: left;
}
.clear {
clear: both;
}
<title>
JS Bin
</title>
<body>
<div class="sidebar">
<div class="title">
Title
</div>
<ul class="list">
<li>
This is a very long long line
</li>
</ul>
<div class="clear">
<div class="title">
Title2
</div>
<ul class="list">
<li>
This is a very long long line
</li>
</ul>
<div class="clear">
</div>
</body>
Related
I have a navigation bar as shown here: http://i.imgur.com/4rxkS2K.jpg
I am using foundation to build a website, the way I have built the nav bar is as follows:
HTML:
<nav class="top-bar">
<ul>
<li>About</li>
<li id="menu-divider">|</li>
<li>Testimonials</li>
<li><img src="images/logo.png" alt=""></li>
<li>Services</li>
<li id="menu-divider">|</li>
<li>Contact</li>
</ul>
</nav>
CSS:
.top-bar { font-family: 'bebas_neueregular';
height: 150px;
line-height: 100px;
padding: 18px;
width: 100%;
position: relative;
text-align:center;
margin-bottom:10px; }
.top-bar ul { display:inline-block;
margin-left: auto ;
margin-right: auto ;}
.top-bar ul > li { display:inline-block;
margin-left: auto ;
margin-right: auto ;}
#menu-divider { color:#ffffff;
font-size: 24px;}
As you can see in the picture, the way I have built it means that my center li element (my logo picture) is not in exact center as the other li elements are of different widths meaning they are all centered collectively. What I'm after is the logo in the dead center then the other li elements as they are centered around the logo.
Thanks in advance for any help!
You can play around but I'm pretty sure this does the trick:
http://codepen.io/anon/pen/dYXQpz
Use 3 containers (that means you lose your nav as a ul). Flex them and inside of the left and right one, flex the elements (end for the first, start for the other)
<div class="nav-bar">
<div class="sideNav leftNav">
<div class="menu">
MENU 1
</div>
<div class="split"></div>
<div class="menu">
MENU 2
</div>
</div>
<div class="logo">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSN9qhGx6NftAepiMOjdGXkcW-UxkO9dtQ4VGRlepyzNC2S8xQCcA" />
</div>
<div class="sideNav rightNav">
<div class="menu">
MENU 3
</div>
<div class="split"></div>
<div class="menu">
MENU 4
</div>
</div>
</div>
Then apply the css. It can be improved but it can help you get started.
.nav-bar {
background: pink;
display: flex;
}
.sideNav {
flex: 1 0 auto;
background: red;
display: flex;
}
.leftNav {
justify-content: flex-end;
}
.rightNav {
justify-content: flex-start;
}
.sideNav > div {
margin: 100px 20px 0 20px;
}
.split{width: 2px;background: white;height: 16px}
Hope that helps. I loves flexbox.
I am designing a video site and just wanna ask some suggestions, ideas and improvements of my current html5 base layout.
I read a lot of articles from google but it's confusing. I need some straightforward suggestions.
I am new to css so please be gentle :)
Fiddle here
body {
background: #2b2b2b;
font: normal 12px Arial, Helvetica, sans-serif;
color: #777;
overflow-x: hidden
}
a {
color: #888;
}
a:active {
color: #444;
}
header .wrap,
nav,
.contentwrapper,
footer .wrap {
width: 1000px;
margin: 0 auto
}
header,
nav,
section,
aside .wrap,
footer {
background: #333;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #222
}
section {
border: 1px solid #222
}
header {
width: 100%;
line-height: 30px
}
nav li {
display: inline-block;
}
main {
float: right;
width: 820px;
}
aside {
float: left;
width: 170px
}
footer {
line-height: 30px;
}
footer ul {
font-size: 14px;
}
footer li {
float: right;
display: inline-block;
}
footer li.cr {
float: left
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
*zoom: 1;
}
<header>
<div class="wrap">
<h1>Site title</h1>
</div>
</header>
<nav>
<ul class="menu">
<li>menu1
</li>
<li>menu2
</li>
</ul>
</nav>
<div class="contentwrapper group">
<main>
<section>
<div class="head">
<h1>Featured Videos</h1>
</div>
</section>
<section>
<h1>Latest Videos</h1>
</section>
</main>
<aside>
<div class="wrap">
category list here
</div>
<div class="wrap">
ads here
</div>
</aside>
</div>
<footer>
<div class="wrap group">
<ul>
<li class="cr">website.com © 2014</li>
<li>Contact
</li>
<li>Rss
</li>
<li>Sitemap
</li>
<li>Webmaster$
</li>
</ul>
</div>
</footer>
All of your syntax is valid, and your CSS looks fine. Just be sure to keep you code clean and simple throughout your project, so that you don't have 50 stylesheets for who-knows-what (speaking from experience XD).
Best of luck to your project.
No.
From the HTML5 spec :: DIV
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
You should not use DIV elements where there are not necessary, especially <div class="wrap"> inside HEADER, <div class="contentwrapper group"> as parent of MAIN, and <div class="wrap group"> inside bottom FOOTER from your code, are redundant.
I'm trying to make the header and footer background to be 100% but all the content in the page to be 1200px and centre the page.
So far I put width:1200px in the html, body sure that centre the page but it fixed width the background which I don't want to happen.
Also I've been trying to fix the navigation as well to be positioned on the right and align to the logo.
html,body{
background: #fff;
width: 1200px;
}
.container{
min-height: 100%;
margin: 0 auto;
}
header{
background: #363636;
color: #fff;
padding: 30px;
margin: 0 auto;
}
.logo{
float: left;
clear: both;
display: block;
}
nav{
float: right;
}
<div class="container">
<header clas="main_header">
<div class="logo">
<h2>LOGO.COM</h2>
</div>
<div class="clearfix"></div>
<nav class="main_nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Testimonials</li>
<li>Contact Us</li>
<li>Get a Quote</li>
</ul>
</nav>
</header>
.....
</div>
Don't restrict the width of the HTML or body...restrict the width of the container.
html,body{
background: #fff;
}
.container{
width: 1200px;
margin: 0 auto;
}
If an element needs to be wider than the container just close one .container add your wider element and open a new .container.
Codepen Demo
I managed to make my footer to stick to the bottom of the window, then avoid my content div... but now, it's overlapping for about 15px before dropping below.
I want the footer to drop, but to never overlap the content. I think it may have something to do with my margins, but my tweaking has not yet solved this.
Any suggestions?
Adding margin-bottom:15px doesn't seem to help, because it's only shown once the footer overlaps enough to push the footer down. Then the margin is shown, but not before that small amount of overlap.
The #push div is supposed to make this all possible, from what I understood on Twitter's bootstrap example.
CSS:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
min-width: 900px;
}
.main_nav {
list-style-type: none;
margin: 0;
width: 160px;
float: left;
padding-left: 40px;
overflow: hidden;
}
#bio_content {
width: 700px;
min-height: 445px;
margin-bottom: 15px;
float: left;
}
#bio_text {
padding: 10px;
}
#push {
height: 50px;
}
#footer {
height: 50px;
width: 100%;
float: left;
}
HTML:
<body>
<div id="wrapper">
<div id="header">
<h1></h1>
</div>
<ul class="main_nav">
<li>Home</li>
<li>About</li>
<li>Music</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
<div id="bio_content">
<div id="bio_text"></div>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</body>
</html>
I thin it's a float issue. A fiddle would help diagnose this better. I would suggest doing this
<body>
<div id="wrapper">
<div id="header">
<h1></h1>
</div>
<ul class="main_nav">
<li>Home</li>
<li>About</li>
<li>Music</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
<div id="bio_content">
<div id="bio_text"></div>
</div>
<div style="clear:both"></div> //add this to clear the bio_content div
<div id="push"></div>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</body>
</html>
You need to clear the styles in your footer. Add a clear:both to your footer css.
#footer {
clear: both;
height: 50px;
width: 100%;
}
In my code below, case #1 works correctly. The "advice-area" div stays to the right of the "rating-box".
However, case #2 does not work when the text extends beyond one line. This causes the "advice-area" div to move below the "rating-box"
What is the best way to fix this? Thanks.
<html>
<head>
<style type="text/css">
.wrapper {
width: 400px;
list-style: none;
}
.row {
border-bottom: 1px solid #E5E5E5;
padding: 15px 0;
font-size: 14px;
clear: both;
}
.rating-box {
float: left;
height: 70px;
position: relative;
width: 60px;
}
.thumbs {
float: right;
width: 20px;
}
.number {
position: absolute;
top: 16px;
left: 5px;
}
.advice-area {
display: inline-block;
margin-left: 35px;
}
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
}
.advice-action {
display: inline-block;
}
.add-box {
display: inline;
margin-left: 30px;
}
.add-box a {
display: inline-block;
}
.share-button {
display: inline;
margin-left: 30px;
cursor: pointer;
}
.flag {
display: inline;
margin-left: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="wrapper">
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">1</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #1: This is correct</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">2</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #2: But this really long text does not want to stay right next to the "Up" and "Down" links</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
</ul>
</body>
I'd restrict the width for the .advice-content or .advice-area div (or whatever div is around the content you're floating).
When you enter text into a floated div the div will auto-size its width accordingly, and if it expands too wide it'll automatically wrap over to the next line. Think about how wrapping works for words in text.
So, all you need to do is to restrict the width of that particular div, and it'll never grow wide enough to wrap to the next line.
Unless if you're in IE: in which case it'll do whatever the hell it wants ;)
Floating elements, rather than inline blocks, are probably what you want in this situation. I managed to get what looks like a useful outcome by moving the number div above the up/down div in the code, and then floating both to the left. I then tweaked the margins until the spacing looked decent.
CSS changes:
.number {
float: left;
}
.thumbs {
float: left;
width: 20px;
margin-left: 20px;
}
.advice-area {
margin-left: 80px;
}
HTML changes:
<div class="rating-box">
<div class="number">1</div>
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
</div>
limit the width on .advice-content and it will show how you want it to.
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
width:300px;
}
worked for me in IE7 & 8 / Firefox / Opera / Chrome / Safari