I've got a piece of code consisting of styled images that need to fit within a fixed sized div. If it does not, it should flow over. However, the floated element that does not fit, flows over as it should but touches the other elements and places itself over one of their shadows.
It's best to explain using an example: http://jsfiddle.net/wjw83/10/
The 7th image (barely visible) should vanish entirely or move further down where it moves out of the visible area. Can anyone help me accomplish this?
Thank you.
EDIT
Being out of ideas and on the verge of raging, I've started pasting random attributes and eventually was successful.
Solved: http://jsfiddle.net/wjw83/13/
All I had to was add "margin-bottom: 20px;" to the image class. Since it's the same value as the shadow, it leaves the shadow intact while completely removing the clipped element. Whoohoo!
.main{
padding-top: 15px;
width: 870px;
height: 140px; /* Reduced height */
overflow:hidden;
}
Live demo: Fiddle
Being out of ideas and on the verge of raging, I've started pasting random attributes and eventually was successful.
Solved: http://jsfiddle.net/wjw83/13/
All I had to was add "margin-bottom: 20px;" to the image class. Since it's the same value as the shadow, it leaves the shadow intact while completely removing the clipped element. Whoohoo!
Related
I have this div that starts off at a distance from the top:
The problem is that, when I start to scroll up, the rounded image is hidden:
I am very sorry that I could not reproduce the issue, as this is a custom CSS used on Notion -- meaning that I couldn't duplicate a website for testing purposes.
What I want is for the rounded image to appear on the top of the page, as opposed to being partially cut off as in the second image. The image should be perfectly round, even if being scrolled up.
In more simple terms, I want the rounded image to display even outside of the notion-app div, which is shown in the first image that starts off at an offset from the top.
Do anyone have a suggestion of removing the problem?
EDIT I already tried z-index, but that doesn't help.
Thanks in advance.
Give the #notion-app of overflow: visible;
#notion-app{
overflow: visible;
}
https://www.w3schools.com/css/css_overflow.asp
read sample docs on w3school for reference
I'm designing a homepage in which I'm trying to display the same image 4 times in a single row (to make a kind of decorative banner). I have set each images' width to take up 25% of the screen. Theoretically, this means each image should take up a quarter and fit perfectly within a single row. However, I suspect Bootstrap is adding some kind of spacing between my images causing the 4th to spill over into the next one.
I have tried setting their margin to 0, setting their padding to 0, and setting their border-style to none. I figured setting the properties this way would override any defaults Bootstrap might place on the <img> tag, but this spacing does not seem to be going away. Additionally, checking the Developer Tools on my browser confirms that there is in fact no margin, padding, or border affecting my images. I'm not sure what else I can target to try and resolve this issue.
Any advice would be greatly appreciated. Thank you for your time in advance.
NOTE: I am not using Grid. I figured what I am attempting to do is simple enough to avoid having to use it.
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
.back-banner {
width: 25%;
opacity: .5;
padding: 0;
margin: 0;
}
Image is inline element by default. This causes it to add some white space. You can transform it to block element by using display: block, but then you need to use float: left to make them appear in one row.
Even better is to use modern css like flexbox by adding display: flex on wrapping element.
I want my floating sidebar to stop before it hits the footer - the only solutions I have found so far involve using javascript, but I'd prefer if there were a way to go without if possible!
a baisc example: jsfiddle example
By adding the code below, I can get it to stop, but it then pushes everything inside my sidebar way up the page:
bottom: 500px;
This is not exactly what you are looking for, because I can't think of any solutions that don't involve any JS
What you can do though - if you give the footer element a position (relative or absolute), the sidebar will slide down behind as the page scrolls.
.footer
{
width: 100%;
border: 1px solid green;
height: 500px;
background-color: green;
position:relative;
}
Ok, your problem is, you don't really understand HTML container bounding, and flow.
I would spend some time looking at HTML Flow tutorials, and understanding exactly whats happening, as it will make your life in the future much easier.
Another trick is to put borders around every containing structure such as DIV's, so that you can see how each of your objects are nested, etc...
The problem is, when you take and add bottom:500px;, you are absolutely positioning the footer, this automatically removes it from the normal HTML flow. I am guessing your right toolbar is out of flow as well.
So instead of using absolute positioning on either the footer or the right side toolbar, you will need to use a bounding outer container that encapsulates the whole page, then place each element on the page in the order you want the flow, using float:left, float:right to get your vertical positioning. As long as your footer is the last thing within your bounding container, and all elements are within the flow, and the width on the footer is set to 100%, you should get the behavior your looking for.
Have a look at this fiddle: http://jsfiddle.net/h4VS7/
How do I make the yellow element align (horz) with the grey background no matter how the window is resized? I refuse to believe it can't be done with css. Yes, js hacks and Scroll Follow plugin works but lags.
Please, anyone?
Edit:
Found a solution. If the container margins are expressed as percentages the content part can be expressed as the remainder percentage. See here: http://jsfiddle.net/h4VS7/1/
Though not sure why it doesn't align perfectly. It should I think. Could be jsfiddle margin/padding related.
It's not particularly difficult if you don't mind adding an extra element to wrap .top:
http://jsfiddle.net/Ud3ZQ/
And also, a properly aligning (well, almost) version of your solution:
http://jsfiddle.net/h4VS7/3/
The problem was that jsFiddle loads http://fiddle.jshell.net/css/result-light.css:
body {background: white; padding: 10px; }
Anything is more specific than * (including body), so the padding was being applied, regardless of * {padding:0; margin:0}
I'm having a problem with this page.
The .blog-footer div needs to clear on the right to correct for the height of the pictures introducing clear:right; causes the huge gap to appear on the page in FF and IE.
I'm at a loss, I've tried numerous ideas to get around the problem and at this point I've been staring at it too long to see the problem clearly. Can anyone help me out.
Thanks in advance.
Try using positioning. Add these to get you started:
#page-body {position: relative; width: 740px; margin-left: 20px;}
#sidebar {position: absolute; right:-190px;}
There are some subtleties, like getting the right behaviour when the content as a whole is not long enough to push the footer down, but I find those easier to work out than floating problems. With a fixed height footer like yours, that is easy to fix using a bottom margin on the page body and some more absolute positioning for the footer. You have gobs and gobs of extra divs to play with.
The clear attribute works relative to floating elements. So you can use it to make sure the footer closes the div below the picture, but the fact that your sidebar is floating as well actually pushes things down to the bottom of the sidebar.
So, as #Nicholas Wilson proposes, one solution is to position your sidebar using means other than float. And your layout doesn't appear to really require float for the sidebar.
In another direction, I noticed that you are currently hardcoding the heights of your pictures. Since you know these heights, another possibility is to forget about the clear:right for blog-footer , and add a min-height attribute to the asset-body, as in (this is for the beer festival)
<div class="asset-body" style="min-height:184px;">
Certainly not elegant or DRY, but if you had to you could do this or have javascript do it.