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/
Related
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 two sections stacked. I'm using a position:relative on the container div and then using position:absolute on the child divs to position them with respect to the top of the parent container.
This is my code (also on this JSFiddle):
html,body{height: 100%; width: 100%;}
h1{
font-size: 20px;
font-family: 'Avenir', sans-serif;
color: #212121;
}
h2{
font-size: 18px;
font-family: 'Avenir', sans-serif;
font-weight: lighter;
color: #424242;
}
p{
font-family: 'Avenir', sans-serif;
font-size: 18px;
}
.container{
position: relative;
max-width: 960px;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
}
#header{
position: absolute;
top: 10px;
max-width: 960px;
line-height: 30px;
}
#header h1{padding-top: 5px;}
#header {max-width: 800px;}
#projects{
position: absolute;
top: 240px;
}
<div class = "container">
<section id = "header">
<h1>Name Lastname</h1>
<h2>Description, Description</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam euismod non metus id semper. Integer volutpat, mauris vitae pulvinar rhoncus, lacus lectus euismod augue, sit amet interdum lectus leo et magna. Curabitur in tellus vel tellus finibus faucibus quis sit amet risus. Etiam id sagittis ligula. Ut facilisis, nisi eu.!
</p>
</section>
<section id = "projects">
<p>Another paragraph on projects</p>
</section>
</div>
I am trying to make the page responsive but, when I reduce the width of the page, the header div (top section) crunches into the bottom projects div which makes it illegible.
How can I create a constant spacing between the two divs?
As mentioned in the above comment, the answer is to remove the position: absolute;. The default flow within the parent container will be for the child divs to stack. You can then adjust the spacing between the child divs with margin-top or margin-bottom.
I’m working on a template which requires some background images of elements (h2, h3, etc.) to extend beyond the (centered) page width to fill the browser window.
I know a way to do that. I’ve seen this solution explained by Craig Buckler here :
http://www.sitepoint.com/css-extend-full-width-bars/
You can see a fiddle here :
http://jsfiddle.net/Vinyl/V8ps3/
Basically, we add a large amount of padding then move the element back to its original location
I think it’s a good solution but do you know another solution to do that ?
html :
<div id="main">
<div>lorem ipsum</div>
<div id="content">content which extend beyond the (centered) page width to fill the browser window</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nunc erat, at ornare nisl sollicitudin eget. Vestibulum aliquam massa sit amet fringilla ullamcorper. Curabitur libero arcu, suscipit eu convallis eget, sodales id ante. Vestibulum gravida massa vitae risus molestie egestas. Nullam mi elit, tempus nec eleifend non, vestibulum ac magna. Integer tortor diam, dapibus eu faucibus nec, ornare in ipsum.</div>
</div>
css :
body {
margin:0;
overflow-x: hidden;
background-color: #333333;
}
#main {
width:250px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
}
#content {
background-color: #999999;
padding: 20px;
width: 100%;
margin: 0 auto;
margin-right: -3000px;
padding-right: 3000px;
margin-left: -3000px;
padding-left: 3000px;
}
DEMO ..
This is another solution.. maybe simpler, it uses :before for the elements (h2, h3, etc.)
CSS
#content {
padding: 20px;
width: 100%;
margin: 0 auto;
position: relative;
z-index: 1;
}
#content:before {
background: #999999;
content: "";
width: 1000%;
height: 100%;
position: absolute;
top: 0;
left: -500%;
z-index: -1;
}
Hope this will help you ..
I'm trying to make a few rows like in a table, but with divs.
Each one has an image on the left, a block of text, and "read more"..
I've tried using display:table, but it doesn't seem to be working.. The text is and images are not aligned properly..
http://jsfiddle.net/76a4j/1/
.entry{
width=100%;
display:table;
}
entry-row {
border: 2px #000000 solid;
margin-top:5px;
margin-bottom:5px;
display: table-row;
}
.imgrL {
border: 1px solid #c7c5c8;
padding: 5px;
float:left;
clear:left;
}
Thanks for the answers everyone, I see what I did wrong and have fixed it now :)
You have two problems:
CSS does not use =. Change
width=100%;
to
width: 100%;
You need to use . on all class selectors. Change
entry-row {
to
.entry-row {
With these changes, it looks more like your image.
JSFiddle
Here is the solution you want:
HTML
<div class="entry">
<a href="#">
<img src="#" />
</a>
<div class="text">
<h3 class="title">Article 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur scelerisque arcu at accumsan feugiat. Fusce at interdum sapien.
Phasellus nec odio varius ante imperdiet facilisis. Etiam iaculis dui vitae nibh scelerisque fermentum.
Nam iaculis quis purus ac congue. Maecenas sed elit tortor.
Sed gravida velit nulla, sit amet dapibus elit mollis vitae.
In libero libero, mattis et ipsum eu, euismod aliquet diam.
Nulla eu neque interdum, suscipit libero nec, facilisis sapien. Donec consequat porttitor interdum.
Nullam non blandit massa.Read more
</p>
</div>
</div>
CSS
.entry > a {
float: left;
}
.entry img {
width: 130px;
height: 130px;
}
.entry .text {
float: right;
width: 700px;
}
.entry:after {
clear: both;
content: '';
display: block;
}
.entry .title {
color: #FF7A00;
font-family: arial;
font-size: 15px;
}
.entry .text {
margin: 0px 0px 0px 20px;
}
.entry .text * {
margin: 0px;
}
.entry .read-more {
float: right;
}
display: inline-block;
Could be done for you
add this css
div
{
display: inline-block;
}
Please change css code
entry-row {
border: 2px #000000 solid;
margin-top:5px;
margin-bottom:5px;
display: table-row;
}
To
.entry-row {
float:left;
border: 2px #000000 solid;
margin-top:5px;
margin-bottom:5px;
}
You have to add overflow:hidden property to each row.
.entry-row {
overflow:hidden;
margin:0 0 20px;
}
Hope it will help.
I'm having a problem with with positioning elements on top of each other.
Here is my markup:
<div id="glownySlajder">
<ul>
<li>
<img src="inc/img/slajder_bg.jpg" alt="Slajd" class="slajd">
<div class="fr">
<img src="inc/img/strzalka_lewo.png" alt="strzalka_lewo">
<p class="fl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet consequat gravida. Nunc sed risus est, ac vestibulum nisl. Suspendisse sagittis velit a massa auctor accumsan. Aliquam hendrerit libero tellus, at molestie leo. Curabitur sodales </p>
<img src="inc/img/strzalka_prawo.png" alt="strzalka_prawo">
</div>
</li>
</ul>
</div>
Here is my css:
#glownySlajder {
margin-bottom: -2px;
}
#glownySlajder a {
margin: 7px;
}
#glownySlajder ul li img {
z-index: 9998;
}
#glownySlajder div {
z-index: 9999;
color: black;
background-color: #e7e7e7;
height: 85px;
width: 500px;
padding: 0px 5px;
}
#glownySlajder div p {
font-size: 11px;
line-height: 14px;
margin-top: 20px;
width: 390px;
}
.fr {
float: right;
}
.fl {
float: left;
}
This is what I get:
This is want I want to achieve:
The problem is that z-index doesn't seem to be working. When I try to do negative margin on a div with p, it just disappears under the image, not what I want exactly.
I am unable to work this out on my own, any tips please?
First of all, z-index only works on block elements (display:block). Second, it is only useful for elements which are in the same stacking context. Third, don't use margin to position. Use position: and top, left, right, bottom for this.
References:
CSS2.1: Stack level
CSS2.1: Positioning