My picture #minecraftLogo is also my nav is being pushed off the page. I'm not too sure why that is. What am I doing wrong here? I am also getting this weird colour formation around my nav links and Im not too sure why that is.
body{
border: 0px ;
}
section{
border: 1px solid black;
margin-bottom: 5px;
background: #0000FF;
}
#Title{
margin-left: 180px;
margin-top: 30px;
}
#SubtitleOne{
position: relative;
border: 1px solid black;
width: 500px;
height: 130px;
margin-left: 100px;
margin-top: 120px;
font-size: 8;
}
#SubtitleTwo{
position: relative;
border: 1px solid black;
width: 500px;
height: 130px;
margin-left: 100px;
margin-top: 10px;
}
#SubtitleThree{
position: relative;
border: 1px solid black;
width: 500px;
height: 130px;
margin-left: 100px;
margin-top: 20px;
}
#Links{
position: relative;
border: 1px solid black;
width: 550px;
height: 50px;
margin-left: 25px;
margin-top: 100px;
}
nav{
position: absolute;
left: 100px;
margin-bottom: 100px;
}
#P1{
position: relative;
left: 10px;
top: -10px;
}
#MinecraftLogo{
position: absolute;
}
#YoutubeVideo{
position: fixed;
bottom: 0px;
left: 500px;
}
header{
position relative
padding: 20px;
left: 90px;
margin-top: -10px;
}
footer{
border: 3px dotted;
border-radius: 25px;
box-shadow: 0 0 15px 10px #fd38ab;
width: 400px;
height: 50px;
left: 300px;
bottom: 500px;
}
Related
I've tried making a fieldset with the react app but it seemed difficult so i managed to make it look like with some css, and now i'm pretty curious about how to border the comlpete box just like this
<div class="fieldset">
<div class="legend">Text</div>
Text2
</div>
Customised Styles:
.fieldset{
width: 200px;
height: 300px;
border: 1px solid black;
padding: 30px;
margin: 30px;
position: relative;
}
.legend{
font-size: 45px;
position: absolute;
top: -8%;
left: 50%;
transform: translate(-50%);
background: #fff;
}
this way you can goes near your goal.
Hope it's work for you.
.fieldset{
border: 1px solid black;
padding: 30px;
margin: 100px 30px 30px;
position: relative;
font-size: 45px;
width: 200px;
border-radius: 10px;
}
.legend{
position: absolute;
width: fit-content;
top: -74px;
left: 0;
right: 0;
margin: 0 auto;
padding: 10px;
border: 1px solid #000;
border-bottom: 1px solid #fff;
border-radius: 10px 10px 0 0;
}
<div class="fieldset">
<div class="legend">Title</div>
Content
</div>
I am trying to create a div that looks like that. See the top and bottom with the little tab. I cannot figure out how to do this, it is a "design" thing. I have tried to use the :before :after CSS to create this but no luck. Any ideas?
Added code below. You can see it comes to a point, any way to have it flat?
.container {
width: 150px;
height: 75px;
background-color: white;
border: 3px solid #000;
color: #fff;
padding: 20px;
position: relative;
margin: 40px;
float: left;
}
.container.tab-top:before {
content: " ";
position: absolute;
right: 0px;
top: -15px;
border-top: none;
border-right: 90px solid transparent;
border-left: 90px solid transparent;
border-bottom: 15px solid black;
}
.container.tab-bottom:after {
content: " ";
position: absolute;
right: 0px;
bottom: -15px;
border-top: 15px solid black;
border-right: 90px solid transparent;
border-left: 90px solid transparent;
border-bottom: none;
}
<div class="container tab-top tab-bottom">
</div>
Don't use borders for this. Create a pseudo element and use border-radius.
.container {
width: 150px;
height: 75px;
background-color: white;
border: 3px solid #000;
color: #fff;
padding: 20px;
position: relative;
margin: 40px;
float: left;
}
.container.tab-top:before {
content: " ";
position: absolute;
width: 60%;
height: 7px;
left: 50%;
transform: translateX(-50%);
background: black;
border-radius:20px 20px 0 0;
top: -7px;
}
.container.tab-bottom:after {
content: " ";
position: absolute;
width: 60%;
height: 7px;
left: 50%;
transform: translateX(-50%);
background: black;
border-radius:0 0 20px 20px;
bottom: -7px;
}
<div class="container tab-top tab-bottom">
</div>
You can approximate it using perspective and rotation:
.container {
width: 200px;
height: 100px;
border: 3px solid #000;
position: relative;
margin: 40px
}
.container.tab-top:before,
.container.tab-bottom:after {
content: " ";
position: absolute;
left:15%;
right:15%;
height:30px;
background:#000;
}
.container.tab-top:before {
bottom:100%;
border-radius:10px 10px 0 0;
transform-origin:bottom;
transform:perspective(100px) rotateX(50deg);
}
.container.tab-bottom:after {
top:100%;
border-radius:0 0 10px 10px;
transform-origin:top;
transform:perspective(100px) rotateX(-50deg);
}
<div class="container tab-top tab-bottom">
</div>
You need to use Trapezoid Shape css like:
#trapezoid {
border-bottom: 100px solid red;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 100px;
}
.box {
display: block;
width: 150px;
height: 200px;
border: 2px solid pink;
position: relative;
}
.box::before {
position: absolute;
content: "";
border-bottom: 10px solid pink;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
height: 0;
width: 100px;
top: -10px;
left: 0;
right: 0;
margin: auto;
}
.box::after {
position: absolute;
content: "";
border-top: 10px solid pink;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
height: 0;
width: 100px;
bottom: -10px;
left: 0;
right: 0;
margin: auto;
}
<div class="box"></div>
I used as before after css of a div.
I have code that looks like:
.bubble {
background-color: white;
border-radius: 12px;
border: 1.3px solid black;
width: 90%;
max-width: 800px;
padding: 8px 12px;
position: relative;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
text-align: justify;
word-break: break-word;
hyphens: auto;
}
.tail {
position: absolute;
overflow: hidden;
top: 12px;
left: -10px;
height: 12px;
width: 10px;
}
.tail::after {
background: #ffffff;
border: 1.3px solid black;
content: '';
height: 100%;
position: absolute;
right: -6px;
top: -9px;
transform-origin: 0 100%;
transform: rotate(47deg);
width: 100%;
}
<div class='bubble'>
<div class='tail'></div>
Hi!
</div>
<style>
However, on MacOS Chrome there is a thin line in place of the border where there shouldn't be any line at all. Why is that happening and how can I remove it? Thanks!!
I am trying to make a popover with an error, but I am having trouble making the arrow appear above the border of the div I am attaching it to. I would appreciate any help.
This is what I have so far...
This is the CSS code I am using, but cant get it to work:
1.DIV for the entire popover:
<div class="info-popover">
<div class="inner"></div>
<div class="arrow"></div>
</div>
2.CSS for each:
.info-popover {
height: 250px;
margin-top: -255px;
position: absolute;
width: 400px;
}
.info-popover .inner {
background-color: #FFFFFF;
border: 1px solid #003366;
border-radius: 10px 10px 10px 10px;
height: 240px;
margin-top: 0;
width: 100%;
}
.info-popover .arrow {
background: url("/images/dock/popover-arrow.png") no-repeat scroll center -5px transparent;
height: 15px;
position: relative;
width: 100%;
z-index: 999;
}
CSS solution:
http://jsfiddle.net/wn7JN/
.bubble
{
position: relative;
width: 400px;
height: 250px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble:after
{
content: "";
position: absolute;
bottom: -25px;
left: 175px;
border-style: solid;
border-width: 25px 25px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}
.bubble:before
{
content: "";
position: absolute;
top: 250px;
left: 174px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
}
Easiest way:
HTML:
<div class="meow">
</div>
CSS:
.meow {
height: 100px;
width: 300px;
margin: 30px;
background: linear-gradient(#333, #222);
-o-border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.meow:after {
content: " ";
border-top: 11px solid #222;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
position: relative;
top: 111px;
right: -140px;
}
Live preview: CodePen.io
Just do some few edits.
Try this:
HTML
<div class="info-popover">
<div class="inner"></div>
<p class="arrow"></p>
</div>
CSS
.info-popover {
position: relative;
/* any other CSS */
}
.arrow {
background: url("/images/dock/popover-arrow.png") no-repeat 0 0;
height: 15px;
width: 20px; /* width of arrow image? */
display: block;
position: absolute;
bottom: -15px;
left: 0; margin: 0 auto; right: 0; /* to center the arrow */
}
I want to create a border with two cut off corners for my website. I need this border for different div sizes.
After an hour or so I got it to work with a fixed size of 200px. But I don't know how I can get this flexible.
Here's a
Demo
HTML
<div id="outer"><span>Some Text</span></div>
CSS
body {background: #000;}
#outer {
width: 200px;
height: 200px;
position: relative;
margin: 0 auto;
margin-top: 50px;
background: #0ff;
}
#outer:before {
content: "";
height: 200px;
left: -15px;
position: absolute;
border-top: 15px solid transparent;
border-right: 15px solid #fff;
}
#outer:after {
content: "";
width: 200px;
height: 200px;
top: -15px;
right: -215px;
position: absolute;
border-left: 15px solid #fff;
border-bottom: 15px solid transparent;
}
#outer span {
width: 200px;
height: 200px;
position: absolute;
padding: 50px;
}
#outer span:before {
display: block;
content: "";
width: 200px;
top: -15px;
left: 0;
position: absolute;
border-bottom: 15px solid #fff;
border-left: 15px solid transparent;
}
#outer span:after {
display: block;
content: "";
width: 200px;
height: 200px;
top: 200px;
left: -15px;
position: absolute;
border-top: 15px solid #fff;
border-right: 15px solid transparent;
}
Anyone knows a better solution? Thanks
You pretty much have it yourself. I adapted the fiddle to use percent values for the dimensions and positions. It's still 15px wide for the border though:
Demo: http://jsfiddle.net/b48AK/show
Source: http://jsfiddle.net/b48AK
body {background: #8aa; padding:0px; margin:0px}
#outer {
background: #bfb;
position:relative;
margin:15px;
}
#outer:before {
content: "";
height: 100%;
left: -15px;
position: absolute;
border-top: 15px solid transparent;
border-right: 15px solid #fff;
}
#outer:after {
content: "";
width: 100%;
height: 100%;
top: -15px;
left: 100%;
position: absolute;
border-left: 15px solid #fff;
border-bottom: 15px solid transparent;
}
#outer span:before {
display: block;
content: "";
width: 100%;
top: -15px;
left: 0;
position: absolute;
border-bottom: 15px solid #fff;
border-left: 15px solid transparent;
}
#outer span:after {
display: block;
content: "";
width: 100%;
height: 100%;
top: 100%;
left: -15px;
position: absolute;
border-top: 15px solid #fff;
border-right: 15px solid transparent;
}