It's not visible everywhere, just on some devices. Literally a huge white field below footer. Another person has shown it to me, it's not visible even on my PC.
Here's a visualisation of what I am talking about: nikosis.mzonespace.co.uk/108.jpg
Here's a CSS code:
Footer
//=======================================================================*/
#footer {
position: relative;
}
#footer .widget{
margin: 0;
}
#footer .ft-bg{
background: url("../images/icons/bg-slider-matt-1.png") repeat-x top center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
#footer .ft-bg.style2{
background: url("../images/icons/bg-footer-style2.png") repeat;
top: 100px;
bottom: 80px;
opacity: 0.2;
}
#footer .ft-img{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
#footer .ft-img img{
width: 100%;
max-width: none;
height: auto;
}
#footer a{
color:#efefef;
}
#footer h3 span{
text-transform: uppercase;
font-size: 24px;
font-weight: 300;
color: #464646;
}
#footer-wrapper{
color: #464646;;
padding:163px 0 0;
width: 100%;
max-width: 1170px;
margin: 0 auto;
font-size: 13px;
font-weight: 400;
position: relative;
}
.footer-top{
background:url("../images/icons/bg-dot.jpg") repeat-x ;
/*margin-bottom: 150px;*/
}
.style2 .footer-top{
background:none;
/*padding-top:74px;*/
}
.footer-top .span4{
padding-right: 120px;
}
.footer-top .span4:last-child{
padding-right: 0;
}
.footer-bottom{
color: #fff;
font-size: 14px;
font-weight: 300;
padding-bottom: 30px;
padding-top: 25px;
}
.style2 .footer-bottom{
color: #464646;
padding-top: 50px;
}
.footer-bottom .span6:last-child{
text-align: right;
font-size: 15px;
}
#copyright-wrapper {
font-size:12px;
padding: 15px 0;
background-color:#fff;
}
#copyright-wrapper [class*="span"]{
min-height:1px;
}
#copyright-wrapper #secondary-nav ul{
margin:0;
}
#copyright-wrapper #secondary-nav ul li{
line-height:100%;
padding:0 10px;
border-left:1px solid rgba(255, 255, 255, 0.1);
}
#copyright-wrapper #secondary-nav ul li:first-child{
border:none;
}
.scrollTop{
position:fixed;
bottom: 55px;
right:15px;
display:none;
}
.scrollTop a{
text-indent:-9999px;
background: #d3d3d9 url(../images/icons/scroll-top.png) no-repeat center;
width:40px;
height:40px;
display:block;
}
/*=========================================================================
Here's the page: nikosis.mzonespace.co.uk/blog-full-layout/
I have noticed that after the layout collapses for mobile/tablet, the white area appears. The corresponding CSS is called #footer-wrapper.
#footer-wrapper: padding-top:400px;
It should be in a file called responsive.css .. I have removed the padding and the white area disappeared. Also, the footer-wrapper contains some test1 and test2. I don't see any codes or other content loaded in it. So, you might as well remove it from your code. Or even set it to display:none in case you don't know where is it. However, since you are on wordpress, it could be in your template files in footer.php or something similar.
Hope this helps!
Related
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;}
Im trying to apply background color for whole block c_date.. but its not working.. I tried clear, block everything..
Demo
HTML:
<div class="c_date"> <span class="c_day">30</span>
<span class="c_month">Jun</span>
<span class="c_year">2009</span>
<div style="clear:both;"></div>
</div>
CSS:
.c_date {
position: relative;
width: 40px;
color: #999;
margin: -0px 0 0 0;
background:#999 !important;
display:block;
border:1px solid #ccc;
clear:both;
}
.c_day, .c_month, .c_year {
position: absolute;
}
.c_day {
font-size: 14px;
top: 10px;
}
.c_month {
top: 0;
left: 0;
font-size: 11px;
}
.c_year {
top: 9px;
right: 0;
font-size: 9px;
rotation: -90deg !important;
/* ** Hacks ** */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
This is because your c_date div height is 2px (the reason is position:absolute; in your other containers).
So you can fix it by adding height to c_date style or changing position property of child elements in it.
This can actually be done without the need to position:absolute the day and month spans. This will mean that the height of your c_date element is actually relative to the height of the stacked day and month elements.
I took the liberty of fixing up some of the CSS code that didnt need to be there from your demo too :)
HTML
<div class="c_date">
<span class="c_month">Jun</span><br />
<span class="c_day">30</span>
<span class="c_year">2009</span>
</div>
CSS
.c_date {
position: relative;
width: 40px;
color: #999;
margin: 0 0 0 0;
background:#00F !important;
display:block;
border:1px solid #ccc;
font-size:0; /* set to 0 so that <br/> and spaces between <span> dont effect height/spacing */
}
.c_year {
position: absolute;
}
.c_day {
font-size: 14px;
display: inline-block;
line-height: 11px;
padding-bottom: 2px;
text-align:center;
}
.c_month {
font-size: 11px;
display: inline-block;
line-height: 14px;
text-align:center;
}
.c_year {
top: 9px;
right: 0;
font-size: 9px;
/* ** Hacks ** */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
}
DEMO
.c_date {
position: relative;
width: 40px;
color: #999;
margin: -0px 0 0 0;
background-color: #999 !important;
display:block;
border:1px solid #ccc;
clear:both;
height: 30px; //change to your needs
}
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 create image map with css but don't work.
i have a image in background and i want to create a image map for background picture .but when my mouse hover an link background image not change.
this is my html code.
<section id="centersectioncontact" class="colortext">
<ul id="cantact">
<li id="linkin">Link in </li>
<li id="twiter"> twiter</li>
</ul>
</section>
and this is my css code.
#centersectioncontact {
position: absolute;
top: 14%;
left: 31%;
width: 426px;
height: 426px;
bottom: 25%;
right: 25%;
z-index: 2;
}
ul#cantact
{
list-style:none;
background:url(../Images/contact.png) no-repeat 0 0 ;
position:relative;
width:426px;
height:420px;
margin:0;
padding:0;
opacity:0.5;
}
ul#cantact li{
position: absolute;
border: 1px solid #000;
}
}
ul#cantact a{
display: block;
height: 100%;
text-indent: -9000px;
}
#linkin {
width: 215px;
height: 140px;
top: 0px;
left: 0px;
}
#twiter
{
width: 215px;
height: 140px;
top: 0px;
left: 215px;
}
ul#cantact li a:hover {
background:url(../Images/contact.png) no-repeat 0 0;
}
ul#cantact li#linkin a:hover {
background-position: 0 -426px;
}
ul#cantact li#twiter a:hover{
background-position: 0 -426px;}
.colortext{
margin-top: 7px;
margin-left: 16px;
top: 2%;
left: 2%;
color: #FFFFFF;
text-align: left;
font-size: xx-large;
z-index: 10000000;
}
there is a couple of contradictions in your css code. One of these and an extra '}' cause the problem:
from
ul#cantact li{
position: absolute;
border: 1px solid #000;
}
}
delete the extra "}"
and you should remove also:
ul#cantact li#linkin a:hover {
background-position: 0 -426px;
}
ul#cantact li#twiter a:hover{
background-position: 0 -426px;
}
In the code you have already defined background-position as 0 0 in
ul#cantact li a:hover {
background:url(../Images/contact.png) no-repeat 0 0;
}
And besides, with the -426px horizontal setting the img won't reveal on the screen.
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.