Site: is here
picture html:
<img alt="" src="UserFiles/Image/galerie/12970854473D-Eco-60.jpg">
when I add border: 2px solid black; to the image
layout breaks...
The only straight-forward solution to your problem that I can see is
outline: 2px solid black
which is layout neutral. However, it doesn't work in IE < 8.
For the record, an alternative:
border: 2px solid black;
margin:-2px;
First you add 2px to all sides, and then you pull them back in with the negative margin.
You can use CSS Clip, and apply the border around the clipped image;
I tried using margin: -2px, but it did not work for me.
Warning, CSS clip is pretty counter intuitive, and while it shares the a similar shorthand for margin and padding, it's pixel value assignments are extremely different compared to margin or padding.
Here are some helpful links;
Covers outline, and negative margin fix
http://css-tricks.com/2368-image-rollover-borders-that-do-not-change-layout/
CSS Clip
http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html
Related
I have problem with my border and picture with laptop. I would like to grey and white border be in place. If i reduce resolution - border not stay on position. Image have the same problem.
This is my first project. Please give me some advice about my code.
https://szymal.github.io/hello-minimal/index.html
I would look into bootstrap. More specifically
.img-responsive -> Makes an image responsive (will scale nicely to the parent element)
You can find more details here: http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
Once you look into that you can start looking into rows and columns with bootstrap as well. It makes everything easier in my opinion.
As for the for the border issue:
border-top: 1px solid white;
border-bottom: 1px solid gray;
I hope this helps!
I'm trying to recreate a "pixelated" version of the Space Invaders icon in HTML/CSS using individual 30px square images with a blue border of 2px between the squares.
However, I'm having incredible difficulty aligning the 2px borders since the square image is not repeated equally on each row (e.g. the first 2 rows only display the square image twice, while the 3rd row displays it 7 times, etc.).
I first imagined an 11 x 8 rectangular grid, and then I used a <div> with the same width and height as the square images and with no border as placeholders where the images are not meant to appear, while displaying each square image with a solid border of 1px where they are meant to appear.
The problem with that is that while the images on the inside correctly display a doubled-up border of 2px (1px + 1px borders), the outermost squares only display a 1px border on the outside sides that are not next to another square.
So then I tried setting 2px borders on the "outer sides" of the "outer squares", but that then changed the entire "line height" of the row of images (using vertical-align: middle;) in that entire row from 1px to 2px, creating an empty white space 1px high at the top of the inner squares.
So I've been pulling my hair for the last several hours trying to get this to look "right" with the 2px borders properly aligned in a "grid" while not appearing where no square image is meant to show, but I'm going in circles.
Surely, there is a simpler, more straightforward way of doing this. What's the magic solution?
So, since you have been pulling your hair on the problem, I guessed I might suggest a simpler solution to it, perhaps not exactly an answer to your question, which is very difficult to give without an HTML example.
I made this CSS-only space invader:
CSS-only Space Invader!
Basically what you do is have a general CSS rule for your pixels <div>s, I have it defined like so:
div{
background-color: transparent;
border: 1px solid #000;
float: left;
width: 30px;
height: 30px;
}
Of course, please, choose something less general than div, I did it just for the example purpose. In this way you have a div making up your transparent pixels. Everytime you need to fill up a pixel in your image, just add a class (I used .px) with this minimal CSS rule
.px{
background-color: lightgreen;
}
When you are starting your new line, give your div a class of .first and make it clear:left.
.first{
clear:left;
}
I think this is a pretty simple solution! Bring on the CSS pixel art!
You can see the implementation here:
http://jsfiddle.net/Wtcdt/
In FireFox on Mac, that circle is round/solid. I want it either dashed or dotted.
What makes it even weirder is that the same property (i.e. border: 4px dashed #000) works fine on an HR. So why does it not work when border-radius is involved?
This is so bizarre to me.
It's a bug, WebKit had a similar issue but it was fixed in June. Here are all the other outstanding border-radius defects in Firefox.
Your circle is too small. If you increase the height and width you will notice that the shape expands to a rounded-rectangle, the rounded edges remain solid but the lines become dashed.
Its a Firefox bug. Typically you have to either make solid border or remove radius. But if both of the properties are important then you can replace the corner with image like this: http://eblog.foysalremon.com/dashed-border-radius-corners-rendered-as-solid-on-firefox-solved/
For some reason, when I implement the border-left: 10px solid #FF0000 css style for my left column, and the border-right: 10px solid #FF0000 for my right column, for some reason, it throws everything off...
Anyone know why?
Subtract 20px from elements width.
"throws everything off" is a little vague, but here is a stab at it. Have you specified a width for the container of your bordered content? Maybe your 10px borders cause your content to be too wide.
If this isn't the problem, please post some more specific info.
Probably because the border is added to the width of you element. For example if you have a 100px div with a 10px border that will make your element 120px total.
I have a div which has style properties as "border-top, left, right, bottom" set.
But I do not want the border top to complete the box (which would be a rectangle). I want a small (About 2-3px) opening at the top right (on the length side of the box).
How can this be done?
I think there is a property in CSS called "border-top-width" but there is no "border-top-length".
Can it be done using CSS? Any other approaches are also welcome.
Thanks...
I don't think that's possible...The only way I can think of is to hack it with creating another element inside it (1px wide, 3px high), float it right, and then do margin-right: -1px...
<div style="border:1px solid black; background-color: white;">
<div id="borderHack"></div>
Your content here
</div>
And style the "hack" element like so:
#borderHack {
float: right;
margin-right: 1px;
background-color: white; /*This would have to be the same as the background*/
height: 3px;
width: 1px;
}
You will have to set border-top to none and then put another DIV into that container DIV. Then set the inner DIV's border-top and set it's width to be smaller than the container's.
I don't believe you can do this with CSS alone.
You could add an inner div that has the background color of the color you want at the opening. You would then position and size the inner element so that it appears to be a gap.
You can do that using what's explained in this link http://www.css3.info/preview/border-image/
Basically what you would do is draw a box without the top corners and assign it as border-image
Edit: But this is only available in CSS3 and not implemented by many browsers so for now the other answers give a practical solution.
You might as well try this (relative+absolute positioning) almost the same with float:
<div style="width:400px;height:300px;border-top:1px solid black; border-right:1px solid black;border-bottom:1px solid black;position:relative;">
some content here
<div style="width:2px;height:3px;position:absolute;right:0;background:gray;"></div>
</div>