I'm so confused, I want to make a sidebar with plugin tinyscrollbar, I want "height" of viewport is '100%' but if i change the css then the content is does not appear, can you give me another solution?
This a default code of tinyscrollbar but I change the 'height' of viewport:
#scrollbar1 {
width: 520px;
margin: 20px 0 10px; }
#scrollbar1 .viewport {
width: 500px;
height: 100%;
overflow: hidden;
position: relative; }
#scrollbar1 .overview {
height:100%;
list-style: none;
position: absolute;
left: 0;
top: 0;
padding: 0;
margin: 0; }
#scrollbar1 .scrollbar{
background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0;
position: relative;
background-position: 0 0;
float: right;
width: 15px;
height:100% }
#scrollbar1 .track {
background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%;
height: 100%;
width:13px;
position: relative;
padding: 0 1px; }
#scrollbar1 .thumb {
background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%;
height: 20px; width: 25px;
cursor: pointer;
overflow: hidden;
position: absolute;
top: 0;
left: -5px; }
#scrollbar1 .thumb .end {
background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0;
overflow: hidden;
height: 5px;
width: 25px; }
#scrollbar1 .disable {
display: none; }
.noSelect {
user-select: none;
-o-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none; }
You can't make it proportional (percent), you'll need a fixed value for it. Use jQuery or something similar to determine the actual height, then use it as a fixed pixel height value. This is the best I can advise. Also, you may need to react on window resizing.
Related
I am having the following error when using
.high-secuity {
position: fixed;
top: 0;
background: #ff782f;
color: #fff;
width: 100%;
border-radius: 0;
margin-bottom: 0;
margin-left: -15px;
}
the issue is that the orange panels goes outside the screen. How can I fix this?Don't want to use fixed widths as it should be responsive
with width: inherit; to the orange block my example is working
body {
background-color: #ccc;
}
.container {
position: relative;
width: 300px;
background-color: #fff;
overflow: hidden;
padding: 50px 15px;
}
.high-secuity {
position: fixed;
top: 0;
background: #ff782f;
color: #fff;
width: inherit;
border-radius: 0;
margin-bottom: 0;
margin-left: -15px;
padding: 15px;
}
<div class="container">
<h1>Osloskolen</h1>
<div class="high-secuity">Your message</div>
</div>
I am on the process in learning css.
I am trying to display the image in the middle of the screen upon user hover their mouse in the gallery.
however, the image hover within the image itself.
this is my code.
jsfiddle.net/y9w5ym72/1/
body {
margin: 0;
padding: 0;
background: #EEE;
font: 10px/13px 'Lucida Sans',sans-serif;
}
.wrap {
overflow: hidden;
margin: 50px;
}
.box {
float: left;
position: relative;
width: 25%;
padding-bottom: 25%;
color: #FFF;
}
.boxInner {
position: absolute;
left: 30px;
right: 30px;
top: 30px;
bottom: 30px;
overflow: hidden;
background: #66F;
}
.boxInner img {
width: 100%;
}
.thumbnail:hover img{
border: 1px solid transparent;
}
.thumbnail span{
position: absolute;
padding: 5px;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
width:70%;
height: auto;
padding: 2px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 230px;
z-index: 50;
}
First point is you need to hide the first image. So that only you can see the second one. Second point is no need position:absolute, left:-1000px; styles for the inside span.
.thumbnail:hover > img{
border: 1px solid transparent;
display:none;
}
.thumbnail span{
/*position: absolute;
left: -1000px;*/
padding: 5px;
visibility: hidden;
color: black;
text-decoration: none;
}
DEMO
you have to use position :absolute to achieve that fiddle
.box:hover{position:absolute; top:38%; left:38%; z-index:200;}
I have seen this, but it does not provide any solution to my programming issues:
Custom cursor to entire page
This is the CSS Markup:
body {
height: 100%; width: 100%; padding: 0; margin: 0;
background: #000 url('http://1hdwallpapers.com/wallpapers/undead_dragon.jpg') no-repeat fixed center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; font-size:12px; font-weight:bold;
cursor: url('http://www.rw-designer.com/cursor-view/21962.png'), auto;
}
div#mask {
cursor: not-allowed;
z-index: 999;
height: 100%;
width: 100%;
}
a:link {
color: #ffffff;
font-weight: normal;
text-decoration: none;
}
a:visited {
color: #ffffff;
font-weight: bold;
text-decoration: line-through;
}
a:active {
color: #F433FF;
font-weight: normal;
text-decoration: blink;
}
a:hover {
color: #F433FF;
font-weight: bold;
text-decoration: blink;
}
#about_me
div.center {
margin-left: auto;
margin-right: auto;
width: 8em;
}
{
width: 355px;
float: right;
margin: 20px 0px 0px 0px;
}
.contentTitle {
color: #fff;
background: #000;
}
.contentModule {
color: #FF00FF;
border: 1px solid transparent;
background: transparent;
cursor: pointer;
}
#right_column {
float: left;
width: 355px;
margin: 20px 0 0 20px;
}
#left_column {
width: 210px;
margin-bottom: 10px;
margin-right: 0px;
float: left;
}
#pet_panel {
position: absolute;
top: 80px;
right: 700px;
margin-top: 50px;
width: 40%; float: left; margin: 0 0 20px 0;
}
#comment_panel {
position: absolute;
top: 700px;
right: 85px;
margin-top: 50px;
}
#tombstone_panel {
position: absolute;
top: 30px;
right: 85px;
margin-top: 50px;
}
#user_panel {
position: absolute;
top: 30px;
right: 385px;
margin-top: 50px;
}
#wishlist_panel {
position: absolute;
top: 250px;
right: 85px;
margin-top: 50px;
}
This is the HTML Markup:
<div id="about_me" class="contentModule">
<div class="contentTitle">About Me</div>
<div class="contentModuleI">my tagline </div>
</div>
What can I do to make my custom cursor visible throughout my page like the default cursor is?
If you need to display custom cursor on full page you have to add CSS like this. Have a look at DEMO.
body, html
{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background: #000 url('http://1hdwallpapers.com/wallpapers/undead_dragon.jpg') no-repeat fixed center;
cursor:url('http://www.rw-designer.com/cursor-view/21962.png'), url('cute25.cur'), help;
}
so here explain how it works; Firefox and chrome are fine with .jpg or .png file extension. But to support in IE need a .cur file extension. You may convert your image into .cur extension. from this online tool.
Note: If you need it work also in IE then you have to use cursor .cur file extension.
I try to have horizontal div to fill all the empty space of a container.
I didn't succeed to make the middle div (.element-description) to fill all empty gap (like in height: auto). (all other div have a defined height)
I tried with display:table, it near works but create some display bug in IE9.
I tried with css calc but it's not cross browser and it didn't solved all the problem.
I really don't know what to do. Maybe it's impossible in css?
css:
.element{
position: absolute;
overflow: hidden;
z-index: 100;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 400px;
height: 500px;
background: grey;
}
.element-back {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.title {
position: relative;
overflow: hidden;
width: 100%;
height: 40px;
border: 1px solid black;
box-sizing: border-box;
line-height: 40px;
}
.element-title-separator {
position: relative;
overflow: hidden;
height: 2px;
width: 100%;
border-bottom: 1px solid rgba(0,0,0,0.05);
-webkit-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.2);
box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.2);
}
.element-image {
position: relative;
overflow: hidden;
min-width: 100%;
height: 14.5%;
opacity: 0.8;
}
.element-image img{
position: absolute;
width: 100%;
height: auto;
margin-top: -30%;
}
.element-description {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto;
}
.element-description > div{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.element.blog .element-description > div > div{
overflow: hidden;
position: absolute;
height:100%;
}
.element-read-more {
position: relative;
overflow: hidden;
min-width: 100%;
min-height: 40px;
}
.element-informations {
position: relative;
overflow: hidden;
min-width: 100%;
min-height: 40px;
}
fiddle without table
fiddle with display table
hope that someone can help me...
Why do you need to set position: absolute to the .element? Can't you set it to relative and use height: auto?
Is this what you're trying?
http://jsfiddle.net/jonigiuro/UuFSg/262/
.element{
position: relative;
overflow: hidden;
z-index: 100;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 400px;
height: auto;
background: grey;
}
The fixed value here must be the header and footer height, and you need to set the top and bottom of your content section whit the same value of footer and header height plus the value of the border-width here (100px + 5px).
I hope it help
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:orange;
}
p {
line-height:1.5;
margin:0 0 1em;
}
.box{
border: 5px solid green;
}
#container{
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
min-width: 60%;
min-height: 400px;
width: 1024px;
height: 100%;
margin-left: auto;
margin-right: auto;
border: none;
bor
}
/** Test html classic page */
#header{
display:block;
overflow: visible;
width: auto;
height: 100px;
margin: 0; padding: 0;
}
#content{
position: absolute;
/** The border over lap so 5px must be add*/
top: 105px; bottom: 105px;
right: 0; left: 0;
}
#footer{
position: absolute;
overflow: visible;
height: 100px;
right: 0; left: 0; bottom: 0;
margin: 0; padding: 0;
}
I am working on a website located here:
http://www.freshhealthybistro.com/temp/
I used a 960 grid, and the css for the 960 was taken from the website:
(google 960 gs because I can only post one hyperlink)
I realize that maybe I should have just avoided using the 960, but anyway... I did use it and unfortunately my website isn't uniform across browsers. The gray table underneath the slideshow (the one on the right hand side) should be extending to be the length of the slideshow so that it isn't shorter and both tables line up to be the same length. Instead, it is shorter on every browser and if I attempt to change the properties from % to px then it is still not uniform. In the firefox browser, even the table that is encasing the slideshow is drastically different than every other browser and looks like the website is broken. Here is my CSS:
#charset "UTF-8";
/* CSS Document */
body {
margin:0;
padding:0;
background-image:url(../images/fgc_bg.png);
color: #FFFFFF;
font-family: arial,sans-serif;
}
h1 {
font-size: 24px;
color: #FFFFFF;
font-family: arial,sans-serif;
line-height: 50px;
}
#container {
position:absolute;
height: 100%;
left: 50%;
width: 1200px;
margin: 0;
margin-left: -600px;
}
#navigation {
position: float;
float: left;
background-image:url(../images/topbar.png);
width: 960px;
height: 50px;
margin-top: -825px;
margin-left: 120px;
}
#footer {
position: float;
float: left;
background-image:url(../images/topbar.png);
text-align: center;
width: 960px;
height: 50px;
margin-top: -25px;
margin-left: 120px;
}
#clearfooter {
position: float;
float: left;
width: 1200px;
height: 50px;
}
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display:inline;
z-index: 1;
float: left;
position: float;
margin-left: 1%;
margin-right: 1%;
}
.grid_1 {
width:6.333%;
}
.grid_2 {
width:14.667%;
}
.grid_3 {
margin-left: 120px;
margin-top: 30px;
width:23.0%;
}
.grid_4 {
width:31.333%;
}
.grid_5 {
width:39.667%;
}
.grid_6 {
width:48.0%;
}
.grid_7 {
margin-top: 30px;
width:50.666%;
}
.grid_8 {
width:64.667%;
}
.grid_9 {
width:73.0%;
}
.grid_10 {
margin-top: 50px;
margin-left: 120px;
width: 940px;
}
.grid_11 {
width:89.667%;
}
.grid_12 {
width:98.0%;
}
#logo {
position: float;
float: left;
background-image:url(../images/logo.png);
z-index: 100;
width: 266px;
height: 266px;
margin-top: -933px;
margin-left: 472px;
}
#content{
position: relative;
float: left;
background-image:url(../images/contentbg.png);
width: 1200px;
height: 800px;
margin: 150px 0 0 0;
z-index: -20;
}
#background {
position: relative;
float: left;
overflow: auto;
background-color:#bf6b31;
width: 100%;
height: 800px;
padding: 0;
margin: 150px 0 0 0;
z-index: -100;
}
#clearfix {
clear: both;
}
I am also having a weird problem with the slideshow. In IE6, the slideshows navigation (the 4 buttons in the bottom right hand corner) is functioning as it should. In every other browser these buttons are not functioning, and unclickable by the visitor. I don't know what the reason for this is, but I am assuming it may have something to do with the z-index. Here is the CSS file for the slideshow:
.featuredbox-wrapper{
display: none;
}
.featuredbox-wrapper,
.featuredbox{
top: 0px;
left: 0px;
width: 940px;
height: 400px;
margin-left:auto;
margin-right:auto;
position: relative;
overflow: hidden;
font-family: Verdana, Tahoma, "Lucida Sans";
font-size: 9pt;
font-weight: normal;
z-index: 10;
}
.featuredbox .description{
bottom: 55px;
left: 5px;
font-size: 16pt;
color: #FFF;
width: 500px;
height: 20px;
position: absolute;
font-style:none;
font-weight:normal;
}
.featuredbox-wrapper .navigation{
bottom:15px;
right:15px;
padding:0px;
position:absolute;
z-index: 100;
height: 20px;
width: 100px;
}
.featuredbox-wrapper .navigation ul{
list-style: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.featuredbox-wrapper .navigation li{
float: left;
height: 20px;
width: 20px;
margin: 0px 5px 0px 0px;
padding: 0px;
background-color: #FF0000;
cursor: pointer; cursor: hand;
background:transparent url(../images/inactive.png) no-repeat scroll 0 0;
}
.featuredbox-wrapper .navigation li.hover{
cursor: pointer; cursor: hand;
}
.featuredbox-wrapper .navigation li.active{
cursor: pointer; cursor: hand;
background:transparent url(../images/active.png) no-repeat scroll 0 0;
}
.featuredbox .box-slide1,
.featuredbox .box-slide2 {
position: absolute;
top: 0px;
left: 0px;
height: 300px;
width: 600px;
z-index: -1;
background: #FFF;
color: #000;
}
Thank you for the assistance. I am still learning CSS and appreciate the help with understanding where I went wrong. Uniformity between browsers is currently my major complaint area.
The main issue is that you chose to use a grid system, but then did not make your slider conform to the size it needed to be to fit the grid. The point of using a grid system is to have the uniform sizing/spacing it provides. So one answer to your dilemma is to downsize your slider images so they fit the grid.