Align is not working (even after reading all 30 something messages on the topic)

(@forsubscriptionsonly)

I am running the theme Modularity Lite and am having some issues when it comes to aligning images.

You can see what is going on at http://www.GoingtoBrazil.com (check the only post I have about MoMA).

I included the following code to my CSS without success:

/* Image Alignment */
img.centered, .aligncenter, div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}

And then, following the advice given on another tread, I also included the following code:

.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}

Can someone please help me? I am at a lost here.
Thank you,

Andre

Viewing 10 replies - 1 through 10 (of 10 total)

tshirtfiend
(@tshirtfiend)

15 years ago

I’m not exactly sure what you’re trying to do. The only img alignment CSS you need in your themes is here:

http://codex.wordpress.org/CSS#WordPress_Generated_Classes

Unless you want to do something special, you set the alignment when you upload the image (or edit it). Then—if your stylesheet has the above info—you should be all set. Just add whatever padding/margins that you need. You can also include the rounded corner stuff you have there, though it’s not really supported cross browser.

I think it may have something to do with not setting the alignment since all of the images on the page you linked to had the class “alignnone” which wouldn’t change the alignment.

If you are trying to do something different, then I need some more details.

Thread Starter forsubscriptionsonly
(@forsubscriptionsonly)

15 years ago

Hi tshirtfiend.

Actually, I don’t want to do anything else special.
This is what I am trying to do:
– I add the image (the first one), then I hit enter to go to the next line after the image. I type “Winged Creamer”, hit enter again and add the second image.

What is happening is that the text “Winged Creamer” is aligned to the right of the image, even though I have the image set as “none”

I included the code you gave me the link for and it still does not work.

Could I paste the CSS for my theme here? This may be helpful.

Thanks for your help.

Andre

tshirtfiend
(@tshirtfiend)

15 years ago

If I understand correctly, it’s because you’re floating the image. Around line 34 of your style sheet, delete the whole line that says:
float:left
Alternately, if you wanted to keep the float, you could do:
p { clear:both }
If that doesn’t do it, let me know.

Thread Starter forsubscriptionsonly
(@forsubscriptionsonly)

15 years ago

Hummm…not sure which one. There are quite a few (I apologize, but I am not very CSS-savvy).

If you have the time, please let me know which one should be change…but don’t worry if you don’t.

/************************* GLOBAL STYLES ***************************/
body {color:#eee;background: #111 url(images/bg.jpg) no-repeat center fixed;}
.container-inner {width:950px; margin:0 auto;padding:1.75em 0 1em}
.container {background:url(images/repeater.png) repeat;}
h1,h2,h3,h4,h5,h6 {color:#eee;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {color:#eee;}
h3.sub,h2.sub {margin: 0 0 10px 0;padding: 0 0 5px 0;font-size: 1.1em;font-weight: bold;line-height: 1em;text-transform: uppercase;letter-spacing: 2px;color: #515151;border-bottom: 1px solid #000;}
a {color:#428ce7;text-decoration:none;}
a:hover, a:focus {color:#fff;}
p {color:#eee;}
h6.top {color:#ccc;}
#top {width:950px; margin:0 auto 1em;padding: 0 0 .5em; color:#666}
#top a {color:#666}
.login {float:left;}

/* Masthead */
#masthead { float: left;height:36px}
#masthead h4, #masthead span { margin: 0; padding:10px 0 0; line-height:2em }
#masthead h4 { font-weight: bold; text-transform: uppercase; float: left}
#masthead h4 a { color: #fff; text-decoration: none; }
#masthead span.description { color: #ccc; text-transform: lowercase; font-size: .7em; padding: .35em 3em;}
.double-border {background: url(images/double-border.png) repeat-x bottom; height:8px; width:100%;clear:both;float:none;border:none;;margin:1em 0}

/* Navigation at rest */
#nav { float: right; margin: 18px 0 0 0;background:#000;padding:6px 4px 4px 10px;}
#nav ul, #nav ul li { margin: 0; padding: 0; }
#nav ul li { font-size: 10px; font-weight: bold; text-transform: lowercase; list-style: none; float: left; margin-right: 15px; position: relative;color:#eee }
#nav ul li a { color: #eee; text-decoration: none; }
#nav ul li a:hover {color:#fff}

/* Navigation interaction */
#nav ul li ul { display: none; }
#nav ul li.drop:hover ul { display: block; }

/* Sub-navigation */
#nav ul li ul { padding-top: 7px; margin-left: -10px; position: absolute;z-index:200}
#nav ul li ul li { margin-right: 0; float: none; font-weight: normal; font-size: 11px;z-index:210}
#nav ul li ul li a { display: block; background: #1a1a1a; padding: 7px 10px; width: 130px; color: #999; background-repeat: no-repeat; background-position: 5px 50%; }
#nav ul li ul li a:hover { text-decoration: underline; background:#000;}
#nav ul li ul li a.icon { padding-left: 30px; }
#nav ul li ul li a.entries { background-image: url(images/rss.png);background-repeat: no-repeat;background-position: 5px 50%; }
#nav ul li ul li a.comments { background-image: url(images/chat.png);background-repeat: no-repeat;background-position: 5px 50%;}
#nav ul li ul li a.phone { background-image: url(images/phone.png);background-repeat: no-repeat;background-position: 5px 50%; }
#nav ul li ul li a.email { background-image: url(images/email.png);background-repeat: no-repeat;background-position: 5px 50%;}

/* Navigation enhanced styles */
#nav ul li ul.push { margin-top: 12px; z-index:211}
#nav ul li.enhanced { margin-right: 0; padding-right: 15px; z-index:211}
#nav ul li.enhanced span { padding-right: 7px; float: left; z-index:211}
#nav ul li.enhanced a.arrow { display: block; position: relative; top: -2px; width: 18px; height: 15px; overflow: hidden; float: left; }
#nav ul li.enhanced a.arrow:hover { cursor: pointer; }
#nav ul li.enhanced a.arrow img { display: block; position: relative; border: 0; }
#nav ul li.enhanced a.rest img { top: 0; }
#nav ul li.enhanced a.hover img { top: -15px; }
#nav ul li.enhanced a.open img { top: -30px; }

/* Posts */
.content {}
.content h2 {font-family: Georgia, serif;}
.post {display:block;clear:both;}
.post h4, .post h6 {font-family: Georgia, serif;}
.postmetadata {background:#000;padding:1em;color:#999; font-size:10px;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.postmetadata a {}
.postmetadata a:hover {color:#fff;}
.underlined {border-bottom:1px solid #eee;}
h6.underlined {margin:0 0 1em;}
.welcomebox {padding:1.5em;margin-bottom:1.5em;background:#eee;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.welcomebox p, .welcomebox h2 {color:#000}

.nav-image-left, .nav-image-up, .nav-image-right {text-align:center;float:left;width:25px;margin:0 10px 0 2px;}
.nav-image-left a, .nav-image-up a, .nav-image-right a {background:#eee;padding:2px 48% 2px 48%;text-decoration:none;color:#000;}
.nav-image-left a:hover, .nav-image-up a:hover, .nav-image-right a:hover {background:#000;color:#fff;}
.nav {background:#eee;margin:0 0 1em 0;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.nav:hover {background:#ccc;}
.prev a, .next a {color:#222;text-decoration:none;padding:.2em 1em;}

.nav-interior {margin:0;padding:0;clear:both;display:inline;}
.nav-interior .next {color:#000;text-decoration:none;float:right;}
.nav-interior .prev {color:#000;text-decoration:none;float:left;}

/* Sidebar */
#sidebar {margin:0;}
#sidebar h3 {margin:0;padding:0 0 .6em 0}
#sidebar .item {margin:0 0 4em 0}
#sidebar ul{list-style:none;margin:0 0 1.6em 0;font-size:1em;}
#sidebar ul li a,ul.txt li{color:#eee;height:1%;line-height:1.2em;border-bottom:1px solid #000;display:block;padding:6px 0 6px 8px;}
#sidebar ul li a:hover,ul.txt li:hover{color:#fff;background-position:1px 0.8em;background: #000}
#sidebar ul li a span,ul.txt li,h4 a span{color:#696455;}
#sidebar ul li.active a{cursor:default;color:white;}
#sidebar ul ul{margin:0;list-style:none;}

/* Footer */
#footer-wrap {background:#000;}
#footer {width:950px;padding:1.5em 0;margin:0 auto;color:#999;text-align:left}
#footer p {color:#999}
#footer h3 {margin:0;padding:0 0 .6em 0; border-bottom:none; color:#999}
#footer .item {margin:0 0 4em 0}
#footer ul{list-style:none;margin:0 0 1.6em 0;font-size:1em;}
#footer ul li a,ul.txt li{height:1%;line-height:1.2em;display:block;padding:6px 0 6px 8px;}
#footer ul li a:hover,ul.txt li:hover{color:#fff;background-position:1px 0.8em;background: #111}
#footer ul li a span,ul.txt li,h4 a span{color:#696455;}
#footer ul li.active a{cursor:default;color:white;}
#footer ul ul{margin:0;list-style:none;}

#footer ul#recentcomments {list-style:none;margin:0 0 1.6em 0;font-size:1em;}
#footer ul#recentcomments li.recentcomments {display:block;padding:4px 0 4px 8px;}
#footer ul#recentcomments li.recentcomments a {border:0; background-image:none}
#footer ul#recentcomments li.recentcomments a:hover{color:#fff;background-position:1px 0.8em;background: #111}
#footer ul#recentcomments li.recentcomments a span{color:#696455;}

/* Floats & Images
.right { float: right; }
.left { float: left; }
.middle {margin: 0 auto;float:left;}
.clear { clear: both; }
img.centered{display: block;margin-left: auto;margin-right: auto;max-width:950px}
img.alignright{padding: 4px;margin: 3px 0 2px 10px;display: inline;max-width:950px}
img.alignleft{padding: 4px;margin: 3px 10px 2px 0;display: inline;max-width:950px}
img.alignnone{padding:0 4px 4px 0; margin: 3px 10px 2px 0;display: block;max-width:950px}
.alignleft{float: left;}
.alignright{float: right;}
.aligncenter,div.aligncenter {display: block;margin-left: auto;margin-right: auto;}
.wp-caption {padding-top:0;margin:0}
.wp-caption img {margin: 0;padding: 0;border: 0 none;}
.wp-caption p.wp-caption-text {font-size: 11px;line-height: 17px;;text-align:center;padding: .5em 0;margin: 0;background:#000;max-width:950px}
.home .wp-caption p.wp-caption-text {font-size: 11px;line-height: 17px;;text-align:center;padding: .5em 0;margin: 0;background:#000;max-width:590px}
.thumbnail, .attachment-thumbnail {max-width:150px;margin:0 1.5em 1.5em 0;float:left}
.attachment-medium {max-width:950px;overflow:hidden;display: inline}
.attachment-large {max-width:950px;overflow:hidden;display: inline}
.content .size-medium, content size-large {margin: 0 1.5em 1.5em 0}
.home .size-medium, .home .size-large {max-width:590px; height:auto; overflow:hidden;margin:0 .5em .5em 0;}
dl.gallery-item .gallery-caption {clear:both;float:none;width:150px;}
dl.gallery-item {width:170px;padding:10px}
.gallery-icon .attachment-thumbnail{padding:0;margin:0}
.gallery {width:auto;}
*/

/* Etc */
#filters {clear: both;height: 2em;margin-bottom: 1em;}
#filters li {float: left;margin-right: 2em;}
.prev {}
.next {}
/* remember to define focus styles! */
:focus {outline: 0;}
.advertisement .box {background:#e5ecf9;}

/* Search */
#search {margin:0; padding:0;}
#search #s {background: #ddd url(‘images/search.png’) 0px center no-repeat;color: #222;font-size: 1em;margin:0;padding: 4px 0 4px 17px;width: 150px;border:1px solid #333;}
#search input {border:0}
#search #s:hover {color: #0066cc;background: #fff url(‘images/search_blue.png’) 0px center no-repeat;}
.search-excerpt {margin: 0;}

/* Comments */
h3#comments{margin: 10px 0 0;padding: 20px 10px;background: #000;}
h3#comments span.comments-subscribe {float:right;font-size:.7em;margin-left: 3px;padding: 0 0 0 19px;background: url(“images/rss.png”) no-repeat 0 50%;color:#cccccc;}
h3#respond{margin: 10px 0 0;padding: 20px 10px;background: #000;}
ol.commentlist{list-style-type: none;margin: 0;padding: 0;border-top: 5px solid #eee;}
ol.commentlist li strong{padding-left:1em;}
ol.commentlist li .comment-entry{margin: -135px 0 0;border-bottom: 5px solid #eee;padding: 5px 150px 0;line-height: 2em;}
ol.commentlist li .avatar{border:1px solid #000;padding:1em;margin:2em 1em 1em 0;}
#commentform{margin: 0 0 7px;padding: 30px 150px 6px;border-top: 10px solid #333;background: #000;}

/* ************************ SLIDESHOW ********************************/
ul#portfolio {padding:0;list-style:none;margin:0 0 1em;overflow:hidden;max-height:590px;}
ul#portfolio li {list-style:none;padding:0;}
ul#portfolio li h4 {margin: 0 0 .5em 0;text-transform:uppercase;padding:0 16px;}
ul#portfolio li img {max-width:950px;text-align:center;margin:0;}

/* Alignment */
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignleft {
}

.alignright {
}

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

tshirtfiend
(@tshirtfiend)

15 years ago

I think part of the confusion is that your theme uses multiple stylesheets. The main one that it uses (when rendering pages for the screen in a non-IE browser) is http://www.goingtobrazil.com/wp-content/themes/modularity-lite/library/styles/screen.css but there is also the stylesheet http://www.goingtobrazil.com/wp-content/themes/modularity-lite/style.css which has more generic rules. What you need to do is, in the screen.css file, remove “float:left” from this line:

p img {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}

Give that a shot.

Thread Starter forsubscriptionsonly
(@forsubscriptionsonly)

15 years ago

thisrtfiend,

It worked like a charm!

Thank you very much for all the help. That’s invaluable!

tshirtfiend
(@tshirtfiend)

15 years ago

No problem.

You may want to look into the Firefox plug-in called Firebug for the future. It let’s you select elements (paragraphs, images, divs) and edit the CSS live, so you can see what’s going on. I’ve found it invaluable.

jcdichant
(@spikeweb)

14 years, 6 months ago

@tshirtfriend, THX a lot as it solved my text alignment too 😉

dczepiel
(@dczepiel)

14 years, 1 month ago

Can you help me solve the same problem? I do not have any screen.css file, just the regular style.css with the following code:

[Mod Note: Chunk of code removed. If you want to post large blocks of code, please use a pastebin.]

dczepiel
(@dczepiel)

14 years, 1 month ago

the solution is simple and already here. Just find modularity-lite/library/styles/screen.css file and remove

float:left;

from the following line:
p img {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Align is not working (even after reading all 30 something messages on the topic)’ is closed to new replies.

Align is not working (even after reading all 30 something messages on the topic)

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics