I have unordered list of thumbnail images to display horizontally across bottom of page. I want a few of the images to be visible while the others are scrolled horizontally in/out upon scrollbar use.
However I can't get my images to line up in one continuous line - they break up at the 100% width mark.
This may be an issue with my css rather than with jscrollpane.
Demonstration here: http://www.air.desensdesigns.com/temp.html
CSS:
#thumbnails{
position:fixed;
top:86%;
left:0px;
height:125px;
width:100%;
background:rgba(0,0,0,.6);
}
#thumbnails ul{
position:relative;
top:5px;
}
#thumbnails li{
list-style:none;
float:left;
margin:5px;
padding:0px;
height:100px;
width:133px;
border:2px solid #333;
}
JS:
$(function() {
$thumbnails.jScrollPane({});
});
Add a width to ul:
#thumbnails ul {
position: relative;
top: 5px;
width: 5000px;
}
UPDATE
Try add this:
.jspHorizontalBar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 52px;
background: red;
}
My Test:
Related
I have a problem on responsive view. How to make the left and right arrow as responsive. Below attach screenshot for responsive devices
Website view
Mobile View
.carousel-control span {
position: absolute;
top: 85%;
color: #C21B17;
z-index:999px;
font-size:30px;
}
.carousel-control.left {
margin-left: -40px;
width:30px;
height:60px;
background:none;
}
.carousel-control.right {
margin-right: -20px;
width:30px;
height:60px;
background:none;
}
you can just set the carousel controls to auto on width and height or use percentages to make sure it fills a certain amount of the page. For example let's say you want the controls to take up 20% of the page each and height doesn't matter too much. Then do the following.
.carousel-control.left {
margin-left: -40px;
width:20%;
height: auto;
background:none;
}
.carousel-control.right {
margin-right: -20px;
width:20%;
height: auto;
background:none;
}
I've been struggling for hours to try and get this simple border to appear on top of a div of a set height, but it's just not happening. I've checked out z-indexing and ':after', but nothing seems to be working.
The content's parent is: (establishes the content to be in the middle of the page)
#content {
position: relative;
margin-left:auto;
margin-right:auto;
top: 50px;
width:800px;
}
The content is then filled by the div-class "greycontent":
.greycontent {
position: relative;
z-index: 1;
height: 350px;
background: url(images/stacked_circles.png) repeat;
}
The area that is now covered by the background URL attempts to contain a border (away from edges):
.fill {
position:relative;
z-index: 2;
border-style: solid;
border-width: 2px;
border-color: red;
}
It just won't work. If my description was unclear, this image should clear up what I'm trying to convey:
Thank you!
JsFiddle
Just in case you do not want to put a ::before or ::after elements, you can simply use the background-clip property.
.myDiv {
background-clip: padding-box;
}
Exemple: https://codepen.io/geekschool/pen/JBdpdj
Is this what your trying to achieve? jsFiddle
#content {
position: relative;
margin: 0 auto;
top: 50px;
width:800px;
overflow:hidden;
background:#ccc;
width:800px;
}
.greycontent {
position: relative;
z-index: 1;
height: 350px;
width:350px;
border:1px solid #fff;
background:#ccc;
margin:0 auto 60px;
}
Updated your jsFiddle.
I have turned to this guide to solve my problem of vertically centering my text within the div. And I believe to understand what it says, but it still doesn't work.
.number {
position: relative;
height:50px;
margin: -25px 0 0 0;
top: 50%;
background-color: #00ff00;
}
Here is the fiddle, which recreates the problem. I want the green area (.number) to be centered vertically within the button (.numberElement)
Where is my problem? I reckon jQuery Mobile is complicating things and creating structures I am not foreseeing...
Thank you!
Sandro
You need to make some changes to your css like so:
.numberElement {
position: absolute;
width:30%;
height:200px;
margin:0px;
display:table;
}
.numberElement .ui-btn-inner {
display:table-cell;
vertical-align:middle;
}
Working Demo
Your top property of .number is not working fine, as i can see in your fiddle. Try changing it from top to margin-top. It will center around margin-top:60px;
Also dont forget to remove the line in .number
margin: -25px 0 0 0;
here is the correct answer as i think
.numberElement {
position: absolute;
width:30%;
height:200px;
margin:0px;
}
.number {
position: relative;
height:50px;
margin: 50px 0;
line-height:50px;
top: 50%;
background-color: #00ff00;
}
#grid {
position:absolute;
padding:0px;
margin:0px;
border:solid 1px #ff0000;
height:400px;
width:400px;
}
I am trying to keep an image attached to the bottom-left of my page, but unlike How to keep background image on bottom left even scrolling, I do not want the image to follow the user as they scroll.
I have a feeling it has something to do with making #wrap fill up the entire window, but I can't seem to figure out how.
I am using normalize, with this code appended to the style sheet:
body {
background-image:url('/img/graph-paper3.png');
background-repeat:repeat;
}
#container {
width:960px;
margin:0 auto;
}
#sidebar {
float:left;
width:310px;
padding:10px;
}
#main {
float:right;
width:610px;
padding:0 10px 10px 10px;
margin-top: 40px;
background-image:url('/img/top.png');
background-repeat:no-repeat;
background-position:top center;
}
#paper {
margin:40px 0 147px 0;
padding:20px;
background-color:#ffffff;
min-height:400px;
}
#footer {
clear:both;
padding:5px 10px;
}
#footer p {
margin:0;
}
#wrap {
background-image:url('/img/jeremy-david.png');
background-repeat:no-repeat;
background-position:left bottom;
}
You can see the code in action here: http://www.jeremydavid.com.
How about:
.bottom-image{
position: absolute;
bottom: 0px;
left: 0px;
}
This will position the image absolutely to the page. (Make sure it isn't a child of another absolute or relative or fixed positioned element).
Use
.bottom-image {
max-width: //some %
z-index: -100;
position: fixed;
bottom: 0px;
left: 0px;
}
You can also use
#wrap{ //your main #wrap container
background: url('/img/jeremy-david.png') no-repeat bottom left;
}
Is there a simple way to style element like this?
Supposed to be used on a mobile so CSS3 is fully available. Can't think of a simple way. Images are out of question.
It has to be this blocky and there supposed to be a text within (this is a blocky 8-bit button)
This jumps off of feeela's beginnings, but it's different enough to warrant its own answer.
Rather than putting a colored block overly, it only adds red-colored elements, allowing background to show through. HOWEVER, to calculate it properly (so that they're square corners!) I had to set a fixed width height. There's probably some sort of wacky way to do this with percentages, but for proof of concept it was too headachey to contemplate. Since the requirement is for fixed height variable width, this should work.
The pseudo-elements need to have content or they will "collapse". The content can be empty, but that property needs to be set.
CSS:
/* main button block */
.button {
display:inline-block;
background: #f00;
position: relative;
line-height: 60px;
text-align: center;
padding: 0 20px;
height: 60px;
margin-left: 0.5em;
}
/* common background color to all */
.button, .button::before, .button::after {
background-color: #f00;
}
/* shared styles to make left and right lines */
.button::before, .button::after {
content: "";
position: absolute;
height: 50px;
width: 5px;
top: 5px;
}
/* pull the left 'line' out to the left */
.button::before {
left: -5px;
}
/* pull the right 'line' out to the right */
.button::after {
right: -5px;
}
Fiddle: http://jsfiddle.net/3R9c5/2/
How about this?
HTML:
<div class="block">(text goes here)</div>
CSS:
body {background:#1990D7;}
.block {background:#FF1200; line-height:52px; margin:8px auto; width:359px;
position:relative; text-align:center; font-weight:bold; color:yellow}
.block::before {display:inline-block; background:#FF1200; content:'';
position:absolute; top:4px; left:-4px; bottom:4px; width:4px;}
.block::after {display:inline-block; background:#FF1200; content:'';
position:absolute; top:4px; right:-4px; bottom:4px; width:4px;}
Edit: updated after the latest insights into the demands of the question.
You can insert each of that four blocky-corners by appending pseudo elements via ::before or ::after.
e.g.:
.button {
background: #f00;
position: relative;
}
/* corner top left */
.button::after {
position: absolute;
top: 0; left: 0;
width: 5px; height: 5px;
background: #00f;
}
/* corner top right */
.button::after {
position: absolute;
top: 0; right: 0;
width: 5px; height: 5px;
background: #00f;
}
/* corner bottom left */
/* … */
The CSS border-radius attribute
maybe this will help you. Or you can just add new class, "cadre" for example
.cadre
{
border-radius: 10px;
}
to your css file, then affect it to the div.
I don't think border-radius can accomplish that. This is the simplest way I can think of:
http://jsfiddle.net/DpLdt/
CSS:
body {
background:blue;
}
div#clipcorners {
width:500px;
height:200px;
background:red;
position:relative;
margin:100px auto;
}
span#a,span#b {
position:absolute;
width:10px;
height:180px;
top:10px;
background:red;
}
span#a {
left:-10px;
}
span#b {
right:-10px;
}
HTML:
<div id="clipcorners">
<span id="a">
</span>
<span id="b">
</span>
</div>