I hate CSS, because always hard to predict what it will render into. Can you guys help me to fix this thing...
I need the right side of elements in dropdown menu aligned right under the arrow. First I thought if I do position:absolute, and then just move left to number of pixels, it will work, but if the username changes it breaks everything again
here's the fiddle for your convenience
http://jsfiddle.net/Mwd2A/1/
thank you
If I understood right, you want to when hovering the arrow, that submenu appears right aligned with the arrow.
If it is that:
Add css attribute to .userSubmenu
position: relative;
Add css attributes to .userSubmenu ul
position: absolute;
right: 0;
JSFiddle:
http://jsfiddle.net/Mwd2A/5/
Related
I'm working on a page for a class, just to display things (you can see them sorted by chapter in the body) but I originally had a list on the left that I used initially that just listed them all, and I wanted to keep it.
Problem is, once I started adding more CSS - I don't know where exactly - the area on the left just became completely unclickable. You can't highlight the text, you can't click any of it - nothing. I have absolutely no idea whatsoever what is causing this.
link to the site here
here is a pastebin link showing everything I have.
thank you, i really appreciate any help.
The .content div overlaps entire body area, because of "position: absolute;"
Add z-index: 9999; to #menu in your CSS and it should be clickable.
Other way is to use "position: relative; float: left;" to both .content and #menu, but you have to be carefull with their widths. Their sum of widths (including padding and margin and border) should be less or equal to the container width. In your case it should be body tag (actually a don't see body tag in your html).
That's because your .content div is using position: absolute; so it's taken out of the page flow and overlapping your sidebar because it has no width set (block elements span the full width of your viewport unless you give it a fixed width) ... just add a negative z-index value to your .content div and it should work fine.
More on z-index
I'm trying to prevent my right hand side div from moving to the left after I have used the affix property.
Any iudea how I do this please. You can see the issue here, just scroll down please:-
http://monkeygetnews.jonathanlyon.com/bs.html
Thanks
Jponathan
When activated, scroll spy adds the class affix and position: fixed to the div it's spying on. This positioning takes the div out of normal flow and here the result is that it's floating to the left.
The solution is to add some css styling to float it where you want. In your page I think it would be something like:
.span3.affix{
position: fixed; /* to stop the div from scrolling */
top: 0; /* to fix the div at the top its containing element */
right: 0; /* to fix the div at the right of its containing element */
}
You might have to play with this a bit to get it where you would like. The important thing is that once you know the selector (in this case) is .span3.affix it's easy enough to work with.
Good luck!
I am trying to make the top menu bar float at the top of the page here:
http://www.landedhouses.co.uk/
So that when a user scrolls down the menu is still displayed.
Unfortunately adding position:fixed to the CSS doesn't seem to do the trick, various elements still float around. Can anyone point me in the right direction?
just add on style.css
.strip{
position: fixed;
z-index:1;
width:100%;
}
I'm looking for a bit of brainstorming assistance.
I am coding a layout that was put together by a designer and am trying to think of a way to handle a horizontal navigation that has angled edges, and goes from a blue background, to a white background when a link is selected.
I'll actually just include a screenshot. This is actually the navigation for a Tabbed content area. The top half of the screenshot shows what it will look like when the first tab is selected. The bottom half of the screenshot shows the 2nd tab selected.
http://i.stack.imgur.com/P34yI.gif
So my problem comes from the fact that HTML elements are rectangles, not rectangles with angled edges. I saved the angled edge with the shadow as a CSS background, and that worked fine, until I realized that each link can turn white and the BG image has a bit of the next link embedded in it to give the illusion of the angle, and thus the left most link would need a different background then the middle link, and the right most link, etc...
I could assign a unique class / id (or use nth child) to each link, but I would like to keep the solution flexible so I can add another link/tab in the future.
I was curious if anyone had any ideas on how to create this appearance by possibly using CSS3 / HTML5 / or some transparent PNG and negative margins or relative positioning?
I'm not asking for code or for you to do my work for me :) I'm just looking for ideas - just a bit of community brainstorming. If anyone has any suggestions please let me know, it might lead me to a solution.
Thanks!!
Assuming you're using a 'ul > li > a' structure for the menu, I would use two angled backgrounds (right and left... the right one is about 27px with the shadow, the left about 22px). Apply the left corner to the <li>, and the right corner to the <a>. That will give you doubled backgrounds on each list item, so you should use negative margins on each side of the <li> to pull its siblings to overlap. Then use z-index to make sure on hover or highlight that the menu item shows up on top of the others. I've added an additional 30px of padding on both sides to create the extra space around the text:
li {
margin-right: -27px;
margin-left: -22px;
padding-left: 52px;
position: relative;
background: url(leftcorner.jpg) left top no-repeat;
background-color: #3aa1cc
}
li a {
padding-right: 57px;
background: url(rightcorner.jpg) right top
}
li:hover {z-index: 5; background: url(leftcorner-hover.jpg) left top no-repeat}
li:hover a {background: url(rightcorner-hover.jpg) left top no-repeat}
I haven't tested this but I think it should work... possibly with some additional tweaking.
This solution doesn't include the subtle inner shadow... to do that you would have to use a 1px repeating gradient background on the <li> then use :before and :after pseudo elements for the two corner background images.
Additionally in my code I put two seperate .jpgs (normal and hover) but really you should use a sprite and background-position so there is no flash while the hover state image is loading.
I'm working on a site that has a wrapper element, with a left and right sidebar, each floated within the wrapper. The left sidebar (which contains navigation) is clearing the right sidebar and pushing it to the bottom for some reason. I've tried fixing it in about 50 different ways. I originally thought changing the size and or margin would help. It didn't. I tried the 'display:inline' fix to no avail. I've tried a ton of other tweaks but I can not get it to work. You can view the site at www.ibgs2010.org and the css is www.ibgs2010.org/css/style.css (I'm trying to use a IE7 specific stylesheet to fix it). If anyone can help, I'd really appreciate it. I've burnt about 3 hours today just trying to fix this one little issue.
Looks like the problem is with the ajaxloader div - set its width to 697px (same as sidebar right) and that should fix your problem.
Try to remove the margins and paddings on your sidebar classes and have a inside wrapper with the margin and padding set to it. More failsafe this way so that margins don't increase the size of your div element. Browsers have a different way of rendering margins and paddings to elements.
Hope that helped you out.
Cheers
I think it's just that the floating content is being considered too wide to fit -- so, it's floating it down to where it will.
Instead of float, you might try position with left and right, respectively:
.content.wrapper {
position: relative; /* establish boundary for absolute positioning */
}
.sidebar.left {
position: absolute;
top: 0px;
left: 0px;
}
.sidebar.right {
position: absolute;
top: 0px;
right: 0px;
}
I propose you add the following:
#ajaxloader {
width: 737px;
float: left;
}
The width of 737px is derived from the 697px width plus the 40px left padding of of .sidebar.right
With this addition the IE7 and Firefox versions should look the same, give or take a pixel.
I include the yahoo reset css as the begining of every page (or css file). It really helps to level the playing field. Also with IE, always remember to specify width (even if it's 100%) and if your floating, make sure to display:inline.