I'm trying to create a body border for my site that has a gap near the top for the logo, yet is completely closed at the bottom. I can only seem to do one or the other.
Here is what I am looking for, Body Border example:
Here's the approach I've been taking. A simple body wrapper with before/after psuedo elements.
HTML
<html>
<body>
<div class="borderWrap>
<header> Logo resides here </header>
<main> content goes here </main>
</div>
</body>
</html>
CSS
.borderWrap{position: relative; }
.borderWrap:after, .borderWrap:before {
border: 0.125em solid ;
bottom: 20px;
content: '';
position: absolute;
top: 35px;
width: 40.5%;
bottom: -50px;
}
.borderWrap:after {
border-left: none;
right: 40px;
}
.borderWrap:before {
border-right: none;
left: 40px;
}
This gives me a dynamic border as I need, but it still leaves a gap at the bottom. How do I go about closing it? Should I use a different method alltogether?
I've taken a different approach of just applying a regular border to 'borderWrap' and centering the header within it, then applying a negative top margin and a solid white background.
https://jsfiddle.net/partypete25/xvhb4kuf/
.borderWrap {
position: relative;
margin:35px auto 20px;
width:81%;
border: 0.125em solid;
}
header {
width:80px;
background:#fff;
margin:-20px auto 0;
}
Here is one way of doing it using pseudo-elements.
You can control the width of the white-gap using calc(50% + 40px) for example, where 40px is the half-width of the desired gap width, using
this value for the left and right offsets for the absolute positioned pseudo elements.
You could simplify things by simply using a percentage value for the offsets in case you don't want to use the CSS calc function.
The advantage of this approach is that if you have any background colors or images, they will show through the gap in the top border.
In my example, I illustrate how to create the border. How you will use it in your layout will depend on how you build your page, but the approach is the same.
.borderWrap {
position: relative;
height: 400px;
border: 2px solid black;
border-top-width: 0;
}
.borderWrap:before, .borderWrap:after {
content: '\A0';
border-top: 2px solid blue;
position: absolute;
top: 0;
}
.borderWrap:before {
left: 0;
right: calc(50% + 40px);
}
.borderWrap:after {
right: 0;
left: calc(50% + 40px);
}
<div class="borderWrap"></div>
Related
I want to make a message box at the lower left corner of the browser window. I want the div to remain stuck to the lower left corner. So if I make the browser smaller it will not disappear. Here is the jsfiddle I am working with. But it's not working. How can it be done in css? Here is my css code:
#lowerleft
{
margin-bottom: 1px;
margin-left : 1px;
width: 200px;
height: 200px;
background-color: red;
color: green;
}
Take a look at position; in this case position: fixed; bottom: 0;
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
#lowerleft
{
margin-bottom: 1px;
margin-left : 1px;
width: 200px;
height: 200px;
background-color: red;
color: green;
position: fixed;
bottom: 0;
}
<div id="lowerleft">
I am stuck to lower left border of browser. And I am stuck at the top of lower boundary of te browser.
</diV>
#lowerleft
{
position:fixed;
bottom:0;
left:0;
margin-bottom: 1px;
margin-left : 1px;
width: 200px;
height: 200px;
background-color: red;
color: green;
}
Jsfiddle Demo
To your css add this:
position: absolute;
bottom: 0px;
left: 0px;
JSFiddle
Use absolute positioning (syntax example below):
#lowerleft {
position: absolute;
left: 0; bottom: 0;
}
What you are currently doing is modifying the margin of the element. This only has an effect on the elements surrounding the subject.
Using absolute positioning places the subject div on top of everything else, having no effect on surrounding elements.
Find out about absolute positioning from the w3Schools site here.
What I'm trying to accomplish in pure CSS is setting the left border of a Bootstrap 3 panel:
Here is the strandard way to do it:
.panel-default>.panel-heading.standard {
border-left: 5px solid red;
}
Here is using pseudo-elements:
.panel-default>.panel-heading.pseudo:before {
position: absolute;
top: 0;
left: 0;
content: " ";
display: block;
width: 4px;
height: 100%;
background-color: blue;
}
Result is not OK in both cases. With the standard way the border is kinda "oblique" (only in bottom-right corner, why?), with pseudo-elements I can make the rectangle margins negative (i.e. -1, -1) but then I need to know the exact height of the heading:
You don't need to know the exact height of the heading, only the height of the borders. So, for example, if the borders on top and bottom are both 1px:
.panel-default>.panel-heading.pseudo:before {
position: absolute;
top: -1px;
bottom: -1px;
left: 0;
content: " ";
display: block;
width: 4px;
background-color: blue;
}
Demo: http://jsfiddle.net/sbr3q2tq/
I'm looking for a CSS trick to fix ie8.
In the sample, i put a code to make two distinct column 'content' and 'menu'.
My problem on ie8 is that i have to change margin-left of content to 140px. < (If i don't do this, i don't get a correct margin on ie and content is on menu.)
But the div width doesn't change and that make a scrool bar on y axes that i don't want.
On others browsers, that make the job without specife the width and auto-width alone.
HTML :
<div class="menu">
Menu
</div>
<div class="content">
Content
</div>
CSS:
.menu {
width: 110px;
position: absolute;
top: 60px;
bottom: 0;
left: 0;
border: 1px solid red;
}
.content {
margin-left:110px;
border: 1px solid blue;
}
Any idea? Thanks!
JSFIDDLE
Here my fix for ie8
.l-content {
position: absolute;
top: 60px;
bottom: 0;
left: 5px;
right: 10px;
}
I came across this page of a themed website that has form field labels with triangles on one side:
http://www.openblackbelt.com/app/index.php?action=profile
A triangle technique is a nice accent to break up the monotony of forms without the usual rounded border or some other getting-over-used approach.
The only problem is, I can't seem to actually determine how the triangular accenting is done. I don't see any use of :before or :after, and there is only one html element <label> involved as far as I can tell. Can anyone do a breakdown of how to perform this technique on my own?
It's nothing but a small div positioned relative containing absolute positioned div using CSS Triangles. I've made a demo from scratch, you can check this out.
Demo
div {
height: 30px;
width: 200px;
background: #f00;
position: relative;
}
div span {
height: 0;
width: 0;
display: block;
position: absolute;
right: -30px;
border-bottom: 30px solid #f00;
border-right: 30px solid transparent;
}
If you want to save an element, you can use :after pseudo(won't work in IE), you can try this
Demo
div {
height: 30px;
width: 200px;
background: #f00;
position: relative;
}
div:after {
height: 0;
width: 0;
display: block;
position: absolute;
right: -30px;
content: " ";
border-bottom: 30px solid #f00;
border-right: 30px solid transparent;
}
No span tag required here.
Explanation: I am just using an absolute position element with a height and width set to 0 and am using borders around the element, making one a transparent, thus creating that triangle shape. And than I use right to position it correctly.
They do it by giving it a border-bottom:24px; and border-right:24px; by positioning the div absolute
#feitla is on the right path, #Kzqai specific what you asked for is achieved as below:
CSS:
.contact-form label {
border-right: 24px;
}
HTML:
<label for="openbb_username">Enter your email address</label>
Is there anyway I can vertical-align text to appear above the border-top like I can below the border-bottom when the height is set to height:0px;?
HTML:
<ul id="experiment" style="background: #FFDD00;">
<li id="test1"><span class="v-align-bot">Chocolate</span></li>
<li id="test2"><span class="v-align-top">Potato</span></li>
</ul>
CSS:
#test1 {
height: 0px;
border-bottom: 50px solid #648291; /*grey*/
}
#test2 {
height: 0px;
border-top: 50px solid #FA8723; /*orange*/
}
.v-align-bot {
vertical-align: -50px;
}
.v-align-top {
vertical-align: 50px;
}
The Chocolate easily aligns below the border-bottom. The Potato does align above the li but the border-top follows(?) it as well.
TL;DR: Is there anyway I can make the BUTTONs in this fiddle below align properly?
http://jsfiddle.net/jLYhg/
Weird wishes eh ;) for doing this, actually the border of an element renders outside the element, so there's no straight way of doing this, but still if you want to get the text vertically middle on the borders, than you need to change couple of things in your markup as well as your CSS.
First of all wrap the words using a simple span tag, than use the below rules in your CSS
Demo
.v-align-bot span {
position: absolute;
top: 15px;
}
.v-align-top span {
position: absolute;
top: -35px;
}
Also make sure you use position: relative; on the below id's else they will flow out in the wild.
#test1 {
height: 0px;
border-bottom: 50px solid #648291; /*grey*/
position: relative;
}
#test2 {
height: 0px;
border-top: 50px solid #FA8723; /*orange*/
position: relative;
}