I have this one whole image that I have placed statically on my site however I want the parts to be clickable via a transparent button. I've got the button created however I want it to stay in its position if I had a different sized window etc.
Any thoughts?
HTML:
<img id="container" src="recentProjectsV2.jpg" />
GCSE Answers
CSS:
invisibleButton1 {
position: relative;
width: 290px;
height: 100px;
left: 45px;
top: -170px;
background-color: transparent;
border: 10px, orange;
font-size: 0;
cursor: pointer;
}
You need to change the position of your button from relative to absolute if you want it to stay in the EXACT same position when resized. If you want it to stay in the exact same position, like dead center vertically and horizontally, regardless of window size, I would suggest using flexbox though that will only work with IE 10 and up.
.invisibleButton1 {
position: absolute;
width: 290px;
height: 100px;
left: 45px;
top: -170px;
background-color: transparent;
border: 10px, orange;
font-size: 0;
cursor: pointer;
}
The button does stay in the position you told it to stay in.
Code:
CSS:
<style>
.invisibleButton1 {
position: relative;
width: 290px;
height: 100px;
left: 45px;
top: -170px;
background-color: transparent;
border: 10px, orange;
font-size: 0;
cursor: pointer;
}
</style>
HTML:
<body>
<img id="container" src="logo.jpg" />
<button id="invisibleButton1"> GCSE Answers </button>
</body>
If this isn't what you are looking for, please clarify your question and add your code.
Related
I am customising a website in WordPress(CMS). I want to add some elements in my website as background design.
It look something similar like this:
I google and found a way to do it - Using a builder tool in CMS - Elementor.
The good thing is, in Elementor there is a way to add background-img and control background-position.
The bad thing is, I have successfully added and control the element moving around until the place that I want. But The background element seems cannot cross the <section> which mean they will only stay in their own container.
I figured it out another way to do it, which is add the <img> at the current page. Then use position: absolute to position it properly.
But I prefer not to do that way.
Example snippet:
#section-1 {
background-color: #000;
width: 100%;
height: 200px;
color: white;
padding: 20px;
}
#section-2 {
background-color: yellow;
background-image: url(https://temp1.asign.pro/wp-content/uploads/2019/05/element-2.png);
background-position: -150px -223px;
background-repeat: no-repeat;
width: 100%;
height: 200px;
color: black;
padding: 20px;
}
<section class="section" id="section-1"></section>
<section class="section" id="section-2"></section>
The issue with using the triangles as a background-image is that you'll never be able to position them 'out' of the section. The background is a part of the element and can only go as far as the element's dimensions. However, you can make use of the pseudo element and position them absolutely, like so:
#section-1 {
background-color: #000;
width: 100%;
height: 200px;
color: white;
padding: 20px;
overflow: visible;
}
#section-2 {
background-color: yellow;
width: 100%;
height: 200px;
color: black;
padding: 20px;
overflow: visible;
position: relative;
}
#section-2::before{
content: '';
position: absolute;
top: -70px;
left: 0;
width: 200px;
height: 200px;
background: url(https://temp1.asign.pro/wp-content/uploads/2019/05/element-2.png) no-repeat center center/100%
}
<section class="section" id="section-1"></section>
<section class="section" id="section-2"></section>
I have a project where there will be two triangles, one of each side, as the images below shows, I am having difficulty in, first of all, getting each one on correct side, I have been trying using floats but it is not working.
And then making them align with the white zone irrespective of screen size i.e. responsive.
#anim {
position: relative;
height: 100%;
min-height: 100%;
background-image: url("http://i.imgur.com/rxks29H.jpg");
background-image: no-repeat;
background-size: 100%;
}
#anim img {
position: relative;
height: 100%;
width: 100%;
}
.arrow-left {
position: absolute;
width: 0;
height: 0;
width: 200px;
border-top: 200px solid transparent;
border-bottom: 200px solid transparent;
z-index: 3;
top: 30%;
border-left: 200px solid green;
}
.arrow-right {
position: absolute;
width: 200px;
float: right;
z-index: 3;
border-top: 200px solid transparent;
border-bottom: 200px solid transparent;
top: 30%;
border-right: 200px solid blue;
}
<section id="anim">
<img src="http://i.imgur.com/ucQ3ZXl.png">
<div class="arrow-right">
</div>
<div class="arrow-left">
</div>
</section>
Why not make the arrows part of the background image to insure that it's always in place no matter the screen size, and then the content in each arrow can be positioned on top an if it moves a little it wont break the background itself. I created the background really fast to illustrate what I mean, feel free to re-create the image yourself if needed.
to position the text in each arrow change the CSS to this:
float: left or float: right don't work with position: absolute you need to use the left and right properties.
#anim {
position: relative;
height: 100%;
min-height: 100%;
background-image: url("http://i.imgur.com/rxks29H.jpg");
background-image: no-repeat;
background-size: 100%;
}
#anim img {
position: relative;
height: 100%;
width: 100%;
}
.arrow-left {
padding: 2.5% 15px;
text-transform: uppercase;
position: absolute;
width: 13%;
left: 0;
z-index: 3;
top: 36%;
}
.arrow-right {
padding: 2.5% 15px;
text-transform: uppercase;
position: absolute;
width: 13%;
right: 0;
z-index: 3;
top: 36%;
}
.arrow-right h2 {
font-size: 28px;
color: #FFF;
}
.arrow-left h2 {
font-size: 28px;
color: #FFF;
}
<section id="anim">
<img src="http://i.stack.imgur.com/Fbhc4.png">
<div class="arrow-right">
<h2>Scouting For Companies</h2>
</div>
<div class="arrow-left">
<h2>Seeking For Ideas</h2>
</div>
</section>
You will need to add some rules for smaller screens and really large ones if you are making the site responsive.
** Edit **
I added the animation really quick just to illustrate what you need to do and give you a good head start on it.
Here is a JSFIDDLE.
I have two video tags which I want to align at bottom corner of the screen. further, the inner video tag should overlap outer video tag, like this image given below:
This is what I could come up with:
<body>
<div class="container">
<div class="widget_contaner">
<div class="widget_head">this is head of widget</div>
<div class="widget_body">
<video class="large_video" src="#"></video>
<video class="mini_video" src="#"></video>
</div>
</div>
</div>
</body>
css
.widget_contaner {
right: 0px;
position: fixed;
bottom: 30px;
z-index: 99999999999999;
}
.widget_header {
background-color: #3fa757;
width: 240px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
border: 1px solid #ccc;
font-size: 12px;
height: 25px;
line-height: 25px;
font-family:'Open Sans', sans-serif;
border-radius: 5px;
}
.widget_body {
width: 240px;
height: 150px;
}
.large_video {
height: 100%;
width: 100%;
}
.mini_video {
position: absolute;
height: 30%;
width: 30%;
bottom: 32px;
right: 4px;
opacity: 0.75;
}
so I was wondering how can I get these video tags to get positioned relative to each other as just given in the image?
Jsfiddle: click here
Like this?
http://jsfiddle.net/EbsaL/3/
I added background colour so it is easier to see
.widget_body {
width: 240px;
height: 150px;
position: relative;
}
.large_video {
height: 100%;
width: 100%;
background: green;
}
.mini_video {
position: absolute;
height: 30%;
width: 30%;
top: 0px;
right: 0px;
opacity: 0.75;
background: purple;
}
The widget body is positioned relatively, and you just need to give the mini video position absolute and top right 0px. If you want the widget positioned at the bottom right corner then do bottom:0; for widget container
See if this is what you are looking for. Note that I changed the background and borders so I could see it. Mainly needed to add absolute positioning to the larger video frame along with some bottom properties set to 0.
.large_video {
height: auto;
width: 100%;
border: 2px solid #000;
position: absolute;
bottom: 0;
}
http://jsfiddle.net/derekstory/EbsaL/2/
I have a div with a border of 1 px. I have a square transparent-in-parts png image much smaller than the div 48px * 48px.
I'd like to position the square image such that it overlays the top left border of the div giving the appearance of both top and left borders going underneath the image.
Using background-image 'left top' puts the image inside the div borders which is not what I'm looking for. Wish I could show an example but I don't have any. Hope my question describes it well.
Here's the JSFiddle: http://jsfiddle.net/9sn22/1/
<div id='mybox'>text</div>
#mybox {
text-indent: 0.5in;
background-image:url('http://aerbook.com/site/images/quote-mark-icon-black.png');
border-radius:3px;
border: 1px solid #cccccc;
height: 300px;
font-weight: 200;
text-indent: 0.35in;
padding: 20px;
background-repeat:no-repeat;
background-position: left top;
}
Not quiet getting your question as there are no images or any demo for the desired effect you are trying to achieve, but from what I understood, you can use position: relative; for the container div and use a literal img tag inside the div and use position: absolute; with top: -1px; and left: -1px; respectively.
If you are trying to make the background-image move out of the element area than it's not possible...you need to use img for this
<div>
<img src="#" />
</div>
div {
position: relative;
border: 1px solid #000;
}
img {
position: absolute;
left: -1px;
top: -1px;
}
Update: (After you added a demo)
Do you need something like this?
do you mean something like this? http://jsfiddle.net/q44k5/
html:
<div> </div>
css:
div{
border: 1px solid red;
height: 100px;
width: 100px;
position: relative;
margin: 50px;
}
div:before{
content: '';
height: 20px;
width: 20px;
position: absolute;
top: -10px;
left: -10px;
background: green;
}
try this css below
#cLeft{
position:absolute;
}
background: #ffffff url('http://spikyarc.net/images/down_Arrow.png') no-repeat top left;
try this html below
<img id="cLeft" src="http://spikyarc.net/images/down_Arrow.png" />
<div class="content">
Your Text here.
</div>
I want to design a site, where the corners of the page are rounded (black circle on all the corners of the window).
To do so I've setted the body color to black, and I've added a rouded corner to the content div, a part form its background.
<body style="backgound: black">
<div class="content" style="background: blue; border-radius: 8px;">
....
</div>
</body>
After that I've tried:
Not working solution 1
position: absolute;
height: 100%;
Not working when content height is larger than window, because the content background hiddes when scrolled.
Not working solution 2
position: fixed;
height: 100%;
Not working when content height is larger than window; no scroll bar displayed.
Not working solution 3
Nothing at all.
Not working when content height smaller than window; the bottom part is left black.
Ugly working solution 1
Add 4 images with the border, with fixed position
Any one know a clean solution to the problem? css3 is accepted.
THanks
I think this should help:
.content
{
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background blue;
border-radius: 8px;
}
EDIT this solution will work:
.content
{
float:left;
min-height: 100%;
height: auto;
width: 100%;
background: blue;
border-radius: 8px;
}
working jsfiddle
another example using css3 calc() here
You can try height:100%
body, html{height:100%}
.content{height:100%}
DEMO
Use two nested fixed divs for header, and the same for footer.
This will work with every kind of content, on every browser:
Running Example: http://jsfiddle.net/5kgN3/
HTML
<div id="headerOuter"><div id="headerInner"></div></div>
<div class="content">
<br />test
<br />test
<!-- More tests here -->
<br />test
<br />test
</div>
<div id="footerOuter"><div id="footerInner"></div></div>
CSS
body, html {
height: 100%;
width: 100%;
}
.content {
min-height: 100%;
height: auto;
width: 100%;
background: blue;
padding-top: 20px;
padding-bottom: 20px;
}
#headerOuter{
background-color: black;
height: 20px;
width: 100%;
position: fixed;
top: 0;
}
#headerInner{
border-radius: 20px 20px 0px 0px;
background-color: blue;
height: 20px;
width: 100%;
position: fixed;
top: 0;
}
#footerOuter{
background-color: black;
height: 20px;
width: 100%;
position: fixed;
bottom: 0;
}
#footerInner{
border-radius: 0px 0px 20px 20px;
background-color: blue;
width: 100%;
height: 20px;
position: fixed;
bottom: 0;
}
I used 20px of border-radius, when adjusting that to your 8px, remember to adjust paddings and heights.