Hi I have div with some text 'Basic Details'. I want Details to be below Basic.
How can I achieve this.
Here is my jsbin
https://jsbin.com/dudine/edit?html,css,output
Sorry guys I dint include any code in here.
HTML
.textStyle {
color: white;
font-weight: bold;
text-align: center;
vertical-align: middle;
font-size: 90%;
white-space: normal;
}
.left-rounded-corner {
width: 100px;
height: 50px;
background: red;
line-height: 16px;
box-sizing: border-box;
padding-top: 10px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
/*Allign elements in horizontally*/
.element_align_horizontally {
display: inline-block;
}
<div id='statusContainer' class='scrollable'>
<div class="left-rounded-corner element_align_horizontally textStyle">Basic Details</div>
<div class="rectangle-shape element_align_horizontally textStyle">two</div>
<div class="rectangle-shape element_align_horizontally textStyle">three</div>
<div class="rectangle-shape element_align_horizontally textStyle">Four</div>
<div class="right-rounded-corner element_align_horizontally textStyle">Five</div>
</div>
Thanks for your help
Rao
You need a few things to make this happen without extra markup...
.left-rounded-corner {
...
line-height: 16px;
box-sizing: border-box; /* include padding and margin in height */
padding-top: 10px; /* move text down a bit */
}
.textStyle {
...
font-size: 90%; /* something big enough to force wrap without extra markup */
white-space: normal; /* allow wrapping */
}
Related
Why does block with text shift to the bottom? I know how to fix this issue (need to add "overflow: hidden" to the box), but I don't understand why it shift to the bottom, text inside the box is short, margins in browser-inspector are same as margins of example without text.
Example of the problem
HTML:
<div class="with-text">
<div class="box1">
SIMPLE TEXT
</div>
<div class="box2">
</div>
</div>
<div class="without-text">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
CSS:
html, body {
font-size: 10px;
margin: 0;
height: 100%;
}
.box1 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: blue;
/* Fix the problem */
/* overflow: hidden; */
color: white;
}
.box2 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: red;
}
.with-text:before {
display: block;
content: "with-text";
text-transform: uppercase;
margin: 1rem;
}
.with-text {
box-sizing: border-box;
height: 50%;
border: 1px solid;
}
.without-text:before {
display: block;
content: "without text";
text-transform: uppercase;
margin: 1rem;
}
.without-text {
box-sizing: border-box;
height: 50%;
border: 2px solid black;
}
The problem is that by default vertical alignment of inline elements – baseline,
The text inside element affects it and pushes div to the bottom.
Use vertical-align: top to solve issue.
You can try to add vertical-align:
.box1 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: blue;
/* overflow: hidden; */
color: white;
vertical-align:top;
}
I have a basic block(purple) that has some text inside it of variable length. The div is position relative and is also responsive so its width etc is in %.
Some of our users on Chrome latest (v43.0.2357.65) and WinXP see the text overflows to the edge of the purple box. This happens on a whim so its hard to reproduce. I am trying to fix the CSS so that text does not overflow. I have a max-width and break-word property too on the div that contains the text.
The site is in dutch.
<div class="mt-landing__section-notification">
<div class="mt-landing__section-notification__info-icon icon-info"></div>
<div class="mt-landing__section-notification__close-icon"></div>
<div class="mt-landing__section-notification__content">
<div class="mt-landing__section-notification__message">
This is where the text is.
</div>
</div>
</div>
And here is the CSS on the outermost div and the one containing the text :
.mt-landing__section-notification {
z-index: 1;
width: 64.5%;
background-color: #411E4E;
padding: 20px;
color: #fff;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 0px;
display: block;
}
.mt-landing__section-notification__message {
line-height: 24px;
margin-top: -3px;
word-wrap: break-word;
max-width: 100%;
}
.mt-landing__section-notification__content {
margin: 0px 50px;
}
.mt-landing__section-notification__info-icon {
width: 50px;
float: left;
font-size: 24px;
}
.info-icon {
font-family: mt-icons;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
}
.info-icon::before {
content: '\e617';
}
Any ideas why text is overflowing ?
It looks like your info-icon might be the culprit here.
either
a) Set the icon to position:absolute and the container to position:relative, which will take the icon out of the flow, so it won't push the text to the right,
or
b)
maybe use the icon as a background-image. Simply increase the padding-left of the container and add it as a background-image. I find this to be the easiest way to keep things in order, whilst still flexible and responsive:
https://jsfiddle.net/svArtist/s3xc3nro/
.mt-landing__section-notification {
z-index: 1;
width: 64.5%;
padding: 20px;
color: #fff;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 0px;
display: block;
}
.mt-landing__section-notification__message {
line-height: 24px;
margin-top: -3px;
word-wrap: break-word;
max-width: 100%;
}
.icon-info{
background: url(http://www.grafik-wunder.de/klafo/images/info.png) #411E4E no-repeat 10px center;
padding-left: 50px;
min-height: 50px;
box-sizing:border-box;
}
<div class="mt-landing__section-notification icon-info">
<div class="mt-landing__section-notification__close-icon"></div>
<div class="mt-landing__section-notification__content">
<div class="mt-landing__section-notification__message">This is where the text is.</div>
</div>
</div>
I am trying to center the flame and the heading to the middle of the white box.
HTML
<div class="contentheading">
<div class="floatmiddle">
<img src="images/flame45x45.png">
<h3>Receive only the email you want.</h3>
</div>
</div>
CSS
.contentheading {
position: relative;
height: 45px;
margin-top: 30px;
width: 636px; //this is the full width of the white box//
}
.floatmiddle {
margin: 0 auto;
height: 45px;
display: block;
}
.contentheading img {
position: absolute;
}
.floatmiddle > h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
height: 45px;
line-height: 45px;
margin: 0 0 0 60px;
text-align: center;
vertical-align: top;
position: absolute;
}
I need the .float middle to inherit the width of the two enclosing elements - the image (45 x 45px) and the text (which will be different length for each chapter i have) so i need one class/formula so i can just go through and pop in the headings and no matter the headings length the heading and the fireball will be centered within the white div.
You can use display: inline-block; to center this div.
http://jsfiddle.net/d8gyd9gu/
HTML
<div class="contentheading">
<div class="floatmiddle">
<img src="http://www.neatimage.com/im/lin_logo.gif" alt="">
<h3>Receive only the email you want.</h3>
</div>
</div>
CSS
.contentheading {
height: 45px;
margin-top: 30px;
width: 636px;
text-align: center;
}
.floatmiddle {
height: 45px;
display: inline-block;
}
.contentheading img {
float: left;
margin: 20px 10px 0px 0px;
}
.floatmiddle > h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
height: 45px;
line-height: 45px;
padding: 0px 0px 0px 60px;
}
If you can use flexbox you can do it really simply like this:
.contentheading {
border: 1px dashed #ff0000;
margin-top: 30px;
width: 636px;
display: flex;
justify-content: center;
align-items: center;
}
.contentheading h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
}
<div class="contentheading">
<img src="images/flame45x45.png" width="45" height="45" />
<h3>Receive only the email you want.</h3>
</div>
If you need to support older browsers make sure you add the prefixed versions.
You can definitely pare your markup and styling down. If you only need to center the text and the image in a div of a fixed width, you can simply use text-align: center on the parent container, and display: inline-block on the two elements within. The following markup and styling is about as little as you need:
HTML
<div class="content-heading">
<img src="images/flame45x45.png">
<h3>Receive only the email you want.</h3>
</div>
CSS
.content-heading {
background-color: #ccc;
height: 45px;
margin: 0 auto; /** Centers on the page **/
text-align: center;
width: 636px;
}
h3 {
display: inline-block;
line-height: 45px; /** Only really works if you can rely on only displaying one line of text **/
margin: 0;
overflow: hidden; /** Need this to keep inline-block elements from staggering **/
padding: 0;
}
img {
background-color: black; /** Purely so we can see this **/
display: inline-block;
height: 45px;
width: 45px;
}
That's really all you need.
Codepen sketch
I have been trying to align two elements, a h2 and a div side by side without having one of them colapse when the window changes to a smaller size. I've searched the web a bit but found nothing similar that would help and my solutions just wouldn't work so I though here there would be someone able to help me.
So I want it to be displayed like this at all times:
https://imagizer.imageshack.us/v2/912x135q90/631/ZYR7sc.png (Can't post images sorry!)
But when window size changes dispite the fact the div should adapt at some point it just breaks to next line:
https://imagizer.imageshack.us/v2/730x144q90/912/yRBpkc.png
Here is my code on this one:
HTML
<div id='pagetitle'>
<h2 id='subtitle'>Weapons</h2>
<div id='hline'></div>
</div>
CSS
#pagetitle { /* This div is for centering both of the elements. */
width: 90%;
margin: 0 auto;
display: block;
}
#subtitle {
display: inline-block;
color: #72c9b9;
font-size: 30px;
font-weight: 300;
text-align: center;
}
#hline {
display: inline-block;
background-color: #72c9b9;
width: 70%;
height: 1px;
position: relative;
bottom: 4px;
margin-left: 20px;
}
So this is it guys, any sugestions? Thanks in advance.
cs.almeida
Here's a way how to do it:
demo
<div id='pagetitle'>
<h2 id='subtitle'><span>Weapons</span></h2>
</div>
#pagetitle {
width: 90%;
margin: 0 auto;
display: block;
}
#subtitle {
border-bottom: #72c9b9 solid 2px;
height: 18px;
display: block;
color: #72c9b9;
font-size: 30px;
font-weight: 300;
}
#subtitle > span {
background-color: white;
padding: 10px 20px;
}
I'm trying to center the text horizontally, but it doesn't work. It seems to be because of the display: table-cell
Would you know a work around? (note that I'm using bootstrap)
Thanks! > Codepen: http://codepen.io/goodux/pen/wgBCf
html:
<div class="feature">
<span class="glyphicon glyphicon-star feature-icon"></span>
<p class="feature-text text-center">
Gather user's feedback and engineer's requirements.
</p>
</div>
css:
.feature {
margin-bottom: 3.5em;
background-color: #f3f3f3;
border-radius: 5px;
}
span.feature-icon {
background-color: #FA6900;
border-radius: 3px;
color: #FFF;
font-size: 3em;
padding: .5em;
position: absolute;
top: 0;
}
p.feature-text {
overflow: hidden;
padding: 0 .5em 0 6.5em;
vertical-align: middle;
height: 6em;
display: table-cell;
}
.text-center {
text-align: center;
}
For display:table-cell to work correctly it needs to be inside a display:table element.
So, if you change the .feature rule to
.feature {
margin-bottom: 3.5em;
background-color: #f3f3f3;
border-radius: 5px;
display:table;
width:100%;
}
it will work as expected: http://codepen.io/gpetrioli/pen/EDtCq
of course you could avoid using display:table-cell if it is not really needed. (and in your example it looks like it is not..)
Try p {text-align: center;margin: auto }and why are you using display:table-cell ?