My HTML:
<ul class="down_rectangles">
<li >
<div class="keimeno">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis
consequat tellus consectetur adipiscing elit. Donec
</div>
</li>
<li >
<div class="keimeno">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis
consequat tellus
</div>
</li>
</ul>
CSS follows:
.down_rectangles{
list-style: none;
margin-top:0px;
padding:0;
}
.down_rectangles li {
height: 250px;
width: 265px;
background-color: #FFF;
display: inline-block;
margin-right:15px;
}
.down_rectangles>li:last-child {
margin-right:0;
}
.keimeno{
color: #626262;
font-size: 12px;
margin: 20px;
line-height: 1.5em;
font-family: Verdana, Geneva, sans-serif;
}
If the text inside the two li's is the same they stand nice next to each other. Every time I tried to change the text inside the first li the second li is moving down a bit and losing its initial position . Why that happens?
Thank you very much
Because you are using display: inline-block; the elements are aligned to the baseline by default
So you need to use vertical-align: top; for .down_rectangles
.down_rectangles li {
height: 250px;
width: 265px;
background-color: #FFF;
display: inline-block;
margin-right:15px;
vertical-align: top;
}
Demo
Demo 2 (Sets to baseline if not used vertical-align: top;)
You need to set a vertical-align:top to your li elements, since they are inline-blocks
example on codepen: http://codepen.io/anon/pen/vhJpG
Try This
.down_rectangles li{float :left;}
Related
I'm trying to align y text to a project, but whenever I do, the text aligns to the viewport. Whenever I try aligning the text, the text moves with the viewport vertically.
header {
height: 900px;
background-image: url('../img/large-banner-image.png');
background-repeat: no-repeat;
background-position: center top;
}
span {
font: 60px Pacifico, sans-serif;
font-weight: 400;
}
.Header-Type {
vertical-align: -16px
}
img {
display: inline-block;
margin: 17px;
}
h1 {
text-align: center;
position: relative;
top: 62px;
right: 13px;
}
h2 {
font: 22px Raleway, sans-serif;
font-weight: 700;
}
p {
font: 36px Raleway, sans-serif;
font-weight: 300;
text-align: center;
position: relative;
top: 90px;
}
.Phone {
text-align: center;
position: relative;
top: -567px;
}
.Down-Arrow {
text-align: center;
position: relative;
top: -574px;
}
<.content-alt {
float: left;
margin: -600px 1800px
}
> .content-alt2 {
display: none
}
.content {
display: none
}
.content2 {
display: none
}
.alternate {
display: none
}
.other {
text-align: center;
}
.near-bottom {
text-align: center;
}
footer {
word-spacing: 30px;
}
.footer {
font: 16px HelveticaNeue, sans-serif;
font-weight: 400;
}
.Image {
text-align: center;
}
<header>
<h1> <img style="vertical-align:middle" src="img/focus.png"/><span>Focus</span></h1>
<p>A landing page for your app with focus</p>
</header>
<div class="Phone">
<img src="img/iphone.png" />
</div>
<div class="content-alt">
<h2>Great Feature</h2>
<div>Lorem ipsum dolor sit amet, consectetur
<br> adipiscing elit. Mauris interdum velit vitae
<br> nulla molestie eu. </div>
</div>
<div class="content">
<h2>Great Feature</h2>
<div>Lorem ipsum dolor sit amet, consectetur
<br> adipiscing elit. Mauris interdum velit vitae
<br> nulla molestie eu. </div>
</div>
<div class="content-alt">
<h2>Another Great Feature</h2>
<div>Lorem ipsum dolor sit amet, consectetur
<br> adipiscing elit. Mauris interdum velit vitae
<br> nulla molestie eu. </div>
</div>
<div class="content">
<h2>Another Great Feature</h2>
<div>Lorem ipsum dolor sit amet, consectetur
<br> adipiscing elit. Mauris interdum velit vitae
<br> nulla molestie eu. </div>
</div>
<div class="alternate">
<h2>Get The App Today!</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla nisl congue congue. Maecenas nec condimentum libero, at elementum mauris. Phasellus eget nisi dapibus, ultricies nisl at, hendrerit risusuis ornare luctus id
sollicitudin ante lobortis at.</div>
</div>
<div class="other">
<h3>“Focus is an app that is extremely useful. I would reccomend it to anyone.”</h3>
<div>Kyle Turner, Blogger</div>
</div>
<div class="Image">
<img src="img/people.png" />
</div>
<div class="near-bottom">
<h4>Say Hi & Get in Touch</h4>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.</div>
</div>
<footer>
<p>Contact Download Press Email Support</p>
</footer>
Any troubleshooting would be appreciated.
That's because you have the paragraph element set to position: relative. In this case, relative to the viewport. Get rid of that. You shouldn't be using relative positioning unless y absolutely required.
If you are trying to set the text to "vertical-align: middle" you should give it the display property: "display:table-cell" and its parent element the display property: "display:inline-table". That way your vertical align property will work without problems.
Here is a working example with floating elements for responsiveness on the page, hope that helps!
header{
height:250px;
background-image:url('../img/large-banner-image.png');
background-repeat: no-repeat;
background-position: center top;
}
span {
font: 60px Pacifico, sans-serif;
font-weight: 400;
}
.Header-Type{
vertical-align: -16px
}
img {
display: inline-block;
margin: 17px;
}
h1 {
text-align: center;
margin-top:60px;
}
h2 {
font: 22px Raleway, sans-serif;
font-weight: 700;
}
p {
font: 36px Raleway, sans-serif;
font-weight: 300;
text-align: center;
}
.content-alt {
text-align:left;
float:left;
width:20%;
margin-left:20%;
}
.content-alt2 {
text-align:left;
float:left;
width:20%;
margin-left:20%;
margin-top:60px;
}
.content-alt2::before{
clear:both;
}
.content {
text-align:left;
float:left;
width:20%;
margin-left:20%;
}
.content2 {
text-align:left;
float:left;
width:20%;
margin-left:20%;
margin-top:60px;
}
I have a container that has a string text (which could be very long) and a floating inline element as depicted here.
HTML
<div class="container">
<span>RIGHT</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</div>
CSS
span {
float: right;
border-radius: 2px;
background-color: #26a69a;
padding: 0 6px;
}
.container {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
In case the string text is long it gets truncated and this works fine in chrome. Running it on mozilla, on the other hand, displays the truncated text behind(in front) of the floated inline object. Could someone please explain to me why this is so and how to correct it.
Whenever you are providing text-overflow: ellipsis, you need to apply fix width to the container stating the browser to make it ellipsis after that fixed width.
Chrome generally inherits the fix width of the parent or container and applies the properties. However, you need to manually mention it in Firefox.
For ellipsis, its also better if you change the structure to have the text content inside a span or a div.
Check updated fiddle.
Refer code:
span {
float: right;
border-radius: 2px;
background-color: #26a69a;
padding: 0 6px;
}
.wrapper {
width: 540px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
vertical-align: top;
}
<div class="container">
<span>RIGHT</span>
<div class="wrapper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</div>
</div>
Please try this
body{
float: left;
margin: 0;
max-width: 100%;
}
.container {
box-sizing: border-box;
display: block;
float: left;
overflow: hidden;
padding-right: 80px;
position: relative;
text-overflow: ellipsis;
white-space: nowrap;
width:100%;
}
span {
background-color: #26a69a;
border-radius: 2px;
display: block;
float: right;
padding: 0 6px;
position: absolute;
right: 0;
top: 0;
}
<div class="container">
<span>RIGHT</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</div>
JS Fiddle demo : https://jsfiddle.net/geogeorge/gzjf2psq/6/
I'm not a clever man, just trying to make a responsive page with a left sidebar, so far that's okay, but I cannot figure out how to align the content of the main div to the top.
This is the code: https://jsfiddle.net/kissja74/df8vkn2a/
#content {
position: relative;
max-width: 400px;
margin: 0 auto;
}
#menu {
position: relative;
width: 50px;
height: 30px;
margin-left: -50px;
background-color: blue;
}
<div id='content'>
<div id='menu'>menu</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi interdum porttitor accumsan. Aliquam at egestas lacus, sed ultrices dui.</p>
</div>
Add to your style
#menu {float: left}
I have a list of items which consist of an image and blockquote. I have been trying to set the images width to a set max-width. Then trying to make blockquote fit in automatically by the images side. Whilst keeping both elements vertically aligned center too.
I'M having some problems and would be thankful if someone could help. jsFiddle
html
<ul>
<li>
<div><img src="http://placehold.it/180x100"></div>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec magna elit. Suspendisse nec enim lacus. Aenean semper ipsum in faucibus blandit. Duis auctor ornare viverra. – Person</p></blockquote>
</li>
<li>
<div><img src="http://placehold.it/146x16"></div>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec magna elit. Suspendisse nec enim lacus. Aenean semper ipsum in faucibus blandit. Duis auctor ornare viverra. – Person</p></blockquote>
</li>
</ul>
CSS
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
width: 100%;
position: relative;
float: left;
padding: 0 0 30px;
}
ul li div {
width: 200px;
position: relative;
float: left;
height: 100%;
max-height: 100%;
display:table-cell;
vertical-align: middle;
}
ul li img {
display:table-cell;
vertical-align: middle;
}
ul li blockquote {
color: #999;
float: right;
font-style: italic;
margin: 0;
width: 70%;
}
ul li blockquote p {
margin: 10px 0;
}
I have removed float, so that it could be vertically aligned properly. Please check this http://jsfiddle.net/NLCnk/3/
If using flexbox is an option for you, take a look at http://jsfiddle.net/dcsturm/ypxud/
Updated the fiddle, because I had overread the width-aspect of your request.
And if you want to learn more about this awesome technic: http://philipwalton.github.io/solved-by-flexbox/
I'm trying to determine if there is a way to style inline headers that span multiple lines using a background color.
The issue I'm having is with the padding is broken on any lines that wrap.
Example
CSS and HTML
h1 {
display: inline;
padding: 20px;
background: purple;
font-family: sans-serif;
color: #fff;
line-height: 60px;
}
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel scelerisque neque.</h1>
Here is the link to my fiddle
Any help would be appreciated
After looking at the image you posted this is the solution I came up with:
CSS and HTML
.header-container{
position: relative;
background: purple;
overflow: hidden;
padding: 20px;
}
h1 {
display: inline;
font-family: sans-serif;
color: #fff;
line-height: 60px;
}
h1:after{
content: '';
width: 100%;
background-color: #fff; /*your page bg color*/
height: 50px;
position: absolute;
bottom: 0;
margin-left: 20px;
}
<div class="header-container">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel scelerisque neque.</h1>
</div>
Here's the updated JSFiddle
try
http://jsfiddle.net/hMMxM/10/
$("h1").each(function()
{
var headerContent = $(this).text().split(' ');
for (var i = 1; i < headerContent.length; i++)
{
headerContent[i] = '<span class="subhead">' + headerContent[i] + '</span>';
}
$(this).html(headerContent.join(' '));
}
);
Why not wrap it in a container with padding? And then remove padding and line height from the h1.
CSS and HTML
div {
padding:20px;
}
h1 {
display: inline;
background: purple;
font-family: sans-serif;
color: #fff;
}
<div>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel scelerisque neque</h1>
</div>
Here is a working example: http://jsfiddle.net/hMMxM/5/