Am trying to do a Minecraft Steve css art but the face isn't rendering.
I am an amateur by the way.
Here's my code
.container {
height: 500px;
width: 500px;
border-radius: 12.5%;
box-shadow: 15px 15px rgba(0,0,0,0.5);
top: 50%;
left: 50%;
background: RGB(255,255,255);
}
.face {
position: relative;
height: 80 px;
width: 80 px;
background: #B4846D;
top: 240px;
left: 240px;
}
Here's my HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="style.css"
</head>
<body>
<div class="container"></div>
<div class="face"></div>
</body>
</html>
I think there are a couple of problems.
The first problem is that your link tag is missing the the closing <, which may prevent your css from loading correctly
Another problem is that you have a space between the 80 px on the height and width properties. Between the value and the unit there should be no space, so you should have height: 80px; and width: 80px;
another "problem" is that i think you want to have the face element inside the container element. Is it so?
Maybe you need:
<div class="container">
<div class="face"></div>
</div>
The next problem is the way you are positioning the .face element. Without an "image" to show us what you want to do it is difficult to know what you could improve, but i am guessing you want to add position: absolute to the .face element, so you can place it inside the .container element...
Here is an example:
.container {
height: 500px;
width: 500px;
border-radius: 12.5%;
box-shadow: 15px 15px rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
background: rgb(255, 255, 255);
position: absolute;
}
.face {
position: absolute;
height: 80px;
width: 80px;
background: #B4846D;
top: 240px;
left: 240px;
}
<div class="container">
<div class="face"></div>
</div>
Related
Can't get my div tag css working Can somebody please point out the mistake I am making here. Trying to have one div take 70% of the page (left, top to bottom), the other two divs share the remainder. Added colour just so I can see if correct but not showing at all.
#master {
width: 70%;
top: 0;
left: 0;
background: orange
}
#detail1 {
top: 0;
left: 70%;
background: blue
}
#detail2 {
top: 50%;
left: 70%;
background: green
}
<header>
</header>
<div id="master"></div>
<div id="detail1"></div>
<div id="detail2"></div>
<aside>
Hello Ben
</aside>
<footer>
</footer>
Add height to your divs
#master {
width: 70%;
top: 0;
left: 0;
background: orange;
height: 15px;
}
#detail1 {
top: 0;
left: 70%;
background: blue;
height: 15px;
}
#detail2 {
top: 50%;
left: 70%;
background: green;
height: 15px;
}
<header>
</header>
<div id="master"></div>
<div id="detail1"></div>
<div id="detail2"></div>
<aside>
Hello Ben
</aside>
<footer>
</footer>
I believe that to solve your problem, you have to add position to your css. What is more to get master div from top to bottom height should be define as width for details to use rest of screen space. Like that:
<!DOCTYPE html> <html> <head>
<meta charset="utf-8" />
<title>My new Page II</title>
<style>
#master{
position: absolute;
top: 0;
left: 0;
width:70%;
height: 100%;
background: orange
}
#detail1{
position: absolute;
top: 0;
left: 70%;
height: 50%;
width: 30%;
background: blue
}
#detail2{
position: absolute;
top: 50%;
left: 70%;
height: 50%;
width: 30%;
background: green
}
</style>
</head>
<body>
<header>
</header>
<div id="master"></div>
<div id="detail1"></div>
<div id="detail2"></div>
<aside>
Hello Ben
</aside>
<footer>
</footer> </body> </html>
Since your div blocks (master, detail1, detail2) are empty they won't show at all. Enter some content or set a height via css height attribute.
You have to specify the height of div block.
How can I style this circular div? It is not pure circle as you can see, it is slightly different, uneven but also nicely rounded.
I am trying with border-radius but it doesn't look as pretty, it seems like it has lumps
.circle {
border-radius: 42%;
transform: rotate(46deg);
height: 70px;
width: 70px;
background: green;
}
<div class="circle"></div>
Make the border radius half the size of the width/height. You will have to be pretty clever about getting text and images to fit in the circle.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" >
</head>
<h1> Header </h1>
<p> Hi
<div class="circle" id="circle"> ! </div>
</p>
</body>
</html>
CSS:
.circle {
border-radius: 100px;
height: 200px;
width: 200px;
background: green;
margin: auto;
text-align:center;
}
Result:
Looks to me like the problem here is that the size of your circle is larger than the one you are imitating. Some modifications to the size, radius and rotation gives:
.circle {
border-radius: 44%;
transform: rotate(45deg);
height: 66px;
width: 66px;
background: green;
margin: auto;
}
<div class="circle"></div>
Utilising Photoshop, pasting one circile over the other gives an almost perfect reproduction.
.circle {
border-radius: 50%;
transform: rotate(46deg);
height: 100px;
width: 100px;
background: green;
}
<div class="circle"></div>
now try to execute this one,it will work for sure.
I'm trying to get box-shadows playing nicely with different backgrounds. The standard way seems to be using mix-blend-mode, and applying a fake div behind the real one with the effect.
An example of this technique here (click the + icon in the top right).
If I alter this code slightly to wrap the non-background elements into a container with position: fixed it breaks, example here. Note, position: absolute works fine.
I do need a structure like the example, a parent that's position-fixed and blend that can accommodate variable heights or widths and multiple instances of the .box element. I can hazard a rough guess why it doesn't work (fixed breaks it out of the doc flow and therefore there's nothing to blend), I can't see a way round it though.
Another example I made that reduces things a bit more, note how if you comment out position-fixed it works fine:
.blend {
height: 100%;
box-shadow: 0 4px 8px 0 rgba(156, 156, 156, 0.7);
mix-blend-mode: multiply;
position: absolute;
height: 100%;
width: 100%;
top: 0;
}
.box {
background: grey;
min-height: 10px;
width: 100%;
position: relative;
margin: 0 0 15px;
}
.container {
/* using absolute works */
position: absolute;
/* using fixed does not work */
position: fixed;
height: 50%;
width: 50%;
}
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
}
.column {
position: relative;
width: 50%;
height: 100%;
}
.left {
background: #2D2D2D;
}
.right {
background: #f6f6f6;
}
<div class="column left"></div>
<div class="column right"></div>
<div class="container">
<div class="box">
text
<div class="blend"></div>
</div>
<div class="box">
text<br /><br />more text
<div class="blend"></div>
</div>
</div>
(I saw a previous question, which looks along similar lines but I couldn't get their example to work to check)
You can move the blend element out of the container and make it fixed with the same dimensions as container.
Checkout the snippet:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html{
height:100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
}
.column {
position: relative;
width: 50%;
height: 100%;
}
.left {
background: #2D2D2D;
}
.right {
background: #f6f6f6;
}
.blend {
box-shadow: 0 4px 8px 0 rgba(156, 156, 156, 0.7);
mix-blend-mode: multiply;
position: fixed;
height: 50%;
width: 50%;
}
.box {
background: grey;
height: 100%;
width: 100%;
position: absolute;
}
.container {
position: fixed;
height: 50%;
width: 50%;
}
</style>
</head>
<body>
<div class="column left"></div>
<div class="column right"></div>
<div class="blend"></div>
<div class="container">
<div class="box">
text
</div>
</div>
</body>
</html>
3.2. Behavior specific to HTML
Everything in CSS that creates a stacking context must be considered an ‘isolated’ group. HTML elements themselves should not create groups. An element that has blending applied, must blend with all the underlying content of the stacking context that that element belongs to.
Eg. position: fixed will create a stacking context (isolated group).
https://drafts.fxtf.org/compositing-1/#csscompositingrules_CSS
Related answer more specific on stacking context: https://stackoverflow.com/a/56545440/7947839
I'm trying to figure out how to have a floating navigation bar to the left of the content, that is fixed width but has a container around it that extends to the edge of the viewport while keeping the content centered on the page.
And here's what I got going so far and an image of what I mean. http://dl.dropbox.com/u/23132/index.html
Any help or ideas?
Got a solution from Bordingo.
<html>
<head>
<style type="text/css">
html, body { height: 100%; min-width: 960px;}
.container { width: 960px; height: 100%; margin: 0 auto; background: #ddd; }
.nav-fix { position: absolute; left: 0; width: 50%; min-width: 480px; height: 100%;}
.nav { position: absolute; top: 100px; right: 280px; width: 9999px; height: 200px; background: #333; }
.nav-box { position: absolute; top: 10px; right: 10px; width: 180px; height: 180px; background: #eee; }
</style>
</head>
<body>
<div class="nav-fix">
<div class="nav">
<div class="nav-box"></div>
</div>
</div>
<div class="container"></div>
</body>
</html>
If you are willing to use jQuery, you can pretty easily calculate the offset of the main body and adjust the width/padding/margin of the sidebar accordingly.
Simple example
http://dl.dropbox.com/u/1588084/floatmenu.htm
How to make this type of image popping out of box using XHTML css. without using whole box along with image as a background
alt text http://shup.com/Shup/330963/1104592352-My-Desktop.png
Only globe image will be image.
The globe needs to be a transparent png, and then style the box ignoring the image, padding and a border to get the desired look. Then, whack position: relative on the box, and position: absolute on the image inside it. Then use top: Xpx; left: Xpx; to position the image as you like.
Edit: I've taken the code from the siulamvictor below, and edited it so it'll work for you.
<html>
<head>
<style type="text/css">
.box {
position: relative;
width: 260px;
border: #000 1px solid;
background: #d5d5d5;
padding: 20px;
}
.box img {
display: block;
position: absolute;
z-index: 2;
top: 5px;
right: 5px;
}
</style>
</head>
<body>
<div class="box">
Text here.
<img src="image.png" />
</div>
</body>
</html>
Change the top and right properties to positon the image as you need it.
<div class="globe-box">Some text<div class="globe"></div></div>
.globe-box {
position: relative;
border: 1px solid black;
padding-right: 110px; /* width of globe + some padding */
margin-bottom: 20px; /* how much globe should stick out of the bottom */
}
.globe-box .globe {
width: 100px; height: 100px; /* size of globe */
background-image: url(globe.png);
position: absolute;
bottom: -20px; /* same as margin-bottom above only negative */
right: 10px;
}
try this :)
<html>
<head>
<style type="text/css">
.box {
position: relative;
width: 300px;
border-color: black;
border-width: 1px;
border-style: solid;
background-color: #d5d5d5;
height: 60px;
padding-top: 20px;
padding-left: 20px;
}
.image {
display: block;
position: absolute;
z-index: 2;
right: 20px;
}
</style>
</head>
<body>
<div class="box">
Text here.
<img src="image.png" class="image" />
</div>
</body>
</html>