I am pretty new to CSS borders, and i have run into some issues i don't seem to be able to fix. As im new to this, and there is propably many other wondering the same thing (of css newbies). I have this border that should work fine, according to my thinking (might be full of wrong-ish logic). The code i use for the hover and default state is:
.profile-box .opener {
float:left;
background: url(http://seek4fitness.net/Design/Gfx/DropDowns/white.on.red/icn_small_black_arrow_down.gif) no-repeat;
background-position: center center;
background-color: #fff;
width:32px;
height:38px;
overflow:hidden;
text-indent:-9999px;
border-left:1px solid #dde2e8;
}
.profile-box .opener:hover {
float:left;
background: url(http://seek4fitness.net/Design/Gfx/DropDowns/white.on.red/icn_small_black_arrow_down.gif) no-repeat;
background-position: center center;
background-color: #F0F0F0;
width:32px;
height:38px;
overflow:hidden;
text-indent:-9999px;
border-left:1px solid #dde2e8;
}
The issue do not appear to me in any way, and im as said twice, new to css. Please help me with this. It will mean a lot to me. Thanks.
FIDDLE: http://jsfiddle.net/dCe3u/
If you want to apply border to all the four sides you should change
border-left:1px solid #dde2e8;
to
border:1px solid #dde2e8;
FIDDLE HERE
border-left will apply border only to the left side, You can refer more on border here CSS BORDER >>
I just checked your code. I literally copy and paste your code and the border does appear, I think the problem is the color of the border is too light (if you use white background). See the demo http://codepen.io/ImBobby/pen/yicCz. In that demo I intentionally change the border color to red.
I also notice that you declared same style on hover state of .opener element except for the background-color. You might want to change your code into this:
.opener {
float: left;
background: url(http://seek4fitness.net/Design/Gfx/DropDowns/white.on.red/icn_small_black_arrow_down.gif) no-repeat;
background-position: center center;
background-color: #fff;
...
}
.opener:hover {
background-color: #F0F0F0;
}
short explanation, .opener:hover will inherit styles from opener.
Related
I have the following code:
CSS:
<style>
div.testy {
border:1px solid black;
}
div.testy:hover {
background-color:red;
}
</style>
HTML:
<div class="testy" style="height:100px;
background: url('down.png') no-repeat; background-size:contain;">
aa
</div>
'down.png' is an image with a transparent background. What I wanted to do was have the color of the background change while still keeping the image in front of the color.
The previous code does almost everything right, except that when I hover the mouse over the div, nothing happens.
QUESTION: Why might it be that the hovering and the background color change are not working?
Here is a jsfiddle link with the problem happening:
https://jsfiddle.net/sdsze2fv/
The problem is that you are using background: for the "background image". Differentiate background image and background color by using background-color and background-image respectively.
div.testy {
border:1px solid black;
}
div.testy:hover {
background-color:red;
}
<div class="testy" style="height:100px;
background-image: url('http://www.w3schools.com/html/html5.gif');
background-size:contain;">
aa
</div>
This happens because you already defined your background inline in your html.
Inline styles always override styles set in a css file unless you have added !important to the style.
I recommend that you only set background-image in your inline style and then background-color in your rule in the CSS-file.
div.testy {
border:1px solid black;
}
div.testy:hover {
background-color:red;
}
<div class="testy" style="height:100px;
background-image: url('down.png'); background-repeat: no-repeat; background-size:contain;">
aa
</div>
The background you are setting inline is overriding the one in the css rule. Inline styles always override anything (except stuff with !important). If you remove the inline and put it in a rule, it will work. Or another method is included in this
JSFIDDLE
in this we are saying 'hey, i want the bkgrnd image to be this'...not the background...because background includes everything from image, color, repeat etc. Its the shorthand. So you are technically setting the bkgrnd color there too...which is why its over riding your hover.
Here is the other option...remove from inline and put it into the rule...as is....then it also works
JSFIDDLE2
div.testy {
border:1px solid black;
height: 100px;
font-size: 25px;
color: orange;
background: url('https://upload.wikimedia.org/wikipedia/commons/3/3a/Gluecksklee_(transparent_background)2.png') no-repeat;
background-size: contain;
}
div.testy:hover {
background-color:red;
}
I am trying to use the attached image as border of the div but failed.
My code is
<div class="menu-box-wrapper">
</div>
CSS
.menu-box-wrapper{
border-image:url(../images/about-text-bg-box.png) 30 repeat stretch;
height:100px;
width:100px;
}
Demo : http://jsfiddle.net/squidraj/gunj1nxj/1/
I got it to work:
.menu-box-wrapper{
border: 20px solid transparent;
border-image: url(http://s30.postimg.org/w2z6ws0h9/about_text_bg_box.png?noCache=1431183351) 7 repeat stretch;
padding: 15px;
height:200px;
width:400px;
background:#000;
}
h1{
color:#fff;
}
https://jsfiddle.net/Danthejsman/gunj1nxj/4/
Apparently It will only stretch if you do 7 or under, which is half of the image. Of course, I don't know for sure. Change the border width for a bigger image
Instead of using 'repeat' in your css, alter your border-image-slice value in you css code. Not sure what your desired outcome is, but if you alter your code as shown below and play with the values, you should be able to achieve what you are after. Your current code only places the border images at each corner.
.menu-box-wrapper{
border: 5px solid transparent;
border-image:url(../images/about-text-bg-box.png) 30% stretch;
background:#ccc;
}
I have a simple HTML page with background image, and now I'm applying a contact form on this HTML page.
I want to show the background image in the text input field i.e, I want to make input text field transparent. I have use CSS code background-color:transparent;, but it doesn't work. I am getting a white background for input text field.
try this
.contact
{
background: url(https://www.gravatar.com/avatar/ba03773d5fe4b970a7d7fb57a112e932?s=32&d=identicon&r=PG) no-repeat right center;
height:100px;
width:200px;
padding:10px;
}
.contact input[type="text"]
{
background:rgba(0,0,0,0);
border:1px solid #fff;
color:#fff;
}
http://jsfiddle.net/2ZmFA/
This is working on Fiddle:
input[type="text"]
{
background: transparent;
}
and withour border if you want by border: none;
Here is the Fiddle
So your problem must be at another place in code. Add more code and i will update my answer ;)
<input type="text" class="textInput"/>
CSS :
.textInput {
background: transparent;
background-image: url(Images/textBg.jpg)
}
You could set the background color to transparent.
background-color: rbga(0,0,0,0);
alternatively in css3 you may set the opacity of the whole element:
opacity: 0;
I have an HTML / CSS project on JS Fiddle with several issues jsfiddle ZyBZT.
The <DIV class"footer"> is not showing up at the bottom.
The background image does not display: url('http://i.imgur.com/z5vCh.png')
The Sprite Images are not showing up in the <UL> list.
Originally, the Sprites were working, and nothing I had added has changed any of the Sprite CSS code, which is as follows:
#nav {
list-style-type:none; /* removes the bullet from the list */
margin:20 auto;
text-shadow:4px 4px 8px #696969; /* creates a drop shadow on text in non-IE browsers */
white-space:nowrap; /* ensures text stays on one line */
width:600px; /* Allows links to take up proper height */
}
#nav li {
display: inline-block;
text-align: center;
width: 192px;
}
#nav a {
background: url('http://i.imgur.com/Sp7jc.gif') 0 -100px no-repeat;
display: block;
height: 50px; /* This allowed the buttons to be full height */
color: Blue;
}
#nav a:hover {
background-position: 0 -50px;
color:Red;
}
#nav .active, a:hover {
background-position: 0 0;
color: Black;
}
#nav .active:hover {
background-position: 0 0;
color: Black;
}
#nav span {
position:relative;
text-align: center;
vertical-align: middle; /* This doesn't seem to work (???) */
}
Sometimes, the background image works, but other times it does not.
Lately, I have been trying to get this FOOTER div to work, and now it appears that much more of it is messed up.
How am I supposed to be able to tell when one piece of CSS breaks another piece of CSS? How do I tell when something tries to execute the CSS and there is an error?
The best you can to is to
Use Firebug or the browser developer tools of your choice to see what classes/styles the browser is applying, and the effects, and
Study the HTML standards to make sure you're coding them correctly; keep in mind that they are often counter-intuitive. MDN has some excellent articles on HTML layout, vertical alignment and many other HTML/CSS/Javascript topics.
Fixed the footer problem easy enough:
div.footer {
bottom:0px;
position:fixed;
text-align:center;
}
However, this does NOT answer the main question: How to Troubleshoot!
Best tool I've found for this is Firebug, it's still better than Chrome's tools. When you inspect an element it will show you the hierarchy of applied styles and those styles that have been overridden. (with strikethrough)
This is your best tool to see what is happening.
I think you're having z-index issues and the text-shadow is causing issues.
Removed the z-index:-1 and the text-shadow and the background behaves.
I'm maintaining the Perl Beginners' Site and used a modified template from Open Source Web Designs. Now, the problem is that I still have an undesired artifact: a gray line on the left side of the main frame, to the left of the navigation menu. Here's an image highlighting the undesired effect.
How can I fix the CSS to remedy this problem?
It's the background-image on the body showing through. Quick fix (edit style.css or add elsewhere):
#page-container
{
background-color: white;
}
That is an image. (see it here: http://perl-begin.org/images/background.gif) It's set in the BODY class of your stylesheet.
The grey line is supposed to be there. The reason why it looks odd is because the very top is hidden by the buffer element. Remove the background-color rule from this ruleset:
.buffer {
float: left; width: 160px; height: 20px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);
}
I think it's this:
#page-container {
border-left: solid 1px rgb(150,150,150); border-right: solid 1px rgb(150,150,150);
}
However, I'm not seeing why the right border isn't showing up....
I found the problem.
The problem is that you need to set a white background on #page-container. As things stand, it has a transparent background, so the 5pt left margin on navbar-sidebanner is revealing the bg of the page_container ... so change that bg and you're cool.
I would do a quick fix on this to add the style:
border-left:2px solid #BDBDBD;
to the .buffer class
.buffer {style.css (line 328)
background-color:#FFFFFF;
border-left:2px solid #BDBDBD; /* Grey border */
float:left;
height:20px;
margin:0px;
padding:0px;
width:160px;
}
Thanks to all the people who answered. The problem was indeed the transparency of the #page-container and the background image of the body. I fixed them both in the stylesheet.