I have inserted a search bar by using my websites code injection points and now trying to re position it below my site tag line. Below in an screenshot of what I am trying to accomplish.
My website is www.jobspark.ca
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#banner-area").prepend("<div id='banner-tagline'>Your British Columbia and Alberta Job Search</div>");
});
</script>
<div class="positionedSearch"></div>
Current CSS for the search bar includes
.positionedSearch {
width: 400px;
height: 45px;
}
I suggest actually putting it in the HTML where you want it placed, as opposed to positioning it from another place...
You can use:
.positionedSearch {
width: 400px;
height: 45px;
position: absolute;
z-index: 2;
left: 40%;
top: 330px;
}
This only works for the full screen media query. Needs to be adjusted for the smaller screens.
Like I said, it would be much better just to place it in that relative area via the JS.. then you can avoid using absolute positioning.
Based on your other question:
Find this line in your CSS and modify it to this:
.sqs-search-ui-button-wrapper {
background: rgba(255, 255, 255, 0.66);
max-width: 280px;
}
You can do:
.positionedSearch {
width: 400px;
height: 45px;
position: absolute;
top: 350px;
left: 50%;
margin-left: -200px;
z-index: 2;
}
Related
I’ve been trying emulate (in Webflow) this nifty 'fluid text hover' from the following codepen: https://codepen.io/robin-dela/pen/KKPYoBq
As you can see, there is a fair amount of HTML, CSS (SCSS) and JS (Babel), but I believe the pertinent code snippet to be the following:
<style>
body {
position: fixed;
height: 100%;
overflow: hidden;
}
canvas {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
}
.mask {
position: absolute;
z-index: 2;
background: white;
height: 100vh;
width: 100vw;
mix-blend-mode: screen;
/* THE mix-blend-mode ABOVE DISPLAYS IN RED */
}
svg {
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
When I publish my site, the 'CREATIVE' text displays, but without the interactive fluid element. I’m almost certain it’s something to do with the mix-blend-mode, as that is the only code showing up in red. I’ve seen similar questions asked on here, and have tried all the methods offered (changing the body background to white, as opposed to transparent; adding the code as a code block rather than the Inside tag, but nothing has as yet made it work. I’d really appreciate any help.
My Webflow site read-only can be found here:
https://preview.webflow.com/preview/hen-ry?utm_medium=preview_link&utm_source=designer&utm_content=hen-ry&preview=f7f278a8af346d820c843647397c8d76&pageId=6238983c269c21e6d0507afe&workflow=preview
You're probably missing the js file. If you click the little settings button at the top of the JS section, you will see a file called https://robindelaporte.fr/codepen/bundle.js, if you have not loaded this then it won't work.
I've embed a google maps iframe giving it a class for a responsive behavior:
.google-maps {
padding-bottom: 55%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7325331.382945205!2d12.835158178438968!3d26.299870988416156!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x13a892d98ece010d%3A0xfa076041c7f9c22a!2sLibya!5e0!3m2!1sen!2sin!4v1529409655794" width="350" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>
In responsive mode it work, but when I try to put a text above or under the iframe, the text is covered by the map, and the map doesn't respect the dimension that I give to it like width=450 height=300.
When I remove the class, the text and the dimension given work, but of course the map is not responsive anymore.
Someone could help me?
Thank a lot!
Do not change the iframe css
remove this
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
and do this
.google-maps {
display: block;
width: 100%;
height: 200px // change this with media queries for different screen sizes
}
Btw it the style fully depends on what you are trying to achieve.
If you want to place the iframe inside the .google-maps you have to add the position: relative; to the .google-maps
.google-maps {
display: block;
position: relative;
width: 350px;
height: 400px;
overflow: hidden;
}
it will fit the iframe inside the google-maps div.
but better is don't try to resize the iframe use them as provided by the google or you can create your custom google map from here google map developeres.
Im working on some CSS with a web app that I am doing, and I have finally got what I want my page to look like encoded in the css.
#searchNavBar {
position: relative;
width: 100%;
left: -53%;
top: -40px;
height: 70px;
}
#searchResultsDoodle {
position: absolute;
left: 0px;
top: 10px;
width: 100px;
height: 50px;
}
#searchResultsSearchBar {
position: absolute;
left: 110px;
top: 10px;
width: 690px;
height: 50px;
}
#searchResultsSearchButton {
position: absolute;
left: 810px;
top: 10px;
width: 100px;
height: 50px;
}
So I've got a navbar type thing along the top, with a picture, search bar, and a button. Actually taken heavy inspiration from google ;)
Things look good now, however, when I do a "ctrl+", increasing the size of the page, the formatting gets thrown completely off, the search bar drawn to the center of the page, etc... is there any way to write the CSS for this code such that, in the event I increase or decrease the size of the page, the things on the page will attempt to stay as close as they can, proportionally speaking, to the locations that I initially wanted them on the page?
For a project I have to create a pear-shaped container. I tried doing this using CSS3 rounded corners but it just doesnt look exactly like it. I then used an image at the bottom, but I need this to be responsive (scalable image).
I want to code something like:
http://tinypic.com/view.php?pic=98fxid&s=5
But as you minimize the browser screen, the layout breaks and the pear shape is not scalable. I would like to know if there is a way to do this using CSS3 OR a better way to do this using scalable images.
By the way, I'm using bootstrap and this is my first attempt at making a website using bootstrap, so any guidance would be much appreciated.
You could create the pear shape using two intersecting circle segments, one for left-hand side and one for the right-hand side. Circle segments are created by limiting the circle to its parent container via overflow: hidden;. To simplify the markup, you can create the child circle elements using the :before and/or :after pseudo elements.
HTML:
<div class="content-form">
<div class="pear-shape left"></div>
<div class="pear-shape right"></div>
</div>
CSS:
.content-form {
width: 75%;
max-width: 325px;
height: 200px;
background: url(http://www.domainandseo.com/bootstrap/img/design.png);
position: relative;
}
.pear-shape {
overflow: hidden;
width: 50%;
height: 200px;
position: relative;
top: 100%;
}
.left { float: left; }
.right { float: right; }
.pear-shape.left:before {
position: absolute;
left: 0;
top: 0;
content: '';
width: 200%;
height: 100%;
border-radius: 0 0 0 250px;
background: url(http://www.domainandseo.com/bootstrap/img/design.png);
}
.pear-shape.right:before {
position: absolute;
top: 0;
right: 0;
content: '';
width: 200%;
height: 100%;
border-radius: 0 0 250px 0;
background: url(http://www.domainandseo.com/bootstrap/img/design.png);
}
Check out this example Fiddle.
At some point, you will be able to use the css shapes module, and there might be some browsers that already support it. In the mean time, you might want to look at SVG or canvas as an option.
So I have tried copying countless other posts about aligning gauges and divs on top of each other using z-index and positioning but as of yet I still havent been able to accomplish it.
I currently have this(ive tested in IE and chrome with same results):
<div id="gauges">
<div id="loggedInGauge"> //gauge creation code </div>
<div id="loggedOutGauge"> //gauge creation code </div>
<div id="onBreakGauge"> //gauge creation code </div>
</div>
<style>
#gauges {
position: relative;
}
#loggedInGauge, #loggedOutGauge, #onBreakGauge {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 200px;
height: 200px;
}
#loggedOutGauge {
z-index: 10;
}
#onBreakGauge {
z-index: 20;
}
</style>
Can anyone help to get the gauges on top of each other so that it looks like one gauge with three pointers?
Here is what the current output is: Imgur link to current output
Change the CSS definition to:
#loggedInGauge, #loggedOutGauge, #onBreakGauge {
position: absolute !important;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 200px;
height: 200px;
}
Kendo UI defines the position por each gauge as relative overwriting your definition. Adding the ! important to it, we prevent this to happen.
Example here : http://jsfiddle.net/OnaBai/wNsRY/