What I'm willing to achieve is some kind of dividers that are used on http://mintteal.com/ under the captions. There is an icon inside, but I've yet failed to create such horizontal line on both sides.
You could have a peek at their HTML/CSS to learn how they did it. Here is what they have:
<div class="title">
<h1>What We Do</h1>
<i class="fi-wrench"></i>
</div>
<style>
div.title {
text-transform: uppercase;
text-align: center;
letter-spacing: 0.01em;
font-weight: 700;
position: relative;
margin-bottom: 60px;
padding-bottom: 30px;
}
.title h1 {
font-size: 48px;
margin: 0;
}
.fi-wrench::before {
content: "\f215";
font-family: "foundation-icons";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
display: inline-block;
text-decoration: inherit;
}
div.title i {
position: absolute;
bottom: -20px;
left: 50%;
margin-left: -20px;
border: 3px solid #41c39f;
width: 40px;
height: 40px;
line-height: 37px;
background: #f4f4f5;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
text-align: center;
}
</style>
Perhaps this is what you wanted Demo.
The divider is made by the :before tag. And the content inside makes up the image.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I am creating some tags -- and have a bit of markup like this
<div class="tag">Tag</div>
and this will create a small white border round tag. It could have different media variants and in this instance want to add an icon to the tag, I'm trying to architect the less but its not taking hold.
<div class="tag .get_app">Tag</div>
<div class="tag .get_app">Tag</div>
<div class="tag .get_app">Tag</div>
http://jsfiddle.net/pg886/182/
.tag {
position: absolute;
top: 0;
left: 0;
text-transform: uppercase;
border-radius: 20px;
padding: 11px 35px 9px 20px;
color: pink;
background: white;
display: inline-block;
text-shadow: none;
font-size: 12px;
font-weight: 700;
line-height: 12px;
font-family: Roboto, sans-serif;
&::after {
position: absolute;
top: 6px;
right: 6px;
border-radius: 50%;
background: red;
padding: 4px;
display: inline-block;
color: white;
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
text-transform: none;
.get_app & {
content: "\E884";
}
.play_arrow & {
content: "\E037";
}
.volume_up & {
content: "\E050";
}
}
}
First of all, you have written your classes wrong in the HTML. You need to add them like this:
<div class="tag get_app">Tag</div>
<div class="tag play_arrow">Tag</div>
<div class="tag volume_up">Tag</div>
The extra classes are on the tag-class as well, so you need to set them right:
.tag {
position: absolute;
top: 0;
left: 0;
text-transform: uppercase;
border-radius: 20px;
padding: 11px 35px 9px 20px;
color: pink;
background: white;
display: inline-block;
text-shadow: none;
font-size: 12px;
font-weight: 700;
line-height: 12px;
font-family: Roboto, sans-serif;
&::after {
position: absolute;
top: 6px;
right: 6px;
border-radius: 50%;
background: red;
padding: 4px;
display: inline-block;
color: white;
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
text-transform: none;
}
&.get_app::after {
content: "\E884";
}
&.play_arrow::after {
content: "\E037";
}
&.volume_up::after {
content: "\E050";
}
}
JS Fiddle
Your syntax is wrong in your LESS file and you HTML class
Here is an updated fiddle
Your LESS for you .tag should look like this:
.tag {
position: absolute;
top: 0;
left: 0;
text-transform: uppercase;
border-radius: 20px;
padding: 11px 35px 9px 20px;
color: pink;
background: white;
display: inline-block;
text-shadow: none;
font-size: 12px;
font-weight: 700;
line-height: 12px;
font-family: Roboto, sans-serif;
&::after {
position: absolute;
top: 6px;
right: 6px;
border-radius: 50%;
background: red;
padding: 4px;
display: inline-block;
color: white;
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
text-transform: none;
}
&.get_app:after {
content: "\E884";
}
&.play_arrow:after {
content: "\E037";
}
&.volume_up:after {
content: "\E050";
}
}
And you have put the class . in you actual HTML class:
<div class="tag .get_app">Tag</div>
Should be:
<div class="tag get_app">Tag</div>
I have a header that needs to have a greeting div inside of it. And that div has to be styled with :before and :after. I cannot add it via HTML. But when you resize the window, everything gets messed up. And I have no idea how to stop it from happening, without changing the font-size.
Can someone please take a look and tell me if there's something I can do? Thank you!
.header {
background-image: url('http://lorempixel.com/1300/800/');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
min-height: 765px;
}
.title {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
padding: 0px 20px 7px 20px;
border: 1px solid #fff;
outline: 2px solid #000;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, .375);
font-size: 3em;
font-weight: 700;
color: #fff;
line-height: 1.3;
}
.title:before {
font-family: FontAwesome;
content: "\f051";
font-size: 1.5em;
vertical-align: bottom;
}
.title:after {
content: "Hello hello";
position: absolute;
font-size: 17px;
font-weight: 400;
text-transform: uppercase;
display: block;
top: 15px;
left: 75px;
line-height: 1;
}
<div class="header">
<div class="title">
Hello
</div>
</div>
you may try this code, removed the absolute position :
.header {
background-image: url('http://lorempixel.com/1300/800/');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
min-height: 765px;
text-align:center;
}
.title {
position: relative;
display:inline-block;
margin-top:15%;
padding: 0px 20px 7px 20px;
border: 1px solid #fff;
outline: 2px solid #000;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, .375);
font-size: 3em;
font-weight: 700;
color: #fff;
line-height: 1.3;
}
.title:before {
font-family: FontAwesome;
content: "\f051";
font-size: 1.5em;
vertical-align: bottom;
}
.title:after {
content: "Hello hello";
position: absolute;
font-size: 17px;
font-weight: 400;
text-transform: uppercase;
display: block;
top: 15px;
left: 75px;
line-height: 1;
}
<div class="header">
<div class="title">
Hello
</div>
</div>
i'm trying to have the height auto adjust based on the content that's in the div.. i realize to do this, I shouldn't have a height: xpx;.
my popover is:
.popover {
position: absolute;
top: 0;
left: 0;
height: 120px;
z-index: 1010;
display: none;
max-width: 276px;
text-align: left;
white-space: normal;
background: #fff;
padding: 10px;
font-size: 12px;
}
what's currently in the div of that popover is:
span.details{
display: block;
font-family: Georgia,serif;
margin: 0 0 15px 0;
color: #888;
}
span.status{
display: block;
margin-bottom: 10px;
margin-top: -7px;
}
span.status strong{
font-size:x-small;
vertical-align:top;
}
span.date{
display: inline-block;
float: right;
font-style: italic;
font-weight: bold;
font-size: 11px;
}
span.url{
display: inline-block;
font-style: italic;
font-size: 12px;
font-family: "Arial Black", Gadget, sans-serif;
margin-right: 5px;
}
what it looks like without the height: 120px;
http://sc-cdn.scaleengine.net/i/2952f44fb396097037f8f5eaeabc52cd.png
what it looks like with the height: 120px;
http://sc-cdn.scaleengine.net/i/614d383b7cba18a7f7a9bc017f53b9c4.png
any ideas here guys? i just want it to adjust to whatever is in the box!
.popover {
display:block;height:100%
}
try this
Text within a button is breaking up in two lines in Safari - but not in Chrome and Firefox, see the screenshots. Using the CSS property break-word: keep-all; doesn't seem to work.
Any suggestions how to solve this?
not good:
good:
CSS code:
.button {
font-size: 1.5em;
padding: 0em 0.6em 0.1em 0.6em;
margin-left: 0%;
margin-right: 0%;
margin-bottom: 24px;
width: auto;
text-decoration:none;
display: inline-block;
border: none;
border-radius: 1em;
background-color: #4ca8da;
background-repeat: no-repeat;
font-family: 'Populaire';
font-weight: normal;
font-style: normal;
color: white;
text-align: left; }
white-space: nowrap; should fix it.
Further information.
I'm making a webpage with a fixed footer. If there is a lot of content, there must be a scroll bar. If there is only one line of input in the content-part, there is no need to scroll. The way the page is made now, gives me a scroll bar all the time! It scrolls just as far so that the header disappears from the screen. --> My header is 150px high and I can scroll exactly 150px. But I don't want this. What is wrong with my html or CSS?
This is the html:
<body>
<div id="header">
<h1>The <span>ultimate</span><br />DVD collection</h1>
</div>
<div id="main_wrapper">
<div id="main">
<div id="choose">#abcdefghijklmnopqrstuvwxyz</div>
<div id="content">Main content comes here.</div>
</div>
</div>
<div id="footer">
<p>My Name <span>admin log-in</span>
</p>
</div>
Here's my CSS:
html, body {
height: 100%;
margin: 0 auto;
}
body {
font-family: Helvetica, Arial, sans-serif;
color: #666;
font-size: 12px;
line-height: 1.5em;
/*position: relative;*/
}
#header {
height: 150px;
background: linear-gradient(left, #2a2620, #a35e47);
border-top: 10px solid #f6e6c5;
border-bottom: 10px solid #f6e6c5;
background-color: #a35e47;
}
h1 {
width: 960px;
margin: 35px auto 0;
font-family:'Luckiest Guy', cursive;
font-size: 3.5em;
line-height: 1em;
text-transform: uppercase;
font-weight: 400;
color: #a35e47;
text-shadow: 0px 0px 2px #f6e6c5, 4px 4px 8px #000000;
}
h1 span {
font-family:'Aclonica', Verdana, sans-serif;
font-size: 1.75em;
}
#main_wrapper {
height: 100%;
min-height: 100%;
background-image: url('http://4.bp.blogspot.com/-jPxP0Hgum7o/T0OiL_IupqI/AAAAAAAAAMs/Xu5zNtqULoE/s1600/IMG_0665+Hollywood+star.jpg');
background-repeat: no-repeat;
background-position: 50% 60%;
background-color: #5a646d;
}
#main {
width: 960px;
height: 100%;
margin: 0 auto;
background-color: #fff;
opacity: .75;
/*overflow: auto;*/
}
#choose {
margin-left: 20px;
font-family: georgia, serif;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
font-size: 1.5em;
line-height: 2em;
letter-spacing: 20px;
overflow: hidden;
}
#content {
margin-left: 20px;
margin-right: 20px;
}
#footer {
height: 40px;
width: 100%;
border-top: 10px solid #f6e6c5;
background: linear-gradient(left, #2a2620, #a35e47);
position: fixed;
left: 0;
bottom: 0;
}
You can also see my code in this jsFiddle.
What am I doing wrong? (look at the scroll bar in the picture)
Thanks in advance!
Remove height:100% on the main-wrapper. The height of 100% means 100% of the available space inside the parent (the header and the main-wrapper has the same parent). But the main-wrapper is not aware of the headers height. So the result will be 100% + 150px.
I have made a few adjustment in style.
I have given percentage height for your container(you can adjust them as per you need) and scroll property to div.
<style>
html, body {
height: 100%;
margin: 0 auto;
}
body {
font-family: Helvetica, Arial, sans-serif;
color: #666;
font-size: 12px;
line-height: 1.5em;
/*position: relative;*/
}
#header {
height: 15%px;
background: linear-gradient(left, #2a2620, #a35e47);
border-top: 10px solid #f6e6c5;
border-bottom: 10px solid #f6e6c5;
background-color: #a35e47;
}
h1 {
width: 960px;
margin: 35px auto 0;
font-family:'Luckiest Guy', cursive;
font-size: 3.5em;
line-height: 1em;
text-transform: uppercase;
font-weight: 400;
color: #a35e47;
text-shadow: 0px 0px 2px #f6e6c5, 4px 4px 8px #000000;
}
h1 span {
font-family:'Aclonica', Verdana, sans-serif;
font-size: 1.75em;
}
#main_wrapper {
/*height: 100%;*/
/*min-height: 100%;*/
background-image: url('http://4.bp.blogspot.com/-jPxP0Hgum7o/T0OiL_IupqI/AAAAAAAAAMs/Xu5zNtqULoE/s1600/IMG_0665+Hollywood+star.jpg');
background-repeat: no-repeat;
background-position: 50% 60%;
background-color: #5a646d;
}
#main {
width: 960px;
height: 70%;
margin: 0 auto;
background-color: #fff;
opacity: .75;
/*overflow: auto;*/
overflow:scroll;
}
#choose {
margin-left: 20px;
font-family: georgia, serif;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
font-size: 1.5em;
line-height: 2em;
letter-spacing: 20px;
overflow: hidden;
}
#content {
margin-left: 20px;
margin-right: 20px;
}
#footer {
height: 15%;
width: 100%;
border-top: 10px solid #f6e6c5;
background: linear-gradient(left, #2a2620, #a35e47);
position: fixed;
left: 0;
bottom: 0;
}
</style>
I worked around it using this explanation: http://dorayme.netweaver.com.au/ciaran.html
My wrapper now has a position:absolute with top: and bottom: equal to the height of header and footer (+ height of borders)
#main_wrapper{
position: absolute;
top: 170px; /* header + bordertop + borderbottom */
bottom: 50px; /* footer + bordertop */
left: 0;
right: 0;
background-image: url('path/to/img.jpg');
background-repeat: no-repeat;
background-position: 50% 40%;
background-color: #5a646d;
}
Thx to Johan Sundén for pushing me into the right direction!!