I have still having some CSS trouble with this and I cannot seem to fix it.
I just made a test page here to see if anyone can help:
The html:
<div class="menu_background">
<div class="menu">This is my menu</div>
</div>
The CSS:
body {
background-color: #FFC;
margin:0;
padding:0
}
.menu_background {
background:url(images/headline.jpg) repeat-x;
}
.menu {
width:60em;
margin:0 2em;
border:solid 1px #F00;
color:#FFF
}
The problem: there is a weird overlapping happening when you shorten the browser window, making it smaller than 60em.
You can look at the test page and here are two screenshots:
1. This is when the browser is full size:
This is when i shorten the browser window and scroll right:
The best way is to look at my test page and see for yourself.
.menu_background
{
min-width:56em
}
to avoid that put the background in your menu directly
.menu {
background:url(images/headline.jpg) repeat-x;
width:60em;
margin:0 2em;
border:solid 1px #F00;
color:#FFF
}
(review)
to have background 100%
.menu_background {
background:url(http://phpblog.inutritie.ro/images/headline.jpg) repeat-x;
min-width: 64em;
}
I have tested in Chrome, Mozilla and IE (latest versions). It seems it's only happening in IE.
How about:
.menu_background {
position:relative;
}
and
.menu {
position:absolute;
}
Related
I've seen several similar questions/answers to this problem on SO but none of the answers that I've checked have helped me.
I'm attempting to have a "Side-Bar" extend from 10px less than the top of the page, all the way to the bottom.
However (when using height:100%), the "Side-Bar" only reaches to the bottom of the loaded browser window, if there is content past the browser window that you scroll down to, the "Side-Bar" ends prematurely.
Basically, its height is only 100% of the browser window, I desire it to be 100% of the full page content.
I've created a JSFiddle that shows my problem:
http://jsfiddle.net/qaEzz/1/
My CSS:
#sidebar {
position:absolute;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
i put the <div id="sidebar"></div>
into the <div id="content">
and added in the css
#topbar {
width:100%; <--this
height:20px;
background-color: red;
}
and this
#sidebar {
position:absolute;
right:16px; <--! extended to 16 px
width:200px;
height:100%;
overflow:hidden;
margin-top:-10px; <--!
background-color: yellow;
}
#content {
position: absolute;<--! and remove the marging: 10px just add a <br> in the html
width:100%
}
Here is the working Fiddle
If you change position:absolute; to position:fixed;, then it would stick to its position on the right.
For a sidebar that might have a longer length than the browser length itself, instead of the position attribute, use the float attribute.
http://jsfiddle.net/wK2Yh/
#sidebar {
float:right;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
Is there a way to force a fixed element to show up at certain height without using javascript? I have a fixed element that should act as a menu but should only be visible after the first 900px of the site are scrolled down and from that point onward right now it's a simple fixed menu:
#actual-menu{
margin-top:50px;
float: left;
border: 1px solid #ccc;
position: fixed;
left:0;
top:20px;
}
however if I leave "top:20px" then I see it before the 900px are scrolled and if I make it 920px then I never see it. Is there a way to get it to "wait" until the user is there and then move? (with only css preferably)
I don't think you can do it with CSS, but jQuery made it very easy:
$(window).scroll(function(){
if ($(this).scrollTop() > 900) {
$('#divmenu').fadeIn('slow');
} else {
$('#divmenu').fadeOut('slow');
}
});
Maybe if you used absolute?
#actual-menu{
margin-top:50px;
border: 1px solid #ccc;
position: absolute;
left:0;
top:920px;
}
Of course this way it will scroll up instead of pop out, and also top:920px should change accordingly to the parent element... Otherwise I recommend using Javascript.
#Luis, Try this
HTML
<div id="main">
<div id="divmenu"></div>
</div>
CSS
#main{
width:100%;
height:1500px;
background:#CCC;
}
#divmenu{
margin-top:50px;
border: 1px solid #ccc;
position:fixed;
left:0;
background:#000;
width:0px;
height:0px;
}
jQuery
$(window).scroll(function(){
if ($(this).scrollTop() > 900) {
$('#divmenu').fadeIn('slow',function(){$(this).css({'width':'100px', 'height':'100px'});});
} else {
$('#divmenu').fadeOut('slow');
}
});
I have a responsive site I'm working on and when you go below 800px wide the menu becomes fixed at the top with a toggle drop down menu.
What's happening is that the div is extending outside of the HTML and Body area and making add a sideways scrollbar. I'm not sure how to get around this.
Any help would be greatly appreciated!
Here is my code
HTML:
<div class="navMobile">
<div class="menuBox">
<div class="navMobileBtn"><img src="<?php echo get_template_directory_uri(); ?>/img/menuBtn.png" /></div>
<ul class="navMobileBox">
<li><a class="location" href="#">Location</a></li>
<li><a class="building" href="#">Building</a></li>
<li><a class="space" href="#">Space</a></li>
<li><a class="links" href="#">Links</a></li>
<li><a class="contact" href="#">Contact</a></li>
</ul>
</div>
</div>
CSS:
.navMobile {display:block;}
.navMobile {
height:auto;
}
.navMobile .menuBox {
height:auto;
min-height:40px;
width:100%;
display:inline-block;
position:fixed;
top:0;
left:0;
right:0;
background:#fff;
z-index:99999;
}
.navMobile .menuBox ul {
display:block;
clear:both;
height:auto;
width:100%;
padding:0;
margin:0;
border-top:1px solid #eee;
font-family: "proxima-nova";
}
.navMobile .menuBox ul>li {
display:block;
clear:both;
padding:10px 0;
text-align:center;
border-bottom:1px solid #eee;
}
.navMobile .menuBox ul>li a {
padding:0;
margin:0;
text-transform: uppercase;
letter-spacing: 0.2em;
color:#ccc;
font-size: 0.9em;
font-weight:500;
opacity: 1;
}
.navMobile .menuBox ul>li a:hover,.mainnav ul>li a:focus {
text-decoration: none;
}
.navMobile .menuBox ul>li:last-child a {
margin-right: 0;
padding-right: 0;
}
.navMobileBtn {
clear:both;
height:40px;
width:40px;
}
For anyone looking for a solution like I was, here you go:
This issue is caused by the fact that if the main containing element, either body or html depending on the browser*, is not set to a specific width and height its content can grow beyond the bounds of the window causing the base of the document to be larger than the window.
Normally this causes scrollbars, which is expected behavior. However, in the case of fixed elements, it also changes the starting positions for fixed elements by moving the right and bottom values to the position of the main element rather than the edges of the window. This makes the fixed elements scrollable within the window, which is the very opposite of how fixed elements are supposed to behave.
As a side note some browsers use the body element to scroll the content, while others use the html element to scroll the content by default. This needs to be reset to the body for consistent results.
Solution, set the width and height of the html and body element to 100% so that it remains the size of the window. You also need to set standard resets for the margin specifically and for good measure padding and border. Finally setting the overflows to their proper elements guarantees that the browser is using the correct element to scroll the document.
html, body {
position: relative;
margin: 0;
border: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
overflow: auto;
}
Adding this to your reset css should solve the problem in the future.
This is what did it for me anyway. Hope it helps someone else.
try add these into your .css
html {
width: 100%;
height: 100%;
position: relative;
}
body {
width: 100%;
height: 100%;
position: relative;
}
acctually just one of them would probably solve your problem, but i'm not sure wich.. probably body
I want to change the image from normal to brighter when it's on hover, My code:
<div class="nkhome">
<img src="Images/btnhome.png" />
</div>
.nkhome{
margin-left:260px;
top:170px;
position:absolute;
width:59px;
height:59px;
}
.nkhome a img:hover {
background:url(Images/btnhomeh.png);
position:absolute;
top:0px;
}
Why doesn't work the hover? When my mouse is on it, it shows the first image, not the hover image.
You've got an a tag containing an img tag. That's your normal state.
You then add a background-image as your hover state, and it's appearing in the background of your a tag - behind the img tag.
You should probably create a CSS sprite and use background positions, but this should get you started:
<div>
</div>
div a {
width: 59px;
height: 59px;
display: block;
background-image: url('images/btnhome.png');
}
div a:hover {
background-image: url('images/btnhomeh.png);
}
This A List Apart Article from 2004 is still relevant, and will give you some background about sprites, and why it's a good idea to use them instead of two different images. It's a lot better written than anything I could explain to you.
Simply this, no extra div or JavaScript needed, just pure CSS (jsfiddle demo):
HTML
<a href="javascript:alert('Hello!')" class="changesImgOnHover">
<img src="http://dummyimage.com/50x25/00f/ff0.png&text=Hello!" alt="Hello!">
</a>
CSS
.changesImgOnHover {
display: inline-block; /* or just block */
width: 50px;
background: url('http://dummyimage.com/50x25/0f0/f00.png&text=Hello!') no-repeat;
}
.changesImgOnHover:hover img {
visibility: hidden;
}
You're setting the background of the image to another image. Which is fine, but the foreground (SRC attribute of the IMG) still overlays everything else.
.nkhome{
margin-left:260px;
top:170px;
position:absolute;
}
.nkhome a {
background:url(Images/btnhome.png);
display:block; /* Necessary, since A is not a block element */
width:59px;
height:59px;
}
.nkhome a:hover {
background:url(Images/btnhomeh.png);
}
<div class="nkhome">
</div>
It will not work like this, put both images as background images:
.bg-img {
background:url(images/yourImg.jpg) no-repeat 0 0;
}
.bg-img:hover {
background:url(images/yourImg-1.jpg) no-repeat 0 0;
}
Hi you should give parent position relative and child absolute and give to height or width to absolute class as like this
Css
.nkhome{
margin-left:260px;
width:59px;
height:59px;
margin-top:170px;
position:relative;
z-index:0;
}
.nkhome a:hover img{
opacity:0.0;
}
.nkhome a:hover{
background:url('http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg');
width:100px;
height:100px;
position:absolute;
top:0;
z-index:1;
}
HTML
<div class="nkhome">
<img src="http://dummyimage.com/100/000/fff.jpg" />
</div>
Live demo http://jsfiddle.net/t5FEX/7/
or this
<div class="nkhome">
<a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" onmouseover="this.src='http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg'"
onmouseout="this.src='http://dummyimage.com/100/000/fff.jpg'"
/></a>
</div>
Live demo http://jsfiddle.net/t5FEX/9/
Here are some easy to folow steps and a great on hover tutorial its the examples that you can "play" with and test live.
http://fivera.net/simple-cool-live-examples-image-hover-css-effect/
Exact solution to your problem
You can change the image on hover by using content:url("YOUR-IMAGE-PATH");
For image hover use below line in your css:
img:hover
and to change the image on hover using the below config inside img:hover:
img:hover{
content:url("https://www.planwallpaper.com/static/images/9-credit-1.jpg");
}
Make on class with this. And make 2 different images with the self width and height. Works in ie9.
See this link.
http://kyleschaeffer.com/development/pure-css-image-hover/
Also you can 2 differents images make and place in the self class name with in the hover the another images.
See example.
.myButtonLink {
margin-top: -5px;
display: block;
width: 45px;
height: 39px;
background: url('images/home1.png') bottom;
text-indent: -99999px;
margin-left:-17px;
margin-right:-17px;
margin-bottom: -5px;
border-radius: 3px;
-webkit-border-radius: 3px;
}
.myButtonLink:hover {
margin-top: -5px;
display: block;
width: 45px;
height: 39px;
background: url('images/home2.png') bottom;
text-indent: -99999px;
margin-left:-17px;
margin-right:-17px;
margin-bottom: -20x;
border-radius: 3px;
-webkit-border-radius: 3px;
}
I'm new to CSS and was wondering if there was any way to stop the text selection color going into the 'gutter' (I think that's the term?) like here:
I know it's something pretty trivial but I've noticed that none of the professional (online) websites that use a gap between columns have this problem.
If you float the column, it doesn't experience this issue.
So one solution seems to be floating both columns, but then I'm left with the issue of making a gap between the columns and the footer (I'd have to specify how much margin-top (no. of pixels from the header) I want for it, which isn't very dynamic).
Does anyone have any ideas?
Here is the current CSS code for it:
.box /*this is applied to all the divs*/
{
border: 1px black dotted;
padding:3px;
}
body
{
width: 850px;
margin: 0 auto;
}
#panel0
{
background-color: blue;
}
#panel1
{
background-color:red;
width: 400px;
float:right;
}
#panel2
{
background-color:brown;
width:400px;
}
#panel3
{
background-color:yellow;
clear: right;
}
Try this:
#panel2
{
background-color:brown;
width:400px;
overflow: hidden;
}
That should do it.