This is a pretty small question, I've tried googling but without knowing the name of the style I'm getting nowhere fast. What is the design pattern called where the (i'm going to say blog cause that's where I've seen it used) blog text is a continuous scroll but the rest of page (ie headers and footers) is static?
As an example blog
By default, elements are positioned static, relative to each other (position: static;). To position an element relative to the viewport, you use:
element {
position: fixed;
}
This takes the element out of the normal text flow. See http://www.w3schools.com/css/css_positioning.asp for more information about positioning.
You are looking for
position:fixed
Now you got a fish, learn how to catch it :
You need to use your browser toolkit, or firebug for firefox, to select the element you want to inspect, then looking for it's source code and css rules, you will see by your own how it's made.
I don't think there's a specific styling terminology for it but all you need to do is add position: fixed to your header and/or footer.
#header {
position: fixed;
}
#footer {
position: fixed;
}
Related
Looking to have a block within the page stick when you scroll down
i.e. https://auratenewyork.com/
(Note: "Fine jewelry designed to be worthy of the women who wear it" text block sticks while the right side still scrolls)
.sticky {
position: sticky;
top: 0px;
}
This is to be a custom CSS code within squarespace. Sticky is just not working and it's wracking my brain. I've even changed the overflow to visible or auto (not hidden). Still doesn't work. Sticky does not even come up highlighted like position:fixed does.
This article goes over how position sticky works. But since you haven't provided any code yet, we can only guess what the issue might be. But please note this part from the article:
While playing with it, I quickly noticed that when an element with a position: sticky style is wrapped, and it is the only element inside the wrapper element, this element, which was defined position: sticky will not stick. [...] When I added more elements inside the wrapper element, it started working.
Hopefully this wil help you.
I have a double scroll bar on my website in Chrome and Firefox (both browsers are up to date). I have been researching the web and stackoverflow and have tried following suggested options on the html element:
html { overflow: hidden; } - afterwards -
html { overflow: auto; } - and - html { overflow: scroll; }
None of them got rid of the double bar, even worse some blocked me from scrolling at all.
I'm not sure which other element to target or what might be causing this. Does anyone have a suggestion?
The website is https://www.lekkerlimburgs.be
I had the same problem with one of my wordpress websites. I added the following CSS which fixed the problem for me :
body{
width:100%;
overflow-x:hidden;
overflow-y:hidden;
}
It seems like you are trying to add the css from within the html tag. For this you will need to add style tags within the body of the html. If this is the case use the following code:
<style>
body{
width:100%;
overflow-x:hidden;
overflow-y:hidden;
}
</style>
Hope this helped :)
You have overflow:auto on your HTML element, which will add a scrollbar if the element exceeds the screen size on some browsers.
MDN:
auto
Depends on the user agent. If the content fits inside, looks identical to overflow: visible, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows.
Alternatively, if you cant locate the source of the bug as explained by Gant, you can Use Browser developer tools to isolate the offending tag. What i do is
Inspect the malformed page elements using your browser developer tools
Hover on suspicious elements and Delete them while keeping an eye on the inner scrollbar. if it disappears then the element you've just deleted is the offender undo deletion (Ctrl+Z) and inspect it. Otherwise if the scrollbar persist even after deleting the element, then the element you just removed isn't the offender. therefore, undo deletion and move to another element
if the offending element is huge/broad perform step 2 on its sub elements and iterate till offending sub element is found. then check the css associated with the sub element causing the issue for overflow:auto
This approach may be better if you have tons of stylesheets and dont know how to go about it
*Adapted from Chris Coyier Fixing Unintended Body Overflow
I have a dynamically generated list of moderators on a minecraft network with a tooltip generated for each head that is generated showing their username on hover. The functionality works, the tooltip generates and has the correct username in it however, the position is wrong. It's shifted to the left and falls apart as I move down the list. Here's a gif on what's happening:
I simply do not know what to do in this situation.
Well the plugin seems to work correctly (if the names are okay), I suppose it might be a css issue. Maybe the parts of the tooltip get somehow some margin on them. try to inspect them with right click and see if they have any other style attributes than the defaults.
Anyway, if you could post some of the codes, that would be easier.
Seems like this page has changed since you asked this question, but I bet it was a CSS issue. You probably needed to center the tooltip box relative to its parent. Here's some (unvetted) code that might help. I've only included the properties that would affect the centering on the tooltip container:
.parent {
position: relative;
}
.tooltip-container {
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px;
}
Notice, you have to set a width on the tooltip-container. margin-left is 1/2 the width, and negative (visualize that left: 50% will put the left edge of the container at the center of the parent, and the negative margin-left will shift the container half the width of the container).
i'll try to make my question really simple 2 you
Basically, i have a DIV, in which i have a picture
What CSS styles should i apply to the picture to position it correctly inside the div
with the condition that everytime i resize the browser window it stays there (inside the div) at the same distance from the borders
Sorry for wasting your time but i'm still a newbie which needs help, thank you alot!
EXAMPLE HERE
code
html
<div id="super_div">
<img id="eyes" src="images/eyes.png" />
</div>
css
that's the question :)
You need to look at absolute positioning. First, you set the containing div's position attribute to relative. For example:
#super_div
{
position: relative;
}
Then, you set the image's position property to absolute and use the top and left or right properties to place it inside the parent div. So, for example:
#eyes
{
position: absolute;
top: 20px;
left: 20px;
}
That's how you make the image keep its current position no matter what. Here's a link to an article explaining the basics. Hope this helps.
This will get it horizontally centered:
margin:auto;
If you need it vertically centered as well then things get a bit more tricky. You can either resort to tables, use a background image (if this is appropriate to your situation) or fiddle with the css. I used the code on http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/ as a basis for solving a similar situation I had a while ago..
I have this code, which is behaving differently in firefox vs chrome.
<h2>Presenting
<span style="font-weight:bold">Analytics by </span>
<div class="fi_logo"><img src="IMAGEURL" /></div>
</h2>
the class fi_logo referenced above is :
.fi_logo {
min-width: 35px;
height: 35px;
margin-left: 40px;
position: absolute;
top:-5px;
left: 262px;
float:right;
}
In firefox, there is an offset caused by margin-left in fi_logo between the image and the text(in h2). If i dont add the margin-left, then the image overlaps the text in chrome.
So, in short, if i add the margin-left property, it works in chrome, whereas it causes a large offset in firefox. Any suggestions on how to solve this?
Here it is: http://jsfiddle.net/bikerabhinav/mpL79/2/
Use combination of position relative and absolute.
Also, do not use div inside h2 - bad markup
Maybe if you set .fi_logo display:block
I think, your problem is with specific browser version.
I checked it in FF 3.6.2, which return same result like Chrome
Well it sounds like you still haven't sorted this out so I will make a little more commentary.
I cannot say exactly what is causing the browser inconsistencies without doing a bunch of trial and error, but I think that the way to fix it is to rethink the way you are positioning the image.
It seems awful convoluted to be positioning the img absolutely, floating it, and adding a left margin. Given all of that it is unclear what precisely you are even trying to accomplish with this code.
If you edit your question to describe how you want the image positioned, I (or someone else) would be more than happy to recommend a good approach
Your html is invalid. You cannot have a div inside a heading. I also question the float and absolute positioning on the same element. I also wonder if you are using a doctype.
Your image tag inside the div is not closed properly, and in the css the class definition is wrong; the class is defined by a dot (.);