I'm attempting to set up an anchor tag to scroll from bottom to top of the page, and the functionality works fine - but the arrow icon I want to display isn't showing up from the linked CSS.
HTML
CSS
/*Anchor to move to top*/
.anchorScroll {
content:url(https://visualpharm.com/assets/98/Upward%20Arrow-595b40b85ba036ed117dbd06.svg/200x200);
background: #8994a5;
color: #fff;
position: fixed;
bottom: 10px;
right: 10px;
z-index: 9999;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
border-radius: 3px;
}
And here is a JS Fiddle link. Thanks in advance for any help that anyone can offer.
You have change this:
content:url(https://visualpharm.com/assets/98/Upward%20Arrow-595b40b85ba036ed117dbd06.svg/200x200);
to this:
background:url('https://visualpharm.com/assets/98/Upward%20Arrow-595b40b85ba036ed117dbd06.svg');
Changed "content" to "background", put the link to quotations, and removed 200x200.
Full code is here:
.anchorScroll {
background:#8994a5 url('https://visualpharm.com/assets/98/Upward%20Arrow-595b40b85ba036ed117dbd06.svg');
color: #fff;
position: fixed;
bottom: 10px;
right: 10px;
z-index: 9999;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
border-radius: 3px;
}
You need to remove 200x200 from content url link see below
.anchorScroll {
content:url(https://visualpharm.com/assets/98/Upward%20Arrow-595b40b85ba036ed117dbd06.svg);
background: #8994a5;
color: #fff;
position: fixed;
bottom: 10px;
right: 10px;
z-index: 9999;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
border-radius: 3px;
}
Related
I am having the weirdest problem: I am working on a portfolio page with images that should link to the various projects. There are 6 of these in total. Each of the images has a button that should live on top of it. When the button is hovered on by the user, it changes color, the cursor changes, and a popup with a short description of the project opens. When the button is clicked, there is an event listener that redirects to the project's page.
The problem is that in 2 out of the 6 instances, the moment I position the buttons inside the image, the buttons lose all functionality (including the event listener). As far as I can tell the code governing these 2 instances is the same as the other 4 where there is no such problem.
code where it doesn't work:
HTML:
<div class="container" id="linkTwo">
<img src="assets/images/bonez2.jpg" alt="bonez" style="width:200px; height:200px;" class="linkpic" >
<div class="btn1"id="btn1">Bone's Beatz<span id="bonezPop"> */some text that pops up/* </span></div>
</div>
CSS:
#linkTwo {
position: absolute;
top: 100px;
left: 230px;
}
#linkTwo #btn1:hover {
background-color: black;
}
#btn1 {
position: absolute;
left:20px;
padding-left: 23px;
padding-right: 23px;
}
#btn1 #bonezPop {
visibility: hidden;
width: 250px;
background-color: #883043;
color: #aa9e9e;
text-align: center;
border-radius: 6px;
border-style: solid;
border-color: black;
border-width: 2px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
#btn1:hover #bonezPop {
visibility: visible;
}
.container #btn1 {
position: absolute;
top: -2px;
left: 20px;
font-size: 16px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 53px;
padding-right: 53px;
border: none;
cursor: pointer;
border-radius: 5px;
}
code that DOES work:
HTML:
<div class="container" id="linkFive">
<img src="assets/images/weather.jpg" alt="weather app" style="width:200px;height:200px;" class="linkpic">
<div class="btn3" id="btn3">Weather App<span id="weatherPop"> */some text that pops up */</span></div>
</div>
CSS:
#linkFive {
position: absolute;
top:320px;
}
#btn3 #weatherPop {
visibility: hidden;
width: 250px;
background-color: #883043;
color: #aa9e9e;
text-align: center;
border-radius: 6px;
border-style: solid;
border-color: black;
border-width: 2px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
#btn3:hover #weatherPop {
visibility: visible;
}
#btn3 {
padding-left: 53px;
padding-right: 53px;
}
.container .btn3 {
position: absolute;
top: -2px;
left: 20px;
font-size: 16px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 60px;
padding-right: 40px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.container .btn3:hover {
background-color: black;
}
I realize this whole thing would have been done much more easily with WordPress or some such, but this is a class assignment that requires I do this with code.
Thanks!
Short gif of how the problem looks
Found the answer. It was a different CSS rule that was for some reason breaking it:
.container {
position: relative;
width: 50%;
}
commenting this out solved the problem.
I have a button that needs to be centered in it's div class ex. div="sanfrancisco-image". It's placed 17px from the bottom of the box, however it will appear center, even though I've placed justify-self:center; and align-items: center; tabs.
Here's the codepen link: https://codepen.io/holmedw/pen/KrvJEb
.btn {
align-items: center;
position: absolute;
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
border: 2px black solid;
border-radius: 1px;
background: transparent;
cursor: pointer;
bottom: 17px;
justify-self: center;
}
No need for the align-items and justify-self. not sure they do any good, so try to remove them. on the css of the button? => set the following:
margin: 0px auto 0px auto;
try that and let me know if it works.
The quickest way to get what you want is to add position: relative to the .our-story-block, .our-dna-block, .sanfrancisco-block then you add a new div to include your button, like <div class="btn"><button>See More</button></div>. Set that div to position: absolute; bottom: 17px; width: 100%; left: 0; so it would center the absolute div inside a relative element. You won't need to include those values in your .btn css class anymore so just remove them.
.btn {
position: absolute;
width: 100%;
left: 0;
bottom: 17px;
}
.btn > button{
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
border: 2px black solid;
border-radius: 1px;
background: transparent;
cursor: pointer;
}
This is how my input and button looks like. The CSS code looks like this:
button._searchfrontpage
{
margin: 0 auto;
background: #333;
height: 53px;
width: 70px;
border-radius: 6px;
line-height: normal;
color: #eee;
font-weight: 400;
letter-spacing: 2px;
border: 0px;
display: block;
font-size: 18px;
}
.sp-module_searchfrontpage input[type="text"] {
background: #f0dbc5;
height: 53px;
width: 50%;
margin: 0 auto;
border-radius: 6px;
margin-bottom: 40px;
line-height: normal;
color: #444;
font-weight: 400;
letter-spacing: 2px;
border: 0px;
display: block;
}
I dont seem to figure out a way to drag the grey button into the right side of my input box. Are there someone who can figure me an idea to work from?
EDIT: after implementing the code #Jai gave me, it looks fine, but when i make the browser smaller, it gets out of its place and looks like this:
Obviously its like that, because the input width is 50%. are there any solutions for that?
For your div:
.sp-module_searchfrontpage{
/* other CSS as is*/
position: relative;
}
Now the button:
button._searchfrontpage {
background: #333;
height: 53px;
width: 70px;
border-radius: 6px;
line-height: normal;
color: #eee;
font-weight: 400;
letter-spacing: 2px;
border: 0px;
display: block;
font-size: 18px;
/* add these properties */
position: absolute;
top:0;
right:0;
z-index:100; /* <=====choose the correct value*/
}
But you have to make sure that the parent div has same height as the input and button does and relatively positioned.
If it is not possible then you can wrap them into another div or better with label and style it with same height property of the input and button but the div still needs the relative position and button should be absolutely positioned. I would do it with label:
<label>
<input type="text" />
<button>search</button>
</label>
Then in the CSS:
.sp-module_searchfrontpage label{
width: 100%;
height: 53px;
position: relative;
}
button._searchfrontpage {
background: #333;
height: 53px;
width: 70px;
border-radius: 6px;
line-height: normal;
color: #eee;
font-weight: 400;
letter-spacing: 2px;
border: 0px;
display: block;
font-size: 18px;
/* add these properties */
position: absolute;
top:0;
right:0;
z-index:100; /* <=====choose the correct value*/
}
I am having difficulties centering a an input and borders around text that I created. I am trying to center it with a percentages based setting, so that it becomes more responsive. It seems the percentages are off and every time I go over left: 35%;, it does not move over anymore.
The same applies to my submit button, inside of the search input. I took the percentage left out because it did not do anything.
I have stored all of my code inside of this fiddle:
https://jsfiddle.net/ghp4t489/
But, to get the best option to view what I am trying to do, is to visit my website. realtorcatch.com/test_index
How can I get the text with borders/search bar to be centered in the page?
Here is my CSS
.search_option_container_out {
text-align: center;
top: 450px;
left: 30%;
position: absolute;
z-index: 111;
}
.search_option_box {
position: absolute;
text-align: center;
left: 40%;
}
.search_option_box li {
display: inline;
border: 1px solid black;
line-height: 2em;
padding: 20px 75px;
background: rgba(24, 24, 24, 0.3);
color: #FFFFFF;
cursor: pointer;
}
.search_option_box li:hover {
background: rgba(0,0,255, 0.3);
}
.home_searchbar_out {
text-align: center;
padding-top: 60px;
}
.home_searchbar {
padding: 10px;
}
.home_search_input {
position: absolute;
left: 45%;
width: 575px;
padding: 14px;
font-size: 1.1em;
}
#home_search_submit {
padding: 11px 20px;
position: absolute;
background-color: blue;
color: #FFFFFF;
cursor: pointer;
font-size: 1.1em;
z-index: 1;
}
your code demo here: https://jsfiddle.net/ghp4t489/4/
essentially, you want to use the concept of centering a container inside the page like so:
div {
width: 100px;
height: 100px;
border: 1px solid black;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div>my div here</div>
this code is using margin: auto to center the div in the page.
EDIT: https://jsfiddle.net/ghp4t489/7/ with button on the right and next to the input
https://jsfiddle.net/ghp4t489/9/ with button on right inside the input
i'm working on this element http://zag-test.nowcommu.myhostpoint.ch/
what i need is to "enalrge" the entire element in the same position, but via CSS i can on enlarge the central button (CLICK button).
How can i solve?
CSS
.cn-button {
position: absolute;
top: 100%;
left: 50%;
z-index: 11;
margin-top: -2.25em;
margin-left: -3.78em;
padding-top: 0em;
width: 7.5em;
height: 7.5em;
border: none;
border-radius: 50%;
background: none;
background-color: #000;
color: #f9d70a;
text-align: center;
font-weight: 700;
font-size: 1.3em;
text-transform: uppercase;
cursor: pointer;
-webkit-backface-visibility: hidden;
You can use the transform attribute with scale to make everything bigger:
#cn-wrapper {
transform: scale(1.4) !important;
}
This is for the outer menu options, and the !important forces it to be used