Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

What's the approved version of <br style="clear:all"; /> ?


  #1  
Old May 5, 2009, 01:50 PM
jrssystemsnet
 
8 posts · May 2009
I cannot for the life of me figure out what the "approved" way is of clearing one element from another. I have images that I need to sit on top of one another and to the right of the page, but I cannot get one to clear the other - I just end up with the images stacked left-to-right!

I've tried inserting all sorts of divs, paragraphs, and breaks using clear attributes both naturally and by way of style elements; either way the WP editor cheerfully removes them from my fscking post as though they were never there. (I did not have this problem in WP 2.3, which I am beginning to strongly regret updating to 2.7.)

Can anybody please tell me what I'm supposed to be doing in order to control element float?
  #2  
Old May 5, 2009, 01:51 PM
jrssystemsnet
 
8 posts · May 2009
example of the problem: http://new.coastalscience.com/?p=71&preview=true
  #3  
Old May 5, 2009, 07:10 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
There is no clear:all, it should be clear:both

Try clear:right and if that does not help additionally add display:block
  #4  
Old May 5, 2009, 10:42 PM
jrssystemsnet
 
8 posts · May 2009
Yeah, fat-finger error, sorry.

clear:both works temporarily - sometimes, if you put exactly the right amount of whitespace around it - but any time you ever click back and forth between the Visual and HTML tabs on the post entry/edit screen, WP removes the entire tag. It does that for <br>, <p>, AND <div> tags.

I did not have this problem with the WP 2.3 that Ubuntu defaulted to; but the bug in Atahualpa with the calendar and archive widgets cropped up, and I decided that upgrading WP would be a better option than hacking Atahualpa. To be honest, I'm regretting it...

Back to the original point, do you know of a clean way to break on images that WP won't immediately get rid of when switching back and forth between the Visual and HTML tabs?

(Incidentally, please don't let my grouchy tone put you off - Atahualpa is a really great theme and I'm enjoying it a lot. I'm just really frustrated with WP's "smarter than you are" editor trying to "help" so much!)
  #5  
Old May 5, 2009, 10:47 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
The images should have got a class by WP, such as

<img class="wp-image-103...."

You could try with a CSS Insert

img.wp-image-103 {
clear:right;
...
...
}
  #6  
Old May 6, 2009, 09:17 AM
jrssystemsnet
 
8 posts · May 2009
Flynn, sorry, but I'm a CSS noob - I haven't really been up-to-speed with HTML since the before-CSS days.

Can you give me a little more detailed info about how and where exactly to insert the CSS?

Thanks again.
  #7  
Old May 6, 2009, 09:30 AM
jrssystemsnet
 
8 posts · May 2009
OK, it feels like I'm having to reinvent a wheel... but I found a workable solution.

I added the following to style.css:

Code:
.clearright {
        clear: right;
}

.clearleft {
        clear: left;
}

.clearboth {
        clear: both;
}
And then what I can do is go to the HTML view, then add "clearright" to the "align" attribute of the WP [caption] tag for the image after I've inserted it, like this:

Code:
[caption id="attachment_74" align="alignright clearright" width="167" caption="Hunting Island - after renourishment (June 2006)"]
And THAT works, and the never-to-be-sufficiently-damned "smart" editor doesn't go back in and "helpfully" edit it out. Thank you for the help!
  #8  
Old May 6, 2009, 09:33 AM
jrssystemsnet
 
8 posts · May 2009
Well, crap, I spoke too soon... it WORKS, but the editor still removes it from my code if I go to the Visual view.

I am really, really HATING the WP 2.7 editor...
  #9  
Old May 6, 2009, 09:38 AM
jrssystemsnet
 
8 posts · May 2009
OK, now I feel dumb: I didn't realize that the fake-tags <code> and </code> would make the editor leave added HTML and/or CSS alone without "helping". My problems are solved now.

I did learn some helpful tricks along the way though, so thank you for your help! Sorry to noob up your forum. =)
  #10  
Old May 6, 2009, 09:47 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
CSS Inserts is a theme option at Atahualpa Thee Options -> HTML/CSS Inserts -> CSS Inserts

Put the CSS into that textarea instead of editing style.css

And you should not need to add something to the image's thml by going into HTML mode in the WP editor. Each image should already have an unique class, through which you should be able to address that image, by adding some properties for that specific class of the image

Example:

In the source code of the browser-rendered page (by clicking "View Source" or similar in your browser) all images should appear as something like:

<img class="size-full wp-image-117 alignnone" title="sampleimg2" src="http://webnx.bytesforall.com/wp-content/uploads/2008/07/sampleimg2.jpg" alt="" width="500" height="333" />

size-full and alignnone are generic classes that all images of this type get. wp-image-117 however is a unique class. So you'd use that to apply a CSS style for that individual image.

Add this as CSS Insert (through the theme options as described above)
HTML Code:
img.wp-image-117 {
clear: right !important;
... other styles for this image if you wish ...
}
I also added !important just to be sure
  #11  
Old May 6, 2009, 10:03 AM
jrssystemsnet
 
8 posts · May 2009
Thanks Flynn; I understood what you were saying about editing the individual image class attributes, that just strikes me as a really poor solution to my problem - it's better for me to have generic solutions I can apply in the post editor than to have to keep running back and forth to the theme editor for every individual image.

Again, the real solution I needed was just "use the fake-tags <code> and </code> to wrap your tags"; given that I can just use divs or brs to clear the elements as normal and the editor leaves them alone.

Bookmarks

Tags
clear, elements, float, post body

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to post on 2 seperate "Pages" or "Cats" TPR Atahualpa 3 Wordpress theme 18 Aug 4, 2010 08:24 PM
"Tooltip" style hover text for PageMenu? lhanft Page & Category Menu Bars 5 Jul 16, 2009 04:11 PM
"Recent-comment" widget (list style) cosmiclove Sidebars & Widgets 5 Jul 13, 2009 06:05 PM
where can I rename "categories" and "Pages" into other titling? curious Atahualpa 3 Wordpress theme 5 Apr 28, 2009 03:15 PM
How to style "post icon" and "post comments" text Whatsthatcat? RSS, Feeds & Subscribing 3 Apr 1, 2009 09:41 AM


All times are GMT -6. The time now is 07:13 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.