I have a list of thumbnail images which when you resize the browser screen they all adapt nicely and keep the same height and width.
I need to add in a thumbnail for when there is no image, with a centerd icon, however when i resize the browser the div doesnt expand the same way as the images.
This is designed for mobile screens, but i would like it to have the same behavious as the images.
What am i missing in the code, im guessings its a css issue to do with height or margin / percentage values?
I have a demo with all the code i have done: -
http://jsfiddle.net/zM5SG/1/
.gallery li a.addImage {
display: block;
margin: 7px 5px 0 5px;
border: 1px dotted #aaa;
background-color: #ddd;
min-height: 58px;
}
.test{
background: url("http://icons.iconarchive.com/icons/custom-icon- design/mini/24/Delete-icon.png") no-repeat scroll /*1px -109px*/ center transparent;
display: block; width:24px; height:24px; text-align:center;
margin: 0 auto;
margin-top: 15%; margin-bottom: 15%;
}
Any help would be great thanks.
I know it's not the most elegant way, but couldn't you just replace the "empty space" with an image that looks blank? so it would resize the same as the other images?
Test Page
I suggested to you to use <img> tag instead of <span class="test">, and I used transform css for scaling the image.
also min-height deleted for perfect working in all scales.
.test {
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);
}
For the class test instead of width:24px give width:inherit. So the new style will be
.test{
background: url("http://icons.iconarchive.com/icons/custom-icon- design/mini/24/Delete-icon.png") no-repeat scroll /*1px -109px*/ center transparent;
display: block;
width:inherit; height:24px; text-align:center;
margin: 0 auto;
margin-top: 15%;
margin-bottom: 15%;
}
Hope this helps.
Related
I am using for the first time this forum, so if I am missing some crucial elements let me know.
My goal: I am trying to create 4 clickable image (in a box layout) in which when the mouse goes over, I would like a slight animation to show an icon on the image AND i want at the same time, a descriptive text that would appear on its side of the image.
My situation: I have the images set up in the dimension I want, and the little animation.
My problem: I have tried many, many things, but can t managed to make the text appear on the side of the image when the mouse hovers on the image.
Here is the Html:
<div class="video-container">
<a href="" class="thumb-unit" style="background-image: url(/assets/img/video/thumb1.jpg)">
<div class="thumb-overlay">
<strong>PLAY</strong>
</a> </div>
(above structure 4 times)
And here is the css:
.videos
background: #e1f3f6
h3
margin: 0
text-align: center
font-family: "Quicksand", sans-serif
letter-spacing: 1em
color: #deb75c
padding-top: 70px
font-weight: 300
.video-container
max-width: 930px
margin: 0px auto
padding-top: 88px
padding-bottom: 70px
+clearfix
.thumb-unit
overflow: hidden
display: block
width: 50%
position: relative
padding-top: 20%
background: pink
float: left
background:
position: center center
repeat: no-repeat
size: cover
.thumb-overlay
+position(absolute, 100% 0px null 0px)
height: 100%
background: fade-out(#6693b0, 0.3)
+transition
text-align: center
strong
padding: 30px
display: block
Color: white
font-weight: 400
text-transform: uppercase
font-size: 17px
background:
image: url(/assets/img/icon/play.png)
position: center 70px
repeat: no-repeat
h4
border: 2px solid red
position: absolute!important
width: 300px!important
right: 300px!important
visibility: visible!important!important
&:hover .thumb-overlay
+position(absolute, 0% 0px null 0px)
as you can see, the code reflects my current situation.
If you have any insights, thank you very much!!!
i have slightly adjusted your code, not sure what else is on your page but hopefully this will make sense and you can add it into your code.
<div class="video-container">
<a href="#">
<div style="background-image:url('Thumb.jpg');">
<strong>PLAY</strong>
</div>
<div>
This is the display text you want to display.
</div>
</a>
</div>
and the css
.video-container
{
width:100px;
height:100px;
margin: 5px;
float:left;
}
.video-container > a > div:nth-child(1)
{
height:100px;
width:100px;
float:left;
}
.video-container > a > div:nth-child(2)
{
display:none;
height:100px;
width:100px;
margin:-100px 0px 0px 100px;
float:left;
}
.video-container > a:hover > div:nth-child(2)
{
display:block;
}
i think it works how you want, its hard as not sure what the other code on your page is etc. i have changed some dimensions to make it a bit easier to work with. any comments on this will be greatfull
I'm having a problem with my CSS where I have a massive amount of white space which I'm not wanting. All I want is the content area containers to fix to the page size, though for the life of me I can't find what I have done to cause this problem.
Here is a link to my problem:
http://jsfiddle.net/k5t5czxt/1/
CSS for main content:
#main-body-area {
background-size:cover;
background:url(../Images/BluePrint.jpg) no-repeat;
background-position:left;
position:absolute;
}
#main-body-cover {
background-color:pink;
opacity: 0.75;
position: absolute;
height: 100%
}
#main-body-wrapper {
width: 60%;
background-color: yellow;
margin: 0px auto;
opacity: 0.75;
border-radius: 20px;
height: 95%;
}
#main-section {
margin: 2%;
}
article {
background-color:orange;
border: 1px solid green;
margin: 2%;
height: 500px;
width: 90%;
display: inline-block;
}
Your extra <div class="Clear" /> and <div class="Clear"></div> are creating the extra white space.
Remove those and the white space will be gone, almost completely. There is still some white space remaining because the overall height of the page is 500px which is a result of your height: 100% element. Removing the height:100% will remove the additional white space but also adversely impact other parts of the page.
Since there is a lot going on with your CSS I would potentially recommend starting over with this page and rebuilding it one element at a time to see how each element and class impacts your layout.
JS Fiddle Demo
The extra white space is caused by your .Clear element. div height: 100% gets applied to that.
Just change CSS for the article.
article {
background-color:orange;
border: 1px solid green;
margin: 2%;
height: 100%;
width: 90%;
display: inline-block;
}
Here, height is changed from 500px to 100%.
JS Fiddle
JSFIDDLE DEMO
.btn {
text-transform: uppercase;
position: relative;
margin-bottom: 15px;
color: #ffffff;
background-color: #000;
padding: 25px 80px 25px 80px;
font-size: 18px; }
So I have this image, which is responsive and button over it which should be always centered.
If you move the window width, you'll see that image changes size quite a bit and I would like to know what is the best way to set button so it will change size automatically with image as well so it gets bigger/smaller?
Is there a better solution for this besides setting a lot of #media queries here?
Since you're using absolute positioning you can't currently use margins to achieve this.
However, if you use a new div that wraps the anchor, set it to position: absolute and then center the anchor inside that, it'll work.
<div class="logo">
<img src="http://s13.postimg.org/9y14o777r/imgholder.png" />
<div>Register</div>
</div>
.logo div {
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-top: 25%
}
.logo a {
display: block;
margin: 0 auto;
width: 250px;
}
Fiddle
You can adjust the sizing and vertical centering as you need, and add some responsive css or min-width to control too-small sizes.
//sorry for the bad formating, i am on my phone...
When someone asks how to center a page, then the response is like:
margin-left:50%;
left:(-1/2 width);
I used this code on a site with a width of 1000px,so it comes to screens, where this site does not fit.
Now the site gets centered on the smaller screen and gets equaly pushet to left and right.
So lets say, our screen is 600px wide:
200px are left
600px are on screen
200px are right
You can scroll to the right, but the pixels on the left are unreachable...
How can i solve this to control, how much of my site gets dragged to the left in case of smaller screens?
This is especially important for mobile phones...
If you are worried about different screen sizes then I highly suggest using Media Queries but this is also a useful way of setting up centered elements. Just use a % width instead of a set width and followed by margin: 0 auto;
Look at fiddle for visual aid. (If this answer does not suit your needs at all then I'll gladly remove it)
div {
margin: 0 auto;
width: 80%;
height: 500px;
background: mediumSeaGreen;
}
JSFIDDLE
Your best bet (Ignore the CSS it's from my portfolio.
.subMenu {
display: none;
float: none;
width: 100%;
background: rgba(254, 126, 1, 0.5);
border-bottom: 5px solid rgba(0, 0, 0, 0.6);
font-size: 20px;
padding-left: 60%;
position: relative;
left: 0;
top: 3.85em;
list-style-type: none;
padding: 1.5em 0;
margin: 0;
overflow: hidden;
}
#media only screen and (max-width: 680px) {
.subMenu {
top: 4.9em;
font-size: 10px;
min-height: 100% !important;
padding: 0;
background: rgba(0, 0, 0, 0.5);
}
}
You can also use jQuery to dynamically find the width.
var width = $('div').width();
$('div').text(width);
You could try using margin: auto
http://jsfiddle.net/56N9w/
As you see there if you make the window too small for the content to fit it will left align by default
Use this:
margin: 0 auto;
width: 400px;
alternative:
margin: 0 auto;
width: 50%;
another alternative:
#outer-div {
margin: 0 auto;
width: 50%;
}
#inner div {
/* insert any CSS you want here */
}
NOTE 1: When using margin: 0 auto, you need to define the width otherwise it won't center.
NOTE 2: You should really put it inside another box, or make the page width 100% (or a width larger than the box).
NOTE 3: You can't center vertically with margin: auto auto. This simply won't work. See below for the solution to this:
Centered box both horizontally and vertically:
Working in jsbin:
http://jsbin.com/OSUViFi/1/
The code (same as the jsbin above):
page.html
<div id="outer-container">
<div id="inner-container">
<div id="centered-box">
</div>
</div>
</div>
style.css
#outer-container {
width: 100%;
height: 100%;
display: table;
position:absolute;
overflow: hidden;
}
#inner-container {
display: table-cell;
vertical-align: middle;
}
#centered-box {
margin: 0 auto;
height: 400px;
width: 400px;
background: #000;
}
Specific for your needs (not including vertical alignment which it looks like you don't need):
jsbin example:
http://jsbin.com/axEZOTo/2
The code (same as the jsbin above):
page.html
<div id="container">
<div id="centered-box">
</div>
</div>
style.css
#container {
width: 1000px;
margin: 0 auto;
height: 100%;
background: #999;
}
#centered-box {
max-width: 70%;
min-width: 200px;
height: 500px;
margin: 0 auto;
background: #000;
}
Here, the smallest it can go is 200px, this number you can change to the smallest amount that you want to allow your box to have.
NOTE:
I finally figured out what you were trying to say in your question, which was poorly worded.
You only used 600px as an example, but you really just want to have it be a fluid layout that changes with screen size.
I know there is like 100 of topics made and I've tried all 100's of them and I just can't get it to work, Aligning the image in the middle, if you check in to
http://one1.no-ip.org/index.php?hitta=tanto&page=search
you'll see that the logo is at the top of the screen and whatever I do I just can't make it align correctly. I'm sure something is interfering but I just can't find out what, I even made a fiddle to check if the method im using is working and it is
http://jsfiddle.net/UJATF/
Working example with the image in the middle of the div element
CSS
.logo{
background:white;
position:absolute;
width:105px;
height:90px;
line-height:90px;
left:180px;
margin-top:20px;
line-height:90px;
text-align:center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow:inset 0px 0px 0px 1px white,inset 0px 0px 10px -4px black;
z-index:1000;
overflow:hidden;
}
.logo img{
vertical-align:middle;
max-width:90px;
max-height:40px;
}
HTML
<div class="logo">
<img src="http://www.tantobil.se/images/logo.png">
</div>
so all help would be very much appreciated
Define your anchor link display : inline-block and give to margin-top
as like this
.logo > a {
display: inline-block;
margin-top: 22px;
}
Results is
--------
Is your are using dynamic with of img than used to this
Second option is
.logo > a {
display: table-cell;
height: 90px;
text-align: center;
vertical-align: middle;
width: 105px;
}
Since you're using fixed heights in your css, why don't you just use simple math to determine the top position of the logo?
.content is 121px high,
.logo is 90px high
The difference is 31px, which means you need a top offset of 15.5px
Also, set the .content to position: relative so you position the logo relatively to .content's top.