I have a fixed div at the top of my page, yet for some reason there is a gap above it when it should be flush with the top of the screen.
On inspecting the HTML I have found that body seems to have a margin-top of 8px. I implemented normalize.css to clear up the problem (as it's useful later on anyway) and now in my Chrome tools it is showing up as being overwritten (margin-top:8px has been striked out and normalize.css margin:0; is not) however it doesn't seem to be making any change to the design?
Can be found here:
http://www.haselden.co.uk/james/docs/index.html
Try setting this style for #navigation:
#navigation {
position: fixed;
height: 100px;
top: 0;
width: 100%;
background-image: url('images/stripes_bg.png');
}
The h1 in #wrapper #top had a margin that was pushing the #wrapper down, creating margin that pushed down the #navigation element, too. If you remove that top-margin from the h1, everything will slide up like you want.
Related
I have made an element sticky but I don't arrive in defining the area in which the elements should stay sticky. The current area was not picked by me but was defined automatically when I applied the position:sticky. Obviously I want full control over the space my sticky elements uses as active area, and I want to pick precisely where the element must stop during the scrolling.
The element uses roughly 50% of it's space where it's supposed to stay sticky.
Here is the url in question: https://www.varamedia.be/website-laten-maken/restaurants/
I get my inspiration from the google marketing platform sales page. Here you see the same kind of behaviour I'm trying to replicate: https://marketingplatform.google.com/about/enterprise/
Probably I'm missing something here... Thanks a lot for any kind of help.
I read through SO but did not find a proper answer to this question, hence the new thread.
Here is the custom CSS I added in my WP child theme style.css file:
.stickyimage{
width:100%;
background:orangered;
height:0px;
font-size:24px;
color:#fff;
text-align:center;
line-height:60px;
/*following codes is for sticky */
position:sticky;
top:0; /* it's up to you */
}
body {
direction: ltr;
color: #a1a1a1;
background-color: #FFFFFF;
line-height: 24px;
background-repeat: repeat;
background-attachment: fixed;
overflow-x: visible;
overflow-y: visible;
background-position: 0 0;
letter-spacing: 0.01em;
word-spacing: 0.01em;
}
If you are still struggling with this, I inspected your web page and may have found the problem.
The problem lies in the parent container of #sidebar, its position: relative causes the unexpected behavior.
To fix this you can overwrite its CSS. To target the parent div of #sidebar you can simply do:
div > #sidebar {
position: static;
}
The code above targets div elements which have a #sidebar element as child. You can change its position to anything but absolute, relative, sticky or fixed. More information on CSS positioning here.
The key takeaway here is if you want to dynamically position an element, make sure its parent is statically positioned to avoid unexpected behavior.
I have a fixed div on the left side, and only on a Mac, when you downsize the window and scroll to the right for example, the fixed div follows it, but it should stay in place (not show if you scroll).
On windows it's normal.
Any suggestions?
CSS:
.header .quick-access {
background: url("../images/login_search_bg_big.jpg") no-repeat scroll left top transparent;
float: left;
font-family: Arial,Helvetica;
height: 200px;
padding: 0;
position: fixed;
text-align: left;
top: 165px;
width: 117px;
}
Different browsers interpret tags differently sometimes.
You may want to simply change your position type to absolute instead of fixed.
Read here for more information:
Learning CSS positions
You are confusing position:fixed with position:absolute. You should read more about it as mentioned by #Elad CSS Positioning
Fixed means, it will stay at the same position even when you scroll, so your "problem" isn't actually a problem, it does what you coded out there. So it's parent will be your window.
Absolute means, that it's parent is the the whole document html, and not the windows itself. So you should try this if you want it to be sticked to your html document instead of the window. Do not forget to add a position:relative to it's parent tag.
Currently I'm working on a website for myself. I decided to go for a header content footer design where the footer shall be stuck to the bottom all the time. Hence I set up a wrapper with position: relative, containing the header (#top), content (#middle), and footer (#bottom). Bottom got position: absolute with top: 0.
I've also set height: 100% for html and body and a appropriate padding-bottom for #middle to ensure that my footer won't overlap #middle.
Please find a simplified sample version here: http://www.webdevout.net/test?0w
Here is the CSS in question:
* {
padding: 0;
margin: 0;
}
html, body {height: 100%}
#wrapper {
position: relative;
background-color: #ccc;
min-height: 100%;
}
#middle {
background-color: #900;
padding-bottom: 200px;
}
#top, #bottom {
width: 100%;
height: 200px;
background-color: #bb5;
}
#bottom {position: absolute; bottom: 0;}
Now here's my problem: my understanding of the box-model is, that one should be able to achieve the same (keeping the space for the footer) with margin-bottom instead of padding-bottom for #middle, but margin-bottom isn't applied to it. I've read that min-height doesn't consider padding, border or margin, but the padding is considered here while border and margin aren't.
FF and Chrome show different behaviors when margin-bottom is used instead of padding-bottom for #middle: while Chrome just ignores the margin, FF applies it below #wrapper. My general idea would have been that my container should grow to the total size of its content with min-height, including height + padding + border + margin of #middle, but obviously it just grows to overall size of #top + height of #middle + padding of #middle.
I wonder what is the correct behavior and why padding and margin aren't interchangeable to keep the space for the footer.
While an explanation would be much appreciated, I'd be also thankful for a link to a source which could help me. I'm sorry if this duplicates another post, but I didn't find something (neither here nor via Google) fitting my special problem.
Thank you!
i had faced same problem like u are facing.
You have to use this piece of code.
#middle {
display: table;
margin: 2% auto;
width: 100%;
}
use of display : table works for me to set margin from top and bottom.
If I remove the clearfix div, above the footer, the text falls into place, as it does on Firefox.
But that breaks other things. I don't understand how that clearfix can be affecting the footer at all though...
My page:
http://www.craftonhills.edu/Current_Students/Counseling/Assessment.aspx
It looks like your footer element as these style rules associated with it:
#footer {
clear: both;
font-size: 1.4em;
height: 150px;
margin-top: -150px;
position: relative;
}
If you remove the margin-top: -150px rule, it looks like that clears up Chrome.
In the #content style, it looks like you have a padding-bottom: 150px; rule that is pushing everything down quite a bit. Might want to reduce that a bit as well.
If your goal is a Sticky footer, for some reason adding the margin-bottom: -150px; rule to the #container element worked in Firefox, Chrome, and IE for me. However, I think it's a bit higher than 150px.
I ended up adding a .push div below my clearfix div, giving it a height of 180px (the correct height, with padding, rather than 150px). Not semantic, but it seems to fix Chrome.
In my .css, I'm using a fixed width, centered layout with:
#page-container {
width: 760px;
margin: auto;
padding-top: 10px;
}
All pages using the .css are the same width. If I insert bullet points into a div, it seems to move to the left by a few pixels and is no longer centered. This also happens if I insert an iframe.
Perhaps someone more experienced could suggest the cause?
[Edit]
It's being caused by the scrollbar appearing as I add content. Is there anything I can do about this?
To keep the page from shifting, you should set the body style to overflow:scroll so there's always a scrollbar.
What you're probably seeing is the default margin and padding of ul and li elements.
Use a web developer tool such as Firebug and hover over the element, you'll see the margins and paddings.
For example a ul element has some default margin (in yellow) and padding (in purple):
What you can do is apply CSS to reset those defaults:
ul { margin: 0; padding: 0; }
ul li { margin 0; padding: 0; }