I am trying to achieve a scrolling body with fixed header and fixed sidebar. I think I am almost there except that the body scrolls on top of the header. I wish I could simply increase the z-index of the header in relation to the body but this doesn't work since the header is mostly transparent.
Here is the site: link
Any ideas?
Thanks
Edit: I should clarify that I want the content to be invisible as it scrolls underneath the header, not simply as a layer beneath it.
Use the same background image for your body and header, but with background-position:fixed.
This way, the header will have opacity for the content to scroll beneath and be hidden. Using fixed position will ensure that the two images appear seamless.
On a side note, I am unable to view the entire sidebar on your site, you may want to reconsider using such a rigid layout.
Here is your code:
#thebody {
display:inline-block;
position:relative;
width:984px;
margin-left: 0px auto;
margin-right: 0px auto;
font-size:24px;
text-align:center;
height:100%;
z-index:-1;
}
#theheader {
display:inline-block;
font-size:26px;
width: 984px;
margin-left: 0px auto;
margin-right: 0px auto;
background-color:none;
clear:both;
}
The way z-indexs work is, anything to be included in the layering needs to also have an z-index set. So, in your code right now, only #thebody is set. Add this to #theheader:
#theheader {
display:inline-block;
font-size:26px;
width: 984px;
margin-left: 0px auto;
margin-right: 0px auto;
background-color:none;
clear:both;
z-index: 10; /* addition */
}
This places #theheader over the #thebody. Good luck, and let me know if you have questions.
Related
I have a layout using DIV tags and I have having a hard time controlling the fill of the div tags as well as unnecessary scroll bars. When the content in the "rightside" div tag doesn't fill the screen there is still a scroll bar on the page. How do I cut the tags so they don't fill past the first screen if not needed.
A second issue that I have is when there is enough content in the "rightside" div tag to create the need for a scroll bar, the background of the "sidebar" div tag does not extent to match the bottom of the "rightside"
I have played around with so many of the tag, I have no clue where to go from here. Any help is greatly appreciated!
Here is my CSS Code:
.content_container {
border:2px solid red;
overflow: auto;
height:100%;
}
#sidebar {
background:#a4c2c2;
width:231px;
font:12px georgia;
color: #336666;
line-height:18px;
float:left;
position: absolute;
overflow:hidden;
z-index:-1;
height:100%;
min-height:auto;
}
#sidebar div {
height:2000px;
}
#rightside {
float: left;
width: 500px;
height:100%;
margin-left:231px;
padding: 10px 0px 0px 25px;
}
http://jsfiddle.net/03hcm6ta/
EDIT-
I solved my issue, well almost, with a table. However there is a weird border issue happening and I can't seem to solve it. The side bar and rightside div tags dont seem to completely cover the content_container div. Any suggestions?
http://jsfiddle.net/eh92awh0/
Hopefully I've understood your issue... You had a couple of stray /div tags plus you'd opened paragraphs with P and closed with /p and some duplicated classes in your CSS :)
EDIT - Updated fiddle; http://jsfiddle.net/richardblyth/L9afr65f/
The key is setting all relevant elements to
height: 100%;
position: relative;
And on your container
overflow: hidden;
See my fiddle :)
I have a custom webkit scrollbar like this:
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: #999 !important;
}
So it renders a grey custom scrollbar instead of the standard one. However, it is stuck to the right side of the page. I know I can change this by adding a margin, padding or border to my body but I am using fullscreen (on backgrounds) images. So when I try this all the images are affected by this too, which I do not want. So I tried to position the scrollbar but this does not work (as it is not an element but a user agent property...
So I'm looking for a way (without using another plugin) to customize the toolbar so that it is offset from the side.
Or, if possible that I can make the scrollbar offset in a div.
Secondly, I'm looking for a way that I can make the "track" of the scrollbar transparet. So only a handle.
Thanks in advance!
If you are still looking for for the answer (or somebody else is, like I was) - here is a definitive article about webkit scrollbars.
Answering Your first question - I'd suggest that you put all your scrollable content in a div with 100% height and 90% width - the 10% left on the right would be your offset. Like that:
.superDiv{
height:100%;
width:90%;
position:fixed;
}
body{ overflow: hidden }
The second question - you're looking for
::-webkit-scrollbar-track-piece {
background:transparent;
}
But as Apple people are pushing for no-scrollbar web browsing, only the properties set by CSS are visible, so you don't have to change the track-piece.
Clever solution I found recently was to put the border on the right hand side of the screen / div that contains scrollbar:
<div class="yourdiv">
border-right: 5px solid #(background_color);
</div>
An easy way to control the position of a custom scrollbar is to set the scrolling element (body?) using definitive positioning. You'll also need to set html to overflow:auto;
To make the thumb transparent, use a RGBa value for declaring the color. In this case I used 0,0,0,0.4 (red,green,blue,alpha). RGBa is not supported in every browser, Chris Coyier has a good table of who supports it here: http://css-tricks.com/rgba-browser-support/
If all you want to show is the thumb than also consider hiding the other elements of the scrollbar: resizer, scrollbar-button, and scrollbar-corner.
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 5px;
right: 20px;
overflow: scroll;
}
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: rgba(0,0,0,0.4); /*-- black at 40% opacity --*/
}
::-webkit-resizer,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner { display: none; }
Check out the working demo at http://jsfiddle.net/Buttonpresser/G53JQ/
I want to implement a "center frame" like a narrow and tall page in the center of my webpage.
And I want to make sure it has 200 pixels of space both in left and right. The following css rule works for left, but right is nearly on the right of body.
div#centerframe
{
background:rgba(255, 255, 255, 0.85);
box-shadow:0em 0.5em 2em 0.3em;
margin-left: 200px;
margin-top: 200px; /* top works too */
margin-right: 200px;
float:left; /* because I want it to expand with its content */
padding-top: 90px;
padding-bottom: 90px;
padding-left: 90px;
padding-right: 90px;
}
I made a fiddle to show you the bad behaviour, but it behaves as I want in this fiddle :
http://jsfiddle.net/UMscz/
however, with the same dom, it doesn't work on my site.
the body rule is like this :
body
{
position:relative;
width:100%;
height:100%;
padding:0;
margin:0;
overflow:auto;
}
and my dom is like
<body>
<div id='centerframe'>
<div id='article_wrapper'>
</div>
</div>
</body>
So how can I make sure that '#centerframe' has a certain pixels of space in right and left ?
The reason I'm trying to do is I want to show fixed size ads on the page.
Thanks !
Edit :
And I'm sure that nothing in the content "pushes" it to stretch. I don't set any width rules in the content so that it resizes according to centerframe and its padding.
Edit 2:
I spotted the problem. But it is still strange. I had some elements that pushes its width, in index.php (inline style). But when I click to a link, and go to show_article.php, the width of the centerframe remains as in the index.php.
So when I removed the width rule in index.php, it also fixed the width in show_article.php, even though the width rule was only in index.php.
So, does the css rule remain when going to another page? It shouldn't, right ?
this will work :
div#centerframe
{
background:rgba(255, 255, 255, 0.85);
box-shadow:0em 0.5em 2em 0.3em;
margin-left: 200px;
margin-top: 200px; /* top works too */
margin-right: 200px;
padding-top: 90px;
padding-bottom: 90px;
padding-left: 90px;
padding-right: 90px;
max-width:100%;
}
(remove float left and add max-width)
you can also wrap your center div with 2 fixed size div.
I guess you're using a Framework like drupal or Joomla.
View source of show_article.php from your browser (ctrl+u), that must contain index.php header with your css rules
I have a div (#socmed) with an ul containing li's which i have positioned at the top right of my page. You can find the div inside the header tag. These are social media buttons by the way.
http://digilabs.be/tutu/collection.php
As you can see, it only shows up in chrome and safari (haven't tested in IE yet).
I have tried changing the z-index, because I felt like it got overlapped by the parent div, which is colored pink. But that didn't seem to work. I have no idea what to do.
Thanks in advance for all help.
In your main.css:Line 73
Add a width to the <li> item.
#socmed li {
list-style: none outside none;
margin-top: 5px;
width: 25px; /* Add this width..! */
}
This seems to fix your problem.
Your outer #socmed div has width: 25px, but your <li> within it does not, and by default it is larger then the 25px as specified on #socmed, so would not display.
2 CSS adjustments you can make. First make a relative container (not fully tested on your page, but usually a good practice...
header {
position:relative;
}
Second, define a width for your ul list items in your header...
#socmed ul {
width:30px;
}
Hopefully this helps
This issue is related to the width of div#socmed:
#socmed{
width: auto;
height: 125px;
position: absolute;
top:8px;
right: 40px;
}
Originally, you set width to 25px, and this was not wide enough to show your icons.
This question from:
ul, ol {
margin: 0 0 10px 25px; // to margin:0
padding: 0;
}
please don't in the ul,ol such values margin: 0 0 10px 25px; It is a gobal.
I have put relative div in relative container. It worked.
How can I get an image to stretch the height of a DIV class?
Currently it looks like this:
However, I would like the DIV to be stretched so the image fits properly, but I do not want to resize the `image.
Here is the CSS for the DIV (the grey box):
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
}
The CSS being applied on the image:
.product{
display: inline;
float: left;
}
So, how can I fix this?
Add overflow:auto; to .product1
In the markup after the image, insert something like <div style="clear:left"/>. A bit messy, but it's the easiest way I've found.
And while you're at it, put a bit of margin on that image so the text doesn't butt up against it.
Assuming #John Millikin is correct, the code
.product + * { clear: left; }
would suffice to do the same thing without forcing you to manually adjust the code after the div.
One trick you can use is to set the <div>'s overflow property to hidden. This forces browsers to calculate the physical size of the box, and fixes the weird overlap problem with the floated image. It will save you from adding in any extra HTML markup.
Here's how the class should look:
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
overflow: hidden;
}
This looks like a job for clearfix to me ...
Try the following:
.Strech
{
background:url(image.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
width:500px;
height:500px;
}
display:inline
float:left
is your problem
Floating makes the parents width not be stretched by the child, try placing the image without the float. If you take the float off, it should give you the desired effect.
Another approach would be to make sure you are clearing your floats at the end of the parent element so that they don't scope creep.
Update: After viewing your link Your height issue as displayed, is because the floats are not being cleared.