I want to build a page, where a certain DIV element in the middle of the page is horizontally scrollable (big width + overflow-x: scroll). The scrollbar will show up at the bottom of this DIV.
Is it possible to show a scrollbar at the very bottom of the page (so not at the bottom of the div) which only scrolls the content in that scrollable DIV in the middle of the page?
I ask this question, because I want to place content underneath the scrollable DIV, and I want the user to be able to scroll the horizontal DIV with a scrollbar that is places underneath this content.
<body>
<div id="wrap">
<div class="slider">
# Slider content here
</div>
<ul class="job_listings scrollable">
<li>job 1</li>
<li>job 2</li>
<li>job 3</li>
<li>job 4</li>
</ul>
<div class="about us">
# About us content here
</div>
** here I want the scrollbar of the ul job_listings to appear, at the very bottom of the page **
</div>
</body>
You are able to achieve this by adding position: fixed; to the non-scrollable content.
.slider {
position: fixed;
top: 0; // Assuming you want this to be on top
}
.about_us {
position: fixed;
bottom: 0; // Assuming you want this to be on the bottom
}
JSFiddle demo
Use padding-bottom:180px like i did here http://jsfiddle.net/v6ohjw32/
and remove border:2px solid green; to eliminate borders
Related
I am trying to create a two-part nav bar with options on both the left and right side of the page (its a visual thematic thing for my page, there are supposed to be branches of a tree with leaves being the buttons).
Currently I have them html-coded like this (these 2 png's are just placeholders for now):
<nav>
<img src="images/nav-menu-left-temp.png" alt=""/>
<img id="navright" src="images/nav-menu-right-temp.png" alt=""/>
</nav>
And here's the CSS I have applied.
nav
{
position: fixed;
}
#navright
{
float: right;
width: auto;
}
I would like them to both have fixed position to the top of the page, but for the left nav bar I need it to be also fixed to the right side of the page if possible (so it looks like a branch extending from off the screen). I was hoping float: right would do the job with the help of fixed but there seems to be a margin on the left side between the edge of the browser and the bar image(s). The page width is currently set to auto. I had hoped it would allow it to scale correctly.
Screenshot of what I have:
http://i723.photobucket.com/albums/ww238/cerberosg/nav1_zpsumvws3h7.jpg
What I'm trying to achieve:
http://i723.photobucket.com/albums/ww238/cerberosg/nav2_zpsxpqonads.jpg
I used to have a navigation bar like that, this is what I remeber from the CSS and HTML:
<nav>
<ul class = "pull-left">
<li><img src="images/nav-menu-left-temp.png" alt=""/></li>
</ul>
<ul class = "pull-right">
<li><img id="navright" src="images/nav-menu-right-temp.png" alt=""/></li>
</ul>
</nav>
CSS:
nav {
display: inline;
}
hope this helps!
I suspect the issue is that the nav element is not full width. Try being a bit more explicit with the nav element layout, using some styles like so:
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
You are on the right track. I've put together a fiddle for you to look at / play with:
http://jsfiddle.net/7qxrsrrw/
Say I have a menu bar at the top of my webpage.
Each menu item is in its own DIV, and these are laid out horizontally, with each menu item DIV side-by-side.
Now, as you shrink the width of the browser, there comes a point where the browser width will be less than the width of this menu bar.
What I'd like to do is to have the very last menu item (DIV) move down to the next line when this happens, and each consecutive last menu item do the same as the width of the browser continues to shrink, until all the menu items end up stacked from top to bottom.
I'm not sure how to do this using CSS.
Any suggestions?
Thanks.
html:
<div id="container">
<ul>
<li>
Menu1
</li>
<li>
Menu2
</li>
<li>
Menu3
</li>
<li>
Menu4
</li>
<li>
Menu5
</li>
</ul>
</div>
css:
#container{
width:100%;
min-width:200px;
background-color:green;
}
#container ul li{
width:50px;
height:22px;
background-color:red;
border:1px solid black;
list-style:none;
text-align:center;
display:inline-block;
}
demo:
http://jsfiddle.net/jU44m/
To accomplish this, All of the menu items should be in one larger div, and to make this div resize when the page is resized, set its width value to a percentage. Set the height value of this div to auto so that it will expand when the items fall down (sizing can be done with padding) like this:
#menu {
width: 50%;
height: auto;
}
I am trying to layout a page in three columns, I want the middle column to resize with the page but the problem is that if the page is made very narrow, the left column either slides below the middle one (if I use float to position the columns) or it overlaps it (if I use absolute positioning). I want the right column to "bump" into the middle one once that one's min width is reached and stop moving, at this point the page should start showing a horizontal scroll bar.
Following is my attempt with absolute positioning:
h2 {
margin-top: 0;
}
#leftside {
position: absolute;
left: 0;
width: 200px;
}
#rightside {
position: absolute;
right: 0;
width: 150px;
}
#content {
min-width: 200px;
margin: 0 150px 0 200px;
}
<div id="leftside">
<ul>
<li>Left Menu 1</li>
<li>Left Menu 2</li>
</ul>
</div>
<div id="rightside">
<ul>
<li>Right Item 1</li>
<li>Right Item 2</li>
</ul>
</div>
<div id="content">
<h2>Content Title</h2>
<p>Some paragraph.</p>
<h2>Another title</h2>
<p>Some other paragraph with total nonsense. Just plain old text stuffer that serves no purpose other than occupying some browser real-estate</p>
</div>
You should be able to do this using a wrapper div along with min-width and eventually overflow, such as: http://jsfiddle.net/5zsyj/
Try re-sizing the window, if the column is < 300px, it will show scroll-bars instead of just resizing the elements themselves, or floating above eachother.
A solution would be to add this to the CSS:
html {
min-width: 550px;
position: relative;
}
demo: http://jsfiddle.net/4PH4B/
The basic idea is that when the page reaches the sum of all the column's widths it should no longer shrink, instead just show the scroll bar.
Also the position: relative; declaration is there to align the third column to the right side of the html content, not just the window.
I am trying to work out how I would go about creating a website that has 3 separate 'layers' (top navigation, then content, then footer) each with a different background image, that tiles to 100% width... but I want my content to be centred (as if the containing divs had margin: 0 auto applied).
So far I have been attempting to create divs just for the background images, and then absolutely positioning my content divs, but allowing them to automatically centre.
But of corse, I am taking elements out of the 'flow' of the document there, and so my background image divs end up stacking up against each other.
This is really tough to explain so hopefully this example will help:
http://jsfiddle.net/RB46S/
As you can see, I have my blue div, where the background stretches to 100% BUT I WANT MY NAVIGATION AND A LARGE IMAGE TO CENTRE HERE.
I have my body which is green, then a hp_content div, this would be where all my content would sit, centred, the problem here is you cannot apply a margin or a padding value (i've applied them to show them not working), only a position from the top of the parent/browser, which will lead to problems when making my site responsive I believe.
Then I have my red div which is the same as the top navigation (blue) div, It has a 100% border but I want the footer stuff (twitter feed, latest blog post, and contact details) to be centred here.
Hopefully some one understands what I am trying to achieve and knows how to correctly set a page like this up, any help is much appreciated!
Jon
Ok! Try structuring your HTML something like this:
<html>
<head></head>
<body class="index">
<section class="top">
<header class="content">
<nav>
<ul id="">
<li>link 1</li>
<li>link 2</li>
</ul>
</nav>
</header>
</section>
<section class="main">
<div class="content">
<h2>Whatever</h2>
<div class="something">This is something else</div>
</div>
</section>
<section class="footer">
<footer class="content">
Footer content
</footer>
</section>
</body>
</html>
Then some CSS like:
body, html{
width:100%;
}
body {
background: green;
}
body > section{
width:100%;
}
/* this style will set all the section .content(s) to be 400px wide */
body > section > .content{
display:block;
margin:0 auto;
width:400px;
}
section.top {
height: 510px;
background: blue;
}
/* if you want to individually change widths for each section, do something like this:*/
section.top .content{
width:100%;
}
/* or not! */
section.main {
height:200px;
}
section.footer {
height: 400px;
background: red;
}
Play around: http://jsfiddle.net/FC2Ea/
So for each site section, you'd have a container for all of that section's content with an easy-to-remember class name like ".content". You can set all the content to the same width, or each section's content to different widths depending what you're going for. Either way, the sections will occupy 100% of the browser's width. Good luck! :)
If you add another Div within your each main Div and use style as
<div style="Width: 80%; float:right; margin-right: 150px;">
I guess that might help to an extent ?
<div class="top_shade">
<div style="Width: 80%; float:right; margin-right: 150px;">
<header>
<nav>
<ul id="">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</header>
</div>
</div>
I have a sidebar
#sidebar {
float: left;
position: relative;
width: 200px;
padding: 20px;
}
and a main body:
#main {
margin: 0 20px 0 260px;
}
I have a page which has the sidebar, and the main consists of a set of filters that should stay static, and a table that is both too tall and too wide to fit in the page. I would like to have the table in its own scrolling div, such that the div always extends to the right and bottom of the page and re-sizes if the page re-sizes. So far I have this:
<div id="sidebar">
<div class="boxed" id="menu">
<h2 class="title">Main Links</h2>
<div class="content">
<ul>
<li>Main page</li>
</ul>
</div>
</div>
</div>
<div>
<div id="main">
<h2>Header</h2>
<div class="filters">
Filters go here
</div>
<div style="overflow: auto;">
<table><!-- very large table --></table>
</div>
</div>
</div>
This works perfectly, except for the case when the table is too tall to fit in the current page. What happens then is that the scrolling-div's bottom scroll bar is not on the page. There is a main vertical scrollbar on the page, which, if I scroll all the way down, reaches the div's horizontal scroll bar. I figure if the div never grows past the bottom of the page, I won't have this problem.
What's the best way to solve this issue? I tried doing this:
<div style="overflow: auto; position: absolute; top:0;right:0;bottom:0;left:0;">
However, this just made the div stretch to fit the entire page, including the left sidebar.
Your code sets the div to cover the entire page. Change it to reflect the width of your sidebar: (200px from the left and it looks like you want a 20px padding, so 220.)
<div style="overflow: auto; position: absolute; top:0;right:0;bottom:0;left:220px;">
As for the bottom scrollbar, I suggest setting a "width:" for your table element.
table {
width: 700px;
}