For some reason it seems that my outline and border is shifted down and left. I made a JSFiddle with the code so you can see whats wrong.
( http://jsfiddle.net/FHB4j/ )
This image right here is what it is supposed to look like. I made another element in my design the same, and its working. Although when using the same EXACT method here it doesn't work? It doesn't make since I must be making a stupid mistake.
Huge Thanks in Advance!
My CSS
.standard-content-module {
width: 414px;
overflow:hidden;
}
.standard-content-module header {
width: 414px;
height: 48px;
background: #cc9900;
}
.standard-content-module p {}
.standard-content-module-content_container {
background: #cccccc;
border: 5px #ffcc00 solid;
outline: 10px #cccccc solid;
width: 384px;
height: 100px;
margin-top: 17px;
}
.standard-content-module-content_container p {}
My HTML
<div class="standard-content-module">
<header><p>Module Title</p></header>
<div class="standard-content-module-content_container">
<p>123</p>
</div>
</div>
Set .standard-content-module overflow visible (or just remove it)
.standard-content-module {
width: 414px;
overflow:visible;
}
DEMO VIEW
Related
I am trying to make an experience bar with 2 <div> area. the longer <div> outside for the frame and the shorter inside for the current experience.
when I use {height: 100%} for inside <div> to fill up space, there is a gap between border and background-color when I change the display size of the browser to some certain %.
I tried it in chrome and edge browser and they have the same problem. I can fix the gap by changing {height: 101%}. I just wonder why there's a gap for 100% in some certain display sizes.
* {
box-sizing: border-box;
}
#bar-frame {
background-color: grey;
border: solid 13px black;
height: 70px;
width: 300px;
border-radius: 5px;
}
#bar {
background-color: black;
height: 100%;
width: 20%;
}
<body>
<div id="bar-frame">
<div id="bar"></div>
</div>
</body>
I expect there's no gap in the bar, but there's a gap show up in some certain display sizes.
CODEPEN link: https://codepen.io/ququ929/pen/zQWrZQ
English is my second language, hope you can understand the problem, thank you.
picture to show the problem
picture 2
what I expect for all display size.
Add border: 1px solid grey in you #bar CSS will resolve your issue. Thanks
#bar {
background-color: black;
border: 1px solid grey;
height: 100%; width: 20%;
}
I want to know how I can manage something like this in css.
I mean the M, in my case this is a picture of a letter, which have to go over a border.
I try it on tipeeestream on a event list, and I've tried some things, but doesn't work. The problem is, that I don't get a good resource about their css style and I have to get a informations about the browser about their css sytle.
Can someone help me out please?
Edit: This is my css code in their editor
.event .left {
border-style: solid;
border-width: 3px 0 3px 3px;
border-color: black;
}
.left {
position:relative;
width: 50px;
}
.left:after {
content: "";
position:absolute;
overflow:visible;
width: 100px;
height: 100px;
display: block;
}
.event .middle, .event .right {
border-style: solid;
border-width: 3px 3px 3px 0;
border-color: black;
}
.event.middle-event .middle, .event.middle-event .left, .event.middle-event .right{
background: transparent;
border-style: none;
}
.event.last-event .middle, .event.last-event .left, .event.last-event .right{
background: transparent;
}
You can try with absolute and relative positioning for each of the elements, the background, the M, and the "eanwhile".
http://codepen.io/ruchiccio/pen/zBoGXY
<div id="background">
<div id="m">M</div>
<div id="title">eanwhile</div>
</div>
#background {width:500px; height:100px; background-color: yellow; border:4px solid black; position:relative;}
#m {font-size:220px; position:absolute; top:-80px;}
#title {font-size:70px; position:absolute; top:10px; left:180px;}
As the commenters mentioned, please include the code that you have tried so far next time.
Using CSS, the easiest way to do this is set the element with the border (I've chosen the class .box) to have position:relative;. Then put the image in the box, and set its position as: position:absolute;. After this, you can move the image around freely, relative to the .box. Here is an example: http://jsbin.com/dimonilife/edit?html,css,output
You can set overflow: visible to the element containing the image and then give the image negative margin top.
eg:
<div style="overflow: visible;">
<img src="..." style="margin-top: -40px" />
...
</div>
I have styled them using inline styles only for demo purposes, the styles should be applied using classes if you want to follow best practice.
I'm having this very annoying problem that I've tried to figure out for the past few days. I've even read every possible solution on Stackoverflow, but nothing works!
I have this code in my HTML:
<div id="picture">
<div class="picture-1"></div>
<div class="picture-2"></div>
<div class="picture-3"></div>
</div>
And this code in my CSS:
#picture {
height: 250px;
border-top: 1px solid #ffefaf;
border-bottom: 2px solid #ffffff;
clear: both;
}
.picture-1 {
background: transparent url('images/view.png') left top no-repeat;
}
.picture-2 {
background: transparent url('images/plant.png') left top no-repeat;
}
.picture-3 {
background: transparent url('images/view.png') left top no-repeat;
}
The pictures are in right folder, the names are right, and yet they won't work. What could be the problem?
Your picture DIVs have no dimensions. They do not automatically set their size to the image, like an IMG tag does. You need to set this in the CSS using width: and height:.
I think the problem is that your inner divs don't have a size so they try to add the following lines to your css:
#picture > div {
width: 200px;
height: 200px;
}
Add #picture div{height: 250px;}
Js fiddle for your answer-> http://jsfiddle.net/niteshp27/xkLd7/
Yes, I'm a newb so please go easy. I know there's got to be several ways to accomplish this. Basically I've been trying to come up with a consistent way to have a header with a line after the text that will run to the full width of a container element.
Something like this:
This is my header _______________________________________________________ |<- end container
This is another header __________________________________________________ |<- end container
I'm trying to create a .line class that will use bottom-border to create the line but I've been unsuccessful at creating a variable length line that will extend the full width of the container.
Here's what I've tried:
CSS:
.line
{
display:inline-block;
border-bottom:2px #5B3400 solid;
margin-left:5px;
width:80%;
}
HTML:
<h2>Our Mission<span class="line"></span></h2>
Of course this only gives me a line 80% of the container from the left border including the width of the text. How can I create a line that begins after the text and runs the full width of the border regardless of how much text is on the same line?
I know this should be easy but I haven't been able to find a solution yet.
Thanks!
THIS METHOD WILL WORK WITH TEXTURED BACKGROUNDS (background images):
You can try using this method instead, if your <h2> is on top of a background image.
HTML:
<h2 class="line-title"><span>This is my title</span><hr /></h2>
CSS:
.line-title {
font-size: 20px;
margin-bottom: 10px;
padding-top: 1px; /* Allows for hr margin to start at top of h2 */
}
/* clearfix for floats */
.line-title:after {
content: "";
display: table;
clear: both;
}
.line-title span {
padding-right: 10px;
float: left;
}
.line-title hr {
border:1px solid #DDD;
border-width: 1px 0 0 0;
margin-top: 11px;
}
See the working example here: http://jsfiddle.net/yYBDD/1/
How it Works:
the <h2> tag acts as a container for a floated element.
the <span> is floated left, causing the <hr /> to collapse to the left and fill the right space.
the <hr /> acts as the line, and fills up the remaining space to the right.
THIS METHOD WILL WORK WITH SOLID BACKGROUND COLORS:
HTML:
<h2 class="line-title"><span>This is my title</span></h2>
CSS:
.line-title {
border-bottom: 1px solid #DDD;
font-size: 20px;
height: 12px;
margin-bottom: 10px;
}
.line-title span {
background: #FFF;
padding-right: 10px;
}
You can see a working example here: http://jsfiddle.net/yYBDD/
How it works.
the <h2> tag has a class that sets the height to half of the height of the text it contains.
the <h2> has a bottom border, that extends to the width of it's parent container (since it's a block element).
the <span> inside of the <h2> has a white background, which will cover the area where the text and border overlap.
And finally, the <h2>> has a bottom margin, that compensates for the reduced height of the <h2>.
You could use flexbox to do this.
http://jsfiddle.net/eHHep/ (prefixes not included)
<h1 class="lineme">This is my header</h1>
<h2 class="lineme">This is another header</h2>
.lineme {
display: flex;
}
.lineme:after {
display: block;
content: " ";
border-bottom: 1px solid;
flex: 1 1 auto;
}
Advantages over other methods:
No extra markup required
Background color is not required
Down side:
Support for flexbox is low due to IE10 being the first IE to support it (see http://caniuse.com/#search=flexbox)
Your line goes away if your text wraps around
HTML:
<h2><span>Our Mission</span></h2>
CSS:
h2{
border-bottom: 1px solid #000;
height: 20px;
overflow: visible;
display: block;
width: 100%;
}
h2 span{
display: inline-block;
background: #fff;
height: 21px;
}
This way it'll overflow on the bottom border as it has bigger height.
Demo: http://jsfiddle.net/afuzk/
Here's something I tried and that worked:
HTML
<h2>Our Mission</h2>
CSS
h2:after
{
content: "\00a0";
border-bottom: solid 2px black;
position: fixed;
top: 0;
width: 100%;
margin-left: 3px;
}
The JS Bin to test: http://jsbin.com/ayuvuc/4
My css looks like this
* {
margin: 0;
padding: 0;
}
body {
background-color: #FFFFFF;
}
div#header {
background-color: #969696;
height: 80px;
}
div#mid-bar {
background: url(images/home.jpg) left no-repeat #6f6565;
height: 200px;
}
#searchbox {
background-color: #c1c1c1;
width: 200px;
height: 180px;
margin: 10px 20px 10px 350px;
}
and my html
<div id="header">
</div>
<div id="mid-bar">
<div id="searchbox">
</div>
</div>
you can see the problem. the space between header and mid-bar which is created due to the margin given in the searchbox div.
i want this margin for searchbox within the mid-bar div... and not from header div.
I's a known bug: would use padding instead of margin. so:
div#mid-bar {
background: url(images/home.jpg) left no-repeat #6f6565;
height: 200px;
padding-top: 10px;
}
#searchbox {
background-color: #c1c1c1;
width: 200px;
height: 180px;
margin: 0px 20px 10px 350px;
}
Give padding to #mid-bar instead of searchbox margin
I have seen this happen when you don't give margins to parents and the first element, even a child that you give margin to, causes gaps in the parents by creating margins. One way I've overcome this is by using paddings on the parent containers instead of margins.
See your example here with paddings: http://jsbin.com/ememi3
If you are intent on using margins, try setting margin:0; in #mid-bar. Otherwise give #mid-bar a padding-top:10px; and remove top margin from #searchbox.
Everyone seems to agree on this one, padding will work much better then margins will. I looked into it a little and it seems Pixeline is right, it's a known bug in Firefox, hopefully they will fix it in 4.