I have a wrapper div that is absolute positioned on the side of my page.
It contains an unordered list of items.
HTML:
<div id="wrapper">
<ul class="menu">
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
Wrapper CSS:
#wrapper {
/*width: 218px;*/
margin: 0px auto;
background-color: #cccccc;
overflow:hidden;
position: absolute;
top: 100px;
left: 0;
z-index: 999;
width: 31px;
}
The reduced width of the wrapper is 31px;
The full size is 218px;
On each of the list items I have set:
.menu > li{
width: 31px;
overflow: hidden;
-webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
transition: width 1s;
}
.menu > li:hover{
width:218px;
}
So that when I hover that <li> it reveals all of its content. Obviously it works when wrapper's width is 218px but this way it will go over the page and "hide" some elements on it. I have set the same transition also on the wrapper on hover and it works. Is there another way to do it in a more robust way? This seems to me more an hack than a proper way to do it!
You could set overflow on the #wrapper to visible instead of hidden. That way, when the li expands when you hover over it, you will be able to see its content - without increasing the size of the wrapper itself.
I think it is better to use chrome browser.It has a feature that very useful to web developers.
First of all
Open your web page in chrome.
Right click (the portion that you want to make changes) and select Inspect element[Ctrl+Shift+i] in windows platform.
Then u can see like this..
1 I mentioned here is code section and
2 is css section.
The selected part is highligted in main screen (left side , in my case)
You can find and select the hidden div.
Then make necessary changes to css section that suits your web page and you can see the changes at the real time.
[!! Please note that this is only for checking and viewing ,so if u make necessary changes,Please copy the edited code and paste it to your original source code also create a backup of your source code before make any changes ]
Regds..sir
Related
I have a website here with a sidebar, but I want the sidebar to be hidden until the user clicks on a menu button. Anyways, my .sidebar is on z-index: 0; while my .page-content is on z-index: 1;. Why is the sidebar not hidden when I load the webpage? I have nothing in my page-content except for a <h1> for testing purposes.
Here is my HTML file:
<!DOCTYPE html>
<head>
</head>
<body>
<div class = "page-wrapper">
<div class = "page-content">
<h1>Test</h1>
</div>
<div class = "sidebar">
<ul>
<li>#</li>
<li>#</li>
<li>#</li>
<li>#</li>
<li>#</li>
</ul>
</div>
</div>
</body>
</html>
And here is my CSS file:
h1 {
/* Just to centre my text */
position: relative;
left: 50%;
}
.page-content {
position: relative;
z-index: 1;
}
.sidebar {
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
width: 120px;
padding: 30px;
background: #333;
z-index: 0;
}
So why isn't my sidebar being hidden when I load the webpage? When I load this, I can see the sidebar and the "Test" text both.
EDIT:
I see many of you have said that the z-index is not for hiding stuff. I am not trying to hide the sidebar. When the user clicks on the menu button, I want the page to slide over to reveal the sidebar, hence the reason I am using the z-index and not display: none;.
EDIT:
Some of you have said that this is a duplicate from another question, but when you read my comments, please realize that the question I am asking, is quite different. I am going to try to explain what I am attempting to do here as simply as I can. I have a website, where a user clicks on the menu bar, the entire website transitions 180px to the right, thus revealing the sidebar that is fixed underneath. You guys mentioned that my .page-content needs a background, but like someone else said, it only takes up my background as big as the objects inside are. How or where can I set a background that will move, yet still cover the sidebar completely?
Firstly, your z-index IS working.
z-index is not responsible for making an element visible or not. (For that, you can use the opacity,visibility, or display properties.
z-index can be used to position elements behind other elements with opaque backgrounds, which may make them appear hidden (pun intended), but rest assured, the element is still there.
Your CSS has no elements with opaque backgrounds with z-indicies higher than 0 that sit on top of .sidebar, so that's why you see it.
Your sidebar is not hidden because your .page-content doesn't have a background. Put a background and add this CSS:
.page-content{
background: #fff;
height: 100%;
width: 100%;
}
This way, you'll be able to slide it to then side afterward.
Add background to .page-content you will see the z-index's effect.
A better approach would be to hide the side bar with left property as some negative value, for example -100px as below.
.sidebar {
position: fixed;
left: -100px;
top: 0px;
bottom: 0px;
width: 120px;
padding: 30px;
background: #333;
z-index: 0;
}
and when the user clicks the menu icon set left: 0px using javascript.
We have a sticky side panel on our page implemented with the following very-simple CSS:
position: fixed;
top:62px;
bottom:10px;
Where the top and bottom properties create the desired margins.
The problem is that this panel contains several accordion-style elements, and expanding some of them causes the content to overflow past the bottom of the screen and become invisible/inaccessible. Adding an overflow:auto; rule to the above css style almost solves the problem, by inserting a scrollbar that allows the user to scroll vertically to see the would-be hidden content. However, this results in two scrollbars - one for the main nav and one for the sidebar - which feels clunky an unintuitive. Instead, I'd like to have the "fixed" element scroll with the main scrollbar when it overflows. I'm aware that this would essentially make it not a fixed element, and thus am afraid I'll have to resort to JS to make this happen - but does anyone have a cleaner, html/css-only way of handling this?
I'm not sure this is what you need, but hope it helps some way.
#container1 {
height: 400px;
width: 200px;
overflow: hidden;
position: fixed;
top: 62px;
bottom: 10px;
background: #888;
}
#container2 {
width: 100%;
height: 99%;
overflow: auto;
padding-right: 20px; /*Adjust this for cross-browser compatibility */
}
#container2 ul li {
height: 300px;
}
html, body {
height: 99%;
overflow:hidden;
}
<div id="container1">
<div id="container2">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
<div>
JSFiddle
Also in chrome you can try out:
::-webkit-scrollbar {
display: none;
}
But this snippet works only in chrome, so I would rather use the above.
Let me try to help. Use Panel-body class selector to handle this.
First you should do many things, such as, width of the div and the second div.
You can manage to hide the scrollbar as follows:
.panel-body {
height:300px;
overflow:auto;
margin-right:0px; // when it shows scrollbar, you need to set it MINUS.
}
Second, you also take notice when browser window gets resized by user and you need to manage Media Queries in related to the div width.
This is the DEMO.
I have a fixed navigation bar on my website that stays at the top with links that take me to different sections further down the page. However, because my fixed nav bar has a height of 40px, the beginning 40px of every section is covered up. How would I offset where my links take me by 40px using either HTML or CSS?
Thanks.
You might try absolutely positioning "dummy" anchors 40 pixels above the top of each section. You can give them zero width/height and hidden visibility to ensure that these anchors don't affect how your page is displayed. When the user clicks one of the links in your fixed navigation bar, the window will scroll to the top of the dummy anchor, 40 pixels above the beginning of its actual section.
Example HTML:
<div class="navbar">
Anchor 1
Anchor 2
Anchor 3
</div>
<div class="section">
<span id="anchor1" class="anchor"></span>
Section Content
</div>
<div class="section">
<span id="anchor2" class="anchor"></span>
Section Content
</div>
<div class="section">
<span id="anchor3" class="anchor"></span>
Section Content
</div>
Example CSS:
body {
padding-top: 40px;
}
.navbar {
position: fixed;
width: 100%;
height: 40px;
top: 0;
left: 0;
z-index: 10;
border-bottom: 1px solid #ccc;
background: #eee;
}
.section {
position: relative;
}
.anchor {
display: block;
position: absolute;
width: 0;
height: 0;
z-index: -1;
top: -40px;
left: 0;
visibility: hidden;
}
For a working example, see http://jsfiddle.net/HV7QL/
Edit: CSS3 also includes the :target pseudo-class, which applies to an element whose id has been referenced by the href of a link in the document, or the hash value of the URL. You can apply a 40-pixel padding to the top of the :target that will be applied only to the section the user selects from the fixed navbar.
Example CSS:
.section:target {
padding-top: 40px;
}
This is semantically cleaner than the method described above, but won't work on older browsers.
Working example: http://jsfiddle.net/5Ngft/
I just happened to stumble across this problem myself today so I had been thinking about it for a bit already, but I think I just found a solution:
Add a padding-top: 40px; margin-top: -40px to the element that you want to jump to. The negative margin cancels the padding, but the browser still thinks that the top of the element is 40px higher than it actually is (because in fact it is, only the content of it starts lower).
Unfortunately, this might collide with already set margins and paddings, and if you're using a background on the targeted element it's going to mess it all up.
I'll see if I can work around that and post a jsfiddle, but in the meantime here's a basic answer at least :)
edited: I thought I had a solution for the background, but it didn't work. Removed again.
final edit:
It does kind of work if you know the background color of the wrapping element. In my example I know the text is on a white background, but the titles have a silver background. To prevent the title from having a background on the extra padding we set, instead I put it on a pseudo-element before it:
#three:before {
content: " ";
background: white;
display: block;
margin-top: -40px;
padding-top: 40px;
}
This way the extra padding has a white background again, but this only works if you already know what background it needs. Setting it to transparent for example will show the underlying background of the title itself, not of the article.
jsFiddle: http://jsfiddle.net/Lzve6/
Heading one is the default one you're having problems with.
Heading two is my first solution, guaranteed to work on almost all browsers
Heading three is using the :before pseudo-element, might not work on older browsers.
Update - I've decided against the JavaScript solution. The only way to make sure it always works is to put it in setInterval() going every few seconds. Don't want to do that. I know this CSS is possible, I've seen it work. I'll re-open the bounty for more like 150 if it ends.
I have a modal popup made up of two sections: left and right. Within both sections are a label above and the content below. The label is fixed at a certain number of pixels, but the bottom area needs to be able to fill the remaining space, so I'm using display:table on the left and right sides and display: table-cell on the inner sections to achieve the "fill remaining space" effect. It works great in Chrome and Safari.
Here's the CSS:
#tagBoxLeft,#tagBoxRight {
display: table;
height: 100%;
width: 50%;
position: absolute;
right: 0;
opacity: 0;
}
#tagBoxLeft { left: 0 }
#tagBoxDescription {
display: table-row;
-webkit-border-top-left-radius: 20px;
width: 100%;
word-break: break-all;
word-wrap: break-word;
-webkit-box-shadow: 0 1px 0 #FFF;
-moz-box-shadow: 0 1px 0 #FFF;
box-shadow: 0 1px 0 #FFF;
}
.nano {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
display: table-cell;
}
#taglabel {
display: table-row;
z-index: 10000;
border-top: 1px solid #FFF;
width: 100%;
height: 39px;
}
And it just makes a bunch of divs into a table so they can have heights that are relative to each other. Also notice that the left and right sides are relative to the browser window, so that's why I can't just use percentages.
However, in Firefox and Opera, the #tagBoxLeft and #tagBoxRight sides sections refuse to accept height:100%; while they have display:table;. So it won't force the bottom sections up responsively.I know Firefox & Opera support this normally (see http://jsfiddle.net/Qxswa/). But why does all my content overflow in Firefox and Opera?
Here's a screenshot of the issue:
Is there a reason why you can't simply use JavaScript to calculate the correct height and apply it inline? It's not as nice and simple, but it would be trivial for what you are describing.
var boxHeight = $('#tagBox').height();
var leftLabelHeight = $('#tagBoxDescription').height();
$('#tagBoxPopular').css('height', boxHeight - leftLabelHeight + 'px');
var rightLabelHeight = $('#taglabel').height();
$('#tagBoxStream').css('height', boxHeight - rightLabelHeight + 'px');
Here's an alternative to using display:table and friends, which uses the oft-neglected ability of absolutely positioned elements to have both their top and bottom (and left and right) values set. It essentially 'sticks' the top and bottom edge, giving you a height relative to a container, but without explicitly setting a height.
UDPATED: As Jackson mentioned, the CSS-only version of this code doesn't provide an auto-height, fixed panel in the column. A simple bit of JS will fix that - you'd just need to set a sensible default height for users without JS. The JS only needs to run when you load the modal, not at intervals.
Here's the updated fiddle: http://jsfiddle.net/cxY7D/5
and here's the simplified HTML:
<div id="modal">
<div class="left">
<div class="description">
<h1>#tag_name</h1>
<dl>
<dt>Tags</dt> <dd>27</dd>
</dl>
</div>
<div class="contents">
<div class="header">
<h2>Featured</h2>
</div>
<ol>
<li>Something Something</li>
<li>...</li>
</ol>
</div>
</div>
<div class="right">
<div class="contents">
<div class="header">
<h2>Recent</h2>
</div>
<ol>
<li>Something Something</li>
<li>...</li>
</ol>
</div>
</div>
</div>
and CSS:
body {
background:#444;
}
#modal {
background:#FFF;
position: absolute;
top: 4em;
bottom: 4em;
left: 6em;
right: 6em;
}
#modal .left,
#modal .right {
position:absolute;
top: 0;
bottom: 0;
}
#modal .left {
background:#ACF9E4;
left: 0;
right:50%;
}
#modal .right {
background:#FCFFCD;
right: 0;
left:50%;
}
#modal .contents {
position:absolute;
top: 0;
bottom: 0;
width: 100%;
overflow-y:auto;
}
#modal .description {
height: 8em;
}
#modal .description + .contents {
top: 10em;
}
#modal .header,
#modal .description,
.contents li {
border-bottom:1px solid #CCC;
padding: 1em;
}
#modal .description dt {
float: left;
padding-right: 1em;
}
It's a really useful and robust technique. A lot of people get the shudders when you mention 'absolute positions', but used like this, it's really liberating!
The JS (assuming jQuery)
$(function(){
$('#modal').on('display', function(){
//Calculate the height of the top left panel, and provide the remaining space to the bottom left
var leftColumn = $(this).find('.left'),
descriptionHeight = leftColumn.find('.description').height('auto').outerHeight(); //Set the height to auto, then read it
leftColumn.find('.contents').css('top', descriptionHeight)//Apply the height to the scrolling contents pane
});
$('#modal').trigger('display');
});
The JS resets the top-left pane to auto-height, then reads the height and applies it as the top co-ordinate of the bottom-left panel. It's applied as a custom event, so you can trigger it as part of your modal display code.
Here's an answer I gave, using a similar technique, and more explanations of the hows and whys: The Impossible Layout?. Check the A list apart article for more discussion, and some simple fixes that make it work in IE6 (if you care about that).
I open your site on firefox and the hashtag links i see with chrome are gone. Are you doing some fix-attempts right now? If you put the links back in for the ff version I can help you debug this.
UPDATE:
What I see is a highly overcomplicated mix of display:table's and display:table-cells's with absolute and static positionings combined with percentual heights and many other highly cross-browser volatile mixes.
Doing lots of patching and fixing I was able to get this:
There's obviously many errors still present but at least you get some scrollbars.
Basically, the problem is that you're relying upon percentual heights and shady table-displays that are seemingly not very evenly rendered by different browsers.
We have two options here:
1.- Keep your original css/html approach and troubleshoot the JS scrollbar.
2.- Go for a much much much simpler css/html variant
Cheers
G
You may want to look at how you're using <section>. It is not the same as a <div>.
W3C - Using HTML5 section elements , and header elements.
<header> appears the same. They're both flow elements, and not designed as content containers, but as semantic structuring elements for content containers.
I used Firebug and changed both <header> and <section> to display:block on a hunch. Things started to shape up; however I could not get the scroll effect to fire after those changes. I then changed <header> in safari to display:inline. Sure enough - both my browser windows looked like this:
You need to have the #tagboxleft and #tagboxright's overflow hidden. This can be done by setting #tagbox to overflow:hidden, however that will hide part of the close button. so you need another div wrapped around the left and right but not the x with overflow:hidden.
Like so:
<div id="tagbox">
<div id="tagboxX"></div>
<div id="tagboxleftright" style="overflow:hidden"> <!-- This is the wrapper div around tagbox left & right. Of course, move overflow:hidden to the style sheet -->
<div id="tagboxLeft"></div>
<div id="tagboxRight"></div>
</div>
</div>
This worked in Firefox and it should work in Internet Explorer.
I'm trying to create a horizontally scrolling list. I'm going to replace this with a fancy version when Javascript is enabled, but I want the markup and css to look and work fine without Javascript on reasonably modern browsers (any suggestions that uses Javascript in any way is off).
My current markup/css works, but here's what I don't like about it:
The current markup specify a very wide ul (i.e. 10000px) and a container that scrolls on this. Is there a way to avoid this and instead have the width expands based on its content (i.e. the blue background shouldn't be there)?
There are two extraneous divs (those with id #extra1, #extra2) that is just for styling purpose. Is there a way to eliminate this extra div?
If there is not enough image to fill the page width, the scrollbar should collapse, but currently it does not because I have a very wide ul which cannot collapse.
The <a> tag are separated by the horizontal list, I preferably want to keep them together. Is there a way to have them close together and cleanly separate them in CSS?
Aside, do you know of any tutorials that discussed this sort of thing? I've seen several tutorials that demonstrated having the whole page to scroll, and I took some ideas from those, but I can't find any that demonstrated scrolling ul/ol element.
Extra info that might help:
The width of the page is static (i.e. it is not fluid/elastic layout).
The images in the page is dynamically generated from PHP, and the number of images can change.
The width of the thumbnails are well-defined.
Stripped down live example: http://dl.dropbox.com/u/17261360/horiz.html
Update (2018): The original solution based on display: inline is over 7 years old now. In today's world, I would recommend the flexbox approach, because it gives you full control over the gaps that appear between the images.
Using flexbox
Check browser compatibility first (you're probably fine), and add prefixes as needed.
ul.images {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
width: 900px;
overflow-x: auto;
}
ul.images li {
flex: 0 0 auto;
width: 150px;
height: 150px;
}
<ul class="images">
<!-- Inline styles added for demonstration purposes only. -->
<li style="background-color: #dff">...</li>
<li style="background-color: #fdf">...</li>
<li style="background-color: #ffd">...</li>
</ul>
Using display: inline
This works for me, tested in Firefox 4 beta 10, would be advisable to test it in IE as well:
ul.images {
margin: 0;
padding: 0;
white-space: nowrap;
width: 900px;
overflow-x: auto;
}
ul.images li {
display: inline;
}
<ul class="images">
<!-- Inline styles added for demonstration purposes only. -->
<li style="background-color: #dff">...</li>
<li style="background-color: #fdf">...</li>
<li style="background-color: #ffd">...</li>
</ul>
The trick in the CSS is to set the lis to display: inline, so they are treated as characters and placed next to each other, and set white-space:nowrap on the ul so that no line breaking is done. You cannot specify a size on inline elements, but they will be stretched to fit the img elements inside them. The scrolling is then simply overflow-x: auto on the parent ul element.
Adding prev/next buttons could be done with position:absolute, or with float:left, or whatever other method you fancy.
Using display: inline-block
Similar to the previous approach, but allowing us to set a size on each individual image block:
ul.images {
margin: 0;
padding: 0;
white-space: nowrap;
width: 900px;
overflow-x: auto;
}
ul.images li {
display: inline-block;
width: 150px;
height: 150px;
}
<ul class="images">
<!-- Inline styles added for demonstration purposes only. -->
<li style="background-color: #dff">...</li>
<li style="background-color: #fdf">...</li>
<li style="background-color: #ffd">...</li>
</ul>