Text won't wrap around my image

silvine

I want to set up my Wordpress blog posts so that my images appears on the right hand side of each post. I want the post text aligned left and wrapped around (not below) the image.

I can't for the life of me get this to work.

I want to achieve this on either of the below themes:
http://zenhabits.net/install/

http://wordpress.org/extend/themes/ice-cap

Please help, I've spent half of today messing around with themes and CSS trying to figure this out.

redman85

I think you need to float the div that the image is in or img. If you have no experience with HTML or CSS it can quite messy because you have to clear the floats etc.

This explains it well

http://css-tricks.com/all-about-floats/

Deliverance XXV

As said, you have to float the image but don't forget to clear it afterwards

[HTML]

<img src="#" style="float: left; padding: 10px;" />
<div><p>Content</p></div>
<div style="clear: both;"></div>

[/HTML]

silvine

Thanks, that worked nicely.

Fanny Cradock

Deliverance XXV wrote: »

As said, you have to float the image but don't forget to clear it afterwards

[HTML]

<img src="#" style="float: left; padding: 10px;" />
<div><p>Content</p></div>
<div style="clear: both;"></div>

[/HTML]

You don't have to add a clearing div. You can simply clear the last element. Bearing in mind that I'm using inline code just for demonstration purposes. Best to avoid if possible.

[HTML]
<img width="100" style="float:left;">
<p>text appears to right of image.
download firebug and see what happens
when this paragraph is and isn't floated left</p>
<p style="clear:left;">paragraph is cleared and is positioned
underneath the above image and text</p>[/HTML]

silvine

Can you tell me how to do this with a caption below the image?

Deliverance XXV

Fanny Cradock wrote: »

You don't have to add a clearing div. You can simply clear the last element. Bearing in mind that I'm using inline code just for demonstration purposes. Best to avoid if possible.

True. I use divs for all main sections of the page to help readability and then just clear the floats with a predefined css div class: <div class="clear"></div> Different roads leading to the same destination and all that jazz.

silvine wrote: »

Can you tell me how to do this with a caption below the image?

I would wrap them in divs and float the div instead of the image. Either set the width of the div to the width of the image so the caption will drop down or just a break tag.

[HTML]<div style="float: left; padding: 10px;" />
<img src="#" alt="#" />
<p>Caption<p/>
</div>

<div>
<p>Content</p>
</div>

<div style="clear: both;"></div>[/HTML]

silvine

That did the trick, thanks!

silvine

I created a gallery at the bottom of my post in Wordpress. I can't access the HTML to put the captions in Italics. Do you know how I do this? In the HTML section of WP all I see is

[gallery ids="197,196,195,193,192,202"]

I am using the standard Wordpress gallery plugin.

Fanny Cradock

Have you got access to the css stylesheet? Install firebug onto Firefox. Right click on the text in question and that will tell exactly what is going on - class names, styles and so on.

Please post a link to your blog.

silvine

I'll have a look and post back.

I don't have a link I can post yet, I want to write a few weeks of content for it before I put it online.

silvine

I installed Firebug. Here's the CSS code that comes up when I highlight an image in gallery

<div id="gallery-1" class="gallery galleryid-191 gallery-columns-3 gallery-size-thumbnail">
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="http://feachinteractive.com/wp/how-to-gtd-a-moleskine-notebook/2013-03-06-11-39-54/" title="Moleskines Compared">
<img width="150" height="150" src="http://feachinteractive.com/wp/wp-content/uploads/2013/03/2013-03-06-11.39.54-150x150.jpg" class="attachment-thumbnail" alt="Moleskines Compared"/>

Here's my stylesheet

/*
Theme Name: zh2
Theme URI: http://zenhabits.net/theme/
Author: Leo Babauta
Author URI: http://leobabauta.com
Description: A minimalist, content-focused theme.
Version: 2
License: Uncopyrighted
License URI: http://zenhabits.net/open-source-blogging-feel-free-to-steal-my-content/

This theme is uncopyrighted.
Do whatever you'd like with it.
*/

/* css reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* end css reset */

@media all { 
	#wp-admin-bar-updates { display: none }
	body {
	    font: normal 100% Open Sans,Helvetica,sans-serif;
	    background-color: #fff;
	    color: #000;
	    padding: .6em;
	    -webkit-font-smoothing: antialiased;
	}
	/* fades out blog title */
	.top {
	    -webkit-opacity: 0.30;
	    -moz-opacity: 0.30;
	    opacity: 0.30;
	    -webkit-transition: opacity 3s linear;
	    -moz-transition: opacity 3s linear;
	    -ms-transition: opacity 3s linear;
	    -o-transition: opacity 3s linear;
	    transition: opacity 3s linear;
	}
	/* fades blog title back in on hover */
	.top:hover {
	    -webkit-opacity: 1;
	    -moz-opacity: 1;
	    opacity: 1;
	    -webkit-transition: all 2s ease;
	    -moz-transition: all 2s ease;
	    -ms-transition: all 2s ease;
	    -o-transition: all 2s ease;
	    transition: all 2s ease;
	}
	.container {
	    overflow: hidden;
	    padding: 0 1em;
	    max-width: 45em;
	    margin: auto;
	}
	/* blog title */
	h1 {
	    font-size: 150%;
	    font-weight: normal;
	    color: #d3d3d3;
	    letter-spacing: .01em;
	    margin: 0 .05em 0 0;
	    text-align: center;
	}
	h1 a:link {
	    color: #d3d3d3;
	    text-decoration: none;
	    border-width: 0 0 1px 0;
	    border-style: none none solid none;
	    border-color: #c0c0c0;
	}
	h1 a:visited {
	    color: #d3d3d3;
	    text-decoration: none;
	    border-width: 0 0 1px 0;
	    border-style: none none solid none;
	    border-color: #c0c0c0;
	}
	h1 a#tagline { color: #56a49f }
	/* post title */
	h2 {
	    font-family: acta-display, Georgia, Times, serif;
	    font-size: 3em;
	    color: #333;
	    font-weight: normal;
	    margin-top: 1em;
	    text-align: center;
	}
	/* subtitles */
	h3 {
	    font-family: acta-display, Georgia, Times, serif;
	    font-size: 1.8em;
	    color: #666;
	    font-weight: normal;
	    line-height: 1em;
	    margin-top: 1.5em;
	    text-align: center;
	}
	h4 {
	    font-family: Georgia,"Times New Roman",Times,serif;
	    font-size: 1em;
	    color: #000;
	}
	/* used for "edit" link only visible to site owner/writers */
	h5 {
	    text-transform: uppercase;
	    color: #666;
	    font-size: .8em;
	    letter-spacing: .2em;
	    font-family: Open Sans,Helvetica,sans-serif;
	    font-weight: bold;
	    line-height: 2em;
	}
	/* author credits */
	h6 {
	    font-size: 1.2em;
	    font-weight: normal;
	    line-height: 1.3em;
	    color: #666;
	    font-family: acta-display, Georgia, Times, serif;
	    margin: 1em 0 .5em 0;
	    letter-spacing: .1em;
	    margin-bottom: 1em;
	    text-align: center;
	    -webkit-opacity: 0.30;
	    -moz-opacity: 0.30;
	    opacity: 0.30;
	    -webkit-transition: opacity 3s linear;
	    -moz-transition: opacity 3s linear;
	    -ms-transition: opacity 3s linear;
	    -o-transition: opacity 3s linear;
	    transition: opacity 3s linear;
	}
	/* fades author credit back in on hover */
	h6:hover {
	    -webkit-opacity: 1;
	    -moz-opacity: 1;
	    opacity: 1;
	    -webkit-transition: all 2s ease;
	    -moz-transition: all 2s ease;
	    -ms-transition: all 2s ease;
	    -o-transition: all 2s ease;
	    transition: all 2s ease;
	}
	h6 strong {
	    color: #56a49f;
	    font-weight: bold;
	}
	img {
	    border: 0;
	    padding: 3px;
	}
	img a { border: 0 }
	p {
	    line-height: 1.45em;
	    margin: .7em 0 0 0;
	    font-family: ff-meta-serif-web-pro, Georgia, Cambria, 'Times New Roman', Times, serif;
	    font-size: 1.3em;
	    color: #333;
	    -webkit-font-smoothing: antialiased;
	}
	a:link {
	    color: #333;
	    text-decoration: none;
	    border-width: 0;
	    border-style: none;
	}
	a:visited {
	    color: #333;
	    text-decoration: none;
	    border: 0;
	    border-width: 0;
	    border-style: none;
	}
	a:hover {
	    color: #999;
	    text-decoration: none;
	    border: 0;
	    border-width: 0;
	    border-style: none;
	}
	/* post styles */
	.post strong { font-weight: bold }
	.post a:link {
	    color: #303030;
	    text-decoration: none;
	    border-width: 0 0 1px 0;
	    border-style: none none solid none;
	    border-color: #c0c0c0;
	}
	.post a:visited {
	    color: #303030;
	    text-decoration: none;
	    border-width: 0 0 1px 0;
	    border-style: none none solid none;
	    border-color: #c0c0c0;
	}
	.post a:hover {
	    color: #999;
	    border-width: 0 0 1px 0;
	    border-style: none none solid none;
	    border-color: #c0c0c0;
	    text-decoration: none;
	}
	.post ul {
	    list-style-type: disc;
	    padding: .1em .0 0 1.1em;
	    margin-top: .5em;
	    font-family: ff-meta-serif-web-pro, Georgia, Cambria, 'Times New Roman', Times, serif;
	    font-size: 1.3em;
	    -webkit-font-smoothing: antialiased;
	}
	.post ol {
	    list-style-type: decimal;
	    padding: .1em 0 0 1.2em;
	    margin-top: .5em;
	    font-family: ff-meta-serif-web-pro, Georgia, Cambria, 'Times New Roman', Times, serif;
	    font-size: 1.3em;
	    -webkit-font-smoothing: antialiased;
	}
	.post li {
	    line-height: 1.5em;
	    padding: .2em 0 0 0;
	    color: #333;
	}
	.post li strong { font-weight: bold }
	.post blockquote {
	    border-left: 2px solid #a5abab;
	    margin: 1.8em .8em;
	    padding: 0 1em 0 1em;
	    color: #666;
	    font-family: Open Sans,Helvetica,sans-serif;
	}
	/* line at bottom of post */
	.home_bottom {
	    border-bottom: 1px solid #efefef;
	    font-family: Open Sans,Helvetica,sans-serif;
	    font-size: 2em;
	    line-height: 2.5em;
	    color: #dedede;
	}
	/* previous & next posts at bottom */
	.navigation { margin-bottom: 3em }
	.navigation p {
	    text-transform: uppercase;
	    color: #666;
	    font-size: .7em;
	    letter-spacing: .2em;
	    font-family: Open Sans,Helvetica,sans-serif;
	    font-weight: bold;
	    margin-top: 0;
	    margin-bottom: 1em;
	}
	/* subscription */
	.subscribe p {
	    text-transform: uppercase;
	    color: #666;
	    font-size: 1em;
	    letter-spacing: .2em;
	    font-family: Open Sans,Helvetica,sans-serif;
	    font-weight: bold;
	    line-height: 2em;
	    margin-top: 2em;
	    margin-bottom: 2em;
	}
	/* "see all posts" at bottom of home page */
	.all_posts {
	    font-size: 2.4em;
	    font-weight: bold;
	    height: 1.25em;
	    line-height: 1.25em;
	    margin-bottom: 1em;
	}
	.all_posts a { color: #d3d3d3 }
	.all_posts a:visited { color: #d3d3d3 }
	.all_posts a:hover { color: #666 }
	/* footer text */
	.footer p {
	    font-size: .8em;
	    letter-spacing: .2em;
	    text-transform: lowercase;
	    color: #333;
	    padding: 0;
	    margin: 0;
	    margin-left: 0;
	    padding-left: 0;
	    font-family: Open Sans,Helvetica,sans-serif;
	}
	.footer a { color: #666 }
	/* for archives page */
	#arc {
	    overflow: hidden;
	    margin: 0 1em 2em .4em;
	}

ol.commentlist{
	margin: 10px 5px;
	padding: 10px;
}
.commentlist .comment-body{
	padding: 10px;
	background: #EFEFEF;
	border: solid thin #DEDEDE;
	margin: 10px 0;
	position: relative;
}
.comment-body a.comment-reply-link{
	position: absolute;
	top: 10px;
	right: 10px;
	color: #AEAEAE;
}
ol.commentlist li{
	list-style: none;
}
ol.commentlist img.avatar{
	padding: 5px;
	background: #DEDEDE;
	border: solid thin #CECECE;
	float: left;
	display: block;
	margin: 15px;
	width: 32px;
	height: 32px;
}
ol.commentlist .comment-author{
	line-height: 25px;
}
.comment-body cite.fn{
	font-size: 14px;
	font-style: normal;
}
.commentmetadata a{
	margin: 0;
	font-size: 11px;
	color: #999;
}
.comment-body p{
	margin: 5px;
}
 
.comment-body .comment-author.vcard{
	margin: 0;
}
}

/* for iPad-sized devices */
@media only screen and (max-device-width: 800px) { 
	/* makes blog title not fade on touch screen */
	.top {
	    margin: auto;
	    -webkit-opacity: 1;
	    -moz-opacity: 1;
	    opacity: 1;
	}
	h6 {
	    -webkit-opacity: 1;
	    -moz-opacity: 1;
	    opacity: 1;
	}
	.navigation p { font-size: 1em }
	.subscribe ul {
	    margin-top: 4em;
	    font-size: 1.8em;
	}
	.footer p { font-size: 1.2em }
	h2 { font-size: 2.5em }
	h3 { font-size: 2em }
	h6 { font-size: 1.5em }
	p {
	    font-size: 1.5em;
	    line-height: 1.5em;
	}
	.post ul {
	    font-size: 1.5em;
	    line-height: 1em;
	    padding: .1;
	}
	.post ol {
	    font-size: 1.5em;
	    line-height: 1em;
	    padding: .1;
	}
	#arc {
	    font-size: 1.2em;
	}
}

/* for narrower browsers */
@media screen and (max-width: 800px) { 
	/* makes blog title not fade on touch screen */
	.top {
	    margin: auto;
	    -webkit-opacity: 1;
	    -moz-opacity: 1;
	    opacity: 1;
	}
	h6 {
	    -webkit-opacity: 1;
	    -moz-opacity: 1;
	    opacity: 1;
	}
	.navigation p { font-size: 1em }
	subscribe ul {
	    margin-top: 4em;
	    font-size: 1.8em;
	}
	.footer p { font-size: 1.2em }
	h2 { font-size: 2.5em }
	h3 { font-size: 2em }
	h6 { font-size: 1.5em }
	p {
	    font-size: 1.5em;
	    line-height: 1.5em;
	}
	.post ul {
	    font-size: 1.5em;
	    line-height: 1em;
	    padding: .1;
	}
	.post ol {
	    font-size: 1.5em;
	    line-height: 1em;
	    padding: .1;
	}
}

/* for iPhone-sized devices */
@media only screen and (max-device-width: 480px) { 
	.container { width: 100% }
	h1 { font-size: 2em }
	h2 { font-size: 2.5em }
	h3 { font-size: 1.8em }
	h6 { font-size: 1.3em }
	p {
	    font-size: 1.2em;
	    line-height: 1.4em;
	}
	.post ul {
	    list-style-type: disc;
	    list-style-position: inside;
	    font-size: 1.2em;
	    line-height: 1em;
	    padding: .5em;
	    margin: 0;
	}
	.post ol {
	    list-style-position: inside;
	    font-size: 1.2em;
	    line-height: 1em;
	    padding: .5em;
	    margin: 0;
	}
	.post li {
	    margin: 0;
	}
	/* makes blog title not fade on touch screen */
	.top {
	    -webkit-opacity: 1;
	    -moz-opacity: 1;
	    opacity: 1;
	}
	.navigation p { font-size: 1.5em }
	h6 {
	    -webkit-opacity: 1;
	    -moz-opacity: 1;
	    opacity: 1;
	}
	.subscribe p {
	    font-size: 1em;
	    margin-top: 1em;
	}
	.footer p { font-size: 1em }
}


@media print { 
	body {
	    font-family: Helvetica,sans-serif;
	    font-size: 14px;
	    background: white;
	    color: black;
	    margin: 10;
	    width: auto;
	}
	.container { display: block }
	.navigation { display: none }
	.subscribe { display: none }
	.footer { display: none }
}

I've also attached a pic.

I want to italicise the caption text of the images in my gallery.

redman85

Are you using javascript/jQuery for the gallery?

The reason I ask is that to me it looks like javascript/ jQuery is displaying the title attribute from the a href.

<a href=".........." [COLOR="Lime"][COLOR="Red"]title="Moleskines Compared"[/COLOR][/COLOR]>

The title attribute cant be styled using CSS but you might be able to style it with javascript.

Without a link to the site its hard to see what actually is going on.

silvine

Okay, I'll leave it as is for the moment till I'm ready to put the site online. I've avoided using CSS, HTML and Javascript, apart from the change discussed earlier in this thread.

I don't really know Javascript but I do know some CSS and HTML. That said, I'm relying on the Wordpress text editor and the Wordpress widgets to make changes. I thought Wordpress might allow me to customise captions without having to code.

Fanny Cradock

Oh man, thanks to a browser crash there goes my post. Anyway, here is the truncated version.

Firebug will tell you where you css file is kept. What you want to do is inspect the actual element (you have shown us the surrounding elements but not the the text element) and find the location of the css file in question. See image.

Click on <div id="gallery-1"> to see the css change> again try it for a different element and the css will again change.



After you have opened the CSS file you'll then go to the line number and type the correct code. In my image it's line 53. As I can't be sure that you are displaying the correct element the following is a guess about the class names. But what you will do is type the following

.gallery-icon a{
        font-style: italic;
}

more [URL="http://www.w3schools.com/cssref/pr_font_font-style.asp"]here[/URL]

What the above says is "look for an element <a> inside some containing element with a class called gallery-icon and change the text of <a> to italic."

If you wish you can drop me a PM down the line and I can take a look at the site for you when it isn't password protected