HTML/CSS - Image inside a li element from the navigation bar - html

I have a navigation bar, and underneath a black div on which the drop-down elements from the navigation bar drops. This is not the main function of the black div. It is just for design, but it works really well. You can see here what i am talking about: http://www.ecoloc.ro/interior/test/regeneration . Now, what i want to do is that every time a main element from the navigation bar is hovered, an image big enough to cover the main element and a part of that black div beneath it will appear. You can see in the link that i posted, on that black gap i want the image. Can this be done?
Thank you!

You can change the dimensions of the <a> inside the <li> and set a background image for it. If you don't want the main menu word to appear, you just set `text-indent: -9999px´ on ´:hover´ (image replacement technique).
The best way to set the modifications on hover and come back to normal on hout is to create different classes with the styles. So you change the class via JavaScript on hover, changing the dimensions automaticaly.

Since you already use absolute positioning for your "submenu" list, you should be able to do it with a little CSS.
Provide a background-image: for the list element that contains your desired graphics, set background-repeat: no-repeat, set an absolute height: and re-position your list to the correct top:, left: corner. Use margin: and padding: to get the list elements into their correct position.
-- Update: --
Try the following quick and dirty first sketch to see if I got the idea:
<ul id="media" style="position: absolute; top: 108px; left: 1018px; height: 35px; background-color: red; padding-left: 131px; padding-top: 35px; ">
<li>presa</li>
<li>video</li>
<li>foto</li>
</ul>
The submenu covers your main menu entry and the black submenu bar. Provide an image that covers exactly the areas you want and fine tune the positioning.

Related

CSS Dropdown Menu Changes div Background Color

I created a little site tonight about watches. You can visit it at horology dot info.
(Please do not post the actual URL of my site in your response.)
I was wondering why the dropdown menu -- which I got from https://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ -- appears in id="content" rather than id="banner" (with the blue background). I want the menu to appear underneath the logo text with the blue background. Additionally, does anyone know why there is a lot of vertical space before the banner? I also want less empty vertical space at the top. By the way, I am using Firefox on Ubuntu Linux.
Add display property (display: inline-block;) to your #banner class in "/horology.css"
#banner {
width: 800px;
background-color: #00C;
display: inline-block;
}

detach logo from header menu and put it between header and first part of body

Dear all geniuses out there,
I'm building a website in wordpress, however I'm not an expert in it.
I'm looking to make logo bigger and put it between the header and the first part of the slider (with same position on the right as now, however way down on the menu so that half part of logo is within the menu and half part within the first part of the slider, making it not affect the height of the header menu)
The website in question is the following: http://www.ildottoredellepiante.it
I'm sure this is possible as I've seen it on few website, does anybody can help me with the answer?
Do you have something like this in mind?
Screenshot with modified CSS
To achieve this, just add this code to the id #site-logo in the style.css of your wordpress template:
#site-logo {
float: left;
position: absolute;
top: 12px;
}
position: absolute helps, that the size of the logo container does not affect the height of the header.
top: 12px helps to adjust the vertical position of the logo. You can alter that value to change the exact position of the logo.

Trying to add an "information button" to the pictures on my page that only appears when hovering

The picture I'm trying to paint is this:
I have an image of a painting in the center of my page. When I hover over the painting, I want an info icon (a small "i") to appear anchored in the top right of my image. I've placed the "i" icon simply on top of the other image. I know this is incorrect, but I don't know how to anchor it relative to the dimensions of the painting image.
Furthermore, when I hover over the "i", I want it to popup a small box with 3 lines of text (for the title of the painting, the size, and the year it was made.)
I've tried a few different methods, but none of them seem to work, so I strip the code back down to this before I try something else.
<div style="position: relative; left: 0; top: 0;">
<img src="Placeholder.jpg" style="position: relative; top 0; left: 0;"/>
<img src="info.gif" style="position: absolute; top: 30px; right:320px"/>
</div>
Are you trying to do this purely through CSS? If the info.gif was a child element of the placeholder.jpg it would work, and you could do this by swapping the img for a div or span using the background-image: url() CSS selector and then using the:
img[src=Placeholder.jpg]:hover {
img[src=info.gif] {
display: block;
}
}
However, I think you're correct in using the correct image markup and you can do what you are trying to achieve with the:
.hover() // functionality
I have attached a JSFiddle here and attached the jQuery hover event to give you a bit more background.
I have used example code with an image, and an info image showing that hovering on the picture shows the icon, and then hiding the icon when the user leaves the picture.
Hope this helps!

Div hover changes only when hover top part of the div

Live link here
http://soloveich.com/pr1-1/
For some reason, div hover changes only when mouse goes over the part, that's on top of the grey content background.
When it hovers on lower part- nothing changes
<li><a class="ml" href="http://soloveich.com/pr1-1/?page_id=66"><div class="tabs1"><div id="t1">
</div></div>
</a></li>
css code
#t1 {
height: 519px;
width: 271px;
background-image: url(images/t1.png);
background-repeat: no-repeat;
}
#t1:hover {
background-image: url(images/t1r.png);
}
didn't put all 4 of them here, since it's all the same
#cnt1 element is over the divs, and block the hover action.
You must play with z-index, and positioning... Two less reputation to make a comment, sry :).
UPDATE
Sorry, now I'm not sure about that. But You should try to run tFirefox, right click this div, run inspect element and then click the 3D view icon (top right). Then everything should be clarified.
OK I know
You must apply the hover effect to the first child of the whole thing. Div is inside a, a is inside li. So li:hover is an answer I think. The background should be also applied to the li element. Hope it helps.

how to show sub-menu when using the scroll bar on a menu?

Good morning, I have a menu where you need it has a vertical side bar. As you can see in the picture, I could add it. However, when the mouse pointer hovers over the menu items, submenus appear, but they are hidden by the bar. I would like the sub menus stay overlapped the bar, ie, they appeared in front, not getting hidden. Already tried changing the z-index of the submenu, but it did not work. Anyone know any alternative, or how can I solve this?
then, as the system menu is all dynamically mounted, I created an example in jsFiddle. The problem is that the menu has sub-menus, and when I try to access them, they are "inside" the box that creates the scrollbar. link: jsfiddle.net/tBJe3/10/
thank you!
try this one,
.menuLateral {
margin-left: 4px;
margin-top: 1%;
position: relative;
width: 35%;
height:200px;
color: #B2C2B9;
float: left;
overflow:visible;
}
http://jsfiddle.net/tBJe3/11/
In your code you have set position: relative; for almost all containers. If you remove them, your absolutely positioned sub-menus will be relative to the document and also will be on top of your scrollable content.
Here is the updated version of your code in JSFiddle.
Please note, that by doing in this way, some of your sub-menus will not appear where you want. So maybe you need to make with fixed positions or position them manually (and dynamically) using JavaScript.