I need to get the div content like this
Where "time" is the text on the background-image
Use CSS Positioning techniques, here am doing nothing but nesting an element which is set to position: absolute; under the parent element which is set to position: relative;. Also am using rgba for opaque border and last but not the least am using bottom and right properties set to 0 to position the timer on the bottom right.
Demo
div {
height: 200px;
width: 280px;
background: url(http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg);
border: 5px solid rgba(0,0,0,.4);
position: relative;
}
div span {
position: absolute;
right: 0;
bottom: 0;
padding: 5px;
font-weight: bold;
font-size: 14px;
font-family: Arial;
color: #fff;
background: rgba(0,0,0,.5);
}
Related
I have two divs, div1 and div2. I wanted div2 below div1 because I have used position absolute property in div1. Div2 is going above div1
I wanted to use position absolute because I wants to position div1 at bottom left corner
.home {
position: absolute;
border: 2px solid green;
top: 50%;
left: 8px;
padding: 33px 23px;
line-height: 60px;
display: block;
}
.about {
display: block;
border: 2px solid red;
}
<div class="home">div1</div>
<div class="about">div2</div>
If you want to have the div1 in lower left corner, and want div2 below the div1, then:
you can enclose the 2 divs in another div, and have the position: absolute; for that div
and also, instead of top: 50%;, you can have bottom: 0.
This will make sure that, the parent div is placed exactly at the bottom left corner (and not on left edge).
And you can remove the position: absolute; from div1.
This way, you can be sure that div2 will appear below div1, as both these divs will not have position set as absolute, and they will appear relative to each other.
.home {
border: 2px solid green;
padding: 33px 23px;
line-height: 60px;
display: block;
}
.about {
display: block;
border: 2px solid red;
}
.bottomLeft {
position: absolute;
bottom: 0;
}
<div class="bottomLeft">
<div class="home">div1</div>
<div class="about">div2</div>
</div>
Edit 1: Modified top: 50%; to bottom: 0;, and improved formatting.
To immediately solve your problem, I would suggest wrapping both of these divs in another element, then positioning that new outer element absolutely at the bottom left:
.container {
/* position in the bottom left*/
position: absolute;
bottom: 0;
left: 0;
}
.home {
border: 2px solid green;
padding: 33px 23px;
line-height: 60px;
}
.about {
border: 2px solid red;
}
<div class="container">
<div class="home">div1</div>
<div class="about">div2</div>
</div>
There are many ways to solve the same problem in CSS however, and which is the best largely depends on the context. There's not really enough information in your question to give a definitive answer, or even to be sure the above will work as expected in your case.
I'm trying to create something like this:
To start that design I would like first to create one part of header text bold(using different font), how can i accomplish this?
Currently this spawns my header title:
<h2 class="h1 section-header--left" style="font-family: Geogrotesque Regular; color: #071435; font-size: 22px">MEEST POPULAIR</h2>
To make text bold I use font "Geogrotesque SemiBold", does anyone know how I can add this css in html line and create the design I want? So text "Meest" should be font "Geogrotesque Regular" and text "Populair" should be font "Geogrotesque SemiBold".
Would be nice if you know css to create dashes around header to.
Niels
This is simple example with other font:
h2 {
font: 33px sans-serif;
margin-top: 30px;
text-align: center;
text-transform: uppercase;
}
h2.background {
position: relative;
z-index: 1;
}
h2.background:before{
border-top: 2px solid #dfdfdf;
content:"";
margin: 0 auto; /* this centers the line to the full width specified */
position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
top: 50%; left: 0; right: 0; bottom: 0;
width: 95%;
z-index: -1;
}
span {
/* to hide the lines from behind the text, you have to set the background color the same as the container */
background: #fff;
padding: 0 15px;
font-family:arial;
}
h2.double:before {
/* this is just to undo the :before styling from above */
border-top: none;
}
h2.double:after {
border-bottom: 1px solid blue;
-webkit-box-shadow: 0 1px 0 0 red;
-moz-box-shadow: 0 1px 0 0 red;
box-shadow: 0 1px 0 0 red;
content: "";
margin: 0 auto; /* this centers the line to the full width specified */
position: absolute;
top: 45%; left: 0; right: 0;
width: 95%;
z-index: -1;
}
<h2 class="background double"><span style='font-family: Geogrotesque Regular!important;' >FIRST</span><span style='font-family: cursive!important;'>TWO</span></h2>
I'm trying to create a div that has a left and top border with text in top line. what I am trying to achieve is the following...
html half box
I am able to get the top with the text using the following css or alternately a table but can't get it with the left border also. any 'outside the box' thinkers?
.hr-sect {
display: flex;
align-items: center;
color: blue;
margin: 8px 0px;
}
.hr-sect::before
{
content: "";
width: 20px;
background: #000;
height: 1px;
font-size: 0px;
line-height: 0px;
margin: 0px 8px;
}
.hr-sect::after {
content: "";
width:100%;
background: #000;
height: 1px;
font-size: 0px;
line-height: 0px;
margin: 0px 8px;
}
CATEGORY
CATEGORY
You can simulate that interrupted border line by using an absolutely placed div that has a non-transparent background, just make sure it matches the actual background color.
.half-box {
border-left: 1px solid black;
border-top: 1px solid black;
position: relative;
padding: 30px;
}
.half-box > .title {
background-color: white;
padding: 0 10px;
position: absolute;
top: 0;
left: 30px;
font-size: 20px;
transform: translateY(-50%);
}
<div style="height: 100px">
</div>
<div class="half-box">
some content
<div class="title">
CONTENT
</div>
</div>
Set a positioning context on the outer box with position: relative;
For the border, use a pseudo ::before element with content: " "; and give it a position: absolute; to take it out of the flow. Give it a top and left border.
For the heading, also use position: absolute; and move it up with top: -20px or whatever. Set the same background color as the outer box to mask the border.
Adjust your margins and paddings as needed.
See this codepen: https://codepen.io/matthewsmith_io/pen/RVYQqy
I am trying to get this done in HTML and CSS. I am able to get the box done using the border and padding. But how do I get the line above?
Here is what I have so far:
.november {
padding: 1%;
border: 2px solid #000;
}
<div class="november">November 2014</div>
Pseudo element goodness
The HTML
It's a one liner:
<div>November 2014</div>
The CSS
The vertical line is created with a :before pseudo element:
The :before pseudo element is given position: absolute
left: 50% shifts the line to the middle and bottom: 100% pops the line above the div
The line is created by the 2px width
margin-left: -2px shifts the line 2px to the left to correctly offset its position (this is equal to the width)
The div is made position: relative and the position: absolute :before will position itself in relation to it. Space above the div is created with the top margin.
Complete Example
In this example, display: inline-block allows the div to expand and retract with its contents.
div {
padding: 10px;
border: solid 2px #000;
display: inline-block;
position: relative;
margin-top: 50px;
}
div:before {
content: '';
width: 2px;
height: 50px;
background: #000;
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -2px;
}
<div>November 2014</div>
I tried this and got it right:
body {
background: #EEE;
}
.november {
margin: 0;
padding: 1%;
border: 2px solid white;
clear: both;
}
<div class="col-sm-2">
<hr style="width: 2px; border-top: 50px solid white; padding: 0; text-align: center; margin: auto;" />
<div class="november">November 2014</div>
</div>
I'm trying to add a triangle before a div using css, but it ends up under it.
http://jsfiddle.net/lasseedsvik/LwE7u/
HTML
<div id="container">
1234
<div id="toolbar">
Want silly triangle before this div to left
</div>
</div>
CSS
#container {
width: 500px;
}
#toolbar:before
{
width: 44px;
content: '';
height: 0px;
border-style: solid;
border-width: 0 0 44px 44px;
border-color: transparent transparent blue transparent;
}
#toolbar {
float: right;
width: 350px;
height: 44px;
background: blue;
color: #fff;
}
Is there something missing like display: inline or something?
Use CSS Positioning to set the triangle correctly, in the example below, I am using position: relative; on the parent element, and than use position: absolute; for the :before pseudo..and than use left property which is dobule of the elements width
Always you should wrap the absolute positioned elements with a relative positioned containers, else your element will fly out in the wild.
Demo
#container {
width: 500px;
}
#toolbar:before {
position: absolute;
left: -88px; /* Double the element size */
width: 44px;
content: '';
height: 0px;
border-style: solid;
border-width: 0 0 44px 44px;
border-color: transparent transparent blue transparent;
}
#toolbar {
float: right;
width: 350px;
height: 44px;
background: blue;
color: #fff;
position: relative;
}
Note: Generally when you are creating triangles using CSS, it's a
common practice to set the elements height and width to 0 so if
you want, just tweak them up.
Try putting your div#toolbar in position:relative and positionning your pseudo-element in an absolute manner. Then adjust position and margins to position it correctly.
http://jsfiddle.net/LwE7u/2/