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.
Related
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;
}
At my wits end. Have looked at other answered questions on here, and can't seem to get the answers to work.
My fiddle: (Exp:resso store code left in just to show that that's what I'm using.)
https://jsfiddle.net/4gk5qszm/
HTML:
<div class="StoreContent-Index">
{exp:store:search orderby="date" sort="desc"}
{exp:store:product entry_id="{entry_id}"}
<ul class="StoreContent-ProductIndexList">
<li>
<a href="{url_title_path='store/product'}">
<img src="{product_image}" class="TCBProductImgCat">
<h4>{title}</h4>
<p>{regular_price}</p>
</a>
</li>
</ul>
{/exp:store:product}
{/exp:store:search}
</div>
CSS:
ul.StoreContent-ProductIndexList{
display: inline-block;
*display: inline;
zoom: 1;
float: left;
}
ul.StoreContent-ProductIndexList li {
width: 200px;
display: inline-block;
vertical-align: top;
*display: inline;
*zoom: 1;
}
.StoreContent-Index{
background: #FFF;
width: 100%;
}
.StoreContent-ProductIndexList:after {
clear: both;
}
How it looks live:
http://www.thymecher.com/0316-S
I've tried grid alignment, floating, all the inline stuff - nada. I just want the danged things to align properly side by side in the list style shown in the fiddle. (Image, title underneath, price underneath that - repeated horizontally, not vertically, with - say - 8 products per line.)
Any help is greatly appreciated. Thanks!
So, as Andrew pointed out, your example code doesn't really match what's happening on your site. Within the .StoreContent-Index div, every one of your products is wrapped in a form element and, within that is a div and a ul, the latter of which has the actual product info in it.
The combination of form elements being block-level elements and the fact that many basic HTML elements have a default clearfix (What is clearfix?) applied to them in your stylsheet was really working against you here. I have a working, minimal example on CodePen that you can review, but assuming you can make changes to all of your stylesheets, the main changes you'll want to make will be in http://www.thymecher.com/?css=0316-Styles/store-main.v.1458927906
In that stylesheet, you can remove the following code:
ul.StoreContent-ProductIndexList{
display: inline-block;
*display: inline;
zoom: 1;
float: left;
}
ul.StoreContent-ProductIndexList li {
width: 200px;
display: inline-block;
vertical-align: top;
*display: inline;
*zoom: 1;
}
and replace it with this:
ul.StoreContent-ProductIndexList, ul.StoreContent-ProductIndexList > li {
list-style:none;
}
.store_product_form {
display:inline-block;
vertical-align:top;
width: 200px;
}
This should give you the layout you're looking for.
Fiddle not rendering correctly.
I don't think your CSS naming conventions are valid
ul.StoreContent-ProductIndexList li
You should just use the StoreContent-ProductIndexList class; or
.StoreContent-ProductIndexList li
I would research FlexBox. It really helps with alignment (someone's CodePen example: http://codepen.io/HugoGiraudel/pen/LklCv).
.StoreContent-ProductIndexList {
display: flex;
justify-content: space-around;
}
You may want to give your "li" lines a class name too
.liClasses {
margin: as needed;
others: as needed;
}
As I was trying to theme my website, I've discovered some weird behavior when images are used with hyperlinks. Here is a sample code:
<div id="maindiv"> <a href="google.com">
<img src="https://lh4.ggpht.com/AlYHsHF4I5Y0Hx-64ObsbQsJVgbVIu-GK6cJwn1PHeeH0aIlEv1vtizf7whwfB8kuA=w16">
</a> </div>
You can also preview it here:
http://cssdeck.com/labs/vzine2bc
As you can see, there is a weird margin at the image, the containing div is not exactly covering it eventhough there is nothing that creates the margin. Is this a <a href> behavior or am I missing a point?
img { display: block; } or img { display: inline-block; } should fix it.
See fiddle here: http://jsfiddle.net/zitrusfrisch/7vh8Y/
EDIT:
As #Zettam mentioned in the comments img { display: inline-block; } does not solve the problem. So if img { display: block; } is not an option because you want them to display inline, try these alternatives:
Let the image float: left; but do not forget to clear the floating in some way, e.g. setting the wrapping element to overflow: hidden; (http://jsfiddle.net/zitrusfrisch/7vh8Y/1/)
font-size: 0px; on the wrapping element (http://jsfiddle.net/zitrusfrisch/7vh8Y/2/)
img { vertical-align: middle; } works as well, as long as the font-size is not bigger than the image (http://jsfiddle.net/zitrusfrisch/7vh8Y/3/)
Try this:
a img { border: 0; }
Some browsers put a border around images that are inside hyperlinks. You can avoid this by specifying the border with css: border-style: none
I'm not sure if the title uses accurate terminology; HTML is not my strong point. I'm trying to create a WordPress page and avoid using a table to accomplish what I want. I have several sections, each with an associated image. The text is flowing around the right-aligned image. I want each "section" to start on it's own line, or to NOT flow around the image from the previous section. If I were doing this with a table I would have a single column with a row for each "section" I wanted. Like I said, I don't want to use a table.
A picture is worth 1k words, so here we go. This is what I want:
and this is what I do not want (but what I'm getting just using < p > and < h2 > tags):
I'd like to know if there is a technique that will allow me to force the "Section 2" tag to start below the image for section 1? I added the green dashed line to illustrate where I would like to have the new section start.
Create a wrapper element, float your p as well as img element to the left like
Demo
.wrap {
width: 800px;
}
.wrap p {
float: left;
width: 500px;
}
.wrap img {
float: left;
width: 200px;
border: 1px solid #f00;
}
Now your .wrap element contains floating child elements so you need to clear them, so either use overflow: hidden; on the parent element which is .wrap here, else use the snippet below to self clear parent
.clear:after {
clear: both;
display: table;
content: "";
}
Why Clear Floats?
In this example am using background-color for .wrap but I don't see any color there, it's simply because the container element has no idea about the dimensions of floated elements, inorder to fix that, we clear the floats like this
You can refer this or this answer of mine which is related to the topic.
What is the issue, the issue might be because, you are having all of the content wrapped in one div, and you are just writing it all in that one div like this:
<div>
<div class="content_one">
<span style="float: left;">Some Text</span>
<img style="float: right" src="~/folder/file.png" alt="photo" />
// and the second one starts just under that!
<span style="float: left;">Some Text</span>
<img style="float: right" src="~/folder/file2.png" alt="photo" />
</div>
</div>
This will cause whole of the body to be alike, and there will be almost no barrier to control the style of the elements. If only you start it like this, it would create a distance! Also to make them fix inside a div, using clearfix is also a solution. But margins would be good if you try to get the divs seperately. Suppose:
Solution:
<div>
<div class="content_one">
<div class="each_content">
<span style="float: left;">Some Text</span>
<img style="float: right" src="~/folder/file.png" alt="photo" />
</div>
// and the second one starts just under that!
<div class="each_content">
<span style="float: left;">Some Text</span>
<img style="float: right" src="~/folder/file2.png" alt="photo" />
</div>
</div>
</div>
Now, for this you would try to set margin:
.each_content {
margin: 5px;
}
It will set a margin, to the divs for 5px. You can also try to use a border, to make sure and also it would be helpfull for you to check where the divs start and where they end.
.each_content {
margin: 5px;
border: 4px dashed green;
}
I hope it helps you out.
After trying the various suggestions presented here I'm unable to use any of them because wordpress strips out HTML tags like so creating a container isn't supported.
I'm using tables.
Ah, the evolved web...
Use a clearfix class on each new section.
From Gallagher's post:
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
I'm writing a chat and i would like to have the incoming messages on the right and the outgoing on the left. Every message has a user picture, name, messages, time.
My problem is that I can't manage to have the text NOT to flow under the picture.
http://jsfiddle.net/4MVd2/2/
My other questions would be then, how to get the picture on the right to be right from the text without changing the order in the HTML and how to get the username aligned with the top of the picture.
Thank you!
.messagetext{
display:inline-block;
}
.incomingMessage img{float:right;}
.outgoingMessage img{float:left;}
That should get you going. Now you just need to tweak that image, I wasn't sure if you wanted it at the top or bottom, and what not.
http://jsfiddle.net/4MVd2/10/
EDIT: Addressed your image positioning, I didn't see that the first time I read through. This should be what you want.
sorry I entirely missed the question float: right on the css for the image should fix it. http://jsfiddle.net/4MVd2/8/
1) You might want to convert your images to block level elements and give them a high enough bottom border to prevent text from sneaking bellow the images (either way you have a fixed message row height).
.message img {
height: 40px;
width: 40px;
display: block;
}
.incomingMessage img {
float:right;
margin: 0 0 3em 0.8em;
}
.outgoingMessage img {
float:left;
margin: 0 0.8em 3em 0;
}
2) Add a wrapper container around that block of code and float it instead of the image and the message content.
I agree with Chris Sobolewski and learned how to use inline-block from him.One way I used to use is use a class named`clearfix'.
First float your image like this:
.incomingMessage img{float:right;}
.outgoingMessage img{float:left;}
Then add a class clearfix like this :<div class="message incomingMessage clearfix">
And here is clearfix:
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
zoom:1;
}