i am trying to create a full width slider for only images with text. My slider is full width but needs a specific height (example 400px)because it is going to be displayed as the banner of my website.
The problem is that the images look blurry and i dont know the proper size or perhaps the code to prevent this.
This is what i have so far as for my html and the images's size
<div class="wrapper">
<div class="full-width">
<div class="inner">
<div class="slide">
<div>Lorem ipsum dolor sit amet, consectetur. <br>Curabitur molestie elit et ultricies vehicula.</div>
<img src="http://lorempixel.com/1020/400/sports" width="1020" height="400">
</div>
<div class="slide">
<div>Nullam dictum magna sapien, sed adipiscing nibh. <br>Curabitur molestie elit et ultricies vehicula.</div>
<img src="http://lorempixel.com/1020/400/city" width="1020" height="400">
</div>
<div class="slide">
<div>Donec malesuada hendrerit velit, sed consequat. <br>Curabitur molestie elit et ultricies vehicula.</div>
<img src="http://lorempixel.com/1020/400/cats" width="1020" height="400">
</div>
<div class="slide">
<div>Maecenas augue dui, rhoncus a blandit non. <br>Curabitur molestie elit et ultricies vehicula.</div>
<img src="http://lorempixel.com/1020/400/business" width="1020" height="400">
</div>
</div>
<div class="controls">
<
>
</div>
<div class="slide-nav"></div>
</div>
</div>
as for my css:
.full-width {
overflow: hidden;
position: relative;
background: #fff;
}
.full-width,
.full-width .slide img {
width: 100%;
}
.full-width:hover {
background: transparent;
}
.full-width .inner {
overflow-y: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
filter: alpha(opacity=00);
-moz-opacity: 0;
opacity: 0;
}
.full-width .slide {
float: left;
overflow-x: hidden;
position: relative;
}
.full-width .slide img {
height: auto;
}
.full-width .slide div {
color: #fff;
position: absolute;
padding: 0 5%;
left: 0;
width: 90%;
text-align: right;
font-size: 32px;
}
.full-width .slide div p {
float: right;
text-align: left;
padding: 10px;
margin: 0;
background: rgba(0, 0, 0, 0.8);
}
.full-width .controls a {
position: absolute;
top: 50%;
margin-top: -46px;
display: block;
background: rgba(0, 0, 0, 0.5);
text-decoration: none;
color: #fff;
font-size: 40px;
padding: 0 10px 2px 7px;
line-height: 40px;
*display: none;
}
.full-width .controls a.left {
left: 0px;
}
.full-width .controls a.right {
right: 0px;
}
.full-width .slide-nav {
*display: none;
font-size: 75px;
margin: 0 auto;
line-height: 50px;
font-family: 'Helvetica', Arial, sans-serif;
}
.full-width .slide-nav span {
cursor: pointer;
color: #ccc;
}
.full-width .slide-nav span.current {
color: #333;
}
.lt-ie9 .full-width p,
.lt-ie9 .full-width .controls a {
background: url('bg-trans.png') repeat;
_background: #333;
}
what i need to know if it is a matter of adjusting only the image size although i tried that already and didnt worked or if it remains in the code.
thanks in advance for any help!
If the images are getting blurry at larger sizes, you will need to produce an image with the dimensions of the maximum area you want it to cover. This way when it is at full size the quality will be clear.
When you decrease the screen size, the image size will likely be decreasing too. In my experience it is better to start large and scale to a smaller size to preserve the clarity of the image, so you should approach it that way.
If the problem is that it is not scaling correctly because the proportions are off because of the fixed height, then you will need to produce images with the correct proportions to support the size you need. This is most easily done with image editing software like Photoshop rather than making adjustments in HTML.
I have a problem with displaying a block with top/bottom border and border-radius. Don't know why an inside radius appears within a border.. Please, take look at the screenshot & code below..
http://img703.imageshack.us/img703/3074/scrren1.jpg
<section id="block">
<div class="block-header"><h1>Block</h1></div>
</section>
#block {width:1000px; height:329px; position:relative; border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px;}
#block .block-header { position:absolute; right:0px; top: 0; border-top:10px solid #81a32b; width:500px; border-radius:0px 4px 0px 0px; -webkit-border-radius:0px 4px 0px 0px; }
Do u know any solution to this problem?
jsfiddle
In Opera the height is directly related to the rounding you are trying to achieve
Css
border-top:10px solid #81a32b;
border-radius:0px 10px 0px 0px;
Fiddle -> http://jsfiddle.net/325nH/2/
you have declared:
border-top:10px solid #81a32b;
border-radius:0px 4px 0px 0px;
so you are 6px short that are filled by Opera with white space
Hello (I am not a programmer so bear with me)
I am using drupal 7. My boss loves the KWICKS slider. I have gotten this to work but only with images using views-kwicks module.
I would like to be able to have text(teaser) placed over the images in the slider with a link to the corresponding page when clicked, like http://demo.themesmania.com/creative/kwicks-slider
How should I go about doing this? Thank you!!
the markup used in that link is:
put this inside your <li></li> of kwicks:
<div class="slide-description">
<h4>At vero eos et accusamus et</h4>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti</p>
</div>
then use this css:
.slide-description { background-color:#000;
bottom: 0;
cursor: pointer;
display: block;
font-weight: normal;
left: 0;
line-height: normal;
padding: 16px 20px;
position: absolute;
width: 760px;z-index: 2;}
Im trying to achieve an inner-shadow effect on a simple box, something like:
alt text http://gotinsane.com/test.jpg
where the green box is the content inside another box.
My problem is that if i give the content box any kind of background, the outer box box-shadow effect vanish!
Here an example of my problem (with markup and css), i've set the content height smaller to evidence the problem - atm i really dont care about IE*, this is just a test.
Any idea?
UPDATE
The content inside the box is a somewhat kind of slide, here an example (original problem).
thirtydot's answer does the trick, but it forces me to make a little hack, changing the wrapper background in function of the content: example here (thirtydot trick).
This can be a solution, but i dont like it too much and still dont understand why the outer box shadow get behind the inner box background (color, image)
UPDATE 2
Talking about this problem on another forum, i found another way: basically, instead of use box-shadow on the wrapper, that will act as a mask, I use box-shadow and border-radius directly on the content (.step elements)
However, the 'mask' effect is exactly what i was trying to accomplish, so this isnt the solution neither.
I still don't understand how and why an inner element background interfere with an outer element design, or why the shadow dropped from the outer element get behind the inner one. Could this be a css bug?
UPDATE3
Someone opened a bug on mozilla, and got this answer that clearify the 'problem':
From http://www.w3.org/TR/css3-background/#the-box-shadow :
In terms of stacking contexts and the painting order, the outer shadows of an
element are drawn immediately below the background of that element, and the
inner shadows of an element are drawn immediately above the background of
that element (below the borders and border image, if any).
In particular, the backgrounds of children of the element would paint above
the inset shadow (and in fact they paint above the borders and background of
the element itself).
So the rendering is exactly what the spec calls for.
UPDATE4
Fabio A. pointed out another solution, with css3 pointer-events.
Looks good and works on IE8 too ;)
Since I am having this problem too and I too don't see this behaviour being normal, I filed a bug report over at mozilla
I can reproduce the problem in Google Chrome too, though, so I wonder whether this is really a bug. But it could be.
edit:
Indeed it's not a bug, but just the way it's meant to work. So, on the basis of this information, I forked your jfiddle example and came up with this solution:
The markup now looks like this:
<div id="box">
<div id="wrapper">
<div id="box_content">
Content here
</div>
<div id="mask"></div>
</div>
</div>
The mask becomes another div, which is layered on top of the #box_content one by means of being absolutely positioned. This is the CSS:
#wrapper{
position: relative;
display: inline-block;
width: 280px;
height: 280px;
border-radius: 5px;
margin: 10px;
}
#mask {
position: absolute;
top: 0px; left: 0px;
width: 100%;
height: 100%;
pointer-events: none; /* to make clicks pass through */
box-shadow: 0 0 10px #000000 inset;
}
#box_content{
background-color: #0ef83f;
height: 100%;
}
I'm a little confused what you're actually after. If it's not quite right, let me know :)
This is my best guess.
Live Demo
CSS:
(I added in the vendor prefix rules.)
#box {
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
width: 280px;
height: 280px;
padding: 10px
}
#wrapper {
background-color: #0ef83f;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 0px 18px #000;
-moz-box-shadow: inset 0px 0px 18px #000;
box-shadow: inset 0px 0px 18px #000;
width: 240px;
height: 240px;
padding: 20px
}
HTML:
<div id="box">
<div id="wrapper">
Content here
</div>
</div>
the problem is layered is overlapped, you can avoid it using margin or padding.
Try
http://jsfiddle.net/pramendra/FEk3c/5/
#box{
background-color: #FFFFFF;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 10px #000000;
width: 300px;
height: 300px;
}
#body{
margin: 0px;
}
#wrapper{
display:inline-block;
width: 280px;
height: 280px;
border-radius: 5px;
box-shadow: 0 0 10px #000000 inset;
box-shadow:inset 0 0 10px 0 #000000;
margin: 10px;
}
#box_content{
background-color: #f00;
margin:5px;
}
Check this fiddle: http://jsfiddle.net/FEk3c/6/
#box{
background-color: #FFFFFF;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 10px #000000;
width: 300px;
height: 300px;
}
#body{
margin: 0;
}
#wrapper{
display: inline-block;
width: 280px;
height: 280px;
border-radius: 5px;
box-shadow: 0 0 10px #000000 inset;
margin: 10px;
}
#box_content{
background-color: #0ef83f;
height: 100px;
}
Just make sure the child background property is specified with rgba, like in this fiddle.
Give the parent a background-color to prevent whatever's underneath showing through.
ul {
box-shadow : inset 0 0 10px 10px gray;
background-color: white;
}
li:nth-child(even) {
background : rgba(255,0,0,0.2);
}
This works great for me without any additional DOM elements (like 'wrapper' etc.):
div.img {
display: inline-block;
position: relative;
width: 400px;
height: 280px;
background-image: url(/images/anyimage.png);
}
div.img:after {
display: inline-block;
width: 100%;
height: 300px; //parent height +20px
position: absolute;
top: -10px;
left: 0;
box-shadow(inset -25px 0 25px -25px rgba(0,0,0,.2), inset 25px 0 25px -25px rgba(0,0,0,.2));
content: ' ';
pointer-events: none;
}
I have a dashboard in which I'd like a scrolling ticker. (We'll know if the UI sucks or not once it's been running on the wall for a while.) Because this is a specific purpose dashboard, we can assume a recent WebKit in our markup and use even the latest CSS3 markup if it's implemented.
This is some exemplary markup, but we're free to change it as needed, although I'd prefer to keep it relatively semantic if possible:
<div class="ticker">
<div class="itemDiv">
<img src="x">
<div class="itemBodyDiv">
<span>Upper Box</span>
<span>Lorem ipsum dolor sit amet</span>
<span>Lower Box has longer text</span>
</div>
</div>
</div>
This is the layout I'd like to achieve:
The outer solid black line is a div. The dashed line is a div that represents an individual item in the ticker. Items will scroll right-to-left using -webkit-marquee. The main body of the ticker item is the lorem ipsum text, which needs overflow-x set to cause the marquee behavior. The main body should be text-align: middle.
The problem I'm having is in finding suitable CSS markup to describe the position of the Upper Box and Lower Box. I've tried several permutations of display: inline and inline-block that didn't work. They either ruined the marquee behavior or moved the main body over. It seems that they need to be pulled out of the normal box model, but can't be absolute since they wouldn't have the marquee behavior. It seems like there should be some sort of relative positioning that is outside of the box model flow that doesn't preserve normal flow spacing that would handle cases like this, but I'm not finding it amid the many drafts of the many revisions of CSS and certainly not among the cargo cult of Google search results.
By request, this is my current non-working CSS at the state of my last experiment:
.itemDiv {
display: inline;
vertical-align: middle;
}
.itemDiv > img {
margin: 10px 10px 10px 30px;
vertical-align: middle;
height: 48px;
width: 48px;
/* border: 1px solid red; */
}
.itemBodyDiv {
display: inline;
vertical-align: middle;
}
.itemDiv span:nth-child(1) {
font-size: small;
clear:left;
vertical-align: top;
color: green;
}
.itemDiv span:nth-child(2) {
font-size: x-large;
vertical-align: middle;
color: white;
}
.itemDiv span:nth-child(3) {
font-size: smaller;
vertical-align: bottom;
color: gray;
}
Any suggestions?
You should wrap the entire scrolling message in a a div with its position set to relative. That way, you're free to absolutely position elements inside of the message absolutely while not breaking the marquee behavior:
.message
{
position: relative;
}
.upper-box
{
position: absolute;
top: 5px;
left: 10px;
}
.lower-box
{
position: absolute;
bottom: 5px;
left: 10px;
}