Indexhibit Support

dear all,

I've made a drop down menu for my site. Not all the menu's drop down as they are supposed to. Especially the first one. (i don't dare to ask about this subject, as i've broken my laptop trying to figure it out..and i know it's something simple...)

My question reads as followed; how can i link the background of my menu to the drop down function? Now i have a background from top to bottom, but I want to it move along with the drop down menu.

here's my site.

Hope i'm making some sense...lol

mark

You can't make Indexhibit a link?

yes, i can...and will definitely do so! I didn't notice the missing link as i have been wrestling with my menu problems. So i'll fix it as soon as possible. This site is great, so most of the credits will go to you guys. I have already convinced my friends to join as well.

Anyway, any idea on my menu problems?

And take into consideration that my site is under construction. My mom hasn't even seen it =)

Mark

All I did was ask...and...it's covered in the forum rules...

Your background image should be applied via css to the container holding your menu parts...probably #menu ul { } would to the trick.

hey vaska, hope you didn't see my reply as an attack... was just explaining the situation. And when i mentioned 'great site' i was talking about indexhibit.org. You guys are doing a great job!

Okay, back to the learning part.. i'm not sure what you mean? I applied a menu background color in #menu. Should I then be working in 'background' properties? I've tried setting the block properties to 'auto', but that didn't make the background move along with the collapsable menu's.

I've looked on the net for more info but couldn't get far. Hope you can point me in the right direction.

Thanks.

Mark

In CSS you have the following properties to apply/control the background properties of a "block/zone/element"

background-image
background-position
background-color
background-repeat

(you can also use only background and insert a combination of any of the properties - this is called a shorthand property)

eg:

1. #menu{ background-image: url(www.example.com/images/crabs.gif); }

1. #menu{ background: url(www.example.com/images/crabs.gif) top right no-repeat; }

and so on. 

reference

No attack...I just mention it when I see. I know you are good...reminder notes.

Antoine is on it. ;)

Hey Antoine,

Thanks for the reply. And don't hate me when i say that i'm still a little confused. I've been playing around with the background properties. When I set the position of my block properties to relative it seems to do the trick. Only thing is is that it seems to effect 2 things in a negative way. First the content of the right frame starts where the background of my menu ends. And second, the collapsable menu option seems to fail on me aswell.

This is the code I have so far:

#menu { background-color: white; width: 215px; overflow: auto; top: 0; bottom: 0; left: 0; background-position: 0 center; position: relative; margin-top: 0.7cm; margin-left: 0.7cm; }

Any ideas? You can view my site here

Thanks!

Mark

Well, I can't really dissect your page/CSS right now, but, from what I see here, I can see two things that doesn't look safe to me:

1. the usage of background-position with a mix of values and "keywords" eg: center. Use either two values or two keywords... some browser support a mix, but from my experience this is a recipe for trouble.

2. the usage of non typed values (in this case 0... ) you should add either px or em after your value, even if it's zero... and the use of cm seems quite weird to me when using screen media... use this only if you intend it for a print CSS.

Even if you correct those it might not solve your problems...

One more point of advice is the use of relative positioning... if you use this, the elements are still following each other in the page rendering flow... so relatively positioned elements are relative to each other, not to the whole page... maybe this is a bit hard to grasp, but it is often a source of trouble while using this property... The mental mapping you might have of how your page is rendered does not correspond with the way things really are rendered... so it feels "illogical".

hey,

you are right, that didn't change much. And when i change the values to 0em for instance it automatically deletes the 'em' in my source.

The thing that really bugs me is the fact that the right frame just doesn't want to start at the top of the page, but at the bottom of the menu background. It's like the menu stretches across the right frame, giving it a padding or something.

Does anyone have an idea why this is the case? There must be some users with collapsable menu's?

Thanks

Mark

heres a site where it does work: site

Still haven't figured it out... sniff!

Hey Vaska,

Can you perhaps help me with this? Not sure if the code is messed up or if it is something that i'm just overlooking. Would really appreciate a fresh glans..

Thanks!

Mark

Mark, this is complicated...I don't know.

And that link still doesn't work.

Hey Vaska,

I'll hook up the link tomorrow! No biggie. Could you perhaps take a look at my code to see if there's anything wrong. Otherwise i'll have to throw the whole collapsable menu plan into the bin. Would be a shame.

I know customization is not a indexhibit thing, but perhaps i'm overlooking something. Would really appreciate your input.

Thanks again!

Mark

Hey Vaska,

I fixed the link just now! Just let me know if there's anything wrong with my code. Drawing dead here=)

Mark

Hey Mark,

i'm on a Mac OS 10.4.11 and your expandable menu works in Firefox 2 and Safari 3.1.2! If you click on a section-title the li tags show up and make the menu (white background higher). Another click and they hide again (white background of menu gets smaller in height)

I think probs come along with incorrect code. For example: you have closed the head of the document after the link to your favicon and the most important part of the head begins afterwards. This is extremly causing trouble!
you should validate your site with services from W3C and check if probs are caused by incorrect html etc…

The Web Developer Plugin for Firefox is a great help to develop besides the Plugin Firebug. If you do not know give it a try :-)

Just tried a little CSS:

1. body {
2. ¬†¬†¬†¬†background: #fff url(http://www.extrafunk.com/files/8_background.jpg) no-repeat fixed left top;
3. ¬†¬†¬†¬†color: grey;
4. ¬†¬†¬†¬†font-family: verdana, sans-serif;
5. ¬†¬†¬†¬†font-size: 10px;
6. ¬†¬†¬†¬†margin: 20px;
7. }

1. #menu {
2. ¬†¬†¬†¬†background: #fff;
3. ¬†¬†¬†¬†float: left;
4. ¬†¬†¬†¬†width: 215px;
5. }

1. #content {
2. ¬†¬†¬†¬†background: #fff;
3. ¬†¬†¬†¬†margin: 0 0 0 235px;
4. }

This could be the way you go after cleaning up yout html ;-)

gn8

extrafunk,

The "it automatically deletes the em in my source thing" is impossible for what I know. Maybe if you look at your page with Firebug or a similar tool, the em or px part of the value isn't shown, but it should be there. If it's your editor that automatically strips the value, I would highly suggest looking for another editor. It might also be your html header which is not set to xhtml...

And like Doctor_Osimo pointed out, your html source code seems to have some badly formated tags/syntax. Web browser are pretty forgiving when it comes to those and ignore the errors and try to render the page anyways, but it will cause you great troubles and various inconsistencies.

Has for your right section starting at the bottom of your menu, it is what I tried to explain when talking about the position:relative behaviour in my previous post; what you see is the normal behaviour for a relatively positioned element. It starts just after the last rendered element in the page, in this case, your menu div. try using position: absolute instead, it should provide the behaviour closer to what you're expecting.

Or use floats like suggested by Doctor_Osimo in the post just above.

Hope that helps.

hey guys, I'll try the suggestions above! The collapsable menu works just fine, thanks god! But i'll try to clean up my html and the other settings to get the right frame to start at the top, right next to the menu.

I'll keep you guys posted on my progress!

Thanks

Mark

Okay using Absolute doesn't make the menu move along with the collapsable menu's, the only option that seems to work is Relative. I know what you are saying Antoine about the effects that Relative brings, so i'll have to work my way around it somehow. Okay, on to the next option...

Maybe floating the menu can do it... (using the float CSS property)

Seems like alot of extra work that wasn't necessary. Should have tried using the more up-to-date expanding menu script as well.

Hey Antoine & Doctor_Osimo,

As you can see here the problem of the right frame has been solved!! Indeed it had to do with the float option instead of Relative! So i'm very happy it finally lines up, as you can imagine.

Changing the values did change the look op my blog. It seems as if the content of the blog is set in a content frame, which doesn't want to expand to an absolute value. In other words, the frame is set to a certain value, making me have to scroll thru the blog. How do i get it out of this frame and have the blog open 100% (left, right, top) in the right frame?

Thanks so far for all the help! VERY much appreciated. I'll clean up my html some more right now.

Mark

extrafunk,

You're using the iframe plugin to put your blog in it... that would be somewhat ackward to try to remove it from that frame...

Just to be sure that we're on the same ground (and sorry if some things I state are obvious to you already), your blog is embedded in indexhibit using the iframe plugin. This is basically like the old html fames we used to have in 1995 but now it's inline in the page and ... well no need to get on the technical part.

What you should try to achieve is not "break out of the frame", but make the frame fit the content you put in it... or make the content fit the frame... This is the way you need to work around the constraint. Else you just link to your blog and let it live as a separate entity and not 'inside' indexhibit.

Your next question will probably be "how do I achieve this?" and my answer would be that I have no experience with this plugin...

I've had a quick peek at your page and it seems that the size of the iframe plugin is set via javascript and is set to be of the same size of the menu (this is probably the functionality intended by Vaska and probably fit's perfectly with the plugin's main intended purpose) I can't really help more than this for now...

And read this post; you can manage a lot with the iframe plugin, but it will need customization.

I'll read up on your progress. Good luck!

Dear Antoine or Vaska or anyone else interested,

As you can read i'm have some trouble with my blog in the right frame. It seems like it opens in a frame with the same height as my menu. How do i go about changing these values so that i can view my blog with an unlimited height?

Here's the code for my plug-in (plugin.ndxz_iframed.php) i used for the blog:

function ndxz_iframed($url=false)
{
$iframe =

< script type='text/javascript'>
function iframer()
{
    // get width of #content
    frame_x = $('#content').width();
    // get height of #menu
    frame_y = $('#menu').height();
    
    // apply height and width
    $('#iframed').css('width', frame_x);
    $('#iframed').css('height', frame_y);
}

$(document).ready( function() { iframer(); } );
$(window).resize( function() { iframer(); } );
< /script>

< iframe src='$url' frameborder='0' id='iframed'>
EOH;
        
    return $iframe;
}

?>

I can see where is says that frame_y is set to #menu. But how do i customize it so that it isn't linked to #menu?

Mark

Have a look at jQuery's documentation (search it via Google), the height is set using a jQuery selector.

Once you read the documentation on jQuery selectors, do some experimentation, you should be able to set the height to the browser's height or something that is relevant to the size you want to achieve. (Possibly the height of the div/element that encapsulate your blog's content)

Hope that helps.

Hey, thanks for the reply. I've tried a lot of new values but every time i do so, the frame which contains my blog just seems to decrease. I can't seem to increase in the height, even when i make the height: 600px for example.

I'll read some more, but if anyone has any ideas, or have experienced the same problem, please let me know. It would be much appreciated.

Thanks

Mark

I've tried adding:

< iframe src="http://extra-funk.blogspot.com/" width="900" frameborder="0" scrolling="auto" class="autoHeight">

But that didn't help much either.

I've also tried deleting this part of the code:

{
    // get width of #content
    frame_x = $('#content').width();
    // get height of #menu
    frame_y = $('#menu').height();
    
    // apply height and width
    $('#iframed').css('width', frame_x);
    $('#iframed').css('height', frame_y);
}

Still no luck! I need a fresh set of eyes to look at it...

Mark

Then tried this:

function ndxz_iframed($url=false)
{
$iframe =

< iframe src="http://extra-funk.blogspot.com/" width="900" frameborder="0" scrolling="auto" class="autoHeight" id='iframed'>
EOH;
        
    return $iframe;
}

?>

Still no luck. What am i doing wrong? Vaska wrote this plugin, right?

Mark

Hi Marc,

I suggest using iframes will not lead to an satisfiying end…
You should'nt use’em!

Why not let indexhitbit be indexhibit and blog be blog?

Cheers Osimo

A super sweet blog module is coming soon. It's not WP...but I feel alot of people don't need all those bells and whistles. And, it integrates within Indexhibit without the iframe.

No, I don't know a release date yet.

Hi Doctor_osimo,

It's an option giving to us by Indexhibit. So why not use iframes? I like the plugin, having one archive with multiple sources.

I just can't figure out how to auto set the height, that's all. But your comment would make things easier, but that's not the intent of my site. Are you using this plugin?

Thanks for your reply

Mark

Hi Vaska,

So i'll have to wait for the new blog module? Given the replies i'm guessing i'm pretty much stuck for the moment then? Or is there still a way to customize? Or am i doing all the research based on something which isn't possible? The plugin worked perfectly before I made my menu collapsable, perhaps this option is giving me all the trouble.

What do you guys think?

Mark

Marc, I guess indexhibit only supports iframes because people asked for it… (it’s a plugin, not preinstalled). I do not use it because I've been teached not to use it when I began to learn html. I only had probs with it ignoring my teachers advices ;-)

I thought back in this thread Antoine explained the height prob, didn't he? I’m not into it…

your site did not work before using collapsable menues (firefox and safari on mac os x did only show the menu)

Yes, he explained it to me, and i understand what the problem is, just not the solution.

Did you check my site before the collapsable menu's? It seemed to work fine on my mas/safari and also on my pc/ie. Does it work now? Can you check?

Thanks!

Mark

1 yes
2 no
3 yes – not every link leads to content. you only get white space (eg tiliander)

please resize your images! they’re much too big!
you could make a background pattern (eg eindexamen)

did you validate html and did you get rid off errors? Because if not, do so! This is causing main probs…

Hi, i haven't added content to my site yet, just experimenting with different options. So it's true that the link: Tiliander has no content. And yes the Eindexamen image is way too big, but I added that just to experiment as well. Still working on how i want the content to look.

How can i check the errors again? And how do i validate html?

Thanks

Mark

thread is still there. read it. or google! it’s not very hard to find…

not only eindexamen – all pics are too big – and this is especially for experimenting very annoying!

Something else: I do in most cases try to solve probs first by myself and then ask around. The web has all the content you need ;-) This way I learn more and more and have a clue about the issues. Asking me something I told you in this thread before is way too much! Sorry for that Marc, but that really bothers me…

Aha, i think i send my reply too fast. did read the previous post, and looking at it right now. Sorry about that. I guess i'm doing multiple things at once. And trust me i archive the net for a lot of my questions, and often see this forum as a last resort.

Not sure what you mean about the other pictures. I've added different background images, but that's it. That's how i want it to look right now. I have to add content, then things will clean up a lot better=)

Must admit that I've only started working with html 3 weeks ago, so give me time to adjust. I am a beginner but am eager to learn.

Anyway, thanks for the replies! I really appreciate it.

Oh yes, one more question. I posted a thread earlier about special characters, which didn't receive a reply (perhaps a hint, even though i checked the forum history). anyway, here's the post:

I'm having some trouble with my special characters (em-dash, en-dash, curly quotes, etc.). I checked my PHPMyAdmin and the collation is to: utf-general-ci (utf-8). I've read the pervious threads but can't see how i can change this.

Any ideas?

Thanks again DOC Osimo! And I wasn't trying to piss you off, that's the last thing i want to do.

Mark

aight marc!

eg: 5_background.jpg is about 1,2MB size. I guess you’ll get it to 150KB or so.

special characters reference in german.

Go per ftp to .../your-theme/ and edit index.php. Perhaps you have to note this in your head (not sure about this):

1. < meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">