Hey Everyone,

I’m trying to place my jDrawer menu on my page, but I want all the content to wrap around it.  I have yet to be unsuccessful in getting this accomplished.  Can anyone give me a pointer on how I may accomplish this?

Keep in mind, this site is still undergoing construction, and is not yet complete.

Thanks to all for your help!

Aside from the really cluttered code (some WYSIWYG program?) and using tables for layout…

You are using breaks <br /> for your paragraphs, which is a bad idea in general. Additionally you have set the CSS(main.css, line 45):

Which enforces the break element to occur below any floated element. Hence after the BR you are below the jDrawer.
So either remove the BR elements or remove the CSS.

In general I would say that the code on the page would benefit from adhering to standards a lot more. E.g use P for paragraphs instead of BR and use H elements for Headings instead of P B (Paragraph and bold).

I hope this helps you along

Yeah I agree with asozzi. The problem is, just by glancing at it, floating that table to the right should work. but it’s kind of hard to dig through the code.

If you’re not sure about what’s right and what’s wrong, use the W3.org validator site.

Thanks to both for your replies.

I will try getting rid of the BR - that was from the JQuery menu CSS, which I haven’t touched because I’m not quite sure what it all affects.  That menu has two style sheets, and I still need to check those out to see what does what.

Regarding the tables - this was all inherited.  We (the university) is moving to an all CSS design, but things are slow coming along.

Thanks again for the help.

BTW: I just realized that everything looks quite a bit different in the IE browser.  I usually work from a Mac…  I didn’t realize that the paragraphs were breaking with BR, and that everything was centered… GAH!  However, as I mentioned in my first post, this site is not close to finished.

Christian Sweatt - 28 May 2008 11:10 AM

I will try getting rid of the BR - that was from the JQuery menu CSS, which I haven’t touched because I’m not quite sure what it all affects.

There is no way CSS can inject <br /> tags into your markup. NO way.
My suggestion here would be to start with a well-coded basic layout (check Layoutgala if you need a starting point) and, when that is in place, add the jQuery bells and whistles

It’s a lot easier debugging a cleanly-coded template than retrofitting advanced Javascript menus into wonky HTML.

As e-man has said you are definitely best off laying down your template(s) first and literally I would say just get them to be boxes at the moment with filler text and make sure that they work really well in all browsers. A good tool to do this with would be Browser Shots as it is free and can test upon all the major browsers on most nearly all the major platforms. It does sometimes take a while to get the shots and they (the computer farms) don’t always generate an image due to the massive demand but it is usually very very good.

Then once you have your static templates working fine it’s nice and easy to move those across to ExpressionEngine afterwards.

Regarding injecting tags into mark-up using CSS I think that it can be done if you are using the content and after & before part of CSS but this isn’t something which is seen by all browsers and so support is a little shaky at times. Best to do that as e-man has said in other ways.

Best wishes,

Mark

Last time I used it (and it was very brief), content:after{’<br />’;} rendered as is, not as a tag. So unless something changed, it’s not even that useful.

Ah right. In that case I will bow down

Thanks again for the suggestions!  I had no idea about Layoutgala.  I’ve chosen n.38, and will modify it to fit my template.

This will be MUCH easier than trying to fix the current template.

Thanks again!

So, I’m getting closer to finishing the template, and I must say, it’s much easier to look at in reg. to the code.

Of course, it’s not yet finished, but this is a good start, I think… 

Thanks again for the great sources!

You still have a dangling </td> in there

But I agree, it’s looking a lot cleaner!

Oops!  Sure am.  It’s gone!  Thanks

Ok…  I did run into a problem.

When I add more text to the main content, the navigation menu doesn’t stretch along with the content, creating a gap between the footer and the navigation bar…

Can that be altered so that it always “attaches” to the footer, thus eliminating the gap?

Thanks

You have just discovered the fact that, unlike a table, a div will only stretch as far as its content
The classic solution for this is called faux columns . You live and you learn, it’s all good

Heck yeah!!!!  Thanks again!

I had to play with the code a bit to figure out what I was really supposed to be doing - everything ended up working out beautifully though.  I haven’t yet put it on the server because I don’t have remote access to the university’s server, but it works and looks like it should on my machine - MBP.  Tomorrow I will see whether or not it really works once it’s “live”.  *crosses fingers* 

Thanks again!

So, it seems that i just cannot win… 

Check THIS out.

Now, the footer (in Safari and Firefox) is directly below the content, while the background keeps repeating below it…

In XP, the footer is at the bottom of the screen, but there’s a little gap where the background is still visible.

(See Screen Shot)

AHH!!  This is frustrating!

Just move css_background.gif in your stylesheet from body to #container, that should solve it.

You are my hero! 

Like you said earlier, you live and you learn!

Thanks again - I think this case is closed!

I would have never thought a full CSS design could be this simple - aside from the little learning experiences.