I have a div called wrapper with this CSS:
.wrapper {
width: 960px;
min-height: 720px;
margin: 0 auto;
text-align: center;
background: url(images/bg-light.png) no-repeat;
padding-top: 20px;
}
which is located in the body. Body's CSS:
body {
background: #232323 url(images/bg.png) repeat;
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
There are HTML 5 elements which are displayed in block-level. Here is their CSS:
header, nav, article, section, aside, footer, address {
display: block;
}
I'm trying to make the whole page smaller. I mean like if you click Ctrl/- in your browser.
So what's the best way to reduce the size of the page? How to show it as 67%(for instance) of it's size now.
If it is just for the effect of a modal or something, that's the only reason i can think of why you would want to do this.
You can use the non-cross-browser
body{
-webkit-transform: scale(0.67);
-moz-transform: scale(0.67);
transform: scale(0.67);
}
Documentation
This sounds like a job for CSS transform:
.SmallerPage{
-webkit-transform:scale(0.67);
-moz-transform:scale(0.67);
-ms-transform:scale(0.67);
transform:scale(0.67);
-ms-transform-origin:0 0;
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
transform-origin:0 0;}
In this jsFiddle, I use jQuery to add or remove this class to the body:
$(document).ready(function() {
$('#DoResize').click(function () {
if ($('html').hasClass('SmallerPage')) {
$('html').removeClass('SmallerPage');
} else {
$('html').addClass('SmallerPage');
}
});
});
This will not work in IE8 and under because it doesn't support transforms. If you want to resize the whole page, only transform will do it; otherwise you need CSS switching to make it work in IE8 and under.
Don't set size in px, that makes elements fixed size. You can use %, em etc. Then for the outer div or the whole body, you can set the size you want, maybe px. So, when you change the size of outermost div, all contents will resize automatically.
You can use jQuery 2d transform plugin instead, It's safe and cross-browser
just you should write:
$('your_contents').css("scale",0.5);
Or you can animate your contents by
$('your_contents').animate({"scale":1});
Related
Consider this bar of buttons:
body {text-align: right;}
<button>Save</button>
<button>Cancel</button>
<button>Delete</button>
Now let's say that the last button's content changes:
body {text-align: right;}
<button>Save</button>
<button>Cancel</button>
<button>Click me again to confirm deletion</button>
As you can see, this change in the rightmost button triggered all buttons to its left to move.
To avoid this, I'd like the button's original size to fit the larger one of its two possible contents.
Of course, I can try to "achieve" this in many ways. The simplest and ugliest is to experiment how much width the larger content requires and "hardcode" it:
body {text-align: right;}
#del {display: inline-block; width: 220px;}
<button>Save</button>
<button>Cancel</button>
<button id="del">Delete</button>
However, I consider it a non-solution because it cannot be guaranteed that this width will be the same for everyone else. If someone has a weird font, or uses text magnification, or views the site on mobile, or whatever, then I suppose setting the button's width to a hardcoded value could produce weird results.
Another way, I suppose, would be to (a) Initially put the longer text to the button (b) Get the button's width through JavaScript and save it (c) Put the actual, shorter text to the button and set its width to that value. To my intuition, however, this looks like a horrible hack and overkill.
What is the canonical solution to troubles like this?
I would consider data attribute to add both texts using pseudo elements then control the opacity to hide/show them:
div {
text-align: right;
}
#del {
display: inline-block;
position: relative
}
#del:before {
content: attr(data-text);
position:absolute;
left:0;
right:0;
top:1px; /*there is 1px default padding */
text-align:center;
}
#del:after {
content: attr(data-alt);
opacity:0;
}
#del:hover::before {
opacity:0;
}
#del:hover::after {
opacity:1;
}
<div><button>Save</button><button>Cancel</button><button data-text="Delete" data-alt="Click me again to confirm deletion" id="del"></button></div>
You simply need to know which one will be the wider one to keep it in-flow to define the width and make the other one position:absolute.
You can also keep the main text inside:
div {
text-align: right;
font-size:14px;
}
#del {
display: inline-block;
position: relative;
}
#del span {
content: attr(data-text);
position:absolute;
left:0;
right:0;
top:1px; /*there is 1px default padding */
text-align:center;
}
#del:after {
content: attr(data-alt);
opacity:0;
}
#del:hover span {
opacity:0;
}
#del:hover::after {
opacity:1;
}
<div><button>Save</button><button>Cancel</button><button data-alt="Click me again to confirm deletion" id="del"><span>Delete</span></button></div>
I'm getting familiar with vmin vh etc
but I need a mroe elegant solution to display a list of words say:
apple
banana
lemon
pineapple
so the list takes always the maximum width of thew viewport...based on the longest word in this case 'pineapple'
using just CSS is it possible?
If you want a list element to always take x width of a page while keeping the elements boundaries fluid as to expand around its content ( instead of a fixed width ) you could use a solution that combines an inline-block display with a vw unit on the font-size of the html element. This, however scales everything in the entire page accordingly.
( make full-screen and resize the page to see the list adapt )
// All javascript is necessary only for the button to demo list growth.
function addCnt(){
var pinapl = document.getElementById( 'pinapl' );
pinapl.innerHTML += 'e';
}
var cnt = document.getElementById( 'cnt' );
cnt.addEventListener( 'click', addCnt );
html,
body {
margin: 0;
height: 100%;
}
html {
font-family: sans-serif;
font-size: 6vw; /* setting vw value on HTML makes elements resize to viewport width */
}
body {
display: flex;
}
ol {
display: inline-block; /* making list element inline-block forces content to determine its width */
margin: auto;
background-color: #eee;
list-style-position: inside;
}
.cnt {
cursor: pointer;
padding: 10px;
background-color: #000;
color: #eee;
font-size: 16px;
position: absolute;
}
<ol>
<li>apple</li>
<li>banana</li>
<li>lemon</li>
<li id="pinapl">pineapple</li>
</ol>
<div id="cnt" class="cnt">
click to add content
</div>
No, in pure CSS you cannot tell "set the font-size so the longest word fits in viewport automatically". You'll need JavaScript, presumably FitText:
http://fittextjs.com/ / https://github.com/adactio/FitText.js
I am building a website with WordPress. On my homepage I want a picture grid (10 x 3) of different products, and when you hover over each picture, a caption with the product name will pop up.
I have managed to do 3/4 of it but there's this massive white space below each row. :(
I am using the SiteOrigin editor widget to insert the image, and using HTML and CSS to code the hover effects. See below for the current coding.
HTML:
<div id="pic">
<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Hassaku.png" />
<p class="text">Summer Mikan</p>
</div>
CSS:
.text {
color: #000000;
font-size: 16px;
font-weight: bold;
text-align: center;
background: rgba(255, 255, 255, 0.5);
}
#pic .text {
position:relative;
bottom:80px;
left:0px;
visibility:hidden;
}
#pic:hover .text {
visibility:visible;
}
Here's the website so you can see what I've done: http://peacefruit.net
The top row has the captions, but also, the pesky gap. The bottom three rows are examples of how I want it to look (no borders or gaps between pics). All rows and individual widgets have no padding, margins or gutters and I've already adjusted the theme padding to 0 with CSS.
I'm sure it's a simple line of code I'm missing, but it's driving me crazy!
Please send help.
Try adding to your inline css for siteorigin-panels-stretch
overflow:hidden;
height:164.89px;
Hope this works.
Thanks!
In your case
the id should be unique.
So, it is better to change #pic to a class
Also, the <p> tag in your style contain padding-bottom and it will case the white space problem.
Change each pic to the following
HTML:
<div class="pic">
<img class="hover" src="http://peacefruit.net/wp- content/uploads/2016/11/Hassaku.png">
<div class="text">Summer Mikan</div>
</div>
CSS:
.pic{
position: relative;
}
.pic .text{
position: absolute;
top: 80px;
width: 100%;
visibility: hidden;
}
then it should be work.
Stylesheets for WordPress themes can have a lot of CSS bloat, so you're on the right track creating a custom stylesheet, to tackle the styling nuances you desire.
Since this is a responsive theme, it's best to begin solving this from a mobile-first perspective.
The first thing to prune is the bottom-margin: 30px; for .panel-grid-cell, like this:
.home #main .panel-grid-cell {
margin-bottom: 0;
}
The next thing is to correct your HTML mark-up. The value of pic is given to multiple id attributes. An id attribute is used to denote a unique element. The class attribute denotes a non-unique element. pic should be assigned to class attributes instead, since many elements in your layout utilize this hook value. Like this:
<div class="pic">
I'm noticing that img.hover and p.text are getting wrapped in an unnecessary <p> tag. Make sure that this does not happen in the SiteOrigin editor.
You should then prune the bottom-margin: 1.5em for paragraphs inside of the .pic divs (note the designation of pic as a class hook .pic, rather than an id hook, which would have been #pic):
.pic p {
margin-bottom: 0;
}
To get even closer, relative positioning should be used on the .pic div to ensure that the subsequent styling suggestion (position: absolute;) will take effect:
.pic {
position: relative;
}
And then, for the text that appears when hovering an image:
p.text {
position: absolute;
width: 100%;
}
The styles above will work for mobile, but your theme is responsive, and you might need to account for some styling variations with different screen sizes.
For tablets, you'd need a media query like this:
#media (min-width: 600px) {
.some-class {
some-property: some-value;
}
etc...
}
And finally, for desktop:
#media (min-width: 1000px) {
.some-class {
some-property: some-value;
}
etc....
}
Thanks everyone for your help :) After some fiddling around with the suggestions and a software update, there is no gap now!
I thought I'd post my final code in case anyone has a similar problem and it might be of some help. (Note: there are some minor style changes which differ from the original post but have no effect on how it works).
HTML:
<div class="pic">
<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Summer-Mikan.png"/>
<div class="text">Summer Mikan</div>
</div>
WIDGET CLASS:
fade
CSS:
.fade {
-webkit-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
.fade:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.pic {
position: relative;
}
.text {
color: #FFFFFF;
font-size: 22px;
font-weight: bold;
text-align: center;
background: rgba(214, 187, 14, 0.85);
}
.pic .text {
position:absolute;
top: 0px;
width: 100%;
visibility:hidden;
}
.pic:hover .text {
visibility:visible;
}
.pic p {
margin-bottom: 0px;
}
So glad it finally works, much appreciation to everyone!
I'm trying to display a scrolling list inside a speed dial box but have a problem with the positioning
I want to know when the list object is too big to fit the box, but as far as I know, there's no way of getting the size of the box in pixels
how can I get the minimized mode to show exactly what it's seen in the normal mode but fitting the box?
this is the CSS I'm using right now
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
background: #eee;
color: #444;
display: table;
height: 100%;
width: 100%;
}
output {
position:absolute;
width: 100%;
white-space:nowrap;
font-family: monospace;
}
it works fine if I open the file in a tab, but in the speed dial it's displayed zoomed in
Opera's guide uses this query:
#media screen and (view-mode: minimized) { }
which controls the way it's displayed in the speed dial, I think. but I don't know what to put in there
UPDATE
well, I ended up creating an element and assigning a bottom value of 0
like this:
var bottom = document.createElement('div');
bottom.className= "ylimit";
document.body.appendChild(bottom);
and in CSS:
div.ylimit{
position:absolute;
bottom:0px;
}
then whenever I want to check or compare the height, I use bottom.offsetHeight
to change to
when mouse over.. like you can do with a:hover, how can i do this?
I tried
addFriend img:hover{
background: url(images/addFriend_hover.png);
}
Ditch the img tag, and do it without javascript
(off the top of my head, untested)
HTML
<div class="addFriend">Add Friend</div>
CSS
.addFriend { background: url(images/addFriend.png); }
.addFriend:hover { background: url(images/addFriend_hover.png); }
For it to work in all browsers with the least amount of code you can do it with CSS.
Add A Friend
.icon {
display: block;
width: (width of image);
height: (height of image);
text-indent: -9999px; /* hides the text 'Add A Friend' */
background: url(url of image) no-repeat center center;
padding-right: 55px;
}
.icon:hover {
background: url(url of new image) no-repeat center center;
}
You could also use jQuery.
$('img.addFriend').hover(function() {
$(this).attr('src','images/addFriend_hover.png');
}, function() {
$(this).attr('src','images/addFriend.png');
});
Edit
You could also do non-jQuery, I assume you don't want a background-image or an href
<img src='images/addFriend.png' onmouseover='this.src="images/addFriend_hover.png"' onmouseout='this.src="images/addFriend.png"' />
You have to use a container with a background image, e.g. a div with a specified height and width. Then you can use the background image and a :hover-pseudo-class.
This tutorial might be useful: http://www.w3schools.com/js/js_animation.asp
To see if it does what you want, scroll down to "The Entire Code" and click "Try it yourself".