I am trying to make a small yellow square of 300x300 pixels let's say with a black border. I use:
<style>
body {
background-color: yellow;
border: 1px solid #000000;
width: 300px;
height: 300px;
}
</style>
But this gives the whole page yellow and not just the square... How can I fix this? Ty
The body tag selects the entire body of the html document. You need to give your box a id or class and then apply the CSS to that.
For example:
#box {
background-color: yellow;
border: 1px solid #000000;
width: 300px;
height: 300px;
}
<div id="box"></div>
You've applied to the body, that basically means the whole page.
Insert a DIV on the body.
HTML
<div class="div-class"></div>
CSS
.div-class{
background-color: yellow;
border: 1px solid #000000;
width: 300px;
height: 300px;
}
If you want only a square of 300x300 you need to make a div for that
**HTML:**
<div class='square'></div>
**CSS**
.square {
background-color: yellow;
border: 1px solid #000000;
width: 300px;
height: 300px;
}
Now you are applying your style to the body (whole page). That's why your whole window is yellow instead of 300x300
You need to apply the styles to a div and not to the entire body...
.square {
background-color: yellow;
border: 1px solid #000000;
width: 300px;
height: 300px;
}
<div class="square"></div>
Don't use "body", use "div"
div {
background-color: yellow;
border: 1px solid #000000;
width: 300px;
height: 300px;
}
Fiddle: https://jsfiddle.net/Lrgqp2ud/
Related
I have this css code:
aside{
border: 3px solid black;
width: 15%;
padding-left: 25px;
padding-right: 25px;
float:right;
background-color: red;
overflow-y: auto;
min-height: 95.3vh;
flex-warp: warp;
}
square{
border: 3px solid black;
width: 10%;
height: 10%;
background-color: green;
}
And I have this HTML
<aside>
<div class="square">
Hello
</div>
</aside>
The problem is: I don't have any border for hello as you can see in the next image:
I wold like to be like this:
Your CSS properties are being properly applied to the tag as your CSS selects the tag which is on the html page. However, when selecting a class, in your case, "square", you must select it with the class selector. Instead, in your CSS code, change square to .square
Eg.
.square{
border: 3px solid black;
width: 10%;
height: 10%;
background-color: green;
}
in your CSS, you're selecting the element square, while there's only a class square. When selecting a class, include a . at the start:
aside{
border: 3px solid black;
width: 15%;
padding-left: 25px;
padding-right: 25px;
float:right;
background-color: red;
overflow-y: auto;
min-height: 95.3vh;
flex-warp: warp;
}
.square{
border: 3px solid black;
/* width: 10%;
height: 10%; */
background-color: green;
}
<aside>
<div class="square">
Hello
</div>
</aside>
Note, this resulted in only the H in Hello to be colored green with a border. To color the entirety of Hello, I removed width: 10%; and height 10%;
Here is a simple code I'm testing
div {
background-color: white;
height: 100%;
width: 100%;
}
img {
max-width: 200px;
border: 5px solid black;
}
<div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>
Fiddle: https://jsfiddle.net/xhsngt3q/
On one monitor I get this
On the other one there's a white pixel border on the right and bottom
Any tips on how to remove that?
I think it is caused because of the number of pixels of the image.
I would suggest to add a black background to your image like the following CSS code:
div {
background-color: white;
height: 100%;
width: 100%;
}
img {
max-width: 200px;
border: 5px solid black;
/*My change*/
background-color: black;
}
<div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>
Hope this could be useful. Greetings.
You can also try with max-width:199px or max-width:202px
div {
background-color: white;
height: 100%;
width: 100%;
}
img {
/*My change*/
max-width: 199px;
border: 5px solid black;
}
<div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>
Add box-shadow 0 0 0 1px; instead of the solid border. It is just a work around but sometimes good enough.
div {
background-color: white;
height: 100%;
width: 100%;
}
img {
max-width: 200px;
border: 4px solid black;
}
<div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>
I am trying to center-align an image in a page while also turning the image into a clickable link. Here is my attempt:
a {
background: lightblue;
border: thin solid blue;
}
img {
background: lightgreen;
border: thin solid green;
display: block;
width: 25%;
margin: 0 auto;
}
<img src="http://placekitten.com/500/500" alt="kitten">
While the image has become a link, the problem is that most of the horizontal space on both sides of the image has also become clickable link. Why does it happen? Is there anyway to prevent that, so that only the image is a clickable link?
I can only think of using a div to centre the image link.
a {
background: lightblue;
border: thin solid blue;
}
img {
background: lightgreen;
border: thin solid green;
width: 25%;
}
.center {
margin: 0 auto;
text-align: center;
}
<div class="center">
<img src="http://placekitten.com/500/500" alt="kitten">
</div>
How suggest #yinsweet use container, i use other method with just text align on container like that:
a {
background: lightblue;
border: thin solid blue;
}
img {
background: lightgreen;
border: thin solid green;
display: inline-block;
width: 25%;
margin: 0 auto;
}
.container{
text-align:center;
}
<div class="container">
<img src="http://placekitten.com/500/500" alt="kitten">
</div>
When customizing the scrollbars of an element, I end up with this negative space in the bottom right corner whose dimensions are equal to the width and height of the scrollbars. I can't figure out how to set a background color for it.
Here's a pen that depicts the problem
<div class='container'>
<div class='content'>
</div>
</div>
.container{
border: solid red 10px;
height: 300px;
width: 200px;
overflow: auto;
&::-webkit-scrollbar{
width: 5px;
height: 5px;
background: black;
}
&::-webkit-scrollbar-thumb{
background: white;
border-radius:10px;
}
&::-webkit-scrollbar-track{
background: darkred;
}
}
.content{
background: darkred;
height:500px;
width: 500px;
}
Add this to your CSS
&::-webkit-scrollbar-corner{
background: darkred;
}
Codepen:
https://codepen.io/anon/pen/mYeZBx
I am making a symmetri webpage for my project. I used halve image and want its symmetry counterpart two also show on hovering. I mean that when we will hover on container, the image will get completed to reveal the full image. How do I achieve this.
#container {
height: 300px;
width: 241px;
border: 1px solid red;
}
img {
height: 300px;
width: 120px;
border-right: 1px dotted gray;
display:inline-block;
float:left;
}
<h1 style="font-family:Algerian;">Symmetry</h1>
<div id="container">
<img src="http://i.imgur.com/qIPYs5i.jpg">
</div>
You can make a second class with the :hover keyword and set the background-image property to the complete image there.
Something like
#container:hover {
height: 300px;
width: 241px;
border: 1px solid red;
background-image: url('Your Image url')
}
should do the trick.
You can use css3 transforms to mirror that image and then use the :hover pseudoclass to reveal it when the user hovers over the container:
#container {
height: 300px;
width: 242px;
border: 1px solid red;
}
#container:hover .second{
display: block;
}
img {
height: 300px;
width: 120px;
border-right: 1px dotted gray;
display: block;
float:left;
}
.second {
transform: scale(-1, 1);
display: none;
}
<h1 style="font-family:Algerian;">Symmetry</h1>
<div id="container">
<img class="first" src="http://i.imgur.com/qIPYs5i.jpg">
<img class="second" src="http://i.imgur.com/qIPYs5i.jpg">
</div>