Trying to get my styling working properly for some hovering boxes that I created but it's not going too well...
I kind of have my general idea down.. which is as you hover over items items to the right become visible and so on... One of my biggest issues that I have been consistently having, this project included, is having items at width 100% so that all lines are the same size... but I can't get that to work here, so I have to manually place everything in positions (i.e. left 500px etc.)
Another thing that has been giving me an issue with this, for the final hover where the part number shows up I can't get it to appear just to the right of the corresponding product (it used to all appear on 1 line), but instead I had to position it relatively, and then change up the positioning so now I get a space in between each line when I hover over the product...
Here is my fiddle... any help would be appreciated
http://jsfiddle.net/H9CTe/1/
This would probably be the line we need to work with, but I could be completely wrong
#ipc_cases ul li ul li ul li ul {
position: relative;
top:-18px;
left: 500px;
}
Try using a reset [1].
Simply checking the Normalized CSS[2] box in Fiddle Options solves this.
http://jsfiddle.net/H9CTe/2/
(will update)
Related
I'm brand new to coding, and realize there is probably a very simple solution to my problem. I have imported Photoshop slices into Dreamweaver by using absolute positioning for each slice within a DIV #container (which is how I have been instructed by my professor.)
http://s1292.photobucket.com/user/ajp2487/media/Screen%20Shot%202015-04-10%20at%209.04.27%20AM_zpsbaeyzcdf.png.html
I want to create a horizontal navigation via CSS (blue text) over the placeholder slice (light gray text). To do so, I created an DIV ul li for the links.
http://i1292.photobucket.com/albums/b578/ajp2487/ss_zpswqnc75pl.png~original
I realize that you supposedly cannot float an element when absolute positioning is in play. However, when I remove absolute positioning, try relative positiong, etc. from .nav, ul, the ul disappears (probably behind the slices) and shifts my existing slices. When I do use absolute positioning, the float left command is rendered useless. Right now everything is as it should be, except that I need the ul to flow horizontally, not vertically!
There has to be an simple solution to this; I'm ready to tear my hair out and any help would be appreciated. Please answer in as simple terms as possible!
display: inline-block; will also do the job if you cannot use floats. Does it not work if you put the float on the li?
nav li {
display: inline-block;
}
Here is an example:
http://codepen.io/anon/pen/xboPxB
Another few things to note (though I completely understand the requirements of using Dreamweaver and doing things in a bizarre way due to coursework), position: absolute; can be dangerous and layout breaking, as I'm sure you are discovering; though I won't go into this unless you have any questions as you mention it is due to your instructor.
Line-height should really be unitless - think of it as line-height * font size. If your font size is 20px (or 1em) and line-height needs to come out as 40px (or 2em), then line-height is 2.
I hope I've understood and answered your question correctly! Please let me know if you are still stuck :)
While looking for keyboard-accessible menus, I stumbled across this question, which has as its answer a CSS drop-down menu http://jsfiddle.net/cfWpE/. It seems to use styling on the anchors in the menu rather than :hover on the <ul> items to display the submenus without any Javascript, but I can't figure out how.
Could someone who's better than me at CSS explain how this works? I'd like to try to extend this to a 3-level menu, but without understanding how it works for two levels, that's going to be difficult.
edited for clarity:
It's not actually the keyboard part that confuses me; I understand that tabbing through updates :focus on the current focus link, but the only CSS rule that seems to be applied to those elements is
ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
margin-right:1px;
background: black;
}
I don't understand how setting margin-right to 1 pixel makes the parent <li> visible.
This is an interesting Technique to achieve a dropdown menu.
The list items .list have a very high negative margin-top and a width of 250px. This places their content out of the viewport of the browser. The child anchors a.category have a positive margin-top with exact the same value, so they are visible to the user as if they were positioned normally. Now both, the a.category and the ul.submenu have a float:left applied. that's why the submenu does not appear beneath the anchor, but beside it. (But it has no margin-top, so it is still "invisible") Both elements (a.category and ul.submenu) have 125px width and fit perfectly into the parent li which has a width of 250px. Now on hover the anchor gets an additional 1px margin. This makes both elements too wide to fit into the parent container side to side and so the floated submenu breaks onto a newline and suddenly appears below the anchor - TADA:-D
I hope you could follow my explanation - if not ask please which part I need to clarify;)
Extending this to a third level is not possible - I would just go with a regular css-menu with display:block; and hide. However, you can use absolute positioning and switch the top value from a very high negative value to 0 when hovering, which would have the same effect.
Generally, i would use this with care. Some searchengines consider text that is hidden via negative margins or text-indent as blackhat SEO and may penalize one for that. Although it might be possible that Google is clever enough to recognize this as a regular dropdown-menu
I am currently working on some client work and I make use of a simple dropdown menu i built. It seems to work fine in most browsers, except for IE. Debugging has been a real pain as IE doesn't really offer much insight and I haven't been able to pin point the exact issue.
The dropdown is a div that has position: absolute and contains three <ul>'s. From what I can tell, the div is positioned alright, but the first ul is twice the width its supposed to be, with no clear reason and thus making it seem like the entire dropwdown is not alligned properly.
The dropdown can be found here: fatumdemo.platonlearning.com. Moving over the menu items in the top menu (blue) you can see the issue.
The code is very lengthy to all post here, but in case more information about the structure and CSS is needed, I'd be glad to post it.
Joey,
1) #navigation ul li --->to add position:relative property
2) #navigation ul li .dropdown -----> Put width:450px to 500px
3) #navigation ul li .dropdown ul -----> put width:160px or something higher.
Main problem reason is width and relative, when you add absolute position relative is must of the parent element and width and height are must it absolute element
The problem was with the fact that i was using elements other than li's as children of a ul. Internet Explorer apparently doesn't tolerate this behavior, unlike all the other browsers and treats the other elements as list-items, hence my dropdown being put in the wrong list-item in IE.
I have a sidebar in which there are certain li elements as an index, and on hover of each of the li elements, I have a specific image appearing 'over' the li elements (eg: position:relative;top:-25px;)
Let's say I hover over the first li element and the rollover images appears fine. However, the space between 1st and 2nd element increases while this hover is occuring. I am not able to understand why this is happening and I want to stop this from happening i.e. the image should appear over the li item without no spacing problem but only a simple rollover.
Here is a fiddle of the problem I am talking about: http://jsfiddle.net/PF35v/3/
I would use absolute positioning in this case, I usually do when dealing with images and top/side nav bars that are "glued" to one side of a screen. Alternatively, in situations in which I am set on using relative vs. absolute I use a little cheat....Here is what I changed in the above fiddle
ul#nav a:hover+img {
display: block;
position:relative;
top:-35px;
margin-bottom:-48px;
}
UPDATED FIDDLE
http://jsfiddle.net/PF35v/9/
However, if your images are all different sizes, you would need to individually set up the top and margin-bottom positioning.
adding "position:absolute;" to ul#nav a:hover#first_id+img is stopping the LIs being pushed down (tried this on Chrome). Did you try this?
Usually, I can CSS myself out of any corner, but this Friday afternoon issue is getting to me!
Here is the problem. Mouse over the menu items (birthday, wedding, ...) and observe the dropdown.
Originally, I had these list items floating left fine. I've mucked around a lot with the CSS on the rest of the site, and since I checked them again they refused to float next to each other. They just stack up!
It works if I give them an explicit width, but I don't know from the start how wide they will be exactly (generated dynamically).
I'm looking at it on Firefox 3.6.8. The problem also occurs on Safari. I haven't tested any other browsers yet.
What am I doing wrong?
Thanks!
attempt #2
white-space:nowrap; does the trick. Set it on container - #secondary-menu ul li ul. Now submenu is one long line (tried in firebug).
Pretty handy property, I might use it one day too.
Using firebug, I changed the width of #secondary-menu ul li ul to 50em and it straightened out...
#secondary-menu ul li ul width appears to be calculated from a containing box somehow. But 100% of what, the data it contains? that doesn't make sense.
Try putting a div around the ul menu to be the position: absolute, and then the ul can resize inside it...