The #itemcontent div is not stretching to the size of its contents. How can i get the #item-content div to extend past its current position without setting the height in pixels to keep it wrapping!
Here is a codepen:
http://codepen.io/Malvooo/pen/GJeVxW
Stack Snippet below:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
* {
margin: 0;
padding: 0;
}
body {
background: #222;
font-family: 'Open Sans', sans-serif;
}
#item {
margin-bottom: 2%;
margin-top: 8px;
transition: opacity 1s;
-webkit-transition: opacity 1s;
width: 300px;
}
#triangle {
border-bottom: 12px solid #3399cc;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 12px solid transparent;
margin: 0 auto;
width: 0;
}
#item h1 {
background: #3399cc;
color: #fff;
font-size: 140%;
font-weight: 300;
padding: 20px 0;
text-align: center;
}
#item-content {
background: #f0f0f0;
padding: 0 4%;
}
#item-left {
background: #f0f0f0;
float: left;
padding: 5px 0;
width: 50%;
}
#item-content h2 {
color: #555;
font-size: 95%;
font-weight: 600;
padding: 5px 0;
padding-left: 10px;
text-align: left;
width: 100%;
}
#item-right {
background: #f0f0f0;
float: right;
padding: 5px 0;
width: 50%;
}
#item-content h3 {
color: #555;
font-size: 95%;
font-weight: 300;
padding: 5px 0;
text-align: left;
width: 100%;
}
#item-content h4 {
background: #3399cc;
color: #fff;
font-size: 100%;
font-weight: 300;
padding: 5px 0;
text-align: center;
}
<body>
<div id="item">
<div id="triangle"></div>
<h1>Assault Rifle</h1>
<div id="item-content">
<div id="item-left">
<h2>Type</h2>
<h2>Stacksize</h2>
</div>
<div id="item-right">
<h3>Weapon</h3>
<h3>1</h3>
</div>
<h4>Weapon Stats</h4>
<div id="item-left">
<h2>Fire Mode</h2>
<h2>Attack Rate</h2>
<h2>Damage</h2>
<h2> </h2>
<h2> </h2>
<h2> </h2>
<h2>Recoil</h2>
<h2>Range</h2>
<h2>Capacity</h2>
</div>
<div id="item-right">
<h3>Full Automatic</h3>
<h3><i>Unknown</i></h3>
<h3>Head: 100</h3>
<h3>Chest: 61</h3>
<h3>Arms: 11</h3>
<h3>Legs: <i>unknow</i></h3>
<h3>Medium-Severe</h3>
<h3>250 ~ 400m</h3>
<h3>30</h3>
</div>
<h4>Ammunition</h4>
<div id="item-img">
<img src="images/5.56_Rifle_Ammo_icon.png" height="50px" width="50px" style="margin: 2.85%;">
<img src="images/Explosive_5.56_Rifle_Ammo_icon.png" height="50px" width="50px" style="margin: 2.85%;">
<img src="images/HV_5.56_Rifle_Ammo_icon.png" height="50px" width="50px" style="margin: 2.85%;">
<img src="images/Incendiary_5.56_Rifle_Ammo_icon.png" height="50px" width="50px" style="margin: 2.85%;">
</div>
<h4>Crafting</h4>
<div id="item-left">
<h2>Craftable</h2>
<h2>Known By Default</h2>
<h2>Time To Craft</h2>
</div>
<div id="item-right">
<h3>Yes</h3>
<h3>No</h3>
<h3>180s</h3>
</div>
</div>
</div>
</body>
Try this one:
#item-content div {
background: #f0f0f0;
height: 100%;
}
This will make sure the entire item content will wrapp all the content.
Edit:
Just add overflow: hidden; to #item-content and this will solve your problem:
#item-content {
background: #f0f0f0;
padding: 0 4%;
overflow: hidden;
}
See working fiddle
Related
THIS IS A RESPONSIVE DESIGN, MAKE SURE TO TURN ON TOGGLE DEVICE TOOLBAR ON YOUR BROWSER
I am trying to make a progress bar. First I want to increase the height of the transparent black background. I can't find a way to do that. I am confused. And secondly, I want to add spacing and align the 2nd and 3rd text properly.
/* progress bar */
.center {
height: 300px;
width: 100%;
position: absolute;
left: 50%;
margin-top: 140px;
transform: translate(-50%, -50%);
padding: 20px;
background-color: rgba(0, 0, 0, 0.678);
box-shadow: 0 2px 60px rgba(0, 0, 0, .5);
border-radius: 10px;
color: white;
}
.center #progress{
margin: 0px;
padding: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: 8px;
border-radius: 20px;
height: auto;
background-color: rgba(0, 0, 0, 0);
}
.skillbar{
box-sizing: border-box;
width: 100%;
margin: 20px 0;
}
/* skillbar languages */
.skillbar-html p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-html p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skillbar-css p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-css p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skill_percentage{
background-color: #262626;
padding: 4px;
box-sizing: border-box;
border: 1px solid #0fffb7;
border-radius: 6px;
}
.skill_level{
background-color: #0fffb7;
width: 100%;
height: 10px;
border-radius: 6px;
}
<section>
<div class="center">
<h1 id="progress">Progress</h1>
<div class="skillbar-html">
<p>HTML</p>
<p>90%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 90%;"></div>
</div>
<div class="skillbar-css">
<p>CSS</p>
<p>70%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 80%;"></div>
</div>
<div class="skillbar-javascript">
<p>JavaScript</p>
<p>50%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 50%;"></div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
</section>
You can take advantage of the <br> element in your HTML.
Line break and tab elements can be used when you need a little more control over how the browser renders the text. The <BR> element is used to force a line break.
-W3.org
/* progress bar */
.center {
height: 300px;
width: 100%;
position: absolute;
left: 50%;
margin-top: 140px;
transform: translate(-50%, -50%);
padding: 20px;
background-color: rgba(0, 0, 0, 0.678);
box-shadow: 0 2px 60px rgba(0, 0, 0, .5);
border-radius: 10px;
color: white;
}
.center #progress{
margin: 0px;
padding: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: 8px;
border-radius: 20px;
height: auto;
background-color: rgba(0, 0, 0, 0);
}
.skillbar{
box-sizing: border-box;
width: 100%;
margin: 20px 0;
}
/* skillbar languages */
.skillbar-html p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-html p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skillbar-css p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-css p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skill_percentage{
background-color: #262626;
padding: 4px;
box-sizing: border-box;
border: 1px solid #0fffb7;
border-radius: 6px;
}
.skill_level{
background-color: #0fffb7;
width: 100%;
height: 10px;
border-radius: 6px;
}
<section>
<div class="center">
<h1 id="progress">Progress</h1>
<br>
<div class="skillbar-html">
<p>HTML</p>
<p>90%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 90%;"></div>
</div>
<br>
<div class="skillbar-css">
<p>CSS</p>
<p>70%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 80%;"></div>
</div>
<br>
<div class="skillbar-javascript">
<p>JavaScript</p>
<p>50%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 50%;"></div>
</div>
</div>
</div>
</div>
</div>
</section>
The Height: - I noticed a fixed height of 300px, and that you were centering the parent div by using margins and translations in your CSS. I went ahead and removed those margins and translations, also removed your absolute positioning. You can adjust your fixed height of 300px to expand the grey background. For this example, I made it 100 view height.
/* progress bar */
.center {
height: 100vh;
width: 100%;
padding: 20px;
position: relative;
background-color: rgba(0, 0, 0, 0.678);
box-shadow: 0 2px 60px rgba(0, 0, 0, .5);
border-radius: 10px;
color: white;
}
.center #progress{
margin: 0px;
padding: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: 8px;
border-radius: 20px;
height: auto;
background-color: rgba(0, 0, 0, 0);
}
.skillbar{
box-sizing: border-box;
width: 100%;
margin: 20px 0;
}
/* skillbar languages */
.skillbar-html p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-html p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skillbar-css p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-css p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skill_percentage{
background-color: #262626;
padding: 4px;
box-sizing: border-box;
border: 1px solid #0fffb7;
border-radius: 6px;
}
.skill_level{
background-color: #0fffb7;
width: 100%;
height: 10px;
border-radius: 6px;
}
<section>
<div class="center">
<h1 id="progress">Progress</h1>
<br>
<div class="skillbar-html">
<p>HTML</p>
<p>90%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 90%;"></div>
</div>
<br>
<div class="skillbar-css">
<p>CSS</p>
<p>70%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 80%;"></div>
</div>
<br>
<div class="skillbar-javascript">
<p>JavaScript</p>
<p>50%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 50%;"></div>
</div>
</div>
</div>
</div>
</div>
</section>
If I understood properly, what you want to increase the height is for that black bar containing your actual progress bar, right? If that's the case, I think this should work:
.skill-percentage {
height: x (here you place how much height you want);
}
That should give you the height that you want.
And, in order to add the spacing, you can take advantage of CSS padding or margin, depending on what you exactly need.
I'll give you a small snippet here so you can see exactly what I mean. Note that I modified a bit your HTML to fit what you wanted to do, but this may not be necessary on your original file.
/* progress bar */
* {
margin: 0;
padding: 0;
}
.center {
height: 500px;
width: 100%;
background-color: rgba(0, 0, 0, 0.678);
color: white;
}
.center #progress{
margin: 0px;
padding: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: 8px;
border-radius: 20px;
height: auto;
background-color: rgba(0, 0, 0, 0);
}
.skillbar{
box-sizing: border-box;
width: 100%;
margin: 0;
}
/* skillbar languages */
.text-container {
display: flex;
width: 100%;
justify-content: space-between;
}
.text-container p {
padding: 0 40px; /* this is the one that changes the position of your text. Be carefull, you don't want this to change the position too much, just a bit, if you need to change the full position, better try something like grid, or modifying the flex */
}
.skillbar-html {
display: flex;
flex-direction: column;
justify-content: center;
}
.skillbar-html p {
margin: 10px;
}
.skillbar-html > div {
margin: 10px;
}
.skillbar-css {
display: flex;
flex-direction: column;
justify-content: center;
}
.skillbar-css p {
margin: 10px;
}
.skillbar-css > div {
margin: 10px;
}
.skillbar-javascript {
display: flex;
flex-direction: column;
justify-content: center;
}
.skillbar-javascript p {
margin: 10px;
}
.skillbar-javascript > div {
margin: 10px;
}
.skill_percentage{
height: 20px; /* this is the one that changes your height, now it's changing nothing, but you can modify the height by changing this value */
background-color: #262626;
padding: 4px;
box-sizing: border-box;
border: 1px solid #0fffb7;
border-radius: 6px;
}
.skill_level{
background-color: #0fffb7;
width: 100%;
height: 10px;
border-radius: 6px;
}
<section>
<div class="center">
<h1 id="progress">Progress</h1>
<div class="skillbar-html">
<div class="text-container">
<p>HTML</p>
<p>90%</p>
</div>
<div class="skill_percentage">
<div class="skill_level" style="width: 90%;">
</div>
</div>
</div>
<div class="skillbar-css">
<div class="text-container">
<p>CSS</p>
<p>70%</p>
</div>
<div class="skill_percentage">
<div class="skill_level" style="width: 80%;">
</div>
</div>
</div>
<div class="skillbar-javascript">
<div class="text-container">
<p>JavaScript</p>
<p>50%</p>
</div>
<div class="skill_percentage">
<div class="skill_level" style="width: 50%;">
</div>
</div>
</div>
</div>
</section>
<ul class="child ">
<div style="text-align:right;"> <li class="nameBar">{{patientInfo.data.fname}} {{patientInfo.data.lname}}</li></div>
<li class="age">{{patientInfo.data.age}}|{{ patientInfo.data.gender}}</li>
<img class="breadcrumb-image" src="assets/images/user/user6.jpg" alt="...">
<li class='uhid'>UHID: {{patientInfo.data.uhid}}</li>
<li class="address">{{patientInfo.data.city}}</li>
</ul>
CSS:
.nameBar{
color:#00bcd4;
font-weight:bold;
margin: -7px 0px 0px -100px;
position: absolute;
font-size: 12px;
text-transform: capitalize;
}
.uhid{
margin:-39px 0px 0px 58px;
color:#00bcd4;
font-weight:bold;
font-size: 12px;
}
.age{
margin: 15px 0px 0px -35px;
font-size: 10px;
position: absolute;
}
.address{
margin: 4px 0px 0px 59px;
font-size: 10px;
}
.child {
position: fixed;
top: 72px;
left: 50px;
padding: 1em;
margin: 0px 0px 0px 571px;
}
.li{
border-width: 1px;
text-align:center;
float:left;
}
Always I need to start the name from right side of the image I tried with margin-right:calc(50% -(somePx)) not able to fix that name lable near the image as right side Uhid and place can any help me out in this thanks
it's not a good idea to use too much margins and absolute positioning.
take a look at this and change it to your needs.
.child {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 1em;
display: flex;
justify-content: center;
}
.child>img {
width: 40px;
height: 40px;
margin: 0 5px;
}
.nameBar {
text-transform: capitalize;
}
.bold {
color: #00bcd4;
font-weight: bold;
font-size: 12px;
}
.small {
font-size: 10px;
}
.left,
.right {
line-height: 20px;
padding-top: 5px;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
<div class="child">
<div class="right">
<div class="nameBar bold">John Doe</div>
<div class="age small">26 Male</div>
</div>
<img src="https://picsum.photos/40" alt="...">
<div class="left">
<div class='uhid bold'>UHID: 1234</div>
<div class="address small">Paris</div>
</div>
</div>
I simply want to make a centered section clickable. I used margin auto to center my section but now the margins are clickable too. Should I use flex-box or something to center the section so that there's no more margin or there is an other way? What's the best practice here?
<main>
<a href="#">
<section>
<div class="content">
<h2>some stuff</h2>
<h1>title</h1>
<img src="img/arrow.svg" alt="arrow" width="30">
</div>
</section>
</a>
</main>
section {
width: 400px;
height: 400px;
margin: 0 auto 100px auto;
}
Here's a JSFiddle : Clickable centered section
I've another solution for you. Just add the following code to your css. You can try this.
a {
display: block;
height: fit-content;
width: fit-content;
margin: 0 auto 100px auto;
}
a {
display: block;
height: fit-content;
width: fit-content;
margin: 0 auto 100px auto;
}
section {
border-radius: 10px;
width: 400px;
height: 400px;
position: relative;
box-shadow: 0 1px 3px rgba(85, 85, 85, 0.25), 0 1px 2px rgba(0,0,0,0.12);
transition: all 0.5s cubic-bezier(.25,.8,.25,1);
}
section:hover {
box-shadow: 0 14px 28px rgba(85, 85, 85, 0.25), 0 10px 10px rgba(0,0,0,0.10);
}
section.logofolio {
background-color: #3D75E3;
}
section .content {
position: absolute;
bottom: 0;
padding: 0 0 100px 100px;
}
section h1 {
font-family: 'Archivo Black', sans-serif;
font-weight: bold;
font-size: 3rem;
color: #FFFFFF;
padding-top: 10px;
}
section h2 {
font-family: 'Roboto Mono', monospace;
font-weight: 400;
font-size: 0.8rem;
color: #FFFFFF;
}
section img {
padding-top: 10px;
}
<main class="work">
<p style="text-align: center">
As you can see the margins are clickable too!
</p>
<a href="#">
<section class="logofolio">
<div class="content">
<h2>some stuff</h2>
<h1>Title</h1>
<img src="img/arrow.svg" alt="arrow" width="30">
</div>
</section>
</a>
</main>
Here's my solution for you. I used absolute positioning to center the div. I separated my code using comments. You can check that. Hope it will be helpful.
section {
border-radius: 10px;
width: 1000px;
height: 400px;
/*Edited portion starts*/
position: absolute;
left: 50%;
/* margin: 0 auto 100px auto; */
/*Edited portion ends*/
transform: translateX(-50%);
box-shadow: 0 1px 3px rgba(85, 85, 85, 0.25), 0 1px 2px rgba(0,0,0,0.12);
transition: all 0.5s cubic-bezier(.25,.8,.25,1);
&:hover {
box-shadow: 0 14px 28px rgba(85, 85, 85, 0.25), 0 10px 10px rgba(0,0,0,0.10);
}
.content {
position: absolute;
bottom: 0;
padding: 0 0 100px 100px;
h1 {
font-family: 'Archivo Black', sans-serif;
font-weight: bold;
font-size: 3rem;
color: #FFFFFF;
padding-top: 10px;
}
h2 {
font-family: 'Roboto Mono', monospace;
font-weight: 400;
font-size: 0.8rem;
color: #FFFFFF;
}
img {
padding-top: 10px;
}
}
}
section.logofolio {
background-color: #3D75E3;
}
<main class="work">
<a href="#">
<section class="logofolio">
<div class="content">
<h2>some stuff</h2>
<h1>Title</h1>
<img src="img/arrow.svg" alt="arrow" width="30">
</div>
</section>
</a>
</main>
I've got a few div elements that aren't expanding to match the height of their content. I have read that this can be caused by float-ed content; This content isn't float-ed - although I am beginning to feel like I should throw my computer in a river. Does that count?
code:
#interaction-options-container.display-dialogue {
left: 15%;
width: 70%;
}
#interaction-options-container.full-border, .dialogue-container.full-border {
border: 1px solid #33ffff;
}
#interaction-options-container {
margin: 4px 0px 4px 0px;
z-index: 100;
position: absolute;
left: 35%;
bottom: 4%;
width: 30%;
line-height: 1.4;
opacity: 0.75;
}
#interaction-options-container .heading {
font-size: 16px;
color: black;
padding: 0.1px 12px 0.1px 12px;
background-color: grey;
}
.heading {
font-weight: bold;
font-size: 1.5em;
padding: 8px 12px 0px 12px;
}
#interaction-options-container p {
margin: 8px 0px 8px 0px;
}
#interaction-options-container .dialogue p {
margin: 4px 0px 4px 0px;
}
#interaction-options-container .button, #interaction-options-container .evidence-options-container .button {
cursor: pointer;
color: white;
font-size: 14px;
padding: 0.1px 12px 0.1px 12px;
background-color: #333333;
opacity: 0.85;
border-bottom: 1px solid #8d8d8d;
}
#interaction-options-container .dialogue-container {
padding: 0px;
margin: 0px;
width: 100%;
height: 32px;
background-color: #333333;
float: none;
}
#interaction-options-container .dialogue {
text-align: center;
margin: auto;
font-size: 16px;
font-weight: bold;
padding: 1px 12px 1px 12px;
color: white;
background-color: #333333;
}
.dialogue-container .dialogue.option-divider {
border-bottom: 1px solid #333333;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div class="hud-element display-dialogue full-border" id="interaction-options-container">
<div class="heading"><p>Choose a reply:</p></div>
<div class="dialogue-container button">
<div class="dialogue option-divider"><p>Option one here</p></div>
</div>
<div class="dialogue-container button">
<div class="dialogue option-divider"><p>Option two here</p></div>
</div>
<div class="dialogue-container button">
<div class="dialogue option-divider"><p>Option three here</p></div>
</div>
<div class="dialogue-container button">
<div class="dialogue"><p>Option four here. As an example this text should be long enough to require wrapping to a new line. I will therefore have to keep typing until I've added enough text to sufficiently fill the horizontal with of the containing div. Also, thanks for potentially answering my question, which I will get to below...</p></div>
</div>
</div>
The problem is, when a piece of dialogue requires wrapping to a new line, the .dialogue-container .button div does not expand in height to match the height of the .dialogue div. The inner divs therefore extend past the border lines, which looks bad.
If anyone has any pointers, my computer will thank you.
Cheers.
#interaction-options-container .dialogue-container {
padding: 0px;
margin: 0px;
width: 100%;
//height: 32px;
background-color: #333333;
float: none;
}
With this CSS and HTML I get a gap above the <span>-tag and I don't know why this is happening:
CSS
<style>
header > aside {
float: left;
font-size: 0;
line-height: 0;
white-space: nowrap;
border: 1px solid green;
}
header > aside > span {
display: inline-block;
height: 19px;
margin: 0px 10px 0px 0px;
padding: 5px 0px 0px 0px;
opacity: 0.75;
font-size: 9px;
line-height: 9px;
text-transform: uppercase;
color: #0fa1b4;
border: 1px solid red;
}
a.share {
display: inline-block;
width: 24px;
height: 24px;
margin: -1px 0px 0px -1px;
padding: 0;
opacity: 0.45;
background: blue;
font-size: 0;
line-height: 0;
}
</style>
HTML
<header>
<aside>
<span>Follow</span>
<a class="share facebook" href=""></a>
<a class="share soundcloud" href=""></a>
</aside>
</header>
In action
http://jsfiddle.net/insertusernamehere/ZAVJJ/
I could solve it using float, but somehow I want to solve it without. I guess it's pretty simple, and I'm only overlooking something. But with just a few hours sleep, I can't figure it out. :)
vertical-align: top; on the span does the trick. See: http://jsfiddle.net/ZAVJJ/3/