I'm having some trouble with this label, it doesn't seem to want to stay vertically centered, it's always at the top, if anyone can help that would be great, thank you.
http://jsfiddle.net/tu7moprn/
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="innertext">Text Test Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div><span class="label label-default pull-right">New</span>
</div>
<div class="col-md-4">Text</div>
<div class="col-md-4">Text</div>
</div>
</div>
#import url('http://getbootstrap.com/dist/css/bootstrap.min.css');
h4 {
margin-top: 25px;
}
.row {
margin-bottom: 20px;
}
.row .row {
margin-top: 10px;
margin-bottom: 0;
}
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86, 61, 124, .15);
border: 1px solid #ddd;
border: 1px solid rgba(86, 61, 124, .2);
}
hr {
margin-top: 40px;
margin-bottom: 40px;
}
.innertext {
display:inline-block;
width:90%
}
You can remove the class pull-right from the label and then add this proeprties:
.label {
display:inline-block;
vertical-align:middle;
}
.innertext {
vertical-align:middle;
}
Check this Demo Fiddle
You can always override by adding position: absolute;, top: 50%; and margin-top: -x; (mind the minus), where x is a half of the height of your label. It will center you label vertically. Don't forget to set position: relative; to parent of that span element. It will always stay on the middle of parent div.
If this is what you want. Otherwise provide more details.
Here is a working fork of your fiddle http://jsfiddle.net/r0gsewtd/
Related
I am looking to align my text with this skewed image, but the problem is the text is scrolling. Is there a way to combat this or no?
My goal is to keep the bolded "TITLE HERE" straight across the image but the placeholder text to continue to scroll, but aligning it with the large image to the left. Is this possible? Thanks for your help in advance.
/*BODY STUFF HERE*/
body {
background: WHITE;
background-attachment: fixed;
font-family: montserrat;
}
a {
text-decoration: none;
color: #999;
}
a:hover {
color: indianred;
}
.title {
font-family: montserrat;
font-weight: 900;
font-size: 6vw;
position: relative;
width: 90%;
left: 200px;
margin-top: 0%;
}
.title2 {
font-family: montserrat;
font-weight: 900;
font-size: 1.10vw;
position: static;
width: 90%;
margin-left: 45%;
}
.scrollingtext p {
width: 100%;
padding: 0 10%;
font-size: 13px;
}
/*LEFT PROFILE IMAGE HERE*/
.image {
z-index: -1;
}
.image img {
position: fixed;
width: 50%;
left: -3.5%;
z-index: -1;
-webkit-clip-path: polygon(25% 0%, 100% 0%, 71% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 71% 100%, 0% 100%);
}
/*CELL TABLE STUFF*/
.tablerow {
display: table-row;
width: 100%;
}
.table {
display: table;
}
.cell {
display: table-cell;
}
.right {
width: 50%;
}
.left {
width: 40%;
}
.mobile {
display: none;
}
#media screen and (max-width: 1024px) {
.image img {
width: 100%;
position: relative;
padding: px 5% 0;
margin: 0;
top: 0;
left: 0;
}
h1 {
color: #000;
letter-spacing: normal;
width: 95%;
margin-top: 0;
padding: 0;
margin: 0;
font-size: 70PX;
text-align: center;
font-style: montserrat;
}
.title {
display: none;
}
.cell {
display: block;
}
.desktop {
display: none;
}
.mobile {
display: inherit;
text-align: center;
}
.right {
width: 80%;
margin: 0;
}
.farright {
width: 0;
}
#logo {
height: 25px;
position: absolute;
}
.story {
color: #FFF;
font-family: playfair display;
width: 100%;
height: 200px;
text-shadow: 2px 2px 5px #000;
background-color: #292929;
display: table;
}
.story_inside {
vertical-align: middle;
display: table-cell;
}
.story h2 {
font-size: 40px;
width: 60%;
padding: 0 15%;
margin: 0;
line-height: 35px;
}
.story p {
font-family: montserrat;
margin: 0;
width: 70%;
padding: 10px 15% 0 15%;
}
#media screen and (max-width: 400px) {
h1 {
color: #000;
letter-spacing: normal;
width: 95%;
margin-top: 0;
padding: 0;
margin: 0;
font-size: 40px;
text-align: center;
font-style: montserrat;
}
#media screen and (max-width: 1030px) {
.byline {
font-size: 16px;
width: 100%;
right: 451%;
float: left;
position: relative;
width: 300%;
bottom: -150px;
}
<!--IMAGE GOES HERE-->
<div class="image">
<img src="http://via.placeholder.com/350x1150">
</div>
<div class="scrollingtext">
<!--DESKTOP TITLE AND BYLINE HERE-->
<div class="title">TITLE HERE
<p>
</div>
<div class="title2"><strong>AUTHOR HERE</strong> / TITLE</div>
<!--MOBILE TITLE HERE-->
<div class="table">
<div class="tablerow">
<div class="cell left desktop"></div>
<!--DESKTOP TITLE AND BYLINE HERE-->
<div class="title">
</div>
<div class="cell farright"></div>
</div>
<div class="tablerow">
<div class="cell left desktop">
</div>
<div class="cell right">
<!-- BODY TEXT GOES BELOW HERE -->
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example.</p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. This is a set of placeholder text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. This is a set of placeholder text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. This is a set of placeholder text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. This is a set of placeholder text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. </p>
</div>
</div>
</div>
</div>
A simple way to do it would be to make your image float with CSS in the same element as your text.
Like this example;
#my_container {
width: 400px;
text-align: justify;
}
#my_image {
width: 100px;
height: 100px;
float: right;
border: 1px solid #000;
margin: 10px;
}
<div id="my_container">
<div id="my_image">image here</div>
And a lot of copy and paste to fill this example.
And a lot of copy and paste to fill this example.
And a lot of copy and paste to fill this example.
And a lot of copy and paste to fill this example.
And a lot of copy and paste to fill this example.
And a lot of copy and paste to fill this example.
And a lot of copy and paste to fill this example.
And a lot of copy and paste to fill this example.
And a lot of copy and paste to fill this example.
And a lot of copy and paste to fill this example.
And a lot of copy and paste to fill this example.
And a lot of copy and paste to fill this example.
<div>
Just addd this css to fix the Title
.title{font-family: montserrat;
font-weight: 900;
font-size: 6vw;
width: 90%;
position: fixed;
top: 50%;
left: 10%;}
Yes there is a way to do it but I dont know if your going to like the result when scrolling.
Try this;
Create some empty div that will have the width matching your image and make them float to the left so any text will bump on it.
#container{
width :400px;
height:400px;
border:1px solid #000;
}
.filler{
float:left;
clear:left;
border:1px solid #000;
height:15px;
}
#filler1{
width:200px;
}
#filler2{
width:190px;
}
#filler3{
width:180px;
}
#filler4{
width:170px;
}
#filler5{
width:160px;
}
#filler6{
width:150px;
}
#filler7{
width:140px;
}
#filler8{
width:130px;
}
<div id="container">
<div id="filler1" class="filler"></div>
<div id="filler2" class="filler"></div>
<div id="filler3" class="filler"></div>
<div id="filler4" class="filler"></div>
<div id="filler5" class="filler"></div>
<div id="filler6" class="filler"></div>
<div id="filler7" class="filler"></div>
<div id="filler8" class="filler"></div>
some text to copy and paste and fill the example.
some text to copy and paste and fill the example.
some text to copy and paste and fill the example.
some text to copy and paste and fill the example.
some text to copy and paste and fill the example.
</div>
i'm trying to create a news box where there will be a div containing an image on the left and a div containing lines of text on the right. Whenever i set them to inline-block the text goes right beneath the div image and stays there. I want them to be in a single line.
Here's my code, can you point out what i'm doing wrong?
EDIT: Corrected the TYPO but still...
<div id="newsBox">
<div id="newsImg">
<img src="images/news1.jpg" alt="news1">
</div>
<div class="metaNews">
<div id="newsTitle">
<h3>Text Text Text Text Text Text Text Text .</h3>
</div>
<div class="newsBrief">
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
</div>
</div>
<div style="clear:both"></div>
<div class="newsBy">
<span class="metaDate">Posted on 10/5/2017</span>
<span class="metaBy">By Li</span>
</div>
<div class="newsLink">
View →
</div>
<div style="clear:both"></div>
</div>
And the CSS:
#newsBox {
width: 85%;
margin: 0.5rem auto;
padding: 0.5rem;
border: #333 solid 1px;
background-color: #c2c2c2;
}
#newsImg {
display:inline-block;
}
#newsImg > img{
max-width: 120px;
max-height: 120px;
padding-right:20px;
vertical-align: middle;
}
.metaNews{
text-align:center;
display:inline-block;
}
#newsTitle {
}
.newsBy {
display:inline-block;
}
.newsLink {
float:right;
width: 6rem;
text-align: center;
background-color: #2F4F4F;
}
.newsLink a{
font-family: 'Play', sans-serif;
color: #fff;
text-decoration: none;
}
You got a typo in:
.metaNews{
text-align:center;
display:inline-blockl
}
inline-blockl has extra l instead of a ;
.metaNews{
text-align:center;
display:inline-block;
}
jsfiddle (you should stretch the result window a bit to let it have enough width to see the results you wanted )
Wrap the divs <div id="newsImg"> , <div class="metaNews"> using a div and set its display as flex.
#newsBox {
width: 85%;
margin: 0.5rem auto;
padding: 0.5rem;
border: #333 solid 1px;
background-color: #c2c2c2;
}
#newsImgWrapper {
display: flex;
}
#newsImg {
display: inline-block;
}
#newsImg>img {
max-width: 120px;
max-height: 120px;
padding-right: 20px;
vertical-align: middle;
}
.metaNews {
text-align: center;
display: inline-block;
}
#newsTitle h3{ margin:0;}
.newsBy {
display: inline-block;
}
.newsLink {
float: right;
width: 6rem;
text-align: center;
background-color: #2F4F4F;
}
.newsLink a {
font-family: 'Play', sans-serif;
color: #fff;
text-decoration: none;
}
<div id="newsBox">
<div id="newsImgWrapper">
<div id="newsImg">
<img src="images/news1.jpg" alt="news1">
</div>
<div class="metaNews">
<div id="newsTitle">
<h3>Text Text Text Text Text Text Text Text .</h3>
</div>
<div class="newsBrief">
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
</div>
</div>
</div>
<div style="clear:both"></div>
<div class="newsBy">
<span class="metaDate">Posted on 10/5/2017</span>
<span class="metaBy">By Li</span>
</div>
<div class="newsLink">
View →
</div>
<div style="clear:both"></div>
</div>
The problem is that you are using display: inline-block, Without use width, display: inline-block does not work without using setting width,
So I added these properties: width: 50% to #newsImg selector and to .metaNews,
Here a running example in jsFiddle
I have a code like this: https://jsfiddle.net/qchtngzf/1/
and now, when the browser is too narrow, the div.right (the text on the right) jumps onto a next line. I would like to, however, if the div.left (the text on the left) would get smaller and the text inside would break onto a next line and the div.right would stay in the same place instead.
I found a similar issue here: Making a div float left, but not "fall" if text is too long
but it's a little different and doesn't work for me even with some changes I tried.
Thank you.
You should set width for both of them right and left class:
html, body, header, nav, footer, div, p, ul, li, a {
margin: 0;
padding: 0;
text-decoration: none;
font-family: sans-serif;
font-size: 18px;
}
.left {
width: 80%;
float: left;
position: relative;
}
.right {
width: 10%;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
hr {
border: 0;
height: 1px;
background-color: #e9e9e9;
margin: 16px 0;
}
section.body {
max-width: 960px;
min-width: 272px;
}
div.left {
color: #1e344c;
float: left;
}
div.left span {
font-size: 14px;
color: #666666;
}
div.right {
float: right;
}
<section class="body">
<div class="item clearfix">
<div class="left">
text text text text text text text text text text text text text text
</div>
<div class="right">text </div>
</div>
<hr>
<div class="item clearfix">
<div class="left">
text text text text text text text text text text <br>
<span>text text text text text </span>
</div>
<div class="right">text </div>
</div>
<hr>
<div class="item clearfix">
<div class="left">
text text text text text text text text text
</div>
<div class="right">text </div>
</div>
<hr>
<div class="item clearfix">
<div class="left">
text text text text text <br>
<span>text text text text text text text text text text text text text text text </span>
</div>
<div class="right">text </div>
</div>
<hr>
<div class="item clearfix">
<div class="left">
text text text text text text text <br>
<span>text text text text text text text </span>
</div>
<div class="right">text </div>
</div>
<hr>
<div class="item clearfix">
<div class="left">
text text text text text text text text text <br>
<span>text text text text text text </span>
</div>
<div class="right">text </div>
</div>
</section>
You can use below css if you want right section not to wrap in next line and left section to get shorter.
html, body, header, nav, footer, div, p, ul, li, a {
margin: 0;
padding: 0;
text-decoration: none;
font-family: sans-serif;
font-size: 18px;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
hr {
border: 0;
height: 1px;
background-color: #e9e9e9;
margin: 16px 0;
}
section.body {
max-width: 960px;
min-width: 272px;
}
div.left {
color: #1e344c;
width
}
.item {
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
div.left span {
font-size: 14px;
color: #666666;
}
div.right {
white-space:nowrap;
}
1) Set width for both divs
2)set font size in "vh"
3) No need to set position:relative; of div.left;
div.left{
width:90%;
font-size:2vh;
float:left;
}
div.right{
width:10%;
float:right;
}
Actually, a combination of these answers helped. There is a problem with the one from Teuta (https://stackoverflow.com/a/38073935/6522717) that if the screen is too small and the content on the right is bigger than the set percentage, the text then breaks onto another line. This would be solved by another #media width or, as San posted (https://stackoverflow.com/a/38074311/6522717), by assigning white-space: nowrap to the div.right.
Thank you very much for the answers as they helped a lot.
We have outer div header which has 100% width of its container. The div is for heading text and button on right. The text have to be centered to the header and the button has to be on right. But if the text is long enough to overlap with button, then the text should fill left part of header and do not go on button.
header -> [ [CENTER TEXT] [button]]
OR (with wider CENTER TEXT)
header -> [[abcdabcdab CENTER TEXT cd][button]]
Tried with position: relative on header->text and position: absolute; left: 100%; on button when placing it as a child of center text. But this isn't exactly what is should look like. Any good way to do it with pure CSS?
Button should be placed with little margin to right border of header, rather not with margin to center text.
You can use this simple trick:
Use a span positioned inline after the text itself. Once the text is longer than the size of the header, the span drops a to the next line and the text can take all the space.
Notice that you need to set a fixed width to the button.
div.container {
border: 1px solid red;
height: 50px;
width: 100%;
position: relative;
}
h1 {
background: gray;
width: calc(100% - 100px);
float: left;
height: 50px;
line-height: 50px;
text-align: center;
margin: 0;
direction: rtl;
}
h1 span.text {
color: black;
background: lightyellow;
direction: ltr;
}
h1 span.padding-holder {
width: 100px;
display: inline-block;
position: relative;
}
button {
float: right;
width: 100px;
height: 50px;
}
<div class="container">
<h1>
<span class="text">Short Header</span>
<span class="padding-holder"></span>
</h1>
<button>Click Me</button>
</div>
<div class="container">
<h1>
<span class="text">Now a Medium Header</span>
<span class="padding-holder"></span>
</h1>
<button>Click Me</button>
</div>
<div class="container">
<h1>
<span class="text">And This is a Very Long Header</span>
<span class="padding-holder"></span>
</h1>
<button>Click Me</button>
</div>
I have a repeatable wrapper element with children elements: content element, with left and right elements, all divs.
I want to add some text (ie, "Retired"), rotated by few degrees, like a watermark in the background of content. This can't be a background image, because this text shall be localized (and for maintenance purpose, easier to change a text instead of an image).
Next image shows a disposition of text "Retired" (without showing left and right elements):
Here's the basic HTML layout of this element, it might be useful:
<div class="wrapper">
<div class="leftcolumn">Left column</div>
<div class="content">
<h1>Text Text Text Text Text Text</h1>
<p>Text Text Text Text Text Text Text Text Text</p>
</div>
<div class="rightcolumn">Right column</div>
</div>
And CSS:
.wrapper {
margin: 0 auto;
width: 450px;
display:block;
background-color:#222222;
border-radius: 5px;
}
.content {
float: left;
width: 318px;
padding-left: 5px;
}
.leftcolumn {
width: 50px;
float: left;
}
.rightcolumn {
width: 75px;
float: left;
}
.leftcolumn {
width: 50px;
float: left;
}
.rightcolumn {
width: 75px;
float: left;
}
Here is a working code:
Html
<div id="wrapper">
<div id="leftcolumn">Left column</div>
<div id="content">
<h1>Text Text Text Text Text Text</h1>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>
<div id="rightcolumn">Right column</div>
</div>
<div id="textwatermark">
<p>Retired</p>
</div>
CSS
#textwatermark {
color: #d0d0d0;
font-size: 50pt;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-45deg);
position: absolute;
width: 100%;
height: 100%;
margin: 0;
z-index: -1;
left:170px;
top:-100px;
}
Check the demo here:http://jsfiddle.net/x6FwG/
You could use transform:rotate(). Check this out http://www.w3schools.com/cssref/css3_pr_transform.asp . You'll have to put an Element inside an Element to get the effect you want.
Note: This won't work in older Browsers, so you may want to just use something like:
background-image:url('location.png');