In the top example, the images have the CSS
.post img{float:right;width:150px;padding-bottom:3px;}
Which makes them float in rows, presumably because the width restriction comes from the parent, the whole post, so they won't wrap or stack until the width of the post is met.
In the bottom example the images are wrapped in a parent .gallery with the CSS
.gallery{float:right;width:150px;}
.gallery img{margin-bottom:3px;}
Is it possible to achieve the top example without wrapping in the parent? Or, is it possible to dynamically add the parent using :first-child and :last-child selectors and ::before and ::after to add CSS to wrap them in a DIV?
Aiming for a pure CSS solution, if at all possible. I've hit a brick wall.
Edit: Adding fuller HTML
<div class="post" style="width:600px;">
<p>
<img src="//placehold.it/150x150" width="150" height="150">
<img src="//placehold.it/150x150" width="150" height="150"></p>
<p>
The Godin 5th Avenue Kingpin features a classic shape and sound for the developing musician. The 5th Avenue has a Canadian wild cherry body that produces a range of warm, developed tones. The hollowbody construction adds warmth and resonance to your overall tone. The P90 pickup has a classic 50s inspired sound that can be utilised in both studio and live situations. This model is in a classic black colour. For musicians looking at producing a traditional tone whilst having the reliability of modern designs, the 5th Avenue is the place to go.
</p>
</div>
Example and Solution CodePen:
http://codepen.io/anon/pen/WoypyK
You need to add display: block; clear: both; css-rules for .post img:
.post img {
float: right;
width: 150px;
padding-bottom: 3px;
display: block;
clear: both;
}
.post img {
clear: right;
float: right;
width: 150px;
padding-bottom: 3px;
}
Related
I am having trouble trying to figure out how to properly use the padding feature in css with the following html where it is only padding the first word on the left-hand side.
the css I am using on that it now that is not working correctly is
mark {
background-color: #89ce40;
color: white;
opacity: 0.89;
padding-right: 5px;
padding-left: 10px;
}
<div class="slide-content">
<h1><strong><span><mark>COMPREHENSIVE IT </mark><mark> SERVICES YOU CAN TRUST</mark><mark></mark></span></strong></h1>
<h2><mark><span>Let us help you develop an IT </span></mark><mark> Optimization Strategy and </mark><mark> Define your technological </mark><mark> priorities</mark></h2>
</div>
I've also tried calling the padding functions through .slide-content{padding-left: 10px;}
Is there any way I can separate through each the padding through each <mark></mark> section?
^ This is what it looks like when mark{padding right: 8px; padding-left 20px}
I am trying to get each line to be padded on the left like the first word of each element
I have been able to fix it for the right hand side padding by playing with mark more but on the left hand side it is still only the first word in each string that is being padded vs the beginning of each <mark>
It has just occured to me that the padding is being applied on the above line, I am sorry for my previously poor explanations of what I am trying to do.
<mark> is an inline Element
inline element dimensions are not faithfully set to intuitive lengths -- they "wrap" around the content. inline-block and block elements will conform to the dimensions given (more or less. )Add display:inline-block or block.
Demo
mark {
display:inline-block;
background-color: #89ce40;
color: white;
opacity: 0.89;
padding-right: 5px;
padding-left: 10px;
}
<div class="slide-content">
<h1><strong><span><mark>COMPREHENSIVE IT </mark><mark> SERVICES YOU CAN TRUST</mark></span></strong></h1>
<h2><mark><span>Let us help you develop an IT </span></mark><mark> Optimization Strategy and </mark><mark> Define your technological </mark><mark> priorities</mark></h2>
</div>
Adding <br> fixed my problem above regarding the padding, thank you #Sabbin for helping out!
<h1 style="text-align: left;"><strong><mark>COMPREHENSIVE I.T. <br></mark><mark> SERVICES YOU CAN TRUST</mark><mark></mark></strong></h1>
<h2 style="text-align: left;"><mark>Let us help you develop an I.T. <br></mark><mark> Optimization Strategy and <br></mark><mark> Define your technological<br></mark><mark> priorities</mark></h2>
mark {
background-color: #89ce40;
color: white;
opacity: 0.89;
padding-right: 5px;
padding-left: 5px;
}
<mark> is by default inline element. So every <mark> block is rendered in one line and thus you don't see the padding in the subsequent rows. It is adding the padding, but at the end of the previous row.
You can address this issue in multiple ways.
One way would be to float:left all <mark> elements and add clear:both so they all go one below another.
mark {
/*your code*/
float:left;
clear:both;
}
Other way would be to make the <mark> elements block elements, but they will take full width. The code would then be:
mark {
/*your code*/
display:block;
}
Using flex, you can achieve the same by using the following code:
mark {
/*your code*/
display: flex;
}
Choose what works best for you.
I'm trying to format a blog post so that it will look correct regardless of what size of screen it's viewed on. The post is here: http://cannotdecide.com/10-must-see-documentaries-on-netflix-canada-june-2015/
The way it is currently setup, it's disastrous as you move between browser/screen sizes.
What would be the best way to format this so that the image and text associated with each other never start before the other one, regardless of device size?
Edit:
So I have this in my CSS:
.entry > p:after {
content: "";
display: block;
width: 100%;
clear: both;
}
.entry p > img{
display: inline-block;
vertical-align: top;
}
.article {
display: inline-block;
vertical-align: top;
}
And the following as my code in the post:
<p><div class="entry"><img class="alignleft size-medium wp-image-14" style="padding: 10px;" src="http://cannotdecide.com/wp-content/uploads/2015/06/blackfish-203x300.jpg" alt="blackfish" width="203" height="300" /></div><div class="article"><strong>1. Blackfish</strong> - Explores the business of capturing and breeding orcas in captivity, including at SeaWorld, and the effects of captivity on the specifies commonly known as the "killer whale." The film focuses on Tilikum, a male orca who was captured in 1982, and features interviews with former SeaWorld trainers, marine biologists, and other experts in the field, as well as never-before-seen footage. See for yourself why Blackfish caused massive public outrage when it first aired in 2013.</div></p>
Still not having any luck. Sorry, I know this is very basic.
You need to clear the paragraph to occupy the full width and disallow other divs to overlap it.
.entry p {
clear: both;
}
The image and text structure is irregular as well. So after adding the above, you need to have a constant structure for all the images and text to look well organised.
<img src="imagename.jpg" class="img-responsive">
use class img-responsive if you have bootstrap linked
According to the source, not all <p> contains both img and the article ,example, "the inside job".
1) since img tag is floating to the left, you need to clear the
.entry > p:after {
content: "";
display: block;
width: 100%;
clear: both;
}
2) make the display as inline block;
.entry p > img{
display: inline-block;
vertical-align: top;
}
and wrap the article in another and add add inline block to that div aswell
If you can edit the content, then go to each <p> tag, which has the image in it, and add style="clear:both".
This is not a good solution, but there is no other suggestions advisable for the current html structure.
I have a problem with regards to achieving a specific design goal, and I hope you can help me out here.
I made a picture in PS that I hope explains to you what I want:
Every part of this picture should be in an individual tag (for example div), and be placed like this.
The logo should be placed on top of the big picture, with just a little bit of space between the edges. The name is placed on level with the bottom of the picture OR in the middle (whatever looks best).
The headline (new 911) is placed along with the top of the big picture, the description is in the middle (always middle, length of text will vary) and the footer (info info) is aligned with the bottom of the picture.
Is this something anyone could help me with?
I have some code, but it doesn't work exactly as planned. Here's my HTML:
<div class="content">
<div class="left">
<div class="poster">
<div class="poster_img">
<img src="https://lh6.googleusercontent.com/-cC6WK7FOx_g/AAAAAAAAAAI/AAAAAAAAAAA/QQ41pWU9UUQ/s100-c-k/photo.jpg" height="50" />
</div>
<div class="poster_name">Porsche</div>
</div>
<div class="img">
<img src="http://i1.ytimg.com/vi/k7dEsMCFfFw/mqdefault.jpg" width="220" />
</div>
</div>
<div class="right">
<div class="header">The new Porsche 911 Turbo. Breaking new ground.</div>
<div class="main">With the new Porsche 911 Turbo, we have once again questioned everything and started from scratch. We pushed the boundaries...</div>
<div class="footer">
<div class="info1">info</div>
<div class="info2">info</div>
</div>
</div>
Here's my CSS:
.content {
position: relative;
clear: all;
margin: 5px;
margin-top: 10px;
}
.left {
display: table-cell;
}
.poster {
position: relative;
margin-bottom: -50px;
height: 50px;
}
.poster_img {
display: table-cell;
position: absolute;
}
.poster_name {
display: table-cell;
padding-left: 52px;
font-size: 15px;
}
.img {}
.right {
display: table-cell;
padding-left: 10px;
}
.header {}
.main {}
.footer {}
.info1 {
display: table-cell;
}
.info2 {
display:table-cell;
padding-left: 25px;
}
Hope you can help me out here! :)
Aleksander.
Positioning elements with CSS is not as complicated as it seems (if your design concept is good).
I like using grids to cleanly position elements. However most of the time position: absolute; with a position: relative; on the parent element will suffice.
Read on about this here: Absolute Positioning Inside Relative Positioning
Also try to find a site that has a similar design and explore the source. It looks like porsche would be a good place to start. There are also lots of "Design Inspiration" sites were you might find what you're looking for.
Good luck.
Rather then going into the depths of positioning, you may want to consider a simple float in combination with clear. usually works well enough - given the right stack order.
I am trying to make my divs appear horizontally across the page but there is an automatic line break in between them. I was wondering how I could fix this.
<div id="box1">
<header id="whyshouldi">
What is iOS Development
</header>
<p id="whatis">
iOS Development is the process used to create native applications for iPhone, iPod, and iPad. Applications are made using the SDK(software development kit), Xcode. Aside from the software, it is necessary that iOS Developers know Objective-C.
</p>
</div>
<div id="box2">
<header id="whyshouldi">
Why Should I learn it?
</header>
<p id="whatis">
Learning native app development can allow you to better expand the horizon of knowledge in iPhone, and can make you a better programmer overall. It is a great skill to know no matter who you are.
</p>
</div>
This is the default behaviour of block-level elements .. there are many options to have the two divs appear side by side but one simple way is by using the float property and giving each div a width of 50%
Example
you can position them absolutely:
#box1,#box2 {
position: absolute;
width: 50%;
}
#box1 {
left: 0;
}
#box2 {
right: 0;
}
This can be quite easily achieved introducing either a class or using some specificity trickery. If you use display: inline-block you can achieve what you're after. So let's say you introduced a class to your #box1 and #box2 ID's you could in theory...
.col { display: inline-block; max-width: 170px; width: 100%; vertical-align: top; }
Always remember when using inline-block to close any gaps in mark up between #box1 closing </div> and #box2 opening <div>. Otherwise you'll be left with 3 or 4 unwanted pixels.
Check this fiddle. I think this is what you're after. http://jsfiddle.net/UsNBj/
I would like to vertically align the div ".person-user" so that is vertically in the center of the parent element ".person" (The text to be in the center of the photo but to the right) How can I do this?
Thanks
http://jsfiddle.net/mpBW5/5/
This is something that should be simple, but is actually a pain in the backside to do. Here's a quick jsFiddle, using display: table on the person div, and display: table-cell on the picture wrapper and info divs:
http://jsfiddle.net/2yfDs/1/
What follows is a combination of markup and style that will accomplish exactly what you want, without JavaScript and JQuery.
Markup:
<div class="person">
<img class="profile" src="http://sphotos-a.xx.fbcdn.net/hphotos-ash4/320450_10151028382307410_534533150_n.jpg"/>
<div class="profile">
<div class="name">Colin Pacelli</div>
<div class="fact">Ohio University</div>
</div>
</div>
Style:
.person {
display: table;
}
.person img.profile{
height: 50px;
margin-right: 10px;
/*border-radius: 4px 4px 4px 4px;*/
}
.person div.profile {
display: table-cell;
vertical-align: middle;
/*font-family: calibri;
font-size: 14px;
color: #444;*/
}
/*.person .profile .name {
font-weight: bold;
}*/
I have commented out the rules that do not principally affect the solution, so that all can see how little it takes with CSS if done right. Compared to 10 lines of code running using 32Kb of client side code running on top of a virtual machine. And you thought Adobe Flash Player was evil. I do not mind JQuery much, especially for things it can do well, but frankly, involving JQuery in a clear cut case of pure style is a just bit too much.
As you probably can figure, I have edited your JSFiddle, stripping it of non-essentials and cutting it down to a minimal example that exhibits the desired behavior while leaving the visuals in place.
Since you specified html and css as tags, and since it is in nearly all cases a better idea not to resort to JavaScript/JQuery when they can be avoided, I would really use a markup and style solution like the above instead.
The most precise way is to do this with jQuery and calculate it dynamically for each div. This is useful if some/all image/text divs have different heights. The example. The code:
$("div.person-user").each(function() {
$(this).css("marginTop", function() {
var imgH = $(this).prev("div.person-user-pic").height(),
thisH = $(this).height(),
h = (imgH/2) - (thisH/2);
return h;
});
});
BUT: if every div and image has the same height, you could just do this:
div.person-user {margin-top: 8px;}
I hope that this answers your question?
This is a very common question and the best explanation so far is here:
http://phrogz.net/css/vertical-align/index.html