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.
Related
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.
Would there be any way of making the bars under the words automatically size out to the width of the word it's under with out me having to upload specific sized bars for ever menu item I make? Thanks
Looks like it could just be a border-bottom of a link. Here's a JSFiddle.
Portfolio
Blog
And
#footer a {
border-bottom: 1px solid white;
}
You should use borders:
.menu a {
/* additional styling... */
border-bottom: 1px solid #FFF;
}
Also you could use background images positioned at the bottom of each menu item.
.menu a{
background:url(path/to/image.jpg) repeat-x bottom;
}
It's just a standard HTML 'hr' tag but the line is displaying with an odd extra pixel. My only CSS is:
hr {margin:0%;line-height: 100%;}
Apparently I don't have enough rep to include images of the issue, so you'll have to go off my description.
Use the height property instead of the line-height property and that should fix your issue. Here's some additional information on styling hr tags. Cross-Browser hr Styling
It's in the comments now, but here's the fix that worked for him.
hr { border:none; border-top:1px #CCCCCC solid; height: 1px; }
The HR uses a shadow on it in most browsers. You should override the style using css or something like:
<hr noshade size="1" />
Update:
noshade is deprecated... See http://www.electrictoolbox.com/style-html-hr-tag-css/
Css Solution:
hr {
border: none;
background-color: #000;
color: #000;
height: 1px;
}
Cross-browser solution with CSS:
hr { height: 1px; background-color: #000; border: 0 none; }
How I change the thickness of my <hr> tag
jsFiddle:
http://jsfiddle.net/6nXaN/
An hr tag is just rendered as a 1px tall empty element with a border style of inset (change the height of the hr a few pixels to see what I mean). The extra pixel comes on the left due the way the inset border is rendered. If you add:
hr { border-left: none; }
...then you can maintain the inset look of the default hr without the extra pixel. Making the border-style solid, or making it a black background colour may make your hr too dark. I prefer the subtlety of the above approach.
Please excuse if this is a fairly basic question. I've trawled through Google and elsewhere, and haven't found a solution that works for me.
I am generating an image gallery with the following markup.
<div class="gallery">
<a class="galleryimg">
<img>
</a>
....
</div>
The .galleryimg is repeated, based on the number of images in the gallery. It is alse floated left.
I want to create a :hover effect that outlines the selected image. I've tried using border (messes up the layout), outline (which sounds perfect in principle), and inset box shadow (which is rendered below the image).
Outline is very close to what I want to achieve. But the right and bottom outline is obscured by adjacent images floating above it.
So my question: how can I create an on hover border/outline effect on a gallery of linked images?
I'd really appreciate any ideas as to how others have tackled this. Thanks!!
EDIT
The images are abutting, with no white space between.
HI you can used simply used css Tricks as like this
css
#example-one a img, #example-one a { border: none; overflow: hidden; float: left; }
#example-one a:hover { border: 3px solid black; }
#example-one a img{width:100px;height:50px;}
#example-one a:hover img { margin: -3px;}
Live demo http://jsfiddle.net/rohitazad/QkT7d/3/
more about this click here http://css-tricks.com/examples/InnerBorderImages/#
Check this out:
http://jsfiddle.net/hMNZE/
Might be the desired effect. You will experience slight changes to the image as it makes itself smaller to allow for the border. but do let me know. This is only a quick fix.
---EDIT---
http://jsfiddle.net/hMNZE/2/
is a second version using negative margin, this looks okay but the images overlap a little.
Check out link: http://css-tricks.com/examples/InnerBorderImages/
---EDIT2---
http://jsfiddle.net/hMNZE/3/ is the best
---EDIT3---
.gallery {
width:100%;
height:100%;
padding:10px;
}
.galleryimg {
float:left
}
.galleryimg img {
z-index:-10;
}
.galleryimg img:hover {
margin:-2px;
border:2px solid blue;
z-index:9999;
}
if you use box-sizing property (supported since IE8) you could add the border on :hover without messing up the layout
.galleryimg {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width : 100px;
float : left;
}
.galleryimg:hover {
border : 3px gray solid;
}
see http://paulirish.com/2012/box-sizing-border-box-ftw/ for more info on this property
http://jsfiddle.net/Vvr7C/
The trick is to add the padding on .gallery so you'll see the outline also on the images that are on the edge od the gallery:
.gallery {padding:2px}
.galleryimg:hover img {outline: red solid 2px}
If you are using box-shadow & it's come below the other image then write like this:
.gallery img:hover{
padding:0;
box-shaow:0 0 0 2px red;
z-index:1;
}
.gallery img{position:relative;}
If your question was answered above, great. If not, it sounds like you might need some margin between the images and other objects around. You said it was obscured. It might just need 2px or so worth of margin to unobscure it.
hi you can do this thing easily via CSS3 *box-shadow* property:-
box-shadow: inset 0px 0px 0px 3px rgba(000,000,000,0.9);
see the demo for better understanding :- http://jsbin.com/upedel/5/edit
UPDATED ANWSER
Please see the updated demo:- http://jsbin.com/upedel/10/edit
Right now we have a web page with a bunch of link sections on one page. Each section has a header like so:
This header background is actually two images. The first is just a rectangle and the second has the slanted side on it. As I was looking at this solution, I was wondering if I could solve this with CSS instead of images. While I am not a CSS guru, I did look at a number of examples and was able to get something similar working. However, when I attempt to put text on top of the background, it ends up above the color instead of inside it. The CSS I have also has a fixed size, which is less than idea. I would rather specify a percentage of the available area and have it fill in the color.
Here is the code I've been working with:
<STYLE type="text/css">
.mini_banner
{
display:inline;
border-bottom:30px solid blue;
border-left:0px solid transparent;
border-right:30px solid transparent;
}
</STYLE>
I wanted to apply this to a cell in a table. I also don't want to break compatibility with modern browsers. My "customers" (mostly internal people) are going to be primarily on IE8 or later but I don't want to limit myself if I can help it.
So first, is this possible? Second, how would I accomplish this? And third, is there a way to make it relative in scale instead of fixed?
I would say that you'll have less headaches all the way around if you revert to using a single background image - in this case, a white image with the notch cut out (a PNG-24 with alpha transparency). Make it bigger than you think you need by about 200%, then do something like this:
.minibanner {
background: blue url(..images/notch.png) no-repeat middle right;
font-size: 1.5em;
}
The reason is that relying on border sizes may result in some whackiness across browsers, and it will definitely look weird if any element runs to two lines.
If you make the notch image 200-300% larger, but vertically align it in the middle of the background, and you do increase the font-size, the box will grow, but your white notch will grow right along with it.
UPDATE:
The only other way I can see pulling this off is to add a non-semantic element, such as a or something similar, after your text:
<div>
<p>Hello text</p>
<span></span>
</div>
Then in your CSS:
p {
background: blue;
color: white;
float: left;
padding: 0 20px;
height: 50px;
margin:0;
line-height: 50px;
}
span {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 0px solid transparent;
display: inline-block;
border-left: 50px solid blue;
}
See this JSFiddle.
The shape is based on this tutorial on CSS triangles. Now, I've only tried this on a webkit based browser, and it works. You will have to adjust the heights every time you want to change font size, so that is a drawback.
I made it work without an extra span: jsFiddle
.mini_banner
{
width:18em; height:1.5em;
color:white; font-weight:bold; padding-left:0.5em;
margin-bottom:.5em;
}
.mini_banner:before {
display:inline-block; content:''; overflow:hidden;
width:17em; height:0;
margin-bottom:-1.5em; margin-left:-.5em;
border-bottom:1.5em solid blue;
border-right:1.5em solid transparent;
}
Tested in FF, Safari, Opera and IE. (Works in IE8, but not in IE7)