I dont know how to phrase this question correctly, I would like to create something like the logo on the upper right corner of this website: http://www.afterthecircle.com/
When the user scrolls down, the logo moves with the scrolling movement and always stays visible to the user.
Any suggestions?
Use position: fixed along with top or bottom and left or right:
.logo {
position: fixed;
bottom: 1em;
right: 1em;
}
As brbcoding said, you are looking for the CSS property position with the value fixed. With the properties top, bottom, left, and right, you can then position the element. An example:
CSS
.fixedElement {
position: fixed;
top: 100px;
left: 100px;
}
HTML
<div class=fixedElement>Hey!</div>
Fixed positioning will allow you to scroll and keep an item in it's original position.
#fixed-thing {
position: fixed;
top: 0;
right: 0;
}
DEMO
Related
screenshot top left corner crop photo
how to place this logo in extreme left corner with css or html so that it can be seen in white background
i have tried many times changing position but nothing works , don't have much knowledge about css so please correct me what wrong i am doing in this and which code would do the job
the current id is
#mylogo {
position:absolute;
left:0;
top:0;
}
ps: i am just a beginner in html and css
try changing position from absolute to relative
#mylogo {
position:relative;
left:0;
top:0;
}
To do it, put this in the CSS:
#mylogo {
position: -webkit-sticky;
position: sticky;
top: 0;
width: 200px;
Then, it will stay at the top left of the screen.
For example, if you put this in the html:
<img id="mylogo" src="https://cdn.vox-cdn.com/thumbor/HqBAiwc9uD1sHBw2Uvac03pCXKE=/0x0:2012x1341/1400x1050/filters:focal(0x0:2012x1341):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg" width="50%" height="50%">
<style>body {height: 200px;}</style>
the google logo will stay at the top left of the screen.
Relative adds on to the original location. Absolute is the definite no-matter-what location. For relative, lets say you have a "position: relative; left: 120px;". The relative will add 120px to the original location of that element (in this case the logo).
Remember though, you HAVE to include px or % for the css to position it at all.
If you want the logo to at the top left corner of the visible window even as you scroll, use "position: fixed;" For example:
#mylogo {
position: fixed;
left: 0px;
top: 0px;
}
try adding px or % after the 0. For example:
Try this:
#mylogo {
position: absolute;
left: 0px;
top: 0px;
}
or this:
#mylogo {
position: absolute;
left: 0%;
top: 0%;
}
This is a follow up to my last post, I found a issue after putting the images on top not sure if this is directly related. The issue is where you can't click on the nav links as they are transparent.
Only one shows the hover color when the cursor is put in a specific position. None of them can be click other that one which only works in a specific position. They do not show the hover color.
Code:
CODE HAS BEEN DELETED AS WEBSITE IS POSTED
Your problem is located here:
div.staffimg {
top: 100px;
left: 0px;
right: 205px;
bottom: 0px;
position: fixed;
}
Instead of just positioning your element, you are creating a block element that covers your navigation as it extends to bottom of screen.
Remove the left and bottom properties to solve this:
div.staffimg {
top: 100px;
/* left: 0px; */
right: 205px;
/* bottom: 0px; */
position: fixed;
}
How can I make a semi-transparent element with text in it which goes on top of one navigation bar, but goes under the other? I am trying to make an effect like in http://hongkong.grand.hyatt.com/en/hotel/home.html where the red Hyatt logo and "hong kong" go above [over] the brown bar, but below the white (top of screen). https://www.dropbox.com/s/xarl3qe3ncxrdm1/Untitled20130520174504.jpg?v=0rc-s
You'll just need to use various z-index values for the arrangement and opacity to get the transparency.
(source: snag.gy)
#topbar {
height: 20px;
width: 100%;
position: fixed; /*so it doesn't scroll with the page*/
left: 0;
top: 0;
z-index: 3; /*the bar on top gets the highest index because it's above everything else*/
}
#secondtopbar {
height: 20px;
width: 100%;
position: fixed;
top: 20px;
left: 0;
z-index: 1; /*the second bar on top gets the lowest index because it's below everything else except the text, with doesn't even get a z-index*/
}
#logo {
opacity: 0.5; /*this makes it half-transparent, on a scale from 0-1*/
height: 100px;
width: 100px;
position: absolute;
top: 30px;
left: 30px;
z-index: 2; /*the logo gets the middle index because it's in between*/
}
What type of a solution are you searching for? If you check out what the Grand Hyatt did, they're using an image and setting position: absolute to place it where they want it to appear.
If you do not want to use an image, you could use some HTML elements layered on top of each other to recreate the logo: See here http://jsfiddle.net/U3mCz/
Couple of notes:
You'll have to set a lower z-index on the parent of the logowrapper
(in my example, anything under 500 will work), so that the logo stays
on top.
You'll need to adjust your css on the logowrapper to position the logo where you want it.
If you adjust the height of the red bar, make sure you set your line-height equal to the height of the red bar to ensure vertical-centering of your text!
Hope that helps you out.
I have a simple question, and want to know if you can solve it for me..
Anyway, the question is, how do i place a box in the right side of the page, that wont affect any of the appearence of the css that is currently on the page :)
Use position: absolute;. To define the position, you can use the top, left, right, bottom properties to specify the respective offsets. In your case, you probably want right:
.rightbar {
position: absolute;
top: 0px; /*how many pixels from top*/
right: 25px; /*how many pixels from right*/
width: 50px;
height: 150px;
}
If you want your div to stay visible even after you scroll, use position: fixed;.
Little demo: little link.
I'm looking for a trick to create a "fixed" HTML object on the browser screen using CSS. I want it to stay in the same position all the time, even when the user scrolls through the document. I'm not sure what the proper term for this is.
It would be like the chat button on Facebook or the Feedback button that is on some websites that follows you throughout the page.
In my situation, I want to keep a div at the absolute bottom-right corner of the screen at all times. Sample CSS appreciated.
You may be looking for position: fixed.
Works everywhere except IE6 and many mobile devices.
The easiest way is to use position: fixed:
.element {
position: fixed;
bottom: 0;
right: 0;
}
http://www.w3.org/TR/CSS21/visuren.html#choose-position
(note that position fixed is buggy / doesn't work on ios and android browsers)
Make sure your content is kept in a div, say divfix.
<div id="divfix">Your Code goes here</div>
CSS :
#divfix {
bottom: 0;
right: 0;
position: fixed;
z-index: 3000;
}
Hope ,It will help you..
position: sticky;
The sticky element sticks on top of the page (top: 0) when you reach its scroll position.
See example:
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky
The tweak:
position:fixed;
works, but it breaks certain options....for example a scrollable menu that is tagged with a fixed position will not expand with the browser window anymore...wish there was another way to pin something on top/always visible
position: fixed;
Will make this happen.
It handles like position:absolute; with the exception that it will scroll with the window as the user scrolls down the content.
Try this one:
p.pos_fixed {
position:fixed;
top:30px;
right:5px;
}
In order to keep floating text in the same location over an image when changing browser zoom, I used this CSS:
position: absolute;
margin-top: -18%
I think the % instead of fixed pixels is what does it. Cheers!
#fixedbutton {
position: fixed;
bottom: 0px;
right: 0px;
z-index: 1000;
}
The z-index is added to overshadow any element with a greater property you might not know about.
You can do like this:
#mydiv {
position: fixed;
height: 30px;
top: 0;
left: 0;
width: 100%;
}
This will create a div, that will be fixed on top of your screen. - fixed
HTML
<div id="fixedbtn"><button type="button" value="Delete"></button></div>
CSS
#fixedbtn{
position: fixed;
margin: 0px 10px 0px 10px;
width: 10%;
}
You can try this code:
<div style="top: 0; position: sticky;">your code</div>
or you can add class/id like this:
html:
<div class="FixedPosition">your code</div>
css:
.FixedPosition{
position: sticky;
top: 0;
}
you may change the "top" if you want it to not be on top of the screen and don't delete the top else it won't work.
I hope this help : )