[Solved] Question on display:block

[lkeeney]

It seems like I am always trying to do something out of the ordinary.

In this case, I have a Div which contains a link. I have a second Div which contains a number of links (drop-down menu).

What I would like to know is how to do a display:block on the second Div when the user is hovering over the first Div. I just ran into a mental block on this problem.

This is all brought about because my client insists on the navigation bar consist of six photo frames with a wood colored frame, a gray colored matt, and a white area where where a photo would normally be placed.

I have designed the photo frames with CSS, and I have placed the <a> link on the white background of this frame.

I have a second Div which contains the drop-down links.

I want the second Div to be displayed when I hover over the first Div.

Here is a link to one of the navigation frames.
Navigation link

[Paulie_D]

Could you make an example (just the strucure and basic css) in Codepen.io

Frankly though, there is no reason not to use a ul/li structure for a menu…it’s all about the CSS after that.

[lkeeney]

I have never used codepen before. I did show a link to the page with a single navigation link, and from there you can see the html and css code.

I did use the conventional ul/listructure initially, but I could never get it to look exactly the same in all the different browsers. Because I am tight on space because of my client insisting on exact placement of components on the final website, slight movement of text within the frames is very noticeable, and the client complained when viewing on different browsers.

With my present design of just one navigation frame, it looks the same in every browsers I have tried.

[lkeeney]

I have signed up and added my code to Codepen. I have saved it, but now I am not sure how to show it here.

Can anyone help on this?

Here is a link to my public page on Codepen. I hope this works: Link to my Codepen

[Paulie_D]

Your current structure doesn’t quite work for what you are trying to achieve.

Ideally you should move the submenu inside like this

http://codepen.io/Paulie-D/pen/fDsny

[Paulie_D]

Same structure…different layout method using display:table/table-cell

http://codepen.io/Paulie-D/pen/LqhHy

There are a LOT of ways to do this….

[lkeeney]

I want to thank both Paulie_D and wolfcry911 for your help.

I just printed out your code and will review it and try and incorporate it into the website I am designing.

I don’t know why I thought I had to split up the navigation code for what I was trying to do. I guess my old age is starting to show. :-)

[jurotek]

Another using inline-block method…

[lkeeney]

Thank you jurotek.

I have printed out your code and will include it in my review and learning process.

This forum is amazing. I just found this site yesterday and already I have some great replies to my problem.

[lkeeney]

This is what I am looking for. I started with jurotek’s code as it was the last one I received.

I modified it to fit my application. However, I would like to have a couple of pixel spacing between the frames so they look more like actual picture frames. I tried everything I could think of to do this, but nothing worked. Can someone show me how this should be done?

I’m sorry if some of my text doesn’t make sense. My client insisted I sign a non-disclosure agreement so I can’t use any of the actual text from the website I am working on.

Here is a link to the Codepen:
Link

[jurotek]

Not sure what you mean by

I would like to have a couple of pixel spacing between the frames so they look more like actual picture frames.

[lkeeney]

As it is now, the brown outline of each frame is touching the other frames.

The client wants these frames to look like picture frames. What I would like to do is to space them apart a few pixels so they look more like picture frames hanging on a wall.

I know this may be a little strange, but this client has a unique product to sell, and they want a unique looking website. Almost everything they want to do with this website is different.

I have been designing websites since the Internet was started, but unfortunately most of the sites I designed were straight forward, and I haven’t kept up with all the latest techniques in website design. My main interest is my photographic business. It just happens that this client is also one of my clients in my photographic business.

[lkeeney]

wolfcry911,

The only reason I used the code I did is because it was the last post I received, and I already had the code on my desktop.

I was a little bothered by the tag not being closed, and I wasn’t sure if this was valid code, or not.

I will give the code you supplied a try.

Seeing I am learning as I go, I do want to be sure I learn good coding practice.

This may be the last website I ever design, but I do want to make sure I get it right.

[lkeeney]

wolfcry911,

I have your code working now the way it will be displayed on the website I am designing.

I like the code you supplied because I can understand most of it.

I added little things like a white background to the frames and drop-down menus, changed the wording of the links, added more links, etc. I have submitted my final version to my client for approval.

Thank you for all your help, and thank you to all those that responded to this post.

[Author]

Posts