.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?
Related
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>
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
How can I get that yellow box aligned like on the picture? I tried some stuff with table cells but it kinda destroyed everything. I also played a bit with the float conditions but the results were horrible too. Can you help me?
Here's my code:
HTML
<div class="job_board">
<div class="job_box">
<span class="job_title_working_field"> <!-- Just made that span for grouping but it's unnecessary. -->
<div class="job_title"><h1>Product Development <span class="light">(m/w)</span></h1></div>
<div class="working_field">Fahrzeugtechnik · Mechatronik · Maschinenbau</div>
</span>
<div class="slide_button"></div>
</div>
</div>
CSS
.light {
font-weight: normal;
}
.job_box {
width: 100%;
padding: 30px 50px;
background-color: #082730;
color: white;
text-align: center;
display: table;
}
.working_field {
font-weight: bold;
margin: 0;
font-size: 0.8em;
}
span.job_title_working_field {
table-cell;
}
.slide_button {
position: absolute;
width: 50px;
height: 100%;
background: yellow;
display: table-cell;
}
JSFiddle
Since .slide_button is within an element, you would simply relatively position the parent element:
.job_box {
position: relative;
width: 100%;
padding: 30px 50px;
background-color: #082730;
color: white;
text-align: center;
display: table;
font-family: "Helvetica", sans-serif;
}
And then absolutely position the yellow .slide_button element at the top/right - relative to the parent.
UPDATED EXAMPLE HERE
.slide_button {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 100%;
background: yellow;
}
If you look at the above example, you will notice that a horizontal scrollbar is present. If you want to remove this, use box-sizing:border-box in order to include the padding within the .job_box element's dimension calculations.
UPDATED EXAMPLE HERE
.job_box {
box-sizing:border-box;
-moz-box-sizing:border-box;
}
It's also worth noting that I removed the default 8px margin on the body element.. body{margin:0}
I changed the markup order a little and updated the css
you are combining too many styles: table-cell + absolute + float don't mix well
http://jsfiddle.net/pixelass/3Qqz4/2/
HTML:
<div class="job_board">
<div class="job_box">
<div class="slide_button"></div>
<div class="job_title_working_field">
<div class="job_title">
<h1>Product Development <span class="light">(m/w)</span></h1>
</div>
<div class="working_field">Fahrzeugtechnik · Mechatronik · Maschinenbau</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
.light {
font-weight: normal;
}
.job_box {
width: 100%;
background-color: #082730;
color: white;
text-align: center;
display: block;
font-family:"Helvetica", sans-serif;
position: relative;
height: 120px;
vertical-align: top;
}
.job_title h1 {
margin: 0;
}
.working_field {
font-weight: bold;
margin: 0;
font-size: 0.8em;
}
.job_title_working_field {
padding: 30px 50px;
}
.slide_button {
width: 50px;
height: 100%;
background: yellow;
float: right;
}
I have created a button with background image parts on the left, center and right. I would like to position it at the center of the page, but I can't do it.
I have simplified the example with simple color backgrounds instead of images.
HTML:
<a id="button" href="#">
<div id="b-left"></div>
<div id="b-center">Content</div>
<div id="b-right"></div>
</a>
CSS:
#button {
height: 40px;
margin: 0 auto;
}
#b-left, #b-right, #b-center {
display: inline;
float: left;
height: inherit;
}
#b-left {
background-color: blue;
width: 30px;
}
#b-right {
background-color: green;
width: 30px;
}
#b-center {
background-color: yellow;
}
Here's the demo:
http://jsfiddle.net/yh6sS/4/
Thanks a lot.
Replace all divs inside your link with spans. This will make the code to be valid.
"margin: 0 auto;" property only works, when there's a fixed width, for example 100px. So it can be deleted in your case.
Use the next technique to make all buttons: http://jsfiddle.net/2GJu2/
<div class="outer">
<a href="#">
<span class="b-left"></span>
<span class="b-center">Content</span>
<span class="b-right"></span>
</a>
</div>
.outer { text-align: center; }
a {
display: inline-block; margin: 0 10px; line-height: 30px;
position: relative; }
a span { display: inline-block; }
.b-center { background: yellow; }
.b-left,
.b-right { position: absolute; top: 0; width: 10px; height: 30px; }
.b-left { left: -10px; background: red; }
.b-right { right: -10px; background: green; }
Add text-align: center to a parent element, and add display: inline-block to #button.
See: http://jsfiddle.net/thirtydot/yh6sS/7/