I'm a little new to all this so my terminology may be a bit dodgy.
On this page - halfbakedharvest.com - there are images that appear at the edge of the screen - outside of the main content areas/ containers. These occur on every blog post and, no matter the length of the post, these images appear in the same relative position.
How do I replicate this?
I've tried Google for answers but I must not be using the right terminology because I have found nothing. Could it be as simple as a plugin I could use?
If it helps my site uses the genesis framework and I'm a confident novice when it comes to editing php and css.
As Nath said, inspecting the elements will reveal they are using absolute positioning. MDN absolute positioning
Absolute positioning takes the element out of the normal flow of the page and positions the element relative to it's nearest positioned ancestor. keywords left, right, top, and bottom used to position the element.
body {
/* what you want to position relative to */
margin: 0;
width: 100%;
height: 100%;
position: relative;
}
img {
position: absolute;
top: 30%;
right: 0;
}
Note the relative positioning on the body.
demo
Related
I'm using the new gatsby image plugin, and StaticImage. I have got a few images on the website, all works perfect normally beside one that only has the black background
(source of black, change the bg color attribute to red for example change the view to red)
The<picture> tag has 0X0 pixels
Another weird thing is the auto-created div container has a max-width of 47px, though the image is bigger than that (in all rest cases the max-width actually corresponds to the image dimensions)
relevant code
// js
<div className="advertising">
<StaticImage
className="advertising-img"
src="../images/advertising.png"
alt="advertising"
/>
//scss
.advertising {
position: relative;
margin: 123px 162px 150px 536px;
.advertising-img {
width: 260px;
height: 230px;
position: absolute;
left: -460px;
top: -15px;
}
page lookout (for understanding the CSS a little bit and show another picture that working..)
any help will be appreciated, thanks in advance! :)
edit
live site - https://catsh-landing-page.netlify.app/
The request to advertising image is blocked by the browser, as you can see by opening the dev tools.
In addition, the fact that is working on my mobile phone (screenshot below):
Makes me think that the image is blocked by the browser itself or by some extensions (AdBlock, etc) because of the name to avoid advertisers or publicity by default.
Try changing the name of the image or try disabling the extensions.
I'm a novice to coding and square space and was wondering if something like this was possible on square space: https://xd.adobe.com/view/a7d76d93-ca9e-4fa6-af5b-78a040a82bf3/
My company wants me to find a way to have the first image be clickable and bring up another image (depending where you click) to show the availability of the one place you clicked. Then, we also want the second image, when clicked, to bring up the third one.
Is this even possible in squarespace? If so, how do I do this?
To answer your first question directly, yes it is possible either via a Code Block or via Code Injection. Essentially, you would be adding entirely new, custom code to your Squarespace website.
To answer your second question generally, it would be an entirely custom implementation -- that is, there is no block nor build-in feature in Squarespace that will help facilitate this functionality. Therefore "how you do it" would boil down to a good amount of custom code development (again, said generally).
To offer additional perspective: Consider that, on mobile, screen real-estate is more limited (and clickable-areas may become prohibitively small) and that overlaying interactive elements may require additional testing to ensure intended behavior across different mobile devices, operating systems, operating system versions and browsers. Considering these things ahead of time (or perhaps testing during the process) may lead you to reconsider the interactions and UI behavior overall (that is, to get away from multiple overlaying images and to a more vertically-friendly set of behaviors and interactions, just as one possible example).
In the old days we used image-map. It still works. With image-map you can draw a polygon which is a clickable link to another page (or trigger some javascript).
If you want it to scale nicely (in a responsive design) you would need some kind of plugin.
In it's simplest form the links would take the user to another page with another image-map or some other navigation pattern. Example
I guess it would be possible to do this in some custom code block in Squarespace, and just link to several other pages with images/image-maps or galleries.
There are tools out there that can help you draw the polygons (search for "image map generator") if you don't have Dreamweaver or similar.
Other methods:
If you want it to scale without some plugin, you can use SVG instead of image-map. If you are ok with only rectangular hotspots, you can also try this site which uses CSS to replace image-map.
Here is an example using html and css only:
html, div, p, a {
font-family: arial;
}
.map-image {
display: inline-block;
position: relative;
overflow: hidden;
padding: 0;
}
.map-image img {
width: 100%;
height: auto;
display:block;
}
.map-image a {
text-decoration: none;
padding: 5px;
color: #FFF;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
margin: 0;
font-size: 4vw;
}
.map-image a:hover {
border: 1px solid #FFF;
margin: -1px;
}
<div class="map-image">
<img src="http://cdn.frooition.com/060129/images/100_1428.JPG">
Google
Facebook
Linkedin
</div>
(If you are a novice to coding, popup is probably not the right search term in this case. It is easier to link to other pages than to make everything "pop" on the same page.)
I have some fairly complex stacking arrangements going on in a site I'm working on. With a background image on a div being a gradient that overlays an image within it with a lower zindex. Like this:
So, this works fine at larger widths. When the width is smaller the image appears over the gradient background, like this:
Something's happening and I can't figure out what. I'm using twitter Bootstrap 2.3.0 as a framework. Link: http://www.osullivans-pubs.com/draft
EDIT: I'm pretty sure the problem is something to do with having a negative z-index on the image (#back img). But having the z-index at zero means the image appears above the gradient...
UPDATE: I worked it out. It's not really possible to have an element with a background image overlap a child element. So I created an absolutely positioned element before (and seperate from) the container and applied the appropriate zindex to that. That fixed it.
you have to add a z-index in liquid-slider.css file below is the code...
.liquid-slider-wrapper {
margin: 0 auto;
clear: both;
overflow: auto;
position: relative;
width: 1110px !important;
z-index: 20;
}
I'm trying to reposition the PanPanel and ZoomPanel controls on my map to the bottom left corner rather than the top left. I see that I can add options, but as much as I've tried, I can't find a way to tell it to stay to the bottom left, even when the window is resized.
I am also not sure how I will tell them to stack like they do normally when I tell them to reposition relative to the bottom left.
I changed the images that make up both panels, so now there's a bit more room between pan and zoom panels than I want, so I'm also trying to get them to come closer to each other.
On top of looking into using options on the controls, I also tried creating a style for the id of the div that surrounds both panels, but the value of the id in the div is "OpenLayers.Map_2_OpenLayers_Container", which contains a '.'. Far as I know, that's not a legal id for styling. Anyway, it didn't work. On top of which I don't think I can trust the name to always be the same, with continued work on this page causing a lot of additions over time.
Any ideas?
Try:
new OpenLayers.Control.YourControlXXXX({
moveTo: function (px) {
if ((px != null) && (this.div != null)) {
this.div.style.left = yourLeft + "px";
this.div.style.bottom = (yourBottom+controlHeigth) + "px";
}
},
... other options
})
ummm! I see that these controls are more modern than I thought, are positioned by CSS so try:
.olControlPanPanel {
bottom: 55px; /* not 0px */
top: auto;
}
NOTE: try as: div.olControlPanPanel {... to force the priority of CSS if you are not sure where position are loaded de css of OL.
So I found the problem. First I wasn't setting top to auto. Since it was set in the style.css file to 10px, and when I changed it in the style.css file it to auto the bottom worked. But then my css file wasn't working. I found an OpenLayers example for Pan and Zoom, and eventually found that the difference between what I was doing and what they were doing was that I hadn't loaded the style.css file explicitly at the beginning of the page. So it seems that the OpenLayers Map, when it is created, causes the style.css file to be read late, after my css was read, and so it overrode my override. When I did an early load (beginning of the page) it worked perfectly.
Seems that the attribution control, created when I create a map Layer, must read the current CSS, since the map hasn't yet been created on the page, and so it never needed for me to do the early load. If I remove the early load, it still takes the changes made from my css file. But removing the early load causes the Pan and Zoom controls to no longer respond to my changes, so I assume this means that the Map object is reading the styling after the late load of the style.css file, which at that point has already overridden my css.
Go figure...
Just in case this might be of use to anyone else. I'm using OpenLayers 3 and I wanted to move the zoom controls to the righthand side of the map. My map is attached to an element with a 'tm-openlayers-map' class value and to move the zoom controls I used the following css/sass
.tm-openlayer-map
//change the colour of the map buttons
button {
background: $title-bar;
}
.ol-zoom {
top: 0.5em;
right: 0.5em;
left: auto;
//move the tooltips to the left of the now right aligned buttons
.ol-has-tooltip:hover [role=tooltip] {
left: -5.5em;
border-radius: 4px 0 0 4px;
}
.ol-zoom-out.ol-has-tooltip:hover [role=tooltip]{
left: -6.2em;
}
}
//make sure the rotate controls included by default with an opacity of 0 don't
//block clicks intended for the '+' button
.ol-rotate {
visibility: hidden;
}
}
I have a div class set up with the following CSS style:
div.multiple_choice{
border: 1px solid black;
max-width: 300px;
max-height: 200px;
overflow: auto;
}
The problem is, when the text inside doesn't force the DIV to reach the maximum height of 200px, the vertical scroll bar still shows up. I can click on the up and down arrows but it only moves the contents up and down by about a pixel or two.
This is occuring in Google Chrome (version 18.0) and Iceweasel 11.
As it turns out, another CSS style was causing the issue:
body{
line-height: 1;
}
Anyone interested in learning about how and why this would cause an issue, can read about the line-height property here
I was having an issue with this, and I found that having position: relative on the child elements was causing the problem. Obviously this can't be the solution for everyone, especially if position: absolute is being used, but for me it worked.
Just to put in evidence the #Kuba Orlik's solution (he posted as comment on the accepted answer) that's the only one that worked for me.
Add this on inside elements:
line-height: normal;
Note: Explicitly normal not 1 because it's different
I have encounter this problem.But I solved this use the following css style:
div.yourcontainer{overflow-y:auto;}
If the container was higher than max-height,the vertical scrollbar will show.
I had this problem when trying to wrap a list (flex column) of react components in a div, I resolved it by changing margin of elements within each list item to be 0.
The approach to troubleshoot this for me was to inspect the list items (perhaps each <li> in OP) and see what styles were making the div think each list item was larger than what was visible to the human eye.
Here is an example of inspecting a rogue margin on an icon within a list item in my project:
Solution is to set the style of that icon to have a vertical margin of 0, though in my application I just made all the margin 0 and added some padding-right.
I also had this problem using Bootstrap and nav. It occurred because bootstrap definds the li in nav-tabs as: .nav-tabs > li { margin-bottom:-1px; }. To counteract this, you must also do:
.nav-tabs > li:last-child {
margin-bottom:0;
}
Without setting the last-child, the following example would always show scroll, no matter how much content is in the list:
<ul class="navs nav-tabs nav-stacked" style="max-height:80px;overflow:auto;">
<li></li>
...
</ul>
I came across this bug earlier today. In my case a list of child elements had display: inline-block instead of display: block. Switching to display: block for my list of child elements in the truncated div fixed the issue for me.
In my case, the problem was with the font. We use font-family: Galano Grotesque. Apparently, this font is rendered higher than the computed height.
<div>
<p>some text</p>
</div>
So even without max-height, when the inner p and the outer div were both computed as 20px height, there was still a scroll bar (with overflow: auto) because the font was about 1px higher than expected.
So the solution can be any one of:
Use a different font.
Add padding to the outer div. This way it will be large enough to cover the extra pixel that comes from the font. In my case, adding one pixel of padding to the bottom and one to the top solved the problem.
Set line-height to a bit larger value (in my case, from 1.25 to 1.4), so it won't interfere with the font.
Set line-height to normal because then the actual value will be influenced by the font. However, according to Mozilla, this is not the preferred way.
The reason for the vertical scroll is obvious: the scrolled content is higher than scrolling area. But when you observe their heights, they are equal!
The causes are multiple but all come down to a common one: an element inside the scrolled content overflows it and makes the result taller.
How to fix this?
find the guilty element by looking near the bottom edge of the scrolled element (or to the right if you're scrolling horizontally), because they are the most likely to overflow. You should observe a height larger that their parent's.
see what makes them overflow, be larger than their container. As other answers suggest, it can be line-height, some margin, etc. Change those properties to make them fit, or as an alternative, set overflow-y: hidden to their immediate parent.