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/
Related
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;
}
My paper-input is extending outside of the parent div, and I don't know why. I've tried setting the bottom margin but it does nothing. Here's what I have, the borders are for testing and will be removed later.
#main {
width: 100%;
height: 100%;
border: 2px solid transparent;
}
.sliderContainer {
width: 100%;
height: 60px;
border: 2px solid transparent;
}
.label {
width: 100%;
margin-left: 6px;
}
.labelValue {
margin-left: 10px;
color: #A6A6A6;
}
.sliderDiv {
width: 100%;
height: 40px;
display: inline-block;
border: 2px solid transparent;
}
.button {
width: 1px;
height: 30px;
float: left;
display: inline-block;
border: 2px solid transparent;
}
.slider {
width: 50%;
height: 30px;
margin-top: 3px;
margin-right: 34px;
display: inline-block;
border: 2px solid transparent;
}
.syncOffset { /* This is the issue. */
width: 16%;
height: 40px;
display: inline-block;
border: 2px solid transparent;
}
.syncOffsetDiv {
width: 5%;
display: inline-block;
}
example
Figured it out, it was the label that was causing an issue. I added no-label-float to remove the floating label and vertical-align: top to the class and that made it work.
I have been working on a project and I was able to create a double border css with box shadow... but the problem is I need a transparency on the first box..
I tried something:
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
}
.box {
width: 5rem;
height: 3rem;
background-color: #789;
border: 3px solid black;
box-shadow: 8px -8px 0 -3px #ccc, 8px -8px 0 0 #000;
}
<div class="box"></div>
I need http://prntscr.com/nw6fed - the background of the first box should be transparent...Any help
You can get your second border with a pseudo element. I used :after in this example.
.box {
width: 200px;
height: 200px;
border: 3px solid cyan;
position: relative;
padding: 40px;
box-sizing: border-box;
}
.box::after {
content: '';
height: 100%;
width: 100%;
position: absolute;
display: block;
top: 20px;
left: 20px;
border: 3px solid magenta;
}
<div class="box">
<h1>Text</h1>
</div>
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>
So I'm trying to vertical align images within a container div. I tried adding vertical-align: middle; to the parent div with no luck.
<div class="contributor_thumbnail"><img src="image.jpg"></div>
<div class="contributor_thumbnail"><img src="image.jpg"></div>
.contributor_thumbnail {
position: relative;
display: block;
float: left;
width: 150px;
height: 150px;
line-height: 100%;
text-align: center;
margin-right: 15px;
margin-bottom: 15px;
padding: 5px;
vertical-align: middle;
border: 1px solid #bbbbbb;
border-top: 1px solid #333;
border-left: 1px solid #333;
}
What I would do is set the image as a background image.
.contributor_thumbnail {
/* Background image instead of using and img tag */
background: url(image.jpg) center center no-repeat;
position: relative;
display: block;
float: left;
width: 150px;
height: 150px;
line-height: 100%;
text-align: center;
margin-right: 15px;
margin-bottom: 15px;
padding: 5px;
border: 1px solid #bbbbbb;
border-top: 1px solid #333;
border-left: 1px solid #333;
}
Try this:
HTML
<div class="contributor_thumbnail">
<div class="content">
<img src="image.jpg">
</div>
</div>
CSS:
.contributor_thumbnail {float:left; height:50%; margin-bottom:-120px;}
.content {clear:both; height:240px; position:relative;}
Inspired by: Lost in the Woods vertically centering with CSS.
.contributor_thumbnail img {
margin-left: auto;
margin-right: auto;
}
http://www.bluerobot.com/web/css/center1.html