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!
Related
the border around my image is not fitting and i believe a direct full screen jsfiddle link will be of use, the jsfiddle link will have 2 images it is the second one which is not working i have uploaded the second picture so that it is visible
https://jsfiddle.net/Nafis241/8h60bsg7/5/embedded/result/
http://jsfiddle.net/Nafis241/8h60bsg7/5/
#imgCent {
text-align: center;
border:5px solid #000000;
}
You had the #imgCent in the wrong place.
Add #imgCent to the <img> itself instead of the <div>.
https://jsfiddle.net/DIRTY_SMITH/8h60bsg7/7/
Try to re frame your question to get a better understanding of what you want to achieve.
I want to create a side panel with a right border that is almost 0px at the top but gradually increases to 5px at the bottom.
I am trying to avoid border images as I want to use least of external resources such as images.
How can I do that.
I tried to search a lot for this but couldnot find it. So if somebody can point me to a similar question , that is also helpful.
Below is the link:
http://s15.postimg.org/ftodd5qx3/SNAPSHOT.png?noCache=1435470821
If you notice, the left is a div with a beige color border on left panel at right(left to image) which is having variable length.
You can use a pseudo after element on a container div and then use borders on that after element to create a triangle.
.box::after{
border-right: 300px solid transparent;
border-left: 5px solid transparent;
border-bottom: 300px solid #666666;
}
See example here https://jsfiddle.net/vkkze6v0/
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!
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
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.