I want to create an icon that looks like a circle with a "plus" icon inside and right below it a descriptive p tag.
For I reason I cannot figure out doing this completely breaks the whole block. What am I doing wrong?
jsfiddle
Here's the HTML:
<div class="follow-single">
<div class="follow-wrapper">
<a class="follow" id="#follow_4" rel="nofollow" data-method="put" href="/jessie/follow">
<span class="glyphicon glyphicon-plus"></span>
<p class="title">Unfollow</p>
</a>
</div>
</div>
And the CSS:
follow-single {
max-width: 360px;
margin: 0 auto;
border-top: 1px solid #ddd;
margin-top: 20px;
padding-top: 20px;
}
.follow-single .follow-wrapper {
text-align: center;
}
.follow-single .follow-wrapper .follow {
color: #3c763d;
background-color: #dff0d8;
border: 1px solid #d6e9c6;
padding: 10px 17px;
border-radius: 4px;
}
.follow-single .follow-wrapper a {
text-decoration: none;
}
.follow-single .follow-wrapper .title {
font-size: 12px;
display: block;
}
Set the display on the achor tag to be inline-block.
.follow {
display: inline-block;
}
Fiddle
Additionally, an unrelated to the original question, your definition of follow-single is missing a leading dot character: .follow-single
Related
The spent text with the teal background is meant to be a tag, and I want the tag to appear above the todo bar...kind of like this:
Like a small rectangle on top of a big one. So the tag would be on the top left corner of the todo bar. How would I achieve this? I've tried doing margin to the tag, but that did not work out at all.
CSS for the tag (style.css)
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
React JS code for the tag part (Todo.js)
<li className={`todo-item${todo.completed ? "completed" : ""}`}>
{isSpent && <p className="tag">Spent</p>}
{isReceived && <p className="tag">Received</p>} ${text}
</li>
In case anyone needs the whole of the todo.css file: https://pastecode.io/s/s5XZ9e3DRW
If you need anymore information, or if my question was poorly phrased, please tell me. Any help is very much appreciated. Thank you!
I think if yow will separate the tag and the navbar to two different div tags and put them on main div something like:
<div id="wrapper">
<div id="top-left">top left div</div>
<div id="down">down side div</div>
</div>
and the css will be something like (using grid on the main div):
#wrapper {
display: grid;
}
#top-left {
background: green;
width: 250px;
float:left;
margin-right: 20px;
}
#down {
background: blue;
float:left;
width: 500px;
}
the result is:
I would go with something like this, where input:focus could be a class set on on .container, for example, if the input has any values.
I couldn't understand why you used li and p in your original code, because you need to override so much stuff to make it look nice.
Using "rem" over a fixed pixel value is also preferred if you want to create a responsive site, where you just override the font-size in the body to make everything scale.
.container {
position: relative;
display: flex;
}
body,
input {
padding: 1rem;
}
.container.selected > .todo-item,
input:focus ~ .todo-item {
transform: translateY(-1rem);
}
.todo-item {
position: absolute;
left: 1rem;
transform: translateY(1rem);
transition: transform 400ms;
}
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
<div class="container">
<input type="number">
<div class="todo-item"><span class="tag">Spent</span></div>
<div style="padding-top: 1rem"><-- select this input</div>
</div>
<div class="selected container" style="padding-top: 2rem">
<input type="number">
<div class="todo-item"><span class="tag">Spent</span></div>
</div>
body {
background-color: #48AEE0;
}
.container {
height: 200px;
width: 500px;
display: flex;
flex-direction: column;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
width: 80px;
text-align: center;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.other {
margin: 0;
display: inline-flex;
flex-direction: column;
}
input {
height: 30px;
width: 200px;
border: white;
margin: 0;
}
<div class="container">
<div class="tag">spent</div>
<div class="others">
<input type="text">
</div>
</div>
Today, I am comming with a problem from work. First of all, the code was created some time ago and I have to correct it now. Of course I've made the sandbox easier to avoid unnecessary styles.
<div>
<a id="perfect" href="https://css-tricks.com/">
<span class="perfect">
<p>Perfect</p>
</span>
<span class="maker">Solution</span>
</a>
</div>
<div>
<a href="https://css-tricks.com/">
<span class="problem">Problem</span>
<span class="maker">Makes me cry</span>
</a>
</div>
<div>
<a href="https://css-tricks.com/">
<span class="problem">Problem</span>
<span class="maker">Makes me cry</span>
</a>
</div>
div {
display: block;
width: 150px;
height: 150px;
background: lightblue;
text-align: center;
float: left;
margin: 10px;
}
a {
display: block;
width: 150px;
height: 150px;
text-decoration: none;
color: black;
}
.problem {
display: block;
padding: 30px 10px 0;
}
.maker {
display: block;
padding: 20px 10px 0;
}
p {
padding: 0;
margin: 0;
}
p:hover {
color: red;
}
I have three tile there. First of all works what I expect, but I would like to receive the same result on the second and third tile without paragraph.
The clue is that red color appears, if I put a mouse on random place above right content. I mean all span called "problem" is on hover.
How to ensure a similar behaviour like in first tile on the others without using paragraph? Do you have some idea?
I've tried to do that using margin, but it was wrong.
Try to add this into your stylesheets:
div > a > span:hover {
color: red;
}
Here is a solution:
Your issue is that your applying padding: 30px 10px 0; to span. The link is applying itself to the entire span with its padding.
I removed padding on your span and instead applied it to the div. - You can now adjust the padding on the div instead of the span.
Additionally, I moved the #perfect id to the first div because it had a different background-color.
div {
display: block;
width: 150px;
height: 150px;
background: lightblue;
text-align: center;
float: left;
margin: 10px;
padding: 30px 10px 0;
}
a {
display: block;
width: 150px;
height: 150px;
text-decoration: none;
color: black;
}
.problem {
display: block;
}
.problem:hover {
color: red;
}
.maker {
display: block;
}
p {
padding: 0;
margin: 0;
}
p:hover {
color: red;
}
.perfect {
display: block;
}
#perfect {
background-color: pink;
}
<div id="perfect">
<a href="https://css-tricks.com/">
<span class="perfect">
<p>Perfect</p>
</span>
<span class="maker">Solution</span>
</a>
</div>
<div>
<a href="https://css-tricks.com/">
<span class="problem">Problem</span>
<span class="maker">Makes me cry</span>
</a>
</div>
<div>
<a href="https://css-tricks.com/">
<span class="problem">Problem</span>
<span class="maker">Makes me cry</span>
</a>
</div>
Just change the display for the .problem from 'block' to 'inline-block', change the padding-top to 0 and give a margin-top of 30px
.problem {
display: inline-block;
padding: 0px 10px 0;
margin-top: 30px;
}
.problem:hover {
color: red;
}
I have the following HTML:
<div class="Section__item">
<div class="Section__item__title">Title</div>
<div>
<img
class="Section__item__image"
width="120px"
src="/static/images/test.jpeg"
>
<i class="Section__item__icon icon-right-nav-workflow"/>
</div>
<div class="Section__item__text">This is a descritption</div>
</div>
And this is my style using scss:
.Section {
&__item{
border: #EEF3F7 solid 1px;
padding: 10px;
height: 150px;
margin-bottom: 15px;
box-shadow: 3px 3px #EEF3F7;
&:hover {
background-color: #E3F4FE;
cursor: pointer;
}
&__title {
text-align: left;
color: black;
font-size: 16px;
font-weight: 900;
}
&__image {
padding-top: 5px;
float: left;
}
&__icon {
float: right;
font-size: 40px;
}
&__text {
float: left;
}
}
}
The result is the following:
And what I need to get is the following:
I need the text to be under the image and where you see a "red" line in the right the text can't go further, if text is bigger then wrap text.
Also if you see right icon has to be positioned exactly on the same top level as the image.
Any clue?
There's loads of ways to do this (flexbox, grid, tables, absolute positioning). The oldschool way would be a clearfix but really you should avoid floats altogether. The simplest solution to what you have so far is to remove ALL of the float's; make the div that holds the image and the icon position:relative; and set the icon to position:absolute; top:0; right:0;.
.Section__item {
border: #EEF3F7 solid 1px;
padding: 10px;
min-height: 150px; /* changed to min-height so that it expands if there's loads of text */
margin-bottom: 15px;
box-shadow: 3px 3px #EEF3F7;
width:400px;
}
.Section__item:hover {
background-color: #E3F4FE;
cursor: pointer;
}
.Section__item__title {
color: black;
font-size: 16px;
font-weight: 900;
}
.Section__item__imagewrap {
position: relative;
}
.Section__item__image {
margin-top: 5px;
}
.Section__item__icon {
font-size: 40px;
line-height: 40px;
position: absolute;
top: 0;
right: 0;
}
.Section__item__text {}
<div class="Section__item">
<div class="Section__item__title">Title</div>
<div class="Section__item__imagewrap">
<img class="Section__item__image" width="120px" src="https://placeimg.com/320/240/any">
<i class="Section__item__icon icon-right-nav-workflow">i</i>
</div>
<div class="Section__item__text">This is a description. If the text is long it will wrap and the section__item's height will increase to fit the content.</div>
</div>
Uh... don't use float? Or rather, only use float on the one thing you want to break out of normal flow, which is the icon.
PS: <i> is not an autoclosing tag, so writing <i /> is incorrect even if browsers will likely ignore your mistake. Also, putting padding on an image doesn't seem right, I switched to margin-top in this code.
.Section__item {
display: inline-block; /* so it doesn't take full width of the snippet */
border: #EEF3F7 solid 1px;
padding: 10px;
height: 150px;
margin-bottom: 15px;
box-shadow: 3px 3px #EEF3F7;
}
.Section__item:hover {
background-color: #E3F4FE;
cursor: pointer;
}
.Section__item__title {
text-align: left;
color: black;
font-size: 16px;
font-weight: 900;
}
.Section__item__image {
margin-top: 5px;
vertical-align: top;
}
.Section__item__icon {
font-size: 40px;
float: right;
}
<div class="Section__item">
<div class="Section__item__title">Title</div>
<div>
<img class="Section__item__image" width="120" height="120">
<i class="Section__item__icon icon-right-nav-workflow">Icon</i>
</div>
<div class="Section__item__text">This is a descritption</div>
</div>
.left-icons is inline-block and has a height of 21px:
Note that the height of the image inside of it is 38px:
CSS Tricks says:
If the height of the containing block is not specified explicitly, and
the element is not absolutely positioned, the value of its height
computes to auto (it will be as tall as the content inside it is, or
zero if there is no content).
The height of the containing block isn't being explicitly specified. So why is my outer element smaller than the image inside of it?
HTML
<div class='tango-directive-template'>
<div class='tango level-{{ level }}'>
<span class='left-icons'>
<img
ng-show='tango.children.length > 0'
src='/assets/images/show-arrow.png'>
<span class='author'>A</span>
</span>
<textarea
ng-focus='focus = true;'
ng-blur='focus = false;'
rows='1'>{{ tango.text }}</textarea>
<p class='menu' ng-show='focus'>
<span class='glyphicon glyphicon-indent-left'></span>
<span class='glyphicon glyphicon-indent-right'></span>
<span class='glyphicon glyphicon-arrow-down'></span>
<span class='glyphicon glyphicon-arrow-right'></span.
</p>
</div>
<tango
ng-repeat='subtango in tango.children'
tango='subtango'
level='{{ +level + 1 }}'>
</tango>
</div>
CSS
.tango-directive-template {
.tango {
margin-bottom: 20px;
.left-icons {
display: inline-block;
text-align: right;
width: 67px;
img, .author {
position: relative;
bottom: 15px;
margin-right: 5px;
height: 100%;
}
img {
height: 20px;
}
.author {
border: 1px solid gray;
border-radius: 25px;
padding: 10px;
}
}
textarea {
font-size: 18px;
width: 700px;
line-height: 135%;
padding: 8px 16px;
resize: none;
border: 1px solid white;
overflow: hidden;
}
textarea:focus {
outline: none;
border: 1px solid gray;
overflow: auto; // only have scroll bar when focused
}
.menu {
width: 750px;
span {
float: right;
margin-left: 15px;
cursor: pointer;
}
}
}
#for $i from 0 through 10 {
.level-#{$i} {
position: relative;
left: #{$i*65}px;
}
}
}
Use an inline block.
span.left-icons{
display: inline-block;
}
You probably should try a clearfix method.
Look here: What methods of ‘clearfix’ can I use?
I am trying to create a little graphical box for a time element on a website. What I would like to have is something like this:
I have this HTML:
<div class="entry-meta">
<time class="entry-date" datetime="2011-09-16T09:59:48+00:00" pubdate="">
<span class="date-day">16</span>
<span class="date-month">Sep</span>
<span class="date-year">2011</span>
</time>
</div>
And this CSS so far:
.entry-meta {
display: block;
color: white;
float: left;
background: #aaa;
}
.date-day {
display: block;
font-size: 30px;
background: #444;
float: left;
}
.date-month {
display: block;
font-size: 12px;
background: #666;
float: left;
}
.date-year {
display: block;
font-size: 12px;
background: #888;
float:left;
}
My problem is that I cannot achieve two things:
To align the text to the corners of the box and forget about the baseline. I would like to align 16 to the top left corner and cut it's box at the bottom right corner. I am looking for eliminating all the spacing pixels.
To move the year under the month, without specifying exact width and height properties. If I delete float: left then it goes under the day. What I would like to have is to move it right of the day and under the month. Do I need to create an other div or spand for the month + year?
Also, it seems that it doesn't matter if I remove display: block from the span CSS-es why is it?
Here is a jsFiddle I created:
http://jsfiddle.net/ESbqY/3/
An update one based on Kolink's suggestion:
http://jsfiddle.net/ESbqY/5/
Fully customizable:
http://jsfiddle.net/5MMc9/8/
html:
<div class="entry-meta">
<time class="entry-date" datetime="2011-09-16T09:59:48+00:00" pubdate="">
<div class="date-day">16</div>
<div class="container">
<div class="date-month">Sep</div>
<div class="date-year">2011</div>
</div>
</time>
</div>
css:
.entry-meta {position: relative; font-family: Trebuchet MS;}
.container {float: left;}
.date-day {font-size: 70px; line-height: 55px; float: left; background: #fa7d7d;}
.date-month {font-size: 25px; line-height: 25px; background: #627cc6; padding: 0 0 5px 0;}
.date-year {font-size: 25px; line-height: 25px; background: #3ce320;}
Furthermore, you can add display: inline-block; to the month css if you want the div to be same width as text inside.
The following:
<span style="font-size: 2em;">16</span><span style="display: inline-block;">Sep<br />2011</span>
Will produce, more or less exactly, the result shown in the image.
This seems to work as required:
time span {
display: block;
font-size: 1em;
margin-left: 2.5em;
}
time span.date-day {
float: left;
position: absolute;
font-size: 2em;
margin: 0;
}
.entry-meta {
border: 2px solid #ccc;
display: block;
float: left;
position: relative;
}
JS Fiddle demo.
Edited to amend/use the colours from the question, and to remove the (possibly unwanted) margin between the date-day and the other span elements:
time span {
display: block;
font-size: 1em;
margin-left: 2em;
}
time span.date-day {
float: left;
position: absolute;
font-size: 2em;
margin: 0;
background-color: #444;
}
time span.date-month {
background-color: #666;
}
time span.date-year {
background-color: #888;
}
.entry-meta {
border: 2px solid #ccc;
display: block;
float: left;
position: relative;
background-color: #ccc;
}
JS Fiddle demo.