Not visible here: curtains open by themselves.
Not visible: outline: 1px solid red; https://jsfiddle.net/3sz47bq0/1/
How would I have the 1px line be visible here?
.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
margin: auto;
overflow: hidden;
outline: 1px solid red;
}
But that 1px line is visible here: https://jsfiddle.net/pdzcj6og/1/
The curtains don’t auto open here.
Because in your .curtain class you have the property overflow: hidden;. If you remove it then the outline will show.
.curtain {
flex: 1 0 0;
margin: auto;
max-width: 640px;
border: 21px solid;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
position: relative;
overflow: hidden;
}
Related
I want to make a div that a 2px solid white border on the bottom, left, right, and most of the top except for a small part roughly 50px wide that will have a 1px solid green border. I know php if you think that will help. My current css is this...
div#ghostBox{
width: 170px;
height: 100px;
border: 2px solid white;
position: fixed;
left: 550px;
top: 270px;
}
Btw I am making a game of pac-man.
You can keep the use of only one element and rely on gradient:
body {
background: pink;
}
.box {
width: 170px;
height: 100px;
border: 5px solid white;
border-top: none;
background: linear-gradient(to right, white 50px, green 0) 0 0/100% 5px no-repeat;
}
<div class="box">
</div
i think you want this (:
body{
background-color:black;
}
p{
color:white;
margin: 1px;
}
/* TEXT BOX */
div#ghostBox{
height: 100px;
width: 150px;
border: 2px solid white;
border-top: 5px solid white;
position: fixed;
left: 50px;
top: 50px;
color:red;
padding: 0px;
padding-top: 0px;
}
/* High text color line */
div#text{
border-top: 5px solid green;
position: absolute;
margin-top: 0px;
width: auto;
margin: 0px;
}
/* High color line after text */
div#notext{
border-top: 5px solid red;
margin-top: 0px;
width: auto;
margin: 0px;
}
<div id="ghostBox"><div id="text"><p>good luck
</p></div><div id="notext"></div></div>
You can do it using css after or before pseudo selector. Below is just an example . You can modify it according to your requirement
div#ghostBox {
width: 170px;
height: 100px;
border: 2px solid white;
position: fixed;
background: red;
}
div#ghostBox:after {
content: '';
width: 50px;
border: 2px solid green;
position: absolute;
padding-right: 50px;
}
<div id="ghostBox"> Ghost Box</div>
There may be better ways, but you could use a span at the beginning of the div:
Just set the border-top for the span and set its width:
(I removed the left and top properties for the example)
body {
background-color: red;
}
div#ghostBox {
width: 170px;
height: 100px;
border: 2px solid white;
position: fixed;
}
span {
border-top: 2px solid blue;
width: 50px;
position: absolute;
}
<div id='ghostBox'>
<span> </span> test
</div>
How would I achieve the following as seen in the image below, in the best way as possible? I want a thick top border, but as it goes down I want the sides to become thinner and just "mend" (if that's right expression) into the black block.
This is my CSS code for the black block:
.containerMain {
background: #000;
padding: 15px;
border-radius: 5px;
width: 250px;
}
You can use the after pseudo-element to position an upside-down trapezoid behind your element.
Look here for a trapezoid shape example.
body { padding: 30px; }
.containerMain {
background: black;
padding: 15px;
border-radius: 5px;
width: 250px;
height: 250px;
position: relative;
}
.containerMain:after {
content: '';
border-radius: inherit;
margin: -20px;
margin-top: -25px;
width: 100%;
height: 50%;
position: absolute;
z-index: -1;
/* upside-down red trapezoid props */
border-top-width: 150px;
border-top-style: solid;
border-top-color: red;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
<div class="containerMain"></div>
I'm just reading css design pattern of Apache and have an issue about overflowed inline element in a block element.Here is the link
http://www.cssdesignpatterns.com/Chapter%2004%20-%20BOX%20MODELS/Inline%20Box/example.html
You can see that the inline element with class "box" stays in the same line box in chrome but go to the next line in firefox, while the desired behavior is what firefox does.
Can anyone explain for me why there is the difference in firefox and chrome???
Here is the html:
<div class="container">
<span class="default">BEFORE</span>
<span class="box">← Left ↑ Top
Bottom ↓ Right → </span>
<span class="default">AFTER</span>
</div>
Here is the css
.container {
border: 1px solid gray;
}
.default {
line-height: normal;
width: auto;
height: auto;
overflow: visible;
visibility: visible;
margin: 0;
padding: 0;
border: none;
background-color: gold;
}
.box {
line-height: 100px;
margin-left: 100px;
margin-right: 100px;
padding: 20px 120px;
border-left: 5px solid gray;
border-right: 5px solid black;
border-top: 5px solid gray;
border-bottom: 5px solid black;
background-color: gold;
overflow: scroll;
width: 99999px;
height: 99999px;
margin-top: 99999px;
margin-bottom: 99999px;
}
.default {
line-height: normal;
width: auto;
height: auto;
overflow: visible;
visibility: visible;
margin: 0;
padding: 0;
border: none;
background-color: gold;
}
Here is the fiddle link
http://jsfiddle.net/GRwUp/
Try giving the container a width and padding:
.container {
border: 1px solid gray;
width: 350px;
}
Here is a fiddle: http://jsfiddle.net/GRwUp/1/
When I make the browser smaller, and scroll horizontally, the left_nav disappears. I tried changing the position. But that didn't work. Any advice?
#left_nav {
position: fixed;
height: 95%;
width: 100px;
background-color: #ededed;
border-right: 1px solid #aaa
}
#container {
margin-left: 100px;
position: absolute;
overflow: auto;
width: 75%;
min-width: 1129px;
overflow: hidden;
min-width: 1100;
background-color: #fff;
border-right: 1px solid #aaa;
border-bottom: 1px solid #aaa;
border-left: 1px solid #aaa;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px
}
#left_nav {
position: fixed;
top:0;
left:0;
height: 95%;
width: 100px;
background-color: #ededed;
border-right: 1px solid #aaa
}
You should specify the left and top for fixed elements as above. This will place the left nav 0px from the top and left of the browser window.
Are you trying to specify it relative to the container? If so, you need to give the left_nav a position of absolute and the container a position of relative
Try adding min-width: 100px; to your left_nav, and getting rid of min-width: 1100; on container...
Notice you are duplicating the min-width attribute; this is a no-no:
min-width: 1129px;
overflow: hidden;
min-width: 1100;
I am trying to make an arrow overlap onto the div below it (the way the gray arrow overlaps onto the red on http://tinyletter.com).
Here is the code I am currently using:
#box_1 {
height: 550px;
width: 100%;
font-size: 4.5em;
font-weight: 600;
float: center;
text-align: center;
background-color: #ededed;
padding: 55px 0 0 0;
}
.arrow-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #ededed;
margin-left:auto;
margin-right:auto;
}
#box_2 {
height: 600px;
width: 100%;
font-size: 7em;
float: center;
text-align: center;
background-color: #ed2227;
}
If you're able to rely upon use of the ::after (or ::before) pseudo-elements, then this is relatively easy simply using borders:
#top {
position: relative;
background-color: #ccc;
}
#top::after {
position: absolute;
content: '';
top: 100%;
left: 50%;
margin: 0 0 0 -1em;
border: 1em solid transparent;
border-top: 1em solid #ccc;
}
JS Fiddle demo.