I have been stumped by what I hope is a very simple problem. I have a page that consists of two divs:
<div id="header">...</div>
<div id="content">...<div>
The header will be fixed to the top of the page and the main content section will scroll normally. I need my main content div to scroll over the header, covering it up as it does so.
I can accomplish the look and feel I want by fixing the header to the top, giving the main content a margin-top large enough to be in the correct place, and adjusting the z-index so that the main content scrolls over the header. The problem is that when I do this the main content division's margin-top covers up all the links and hover elements of the header, making them visible, but inactive.
I really hope this is an easy fix. Could someone please suggest something? I am trying to do this without resorting to javascript. Thanks a lot in advance!
I actually had the same problem and come up with this http://jsfiddle.net/EWefL/
<header>Working header link</header>
<section>Section</section>
header {
background:#cff;
height:100px;
position:fixed;
right:0;
left:0;
z-index:100;
}
section {
background: #579;
height:600px;
top:100px;
position:relative;
z-index:200;
}
Basically using position relative and the top attribute instead of margin-top. One important thing to note is that the z-index always needs to be set higher than zero.
Related
I have at the top of my page a div dedicated as a top bar. I want the position to be fixed so that it stays in the same place when scrolling. BUT.. once I apply the fixed positioning, all of the content moves up by about 30px (the size of the bar) and sits behind the bar making the header appear smaller in height than what it should be.
Once the css for position:fixed is removed from #topbar the content moves down to it's desired place
code via codepen: http://codepen.io/Hafkamp/pen/jabmE
css
#topbar{position:fixed}
To the #topbar, add CSS:
#topbar{
top:0;
}
Also, to the #header add:
#header{
margin-top:30px;
}
This way, your #topbar will stick to the top of the page and the following html will be pushed down by 30px(the height of the #topbar)
Just give the margib top to the header of 30 px
I'm quite new to css, divs and everything in between.
So, i created a basic layout for my band, didn't want a bunch of useless links like bio, merch store and all that. So i just decided to arrange separate spaces for our video, a player and a facebook window.
I managed to create a div for the youtube iframe, but i can't get it to stay in its place when i resize the window. I've tried changing the positioning a bunch of times to absolute, fixed, relative...etc. No luck.
Keep in my mind that the layout is nothing fancy, just something quick to look at, and get some basic info of the band.
Here's the link: http://silentcellmusic.com/test.html
Thx in advance!
First you should remove the image from the markup, and set it as background of the body, or html, for example. Set it to position top center.
Then, set the div #wrapper to { width: 960px; margin 0 auto; }. This way it will always be in the center of screen, so as your background.
Third, create four divs:
social
listen
video
Float them to the left, set their widths and margins, accordingly.
Finally add a div for your footer (social links and mailto).
Best of luck.
What you need to do is use positions. What fixed does is determine the position in relation to the window (or browser) top left corner, so it will always stay in the same place no matter how you resize it. The right way to go is to use absolute and relative.
First you need a relative container. Your image is already centered, so you could do something like:
<div id="container">...</div>
#container {width:960px; margin:0 auto; position:relative;}
Then you want your video to be in an absolutely positioned div, but INSIDE the relative one. SO your html would be:
<div id="container">
<div id="videoDiv">
your video here
</div>
</div>
And your css for the videoDiv:
#videoDIv {position:absolute; top:200px; left:200px; }
Look por css position online to understand how it works, it's actually quite simple but you need the right structure. In your case, your center tag should be the one with position relative, but make sure you change it to a div, otherwise some browsers will give a validation error.
Having said that, there are a lot of things you can do to improve your site. Once you know how to handle positions, you could re-do the layout using different images (so it's faster to load), and you can use actual text. This is quite important for search engines to recognise your site, so try at least to have keywords spread around.
Here is your CSS for the video div:
#apDiv1 {
position:absolute;
left:747px;
top:535px;
width:400px;
height:223px;
z-index:1;
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
Did you mean to declare width twice? Is the width:960px throwing off your positioning?
Get rid of the <center> tag altogether and change the css for #apDiv1 to:
#apDiv1 {
position: absolute;
left: 597px;
top: 489px;
width: 400px;
height: 223px;
z-index: 1;
}
We need to display data in a scrollable div.
We have created a simplified fiddle to demonstrate: http://jsfiddle.net/ZsQ5J/3/
The div contains two parts, a header and the content.
We want the Header to scroll horizontally along with the content, but to be fixed while vertical scrolling through the content.
We would like to achieve this completely in CSS if possible, we could solve it with jQuery I guess, but would prefer not to have to.
We have got most of the way there in CSS, but we can't get the content div to stretch the full width of the header. Because, I guess, making the content div 100% of the containing div isn't the full width of the header.
In a little more depth:
HEADER:
We want the header to stay visible all the time when scrolling up/down through the content. However the header is wider than the containing div so we do want it to scroll horizontally. (So no vertical scroll on the header, just horizontal). We have got this part working. The header is a table.
CONTENT:
The content is a div that we want to scroll both horizontally (in sync with the header) and vertically (independently of the header). This is the part we are having problems with. The scroll is working well, but the width is not expanding to match the header. It will only go as wide as the containing div.
I know it's weird to have a table as the header and a div as the content, but due to legacy issues we need to keep it this way.
Not sure from the question if you can add addition elemnts to markup, but if you can, possible solution is this: http://jsfiddle.net/ZsQ5J/8/
But there is possible problem — scrollbar will not be seen bu default. Is it ok this way?
Not sure if this is exactly what you want but this works.
-Wakeeta
body
{
width:100%;
}
#outer_container
{
margin-top:20px;
margin-left:auto;
margin-right:auto;
width:100%;
border:6px solid #FF0000;
overflow-x:auto;
overflow-y:hidden;
}
#top_container
{
display: block;
width:1500px;
padding:10px;
background-color:#CC66FF;
}
#bottom_container
{
height: 400px;
width:1500px;
padding:10px;
background-color:#FFFF66;
overflow-y:scroll !important;
}
em
{
font-weight:bold;
}
I am currently working on a website which was all going well until the css now thinks that the bottom of the page, even though i have positioned the image with
position:absolute;
bottom:0px;
is actually about 100 pixels above the bottom! I can't figure it out and my only answer could be because of how I am repeating things across the layout.The site can be found at SemaphoreDesign The paste bin for the style sheet is here And for the HTML go here I really cannot figure out why the header and the endside are not at the bottom of the page and why there is a scroll bar.Thanks
you can do a fixed position for these 2
#endside {
width:100%;
float:left;
height:112px;
position:fixed;
bottom:0px;
overflow:hidden;
background-image:url(images/main_09.png);
z-index-2;
}
#footer {
width:915px;
margin: 0 auto;
background-image:url(images/main_10.png);
height:112px;
position:fixed;
bottom:0px;
z-index:11;
}
Mostly likely you're scrolling down when you see the problem?
You should be using position:fixed if you want it to not move when the user scrolls.
The reason you're getting a scrollbar in the first place is because you set your "content" <div> to height:100%, which means 100% of the window height. Since there's other elements the height exceeds the window height.
Something like this might help:
HTML: http://pastebin.com/H0EauYeu
CSS: http://pastebin.com/mbV44Jef
I don't think you want to use position:fixed. This site has good CSS for footers you can copy:
http://www.cssstickyfooter.com/
I have a site that I need a sticky footer. I would like the footer to always be at the bottom of the page no matter what the users screen size. If the content goes longer than the screen I want the footer to move down with it. I want this to be all DIVs with no tables.
The below post is what I am looking for although the answer does not work with asp.net tag. When I have the form tag all css is ignored. As soon as I take out the form tag the footer sticks to the bottom perfectly.
How do you get the footer to stay at the bottom of a Web page?
Tried following?
.fixedPosition {
background-color:black;
position:fixed;
min-height:200px;
left:0px;
right:0px;
bottom:0px;
}
this will fix your wrapper to the left, right and bottom. You can then decide, what height it will have.
If there is a problem with positioning form (i dont know) try to wrapp it.
<div class="fixedPosition"><form></form></div>
Helped that?
In your css set the display property on header, content and footer divs to block.
#header {
display:block;
}
#content {
display:block;
}
#footer {
display: block;
}
If your header, content, and footer divs appear in your html page in that order then the footer should always appear beneath your content, unless there is other markup in your code that's not being shown in the example.