Floating logo wider than Menu

mrusch / 2011-06-01 21:46:01   

I'm using the horizontal exhibit mode, pretty standard, no frills, with a small menu to the left.
I'm trying to fit my logo that would be 400 - 600 px wide, while retaining the menu width of 200 - 300 px
Doing that in the Pre Nav window ended up with a scrollbar at the bottom off the menu section. Not so nice.

I need a 'header' of some sorts

So I though I'd try with an image (png) that floats above everything else, since the background is white and nothing else is going on in that position of the screen...but it didn't quite work out as you can see here;

http://www.martinrusch.net/site/index.php?/project/daylight2/

The logo that should read 'martin rusch photography' is hidden under the menu section. The images-section got pushed down and the scroll bar to scroll the photographs (many more 'to the right') is gone.

I've searched this forum and I thought I could learn something here;

http://www.paulinechaffard.net/

but it didn't do it for me.
Maybe because she isn't using the horizontal mode ?

And then 'Rick';
http://www.indexhibit.org/forum/thread/2481/
but i think he gave up..

Does somebody have a clue please ? Thank you !

pernin / 2011-06-01 23:09:21   

I'm not quite sure about what you are trying to do, but if I understand you right, you want the logo spanning from left in the menu over the images of the horizontal exhibit on the contents side.

I see two ways of doing this. The first and obvious is what Pauline is doing, using a header on top. That of course *will* push down the images and menu, but there's no problem implementing that, and it seems natural to me -- inspect her site's html and css with firebug or similar and you'll see what she's doing.

The other one is where you don't push down the images' section, but that would put the logo on top of your images, and here is where I don't quite understand, do you really mean you want your logo obscuring your images? I guess you could play with menu and logo background transparency and logo image opacity, and define your logo as background and not tiling or stretching it

In either case, you don't use pre-nav for this

mrusch / 2011-06-02 02:04:33   

Hey there, thanks for your fast response !
I'm trying to get it to look like on this site;

http://christopherandersonphoto.com/
(non-indexhibit built..)

where the logo is bigger/wider than the menu section
(but since it's above it doesn't matter)

Where Christopher and Pauline has a slideshow I will have a string of images (horizontal exhibition format plug in) with a scroll bar at the bottom. This bar disappeared when put the logo in.. I left it there so you can see;

http://www.martinrusch.net/site/index.php?/project/daylight2/

I did check out Paulines site with Firebug, but with my limited capabilities with html/css I seem to be stuck "behind" that menu section. I shall try again since you're pointing to that. It does seem the most logic and 'clean' way...

Thanks you so much for checking in. I'll be back soon with updates.

mrusch / 2011-06-02 02:09:06   

for faster viewing of the links;

Christopher Anderson Photography

and my attempt so far...

www.martinrusch.net/site/index.php?/project/daylight2/

thanks

pernin / 2011-06-02 02:30:23   

yep, Pauline's solution is probably what you want. I guess a small change in sample/style.css (to define the look of the 'header') and a small change in the sample/index.php to call up define div 'header' calling up the logo. You can see exactly how she does it with firebug

good luck

rickykappa / 2011-06-02 02:50:47   

@mrusch - I recognize that I'm a lazy oldfashioned, but I wonder how you guys using firebug don't notice these simple errors... so do a favour to me: close the #imagetest div (e.g. </div> is correct, not <div/> as you have there).
you have that div open and that's why all the rules you wrote for it aren't working and all the subsequent mess.
have a try
;-)

pernin / 2011-06-02 03:03:19   

Ricky? I've checked on both chromium and firebug, it's /div in both...

rickykappa / 2011-06-02 03:05:29   

funny, ctrl+u with firefox... what can I say? a bug in firebug?
;-)

pernin / 2011-06-02 03:14:27   

we'll either call it a bug, or that I'm lazier than you... I didn't bother with ctrl-u, just called up the inspection panel ;-)

I know to check with both chromium and firefox, as both show different inspection results in some cases, guess I'll have to add ctrl-u in ff as a standard check too... I could wish for a magic wand, but I guess it'd get too boring :-P

mrusch / 2011-06-02 13:33:03   

Ricky; you're right about the error - Doh !
Pernin; you're right about that I still need a header.

I only got into html/css because I really wanted this site done. That was a week ago. It became a bit of an obsession but my knowledge in code is still very limited. The lack of sleep made me not see that trivial error.
The good news is that everything should now come together, if I get that header going. At least the logo is now fully visible on top.

Thank you for posting your comments in this matter. It really helps a lot !
I'll be back !

mrusch / 2011-06-02 17:06:24   

Yay ! got it down. Don't really know how though - no I do, but I don't know what made me miss it before and get it now. I guess if you stare at something for long enough...
The 'layout' tag in Firebug is great - made me realize the block structure of the page which led me to the solution. It was all margins and padding and positioning...
Thanks Pernin and Rick !
Thanks Indexhibit for making this possible !

Now I need to fill up the site with pictures and then launch !

x

mrusch / 2011-06-18 19:41:11   

ok it's up !
check it out :

my site

thanks all !
x

Goneatdusk / 2011-07-04 02:05:42   

hey guys looking to place a banner image that also acts as a link back to home on my site
Gone at Dusk i have used this thread and inspecting paulines site to achieve this before however her site seems to be down for the time being so was hoping some body could write a walk through and post it in the forums.

cheers

blameme / 2011-07-04 03:08:39   

1.Open your themeĀ“s index.php
2. Directly above the Menu add a div element containing your header image and link:

  1. <div id="header">
  2. <a href="/link.html">
  3. <img src="header.jpg" border="0" />
  4. </a>
  5. </div>

3. Add the id of the div to your style.css and style as necessary:

  1. #header {
  2. margin:0;
  3. }

4. have an icecream.

Goneatdusk / 2011-07-04 22:20:07   

thanks blameme!
i am having some issue with the image source. using siteground as my server i have upload the image to /public_html/files/gimgs/header.jpg but when i look for it in the browser by going http://goneatdusk.com/public_html/files/gimgs/header.jpg it takes me direct to the main page?

pernin / 2011-07-05 00:43:11   

goneatdusk.com/public_html does not exist as a path, public_html is goneatdusk.com, so: http://goneatdusk.com/files/gimgs/Header.jpg

and, very important, your image is called Header.jpg, not header.jpg, linux/apache servers make a distinction between upper and lowercase characters, it's good practice to keep all file names in lowercase -- be careful, some digital cameras automatically name files with uppercase file type JPG, and that will also cause a problem if you are writing a path and you inadvertently write jpg

the folder files/gimgs is where indexhibit renames and places the images you upload to your pages (and their thumbnails). just a suggestion, in order to keep file clutter down as it may become an issue when you the number of files grow, is to place the "non-indexhibit" images in another folder under files (for example, files/images), even directly under files

aliwiper / 2011-08-28 16:49:41   

Hey guys,
I got this to work a treat following blameme's instructions. I have one problem now - all the content starts below the new header, as you can see here:

http://newtest.hellemardahl.com/

and i want to be able to put text for each exhibition next to the header, as you can see here:

http://newtest.hellemardahl.com/files/Picture%204.png

Is it possible?

Thanks!!!!!!

pernin / 2011-08-29 01:34:59   

use firebug in firefox and play with your style.css definitions, just for testing (you can then edit your style.css when you are satisfied with the results)

you could, for example, assign a -100px value to #content margin-top, which would move the up the page contents

check http://www.w3schools.com/ for a complete reference of properties

aliwiper / 2011-08-29 03:11:27   

ah ha, super - i didnt think to try adding the minus sign, thats done it ..

Thanks Permin

zazou / 2012-03-13 11:11:55   

Hi everybody !

I would like to have my logo separate to my menu.

My site Webpage

I tried this :

- in my Index.php:






}

- in my Style.css : www.isabelleserrand.com

#header {
    height: 100%;
    margin: 0;
    position: fixed;
    top: 0;
    width: 150px;

}

I don 't understand why it doesn't work ?

I think the problem is the link :

But I don't know what is this link ?
And How Can I remove the pre nav text that appears by default in indexhibit settings?

Thanks a lot for your help !

zazou / 2012-03-13 11:15:47   

Sorry for this weird post !

I tried this :

- in my Index.php:

< div id="header">
< a href="/www.isabelleserrand.com">
< img src="logoPMN_ESSAI1_web2.jpg" border="0" />
< /a>
< /div>

- in my Style.css :

#header {
    height: 100%;
    margin: 0;
    position: fixed;
    top: 0;
    width: 150px;

}

Thanks !

pernin / 2012-03-13 11:55:43   

my guess is that you need full paths:

http://isabelleserrand.com/ and

http://isabelleserrand.com/files/logoPMN_ESSAI1_web2.jpg

although I don't understand why you need to define that in your index.php, you could do that in settings > pre-nav

zazou / 2012-03-13 14:52:33   

Thanks for your response !

In setting / pre-nav :
Can I change the margin, padding ect... ?

I would like different margin for the logo and the menu and maybe different background.
I would like to align the text and the menu.
Is it possible ?

my site

I tried the other solution (adding a < div id="header">) in the index.php but it doesn't work.

Thanks again !

pernin / 2012-03-13 15:42:12   

you can add the div in the pre-nav

zazou / 2012-03-14 04:29:10   

Thanks permin !
It works !

This thread has been closed, thank you.