css3

show div while input is selected using css without javascript

由 若如初见. 提交于 2020-01-02 20:08:30
问题 My question is if anyway when I start to write in the input, not disappear if i slide my mouse out of the ".box" div. Wonder if any selector or possible way to do without any Javascript. Here is the example: http://jsfiddle.net/vzRqY/ <div class="box"> <div class="overlay"><input/></div> LOREM IPSUM LOREM IPSUM <br/> LOREM IPSUM LOREM IPSUM LOREM IPSUM </div> Thanks 回答1: Yes, it requires you to rearrange where the input is, but it can be done. HTML <div class="box"> <input/> <div class=

Flexbox sidebar stop main content from wrapping under sidebar on small screens

由 99封情书 提交于 2020-01-02 19:52:40
问题 I have a sidebar with main content that is working great... the problem is that for the main-content I am using the bootstrap class .container . Current behaviour When I shrink my page the main content pops underneath my sidebar. Desired behaviour I want the .container to shrink so that the sidebar and main-content fit on the screen. My Code https://jsfiddle.net/4jm70ton/ Markup: <!-- site footer --> <div class="footer"> <div class="footer-group footer-group-left"> <span> Slide 1/10 </span>

What is the best way to create an asymmetrical two-column grid with dynamic content?

由 我的梦境 提交于 2020-01-02 19:31:39
问题 I have dynamic content flowing into a two-column grid. Flex box is a nice solution, but it forces the rows to be the same height, creating some awkward white space when one has more content. Does anyone know of a lightweight solution that can achieve what is hopefully clearly communicated in the below image? Code for my current solution: .grid-container { display:flex; flex-wrap: wrap; justify-content:space-between; height:auto; height:700px; overflow-y:scroll; } .contained-cell{ width:48.5%;

Maintain aspect ratio and font size based on browser height and width?

由 我的未来我决定 提交于 2020-01-02 19:22:47
问题 The code below is attached to window.onresize = resize; . The baseWidth and baseHeight are read on load as a basis for the calculations. The main variable is defined just by setting it to the main html node. The font is set on a block element to cause all of the em based elements within it to resize in kind. When the width or height of the browser is changed then the ratio is recalculated. Please see demo to understand what I achieve with JS but would like to find a pure CSS solution: http:/

Using Compass/Sass with another CSS framework

由 会有一股神秘感。 提交于 2020-01-02 17:57:12
问题 I recently started using Compass/Sass for my CSS coding and it has been working out well. I am now looking into trying out different frameworks (Skeleton, Foundation, Bootstrap etc.). My question for those who are experienced with using Compass, when you install a new framework, it includes it's own css file with ready-made classes. When you use Compass, it has the scss file you use in order to modify classes and variables. The thing that is confusing me is that I would need to go to the css

Using Compass/Sass with another CSS framework

由 廉价感情. 提交于 2020-01-02 17:55:25
问题 I recently started using Compass/Sass for my CSS coding and it has been working out well. I am now looking into trying out different frameworks (Skeleton, Foundation, Bootstrap etc.). My question for those who are experienced with using Compass, when you install a new framework, it includes it's own css file with ready-made classes. When you use Compass, it has the scss file you use in order to modify classes and variables. The thing that is confusing me is that I would need to go to the css

How to expand child <div> with 100% of body width?

由 让人想犯罪 __ 提交于 2020-01-02 16:41:28
问题 I have something like this: <body> <div style="width:700px; margin:0 auto;"> <div class="inner-div"></div> </div> </body> Is there a way to expand child div with class "inner-div", to 100% of body width? 回答1: This makes inner-div stretch from left to right: div.inner-div { position: absolute; left: 0; width: 100%; } 回答2: I have not tested this but it might work: You need jQuery for this. //I'm using a resize event in case the body with changes. At least i think that will work. window.onresize

Pure CSS3 slideshow repeats the last 4 slides?

由 匆匆过客 提交于 2020-01-02 13:50:44
问题 I found a script, namely: "Pure CSS / CSS3 Slideshow with Image Panning and zooming Effect". The problem with this it that it repeats the last 4 slides. Could someone tell me why and how to resolve this problem? My first fiddle, demonstrating the issue. My second one, proving the issue. The HTML: <div class="pic-wrapper lejatszokep"> <figure class="pic-1"></figure> <figure class="pic-2"></figure> <figure class="pic-3"></figure> <figure class="pic-4"></figure> <figure class="pic-5"></figure>

CSS column count causing items to split columns

由 杀马特。学长 韩版系。学妹 提交于 2020-01-02 13:33:33
问题 Trying to not use a jQuery script for a masonry effect so looking to CSS for alternatives. I am trying to use column count, which appears to be working but not as expected. So the columns are there, but sometimes the items in the container are being split across more than one as you should be able to see in this example: http://jsfiddle.net/DTcHh/3858/ #builds { width: 100%; } .cols { -moz-column-count:4; -moz-column-gap: 3%; -moz-column-width: 25%; -webkit-column-count:4; -webkit-column-gap:

Dynamically styling pseudo-elements using jQuery or Javascript

由 两盒软妹~` 提交于 2020-01-02 12:42:11
问题 I need to change the margin-top value of p::before dynamically on each image click. Neither of these questions 1 / 2 / 3 / 4 nor this tutorial worked for me since I am changing the margin-top value not content or colors. I can't use attr() because it's not supported for non-string values according to this. Creating stylesheet or adding scripting the the header isn't a good idea since I can't reach and modify it again so it's creating tens of style tags and rules and it's messing up with my
订阅 css3