Problem : I need to place button with label "THIS BUTTON" in the content, bottom of its parent div.
How to fix a div content to bottom of its parent ?
The problem screen link :Problem Screen
Here is my code jsfiddle link : JSFiddle
.activity-default {
border-width: 1px;
border-style: solid;
border-color:black;
border-left-width: 2px;
border-left-style: inset;
border-left-color: transparent;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: lavender;
border-bottom-left-radius: 20;
padding-bottom: 1px;
margin-top: 0px;
/*border-width: 1px;
border-style: solid;*/
}
.activity-default:hover {
border-left-width: 2px;
border-left-style: solid;
border-left-color: lightseagreen;
}
.activity-content-seperator {
border-left-width: 2px;
border-left-style: solid;
border-left-color: greenyellow;
width: 100%;
}
.activity-button-bottom-fitter {
height: 100%;
}
.dropdown-menu-filter {
font-family: verdana, arial;
font-weight: normal;
padding: 5px 10px 0;
max-height: 300px;
overflow-y: scroll;
}
/* Comments */
.comment-time {
font-size: 12px;
color: #656565;
padding-right: 10px;
}
.comments {
padding-top: 20px;
}
.comment {
margin-bottom: 10px;
}
}
<div class="panel panel-default">
<div class="panel-heading">Başlık </div>
<div class="panel-body">
<div class="col-lg-12 activity-default">
<div class="col-lg-12">
<div class="row comment-title">
<span class="glyphicon glyphicon-comment"></span><b>Title</b>
</div>
<div class="row comment-content">
<div class="col-lg-2">
<div class="row">A.B.</div>
<div class="row">10.03.2014</div>
<div class="row">19:21</div>
<div class="row">
<button id="mybutton" class="btn btn-md btn-default" style='margin-bottom: 1px; margin-right: 2px; white-space: normal;'><span class="glyphicon glyphicon-flag text-red"></span>THIS BUTTON</button>
</div>
</div>
<div class="col-lg-10">
<div class="row col-lg-12 activity-content-seperator">
<div class="row col-lg-12">
<h5>Title</h5>
</div>
<div class="row col-lg-12">
<p>
Some notes here some notes here lorem ipsum etc
</p>
<ul>
<li>Elem1</li>
<li>Elem1</li>
<li>Elem1</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You could set position: relative; on the parent div.
Then set position:absolute; bottom:0; on the child div
you need to use css position:relative to the container div, and position:absolute;bottom:0; to your button, so button will go to the bottom of your container.
Related
I'm having an issue related to using divs with the display set to table-cell. The purpose of using table-cell was so that the height of these two divs would match up. However, each of these divs also have another div set inside it to create the yellow dotted outline you see in the picture:
When one of the table cells grow, the yellow outline of the other doesn't grow to match its adjacent one. Hoping someone can help me with a fix, any help appreciated. Here is my code below:
.generalinfocontainer {
width: 50%;
height: auto;
background-image: url("https://imgur.com/qbIkHqm.png");
display: table-cell;
border-radius: 25px;
text-shadow: 1px 1px #000000;
}
.statscontainer {
width: 30%;
height: auto;
background-image: url("https://imgur.com/qbIkHqm.png");
display: table-cell;
border-radius: 25px;
text-shadow: 1px 1px #000000;
}
.t {
display: table;
width: 100%;
border-spacing: 20px;
}
.generalinfowrapper {
border-width: 2px;
border-color: yellow;
border-style: dashed;
margin: 3px;
border-radius: 25px;
height: 100%;
padding: 8px;
}
.statswrapper {
border-width: 2px;
border-color: yellow;
border-style: dashed;
margin: 3px;
border-radius: 25px;
height: 100%;
padding: 8px;
}
.statbar {
border-radius: 15px;
background-image: url("https://imgur.com/gdh95cn.png");
padding: 1px;
width: 100%;
height: auto;
border-style: solid;
border-color: black;
border-width: 1px;
}
.fillbar {
border-radius: 15px;
background-color: #a3c1ad;
height: 100%;
padding-left: 4px;
border-color: black;
border-width: 1px;
border-style: solid;
margin: 0px;
}
.boxtitle {
text-align: center;
}
<div class="t">
<div class="generalinfocontainer">
<div class="generalinfowrapper">
[b][size=24][color=yellow]KOMON HYUUGA[/color][/size][/b]
</div>
</div>
<div class="statscontainer">
<div class="statswrapper">
<div class="boxtitle">
[b][size=24][color=yellow]STATISTICS[/color][/size][/b]
</div>
[b]VIGOR[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
[b]CHAKRA[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
[b]SPEED[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
[b]STRENGTH[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
</div>
</div>
The purpose of using table-cell was so that the height of these two divs would match up.
Well, what you are trying to achieve can be done with less code using Flexbox, or CSS Grid. Take a look:
.t {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
}
.generalinfocontainer,
.statscontainer {
background-image: url("https://imgur.com/qbIkHqm.png");
border-radius: 25px;
text-shadow: 1px 1px #000000;
border-width: 2px;
border-color: yellow;
border-style: dashed;
padding: 8px;
}
.statbar {
border-radius: 15px;
background-image: url("https://imgur.com/gdh95cn.png");
padding: 1px;
border: 1px solid solid black;
}
.fillbar {
border-radius: 15px;
background-color: #a3c1ad;
padding-left: 4px;
border: 1px solid black;
}
.boxtitle {
text-align: center;
}
<div class="t">
<div class="generalinfocontainer">
<div class="generalinfowrapper">
[b][size=24][color=yellow]KOMON HYUUGA[/color][/size][/b]
</div>
</div>
<div class="statscontainer">
<div class="statswrapper">
<div class="boxtitle">
[b][size=24][color=yellow]STATISTICS[/color][/size][/b]
</div>
[b]VIGOR[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
[b]CHAKRA[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
[b]SPEED[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
[b]STRENGTH[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
</div>
</div>
</div>
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
How to center a "position: absolute" element
(31 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed last year.
I'm currently "designing" the following process with css / divs.
Unfortunately as you can see, the text is always on the top left.
I'd like the text to be centered vertically and horizontally inside the div.
But the problem is when doing so, it always moves the "end arrow" of the div.
Here is a JSFiddle with the problem: https://jsfiddle.net/xeraphim/7wbeapqu/
.gateuebersicht {
width: 100%;
height: 60px;
}
.rectangle {
width: 130px;
height: 60px;
background-color: #aaa;
float: left;
}
.passed .rectangle {
background-color: #179f96;
}
.rectangle span {
position: absolute;
color: white;
max-width: 85px;
}
.rectangle-left {
border-style: solid;
border-width: 30px 15px 30px 0;
border-color: transparent #fff transparent transparent;
}
.rectangle-right {
border-style: solid;
border-width: 30px 0 30px 15px;
border-color: transparent transparent transparent #fff;
float: left;
}
.rectangle-end {
border-style: solid;
border-width: 30px 0 30px 15px;
border-color: transparent transparent transparent #aaa;
float: left;
}
.passed .rectangle-end {
border-color: transparent transparent transparent #179f96;
}
.gate {
overflow: hidden;
float: left;
}
.gate .rectangle-left {
border-color: transparent #aaa transparent transparent;
overflow: hidden;
float: left;
}
.passed .gate .rectangle-left {
border-color: transparent #179f96 transparent transparent;
}
.gate .rectangle-right {
border-color: transparent transparent transparent #aaa;
overflow: hidden;
float: left;
}
.passed .gate .rectangle-right {
border-color: transparent transparent transparent #179f96;
}
.gate-middle {
width: 40px;
height: 60px;
background-color: #aaa;
overflow: hidden;
float: left;
}
.passed .gate-middle {
background-color: #179f96;
}
.gate-middle span {
position: absolute;
color: white;
}
<div class="gateuebersicht mb-4">
<div id="idee">
<div class="rectangle">
<span class="mt-3 ml-3">Idee</span>
<div class="rectangle-left">
</div>
</div>
</div>
<div id="gate-a" class="passed">
<div class="gate">
<div class="rectangle-left"></div>
<div class="gate-middle">
<span class="mt-3 ml-3">A</span>
</div>
<div class="rectangle-right"></div>
</div>
</div>
<div id="vorprojekt">
<div class="rectangle">
<span class="mt-1 ml-4">Vorprojekt / Initialisierung</span>
<div class="rectangle-right"></div>
<div class="rectangle-left"></div>
</div>
</div>
<div id="gate-b">
<div class="gate">
<div class="rectangle-left"></div>
<div class="gate-middle">
<span class="mt-3 ml-3">B</span>
</div>
<div class="rectangle-right"></div>
</div>
</div>
<div id="konzept">
<div class="rectangle">
<span class="mt-1 ml-4">Konzept / MVP </span>
<div class="rectangle-right"></div>
<div class="rectangle-left"></div>
</div>
</div>
<div id="gate-c">
<div class="gate">
<div class="rectangle-left"></div>
<div class="gate-middle">
<span class="mt-3 ml-3">C</span>
</div>
<div class="rectangle-right"></div>
</div>
</div>
<div id="realisierung">
<div class="rectangle">
<span class="mt-3 ml-4">Realisierung</span>
<div class="rectangle-right"></div>
</div>
<div class="rectangle-end"></div>
</div>
<div id="einfuehrung">
<div class="rectangle">
<span class="mt-3 ml-4">Einführung</span>
<div class="rectangle-right"></div>
<div class="rectangle-left"></div>
</div>
</div>
<div id="gate-d">
<div class="gate">
<div class="rectangle-left"></div>
<div class="gate-middle">
<span class="mt-3 ml-3">D</span>
</div>
<div class="rectangle-right"></div>
</div>
</div>
<div id="betrieb">
<div class="rectangle">
<span class="mt-3 ml-4">Betrieb</span>
<div class="rectangle-right"></div>
</div>
<div class="rectangle-end"></div>
</div>
</div>
How is it possible to center the text inside the divs without the other divs moving?
Thanks in advance
Created a new class r-center and added css for it, applied the class to all divs that have values init and it's working.
.r-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.gateuebersicht {
width: 100%;
height: 60px;
}
.rectangle {
width: 130px;
height: 60px;
background-color: #aaaaaa;
float: left;
position: relative;
.passed & {
background-color: #179f96;
}
span {
position: absolute;
color: white;
max-width: 85px;
}
}
.rectangle-left {
border-style: solid;
border-width: 30px 15px 30px 0;
border-color: transparent #fff transparent transparent;
}
.rectangle-right {
border-style: solid;
border-width: 30px 0 30px 15px;
border-color: transparent transparent transparent #fff;
float: left;
}
.rectangle-end {
border-style: solid;
border-width: 30px 0 30px 15px;
border-color: transparent transparent transparent #aaaaaa;
float: left;
.passed & {
border-color: transparent transparent transparent #179f96;
}
}
.gate {
overflow: hidden;
float: left;
position: relative;
}
.gate .rectangle-left {
border-color: transparent #aaaaaa transparent transparent;
overflow: hidden;
float: left;
.passed & {
border-color: transparent #179f96 transparent transparent;
}
}
.gate .rectangle-right {
border-color: transparent transparent transparent #aaaaaa;
overflow: hidden;
float: left;
.passed & {
border-color: transparent transparent transparent #179f96;
}
}
.gate-middle {
width: 40px;
height: 60px;
background-color: #aaaaaa;
overflow: hidden;
float: left;
.passed & {
background-color: #179f96;
}
span {
position: absolute;
color: white;
}
}
<div class="gateuebersicht mb-4">
<div id="idee">
<div class="rectangle">
<span class="mt-3 ml-3 r-center">Idee</span>
<div class="rectangle-left">
</div>
</div>
</div>
<div id="gate-a" class="passed">
<div class="gate">
<div class="rectangle-left"></div>
<div class="gate-middle">
<span class="mt-3 ml-3 r-center">A</span>
</div>
<div class="rectangle-right"></div>
</div>
</div>
<div id="vorprojekt">
<div class="rectangle">
<span class="mt-1 ml-4 r-center">Vorprojekt / Initialisierung</span>
<div class="rectangle-right"></div>
<div class="rectangle-left"></div>
</div>
</div>
<div id="gate-b">
<div class="gate">
<div class="rectangle-left"></div>
<div class="gate-middle">
<span class="mt-3 ml-3 r-center">B</span>
</div>
<div class="rectangle-right"></div>
</div>
</div>
<div id="konzept">
<div class="rectangle">
<span class="mt-1 ml-4 r-center">Konzept / MVP </span>
<div class="rectangle-right"></div>
<div class="rectangle-left"></div>
</div>
</div>
<div id="gate-c">
<div class="gate">
<div class="rectangle-left"></div>
<div class="gate-middle">
<span class="mt-3 ml-3 r-center">C</span>
</div>
<div class="rectangle-right"></div>
</div>
</div>
<div id="realisierung">
<div class="rectangle">
<span class="mt-3 ml-4 r-center">Realisierung</span>
<div class="rectangle-right"></div>
</div>
<div class="rectangle-end"></div>
</div>
<div id="einfuehrung">
<div class="rectangle">
<span class="mt-3 ml-4 r-center">Einführung</span>
<div class="rectangle-right"></div>
<div class="rectangle-left"></div>
</div>
</div>
<div id="gate-d">
<div class="gate">
<div class="rectangle-left"></div>
<div class="gate-middle">
<span class="mt-3 ml-3 r-center">D</span>
</div>
<div class="rectangle-right"></div>
</div>
</div>
<div id="betrieb">
<div class="rectangle">
<span class="mt-3 ml-4 r-center">Betrieb</span>
<div class="rectangle-right"></div>
</div>
<div class="rectangle-end"></div>
</div>
</div>
I have placed a button on my page and whenever I hover over that button, my text and slightly shifts upwards. Please help (I am a beginner/novice/green) - the code will be shown below
.btn {
font-weight: 700px;
border-radius: 500px;
text-transform: uppercase;
border-color: none;
padding: 10px;
}
.btn-xl {
padding: 1rem 2rem;
background-color: #4B307B;
border-color: white;
}
.btn-xl:hover {
background-color: gold;
border-width: 3px;
border-color: #4B307B;
}
hr {
border-color: gold;
width: 150px;
max-width: 65px;
}
<div class="container d-flex align-items-center h-100">
<div class="row">
<header class="text-center col-12">
<h1 class="text-uppercase"><strong>Graduation Support</strong></h1>
</header>
<div class="buffer col-12"></div>
**
<section class="text-center col-12">
<hr>
<button class="btn btn-primary btn-xl">Find out more</button>
</section>**
</div>
</div>
You need to add the border-width: 3px; to the .btn-xl class as well, not just the hover class. I believe its the border appearing on the hover that is causing the issue. See here:
.btn{
font-weight: 700px;
border-radius: 500px;
text-transform: uppercase;
border-color: none;
padding: 10px;
}
.btn-xl{
padding: 1rem 2rem;
background-color: #4B307B;
border-color: white;
border-width: 3px;
}
.btn-xl:hover{
background-color: gold;
border-width: 3px;
border-color: #4B307B;
}
hr{
border-color: gold;
width: 150px;
max-width: 65px;
}
<div class="container d-flex align-items-center h-100">
<div class="row">
<header class="text-center col-12">
<h1 class="text-uppercase"><strong>Graduation Support</strong></h1>
</header>
<div class="buffer col-12"></div>
**<section class="text-center col-12">
<hr>
<button class="btn btn-primary btn-xl">Find out more</button>
</section>**
</div>
</div>
I know it is dumb question, but i am struggling with following problem
It is one of my menu buttons. I want div the represents icon (marked red with circle) be on the left side of the button and the text on the right (name (blue) above description (purple)). By the way, i am going to have plenty of those buttons and i want them appear in column (block).
My current problem is that icon div (red) and text div (green dashed) wont place inline.
My HTML is:
<style>
.HomeMenuNavbarButton {
text-decoration: none;
color : black;
border-style:outset;
border-width:4px;
border-radius:15px;
display:block;
padding:4px;
}
.circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
border-color: black;
border-style: dashed;
display: inline-block;
vertical-align: top;
}
</style>
<div class="container">
<div class="row">
#foreach (var node in Model.Nodes)
{
if (!(node.IsRootNode) && node.Children.Any())
{
<div class="col-md-4">
<button type="button" style="display:inline;" class="btn btn-info" data-toggle="collapse" data-target="#("#relatedNavList" + node.Title) ">#node.Title</button>
<div id="#("relatedNavList" + node.Title)" class="collapse">
#foreach (var child in node.Children)
{
<div class="HomeMenuNavbarButton" style="display:block;">
<div style="background-color:red;display:inline">
<div class="circle">
</div>
</div>
<div style="border-color: green; border-style: dashed; display:inline-block">
<div style="background-color:blue">#(child.Title)</div>
<div style="background-color:purple">#(child.Description)</div>
</div>
</div>
}
</div>
</div>
}
}
</div>
</div>
When you want to display stuff side by side in CSS, the easiest way is to use flexbox. Try to add display : flex; to your HomeMenuNavBar class.
Here is a complete document about flexbox from the Mozilla team.
Using a wrapper defined as a flexbox
.wrapper {
display: flex;
align-items: center;
justify-content: space-between;
width: 150px;
}
.circle {
height: 25px;
width: 25px;
border: medium dashed darkgray;
border-radius: 50%;
}
button {
background: dodgerblue;
color: white;
border-radius: 3px;
border: thin solid lightblue;
padding: 0.5em;
}
<div class="wrapper">
<button>Button</button>
<div class="circle"></div>
<span>Text</span>
</div>
You can do that just with display:inline-block on your button's elements
.elementButton
{
display:inline-block;
}
.circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
border-color: black;
border-style: dashed;
display: inline-block;
vertical-align: top;
}
.HomeMenuNavbarButton
{
display:block;
margin:5px;
}
<div class="HomeMenuNavbarButton">
<div class="circle elementButton">
</div>
<div class="elementButton">
<div>Title one</div>
<div>Content</div>
</div>
</div>
<div class="HomeMenuNavbarButton">
<div class="circle elementButton">
</div>
<div class="elementButton">
<div >Title two</div>
<div>Content</div>
</div>
</div>
I'd like to have my span with number "30" with the same height of the vertical line of the div that contains it.
#divDay {
font-family: Arial;
font-size: 44px;
border-right: 2px solid #000;
margin-bottom: 6px;
margin-top: 10px;
height: 100%
}
#divDate {
font-family: Arial;
font-size: 18px;
margin-bottom: 6px;
margin-top: 10px;
}
#divHeader{
border-bottom: 2px solid #000;
}
<div class="row">
<div id="divHeader" class="col-xs-12">
<div id="divDay" class="col-xs-2">
<span>30</span>
</div>
<div id="divDate" class="col-xs-10">
<div class="row">
<span style="margin-left: 8px">Monday</span>
</div>
<div class="row">
<span style="margin-left: 8px">April 2016</span>
</div>
</div>
</div>
</div>
https://jsfiddle.net/h1m80Lv8/
Big thanks for any help.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#divDay {
font-family: Arial;
height: 100%
}
#divDate {
border-left: 2px solid #000;
font-family: Arial;
font-size: 18px;
margin-bottom: 6px;
margin-top: 10px;
}
#divDay span { position:absolute;font-size: 72px;margin-top:-15px;}
#divHeader{
border-bottom: 2px solid #000;
}
<div class="row">
<div id="divHeader" class="col-xs-12">
<div id="divDay" class="col-xs-2">
<span>30</span>
</div>
<div id="divDate" class="col-xs-10">
<div class="row">
<span style="margin-left: 8px">Monday</span>
</div>
<div class="row">
<span style="margin-left: 8px">April 2016</span>
</div>
</div>
</div>
</div>
Then you need to give the span "display: block;"
#divDay>span {
display: block;
}
Check Fiddle here
More options:
<span style="padding: 6px;">30</span>
Or:
<span style="display:inline-block;">30</span>