I am adding content to this page: http://rouviere.com/index-new and for some reason there is a faint border around the inset photo in the top section.
Here is the html:
<div class="illustration">
<img class="promo" src="http://www.rouviere.com/_photos/slides_photos.jpg" alt="we package it up" />
</div><!-- end #illustration -->
<div class="headline">
<h2>Photos</h2>
<p id="sub-head">Show the magic of your world with fine photos</p>
</div>
Here is the CSS:
p#sub-head { font-size: 24px; margin: 0 0 10px 35px; color: #000; }
img.promo { float: right; margin-right: 20px; z-index: 0; }
I tried adding border: none; to the image but it didn't make any difference.
I would appreciate any guidance towards a solution.
Thanks.
The border is on the image itself.
This is a legitimate question. Google has multiple pages of people asking this same question. It is a Photoshop bug that has been around since CS3, that adds a faint border to images that are down-sampled.
The solution is to remove the background if the image is down-sampled so that the isolated image is on a transparent background.
Actually, I found an answer that might work for you. Use the following code:
border: 0px solid #cccccc !important;
It made it disappear for me, however, if you use the box-shadow function, you'll still see a border space on the side where the shadow renders.
Hope that helps
Related
I believe this is a pretty basic question for someone who knows CSS language (not my case lol). I'm using this code hosted at jsfiddle to make some speech balloons in my website. The problem came when the message inside the balloon is little. For example, in the code posted above, change the code from "bubble you" balloon to something like:
<div class="bubble you">Hi.</div>
You will see that the balloon stay on the same horizontal line as the previous balloon, and this is ugly and strange. I want the balloons to stay one after another (one below another) even when the message is small like a simple 'Hi'... What properties should I change or add in the balloons classes to get this?
Add clear: both to .bubble.
Demo here:
http://jsfiddle.net/sifriday/mek5Z/1957/
.bubble{
background-color: #F2F2F2;
border-radius: 5px;
box-shadow: 0 0 6px #B2B2B2;
display: inline-block;
padding: 10px 18px;
position: relative;
vertical-align: top;
clear: both
}
I'm currently working on a portfolio project and I have a concept for the header but I am having difficult achieving it.
I want to make the bottom border of my header (and top border of my footer) look like it's a brush stroke. As seen in my photobucket link.
http://i568.photobucket.com/albums/ss130/Lovin_RainyNights/ScreenShot2014-09-29at50243PM.png
I created a border image to use but it's getting hidden in the box model since the headers background color is the same as the border. I changed the background color to black so it can easily be seen
http://i568.photobucket.com/albums/ss130/Lovin_RainyNights/ScreenShot2014-09-29at50110PM.png
So what I would like to know is: Is there a way to get the border image to border the outside, not the inside of the header?
This is the code I have
HTML
<header>
<h1>My Name</h1>
<nav>
<ul>
<li><span id="current">Projects</span></li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
CSS
header{
display: block;
background-color: black;
padding: 5px 10px;
border-bottom: 15px solid transparent;
border-image: url("border.png") 0 0 33 0;
}
h1{
float: left;
}
nav{
text-align: right;
}
nav li{
display: inline;
list-style: none;
}
Any advice would be greatly appreciated, THANKS!
The border-image-outset property specifies the amount by which the border image area extends beyond the border box.
http://www.w3schools.com/cssref/css3_pr_border-image-outset.asp
div {
border-image-source: url(border.png);
border-image-outset: 15px;
}
I believe you should not do it. You can wrap your footer into a bordered-footer and add the border to the borderedfooter. In general, the border is part of a tag. You can set border-image-outset as #bpettijohn pointed out, but I think that would be confusing later when you are already used to the standard meaning of border.
So, im trying my hands on some html/css/js/jquery coding, and having been searching around for answers some days now. Im trying to make a clean website, and was basically wondering how to do this:
What my amazing paint skill are trying to explain is how to do the "border/background" around/behind the content. Not the blue white background but the light grey one. Been trying to use and use css border/width/height etc. But cant seem to get anything to work properly. Like it should scale automatically with a menubar, as seen in the image. Appreciate any input.
Try this:
fiddle: http://jsfiddle.net/CGqa5/1/
CSS
.outer{
width: 200px;
height: 200px;
background: #999999;
border-radius: 10px;
padding: 10px;
}
.inner{
width: 100%;
height: 100%;
background: #ffffff;
}
HTML
<div class="outer">
<div class="inner">
CONTENT
</div>
</div>
Using box-shadow you just need to add one line to your css!
box-shadow: 0px 0px 5px 5px #888888;
Fiddle: http://jsfiddle.net/3vVZQ/
I am trying to create a button with 3 layers of border around it with the middle layer showing the background of the containing div. Examples are worth a thousand words so here you go
http://jsfiddle.net/e5Sxt/2/
html
<div id="content">
<p>Generic Content</p>
<button class="button">Search</button>
</div>
css
#content{
width: 500px;
height: 500px;
background-color: black;
padding: 50px;
color: white;
}
button{
margin-top: 50px;
padding: 20px;
text-align: center;
background-color: #333;
box-shadow: 0 0 0 5px #666, 0 0 0 10px red, 0 0 0 15px #bbb;
border: none;
cursor: pointer;
}
The red box-shadow is where the black of the containing div should come through. If the box-shadow is set to transparent for this layer, the box-shadow under it shows through instead.
I have tried utilizing outlines, borders, and box-shadows to no avail so far. As of right now, I think I will have to wrap the button in another div with the outer border and a padding to show the background, but wanted to see if anyone could do this without adding another html element.
Thanks!
The answer depends on what browsers you need to support (and whether you'd be happy with a fall-back solution for older browsers).
There is a CSS feature called border-image, which, frankly, can do pretty much anything you could think of for a border. You could achieve this effect very easily using this style.
With border-image, you could simply specify a small image with your two colours and transparent middle section. Job done.
Learn more about border image here: http://css-tricks.com/understanding-border-image/
However... there is a big down-side: browser support. border-image is a relatively new addition to the CSS spec. Firefox and Chrome users should be okay, but IE users miss out -- this feature didn't even make it into IE10.
Full browser support details can be found here: http://caniuse.com/#search=border-image
If poor browser support for border-image is enough to kill that idea for you, then another viable answer would be to use :before or :after CSS selectors to create an pseudo-element sitting behind the main element. This would have a transparent background and be sized slightly larger than the main element and with it's own border. This will give the appearance of the triple border you're looking for.
Of course, you can only use this solution if you aren't already using :before and :after for something else.
Hope that gives you some ideas.
I think the only way to do this is by using a wrapper unfortunately. I'm not sure if it is possible to get the transparency through the button background.
Although, if you know the background color, you can use that in the border obviously, but of course this won't work for background gradients.
Here is a proposed jsFiddle showing knowing the color, and another using a wrapper:
http://jsfiddle.net/eD6xy/
HTML:
<div class="box one-div">(1 div, know color)</div>
<div class="two-div">
<div class="box">(2 divs, pure transparent)</div>
</div>
CSS:
/*
With one div, works fine with a constant color (#abc)
But with gradient, probably won't match up correctly
*/
.one-div {
margin: 15px 10px;
border: 5px solid blue;
box-shadow: 0 0 0 5px #abc,
0 0 0 10px red;
}
.two-div {
margin-top: 30px;
padding: 5px;
border: 5px solid red;
}
.two-div > .box {
border: 5px solid blue;
}
I have a button on top of a div with a background colour, a box-shadow, and a border. The button has border-radius corners and the top div's background colour and other styles show through.
Easiest way to explain is this jsfiddle:
http://jsfiddle.net/wCppN/1/
HTML:
<div class="journal-content-article">
<div class="button">
Hello Button
</div>
</div>
<div class="journal-content-article">
Normal article with white background.
</div>
CSS:
.journal-content-article {
background-color: white;
border: 1px solid black;
box-shadow: 5px 5px 5px darkgrey;
}
.button {
border-radius: 20px;
background-color: green;
}
I want to be able to leave the 'normal article' div as is, but be able to remove the white background, the black border, and the box-shadow from the 'button'.
This is being done through Liferay web content so I'm limited to what HTML changes can be made. Only any HTML inside the div 'journal-content-article' can be changed, and can't add additional classes to that div or any parent div.
I also can't change the 'normal article' div contents as the users (no CSS/HTML experience) have to type that in.
Any ideas on how to achieve this, or am I forced to use Javascript?
Thanks!
Maybe this:
http://jsfiddle.net/wCppN/7/
<div class="journal-content-article">
<div class="button">Hello Button</div>
</div>
<div class="journal-content-article">
<div class="myClass">Normal article with white background.</div>
</div>
.journal-content-article {
margin: 20px 20px;
width: 150px;
}
.myClass {
background-color: white;
border: 1px solid black;
box-shadow: 5px 5px 5px darkgrey;
}
I don't think you can override .journal-content-article's style without either doing something like fredsbend suggests, or being able to edit the div itself. You can effectively override the white background, something like this:
div class="journal-content-article">
<div class="journal-content-inside">
<div class="button">
Hello Button
</div>
</div>
</div>
.journal-content-inside {
background-color: black;
margin: 0 auto;
padding: 0;
width: 150px;
overflow: hidden;
border: none;
}
However that doesn't fix the border and box-shadow problem. I don't know that those really are fixable without javascript or other means of editing outside the div.
One method that may help someone else, would be to set a negative margin on the button:
.button {
margin: -10px;
}
http://jsfiddle.net/wCppN/11/
This makes the button larger than the border and shadow, and with overflow: hidden off, covers up the problem.
However it has the disadvantage that the button becomes bigger than you want. In some designs that might be fine, but we have a box/column structure and just -2px of margin looks too badly out of alignment for me to use this (I'm a perfectionist)!
It might help someone else though!