this is driving me crazy...might be something very simple and I just need another set of eyes to look at it...
I have this in my CSS:
#recipient {
width: 31%;
text-align: center;
min-height: 335px;
float: right;
background-color: #fff;
color: #000;
border: 2px solid black;
margin: 20px 0 0 0;
padding: 11px 0;
font-size: 0.875em;
}
and call it here in my HTML:
<div id="recipient">
<h3>Meet the 2010 Recipient!</h3>
<img src="images/2010_headshot.jpg" alt="foo" />
</div>
Pretty simple, right? In Firefox it renders about 20px longer in height than IE7 (I can tell by where the bottom of this div hits next to other elements on the page). I am running in standards mode, and have looked at the Firefox version in Firebug and the IE version with Firebug Light and the IE Dev Toolbar -- don't see anything weird in either... the top of the div starts in the right spot, so it doesn't look like the margin collapsing...
If I manually add padding/height to the CSS, I can get IE7 to line it up at the right height, but then the div in Firefox is too long! It's not a critical part of the design, but it's bugging the sh!t out of me!!
Thanks in advance...
It's IE and the different way it's handling the default h3 margins inside a floated element
usually this can be fixed by giving the offending element (any element which has default margins!) explicit margins, but in this case it's not working because of the top padding of the container ?
The best fix I can come up with is to remove the top padding from the #recipient div and explicit;y make the top/bottom margins on the h3 11px, this makes for nice even spaces through the effect (btw this extra bit only happens if the div is taller than the min height) - here's some working code - I also put a background color on the h3 which if you do in your code will show the 15px or so extra gap..
CSS:
#recipient {
width: 31%;
text-align: center;
min-height: 335px;
float: right;
background-color: #fff;
color: #000;
border: 2px solid black;
margin: 20px 0 0 0;
margin: 0;
font-size: 0.875em;
padding-bottom: 11px; /* bottom padding only */
}
h3 {
margin: 11px 0; /* explicitly set these */
background: #fcf;
}
HTML: (with placeholder image for testing)
<div id="recipient">
<h3>Meet the 2010 Recipient!</h3>
<img src="http://placekitten.com/350/200/" alt="foo" />
</div>
Related
I make a responsive web page where at max width of 768px (via media query) the div inside the main container suppose to change to inline-block so that the page would scroll horizontally to the div's id when user click on link. The page is set up with overflow: hidden, so it navigate using id/anchor alone.
The problem is, when I did a preview in mobile, the container just spread out and I can totally swipe the page. Even the menu button that suppose to be in the center of the view port went to the center of the container. And leaving a huge white space below it. It did good however in desktop browser. So I presume it has everything to do with the nowrap function.
It worked in Firefox both mobile and desktop. It worked in I.E desktop. It did not worked in Chrome mobile but seems to be working in desktop. And failed in Safari mobile, haven't tested yet in desktop.
I tried to remove white-space: nowrap function only to find out the div did not stacks inline-block like it suppose to. I tried specified container's width and min-width with no luck. I tried float: left, position values and a bunch of things i don't recall them all. Nothing's change.
HTML
<div id="container">
<div id="company" class="company">
<iframe src="main.html">
</iframe>
</div>
<div id="content" class="content">
<iframe src="content.html">
</iframe>
</div>
<div id="system" class="system">
<iframe src="system.html">
</iframe>
</div>
</div>
css
body{
overflow: hidden;
}
#container {
height: 100vh !important;
min-height: 100vh !important;
}
#container .company, #container .content, #container .system {
display: block;
height: 100vh !important;
min-height: 100vh !important;
}
#media screen and (max-width:768px) {
#container {
display: block;
white-space: nowrap;
}
#container .company, #container .content, #container .system {
display: inline-block;
}
}
iframe {
width: 100vw !important;
min-width: 100vw !important;
height: 100vh !important;
min-height: 100vh !important;
border: none;
}
What I expected (Chrome desktop)
https://kamalmasrun.files.wordpress.com/2019/01/desktop.jpg
But only comes to this in mobile
https://kamalmasrun.files.wordpress.com/2019/01/screenshot_20190122-120510.png
Your help is much appreciated and I first address a thank you to all for the help =).
Basically, you have a few problems here:
Setting overflow: hidden won't prevent browser on mobile from scrolling (on Firefox it might, but on Chrome or iOS Safari it will not). Blocking scrolling is a hard thing to do on mobile to be honest, and it always is a little bit hacky, so I would not go that way.
To achieve scrolling (or jumping) using links with #content etc, body has to be expanded and browser has to see where this element is. Expanding body will result in ability for user to scroll left/right, which is hard to block as I mentioned before. You have to scroll #container to show new element. You can do this using javascript.
Also, don't forget to add overflow: hidden to #container (this will work on mobile).
If something is still unclear, feel free to ask in comments below this answer :)
The idea of algorithm to achieve your goal:
Listen to hashchange event
Read current hash from window.location
Find element with given hash using document.querySelector
Read element's position inside container
Set scrollLeft property of container to be equal element's position
Some useful links to get you started:
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange
https://developer.mozilla.org/en-US/docs/Web/API/Window/location
https://developer.mozilla.org/pl/docs/Web/API/Document/querySelector
https://developer.mozilla.org/pl/docs/Web/API/Element/getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
And updated CSS:
body {
overflow: hidden;
margin: 0;
}
#button {
position: fixed;
vertical-align: center;
}
#button .btn1,
.btn2,
.btn3 {
padding: 10px;
display: inline-block;
}
#container .company,
.content,
.system {
display: block;
height: 100vh;
min-height: 100vh;
width: 100vw;
}
#media screen and (max-width:768px) {
#container {
display: flex;
flex-flow: row nowrap;
}
#container .company,
.content,
.system {
display: block;
}
}
iframe {
border: none;
height: 100vh;
min-height: 100vh;
width: 100vw;
}
It's possible that setting min/max width to #container will do the trick.
#container {
min-width: 100vw;
max-width: 100vw;
}
Also, I'd suggest using flex here, as it would suit well and is more modern.
Following link is affected: https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=2753787&tc_deviceCategory=undefined&template_layout_id=5699672553&updated=1523614982274
We are experiencing problems with a form and its parent div. We tried to bring in a frosted glas style to the parent div landingboxForm, but if we are working with pseudoelements, nothing happens.
The tutorial is from here https://medium.com/#AmJustSam/how-to-do-css-only-frosted-glass-effect-e2666bafab91 and is working well for others. I just do not succeed in port it for our landing page.
Does anybody know why the :before div tag is just grey in the Chrome inspector and why it does not appear?
CSS:
.lp-sorba {
background-size: cover;
position: absolute;
width: 100%;
top: 0;
left: 0;
bottom: 0;
height: 900px !important;
}
.lp-sorba .landingpageHeader {
height: 80px;
background: #1d89d2;
}
.lp-sorba #hs-link-logo > img {
margin-top: 22px;
}
.lp-sorba .landingboxForm:before {
content:" ";
background: inherit;
left: 0;
right: 0;
top: 0;
height: 100%;
width: 100%;
bottom: 0;
box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);
filter: blur(10px) !important;
}
.lp-sorba .landingboxForm {
background: inherit;
width: 100%;
height: 100%;
position: relative;
border-radius: 5px;
box-shadow: 0 23px 40px rgba(0,0,0,0.2);
padding: 20px;
border: 0.5px solid #edebeb;
}
As for your question
why the :before div tag is just grey in the Chrome inspector and why it does not appear?
Your pseudo element is collapsing right know. Add position: absolute; to the .lp-sorba .landingboxForm:before rule.
But that won't solve your underlying problem / won't create the frosted glass effect.
The way how filters work is: they get applied to the element itself only, not the ones lying behind it.
In the example from Medium/Codepen, the form element inherits the background from the main element. By that it's pseudo element may apply a filter to it.
In your setup, the form is positioned absolute, while the image tag is also positioned absolute. The forms filter won't bleed into that image tag.
Revisit the example:
apply a background image to a parent container
inherit that in the form
pseudo filter on the form will blur the forms inherited background
I am trying to make a border/frame around a full screen background picture.
I could make it using border but I could not create a space between the edge and the frame. https://s3.amazonaws.com/uploads.hipchat.com/44798/299518/TieMyM2f0EXsUsK/frame.png
Also the second thing is to create a hole on the bottom side of the pic.
If you guys have any advises, I would really appreciate.
Thanks for you help,
Richard
I cannot help you about the hole but you can set padding and magrin with css to your image to create the space between the end of image and the border and the screen.
I'm not sure if thats what you mean, but maybe try something like this (tested on chrome)
<div id="cont">
<div id="break"></div>
</div>
#cont {
border: 1px solid red;
width: 90%;
height: 300px;
}
#break {
position: relative;
margin: 0 auto;
top: 100%;
bottom: 1px;
width: 100px;
height: 1px;
background-color: white;
}
http://jsfiddle.net/2bph38qh/
I have a problem with a CSS grid I built. The relevant site is this: http://dr-brauchle.de/
The wall of photos underneath the content is constructed with a grid of floated boxes. This works fine as long as all the boxes have fixed width and height values.
To make the site responsive I use percentages on the width of the boxes and "auto" on their height and the same applies to the images that are loaded into these boxes. The media query jumps in at 1199px and converts the static box sizes to fluid box sizes.
This produces problems at certain resolutions where the second large image box jumps from the left margin of the page to the right and thus destroys the order of the grid. Making the browser window bigger makes the box jump in to place again. This is very annoying since the resolution on an iPad 3 for example produces this error as well.
On the boxes (sse code below) I had to use a "line-height: 0" to eliminate gaps of a few pixel between the boxes. This seems to be part of the strange float-problem.
.box-1 {
width: 25% !important;
height: auto;
display: block;
overflow: hidden;
float: left;
background-size: cover !important;
line-height: 0;
}
.box-2 {
width: 50% !important;
height: auto;
display: block;
overflow: hidden;
float: left;
background-size: cover !important;
line-height: 0;
}
Thanks a lot for ANY help!
Arne
So what I found is that you need to force an aspect ratio.
Try modifying the following styles:
.box-1 {
width: 25% !important;
height: 0;
display: block;
overflow: hidden;
float: left;
background-size: cover !important;
line-height: 0;
position: relative;
padding: 13.75% 0 0 0;
}
.box-1 img {
width: 100% !important;
height: auto !important;
position: absolute;
display: block;
max-width: 100%;
max-height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
Basically the modification above set up the box-1 to have a fixed aspect ratio then positionsw the img in in absolutely. To calculate the 13.75%, I took one of your images and got 165/300=.55 --> .55*.25=.1375 --> 13.75%
Hope this solves your issue.
Reference
Edited; see bottom of post
I have a layout that works perfectly in everything except Internet Explorer 7.
I have a container div that has a width and hasLayout (I've tried zoom and various other things that ought to set this, but nothing changes). Inside are three floated elements, one left and two right. Below them is an element that is clear: both and it actually is doing that, but the container is ending at the shorter float even when I set a height for it including a height taller than the originally/naturally taller one.
Here's what it looks like: http://tinypic.com/r/ea3vpy/8
It should look exactly like that, except with the two elements that are awkwardly not in the layout inside the content area.
I've tried adding empty divs with clear: both, I've tried clearfixes, I've tried floating the container. I even added a container around the two right floating divs and floated that instead of them, but it didn't change anything. Overflow is not really an option because then I have to either cut off the content or have scroll bars inside the layout.
Here's the relevant CSS:
#content {
width: 669px;
height: 100%;
padding: 20px;
padding-top: 0;
position: relative;
display: table-cell;
vertical-align: top;
background-color: #F7F8F7;
text-align: left;
}
#content { /* To make it play nice with the sidebar */
_width: 709px;
*display: inline;
*position: absolute;
*left: 0;
*zoom: 1;
}
p#indexwelcome {
max-width: 330px;
min-height: 440px;
float: left;
}
#dogimg {
width: 323px;
max-width: 100%;
height: 246px;
margin-left: 10px;
float: right;
}
#loginbox {
max-width: 323px;
margin: 20px 0;
padding: 10px;
position: relative;
float: right;
}
#itemsbox { /* the one with the bananas */
width: 644px;
height: 142px;
margin-top: 20px;
position: relative;
clear: both;
}
And the HTML:
<div id="content">
<h1>Heading</h1>
<p id="indexwelcome">Text paragraphs here</p>
<img src="images/dog.jpg" id="dogimg" alt="dog" />
<div id="loginbox">
<p>Login box stuff</p>
</div> <!-- loginbox div -->
<div id="itemsbox">
<!-- banana images here -->
</div> <!-- itemsbox div -->
</div> <!-- content div -->
EDIT: So I fixed the issue although it's not quite ideal. Setting the content and sidebar to height: auto (as opposed to height: 100%) made them expand for their content.
However that page container (the green space) still won't expand even with height: auto. I have to set a specific min-height or height, which isn't great because the page content is dynamic, so other pages have extra space if their content is shorter than what it's set for and it'll be the same original problem if the content is larger. And then of course the content and sidebar boxes still aren't the same length (but that's a whole other issue).
Here's the page CSS:
#page {
width: 1025px;
height: 100%;
min-height: 650px;
margin: 15px auto;
padding: 10px 0;
position: relative;
background-color: #7B9F73;
*min-height: 990px;
}