I have a menu which looks like this:
When the user clicks on Recruitment, it goes bold (as it should do) but moves the whole menu 1 or 2px to the left. I am using DNNnav.
Boldness of fonts uses extra space. If you make sure that every menu-point has a set width with for example width: 100px;, it should not jump place when you hover over it, as it will be a steady 100px, no matter what's inside.
Good luck!
P.S. If needed you should of course maker it wider than 100px.
It's hard to go through your coded in jsFiddles. But just try to give a fix width in px for your 'span.txt' span.txt{ width:100px;} or maybe min-width span.txt{ min-width:100px;} may help.
Related
Hello I do some css positioning to magento eshop. I am using image for add-to-cart button and when I change my browser width this button just move right box element.
See here
I need some idea to make it look better (scaling image down,or just croping or hide it on overflow) because its very ugly how it is now.
Thank you, hope I explain my problem easy to understand.
make the middle element (or whichever needs to be) have min-width: ###px in the css
First i would set all img to max-width: 100%; and then fo fix the problem you are having with the add-to-cart button you should add it's class to the responsive.css stylesheet or how you call it, and play with it's positioning in the various media-queries that you have.
When I try to "float" my navigation, it gets bumped down, sometimes a few pixels, sometimes a lot. If I make the parent display:inline; it will remove the bump, but the structure is all messed up. If I remove the float from the nav it is not bumped down, but again, the structure is not what I need. I tried position:absolute; and position:relative; for both the nav and the parent and it doesn't help. I tried placing a clear:both; all over the place to no avail.
(I tried searching here and the google, but I don't know enough about what I am doing wrong to find an answer)
Here is a screenshot of 2 sites I have this problem with. The first one has that yellow gap above it that I don't want, the second has a few pixels of black above the dark gray, kind of hard to see. (If I remove the floats the gaps go away, but the structure of the menu fails)
The problem comes from using display:inline-block; where the browser automatically inserts a margin on the bottom of the element to allow for letter descenders. You can change your display to :block; if it will not break your layout. If not, you can add a negative margin to the bottom.
There are a few options here, that worked, depending on the layout I was using. Here are some that worked:
margin-bottom:-3px; or margin-bottom:-4px;
margin-bottom:-0.15em; worked too.
If I have a background image that is, let's say, 20px in width, and I want it to rather be 40px in width (but adjusting in photoshop would not work as I want it).
How can I change the width?
body {
background-color:#5b7c8a;
background-image:url('images/diagnol.png');
background-repeat:repeat-y;
margin:0;
}
It's diagonal lines as you can see from the image,
screenshot http://img62.imageshack.us/img62/4263/testzjr.png
and the spacing is just as I want them. Editing the image may mess up the spacing. So I'm trying to get the background coverage area of the body to be a little bit more? Right now the image is 6px width. I want it to appear as 20px width, as if the image were in repeat-x-y in a 20px div? (so not stretching the image, just gaining more ground with the image)?
I hope this makes sense > <
"adjusting in photoshop would not work as I want it"
CSS is not image editing software. In photoshop you just need to go to Image > Image Size and scale as you wish. Or take your time and learn to use the basics of Photoshop to get the effect you want. You just need to not be scared and experiment with each tool till you get what you want, as you can obviously undo the undesired effects.
The CSS way is possible but it's not meant for these kind of situations and will not be cross browser friendly. It's rarely used on typical sites so fortunately I'm not going to encourage it. Good luck.
I believe there's been misunderstandings with what the OP wants.
Incase i got it right, check out this example:
http://jsfiddle.net/vYxza/
Think of the #text as body and the .this_div as the element you need to create inside it.
Basically you create new element where you repeat the background in all directions but you just restrict the width of that element.
Another way of doing it:
http://jsfiddle.net/vYxza/1/ - This is actually the way i would do it mostlikely.
Note that again.. if you wanted to use it in body... think of .this_div as html and #text as body
Basically i'm trying to get a divider to run to the right edge of the screen (without overflow).
If you look here: http://gomysites.com and scroll down to the twitter section you will see i've set the twitter panel to run off to the left edge of the screen (no matter the size).
Now i want to do exactly the same on the right side. If you notice the grey divider between the blog posts id like this to run to the right edge of the screen (no matter the size) without it adding a horizontal scroller.
I've tried setting the css for the divider exactly opposite as i did for the titter panel:
.widget_gomy_news .divider{
margin:30px -10000px 30px 0;
background:#f3f3f3;
height:30px;
float:right;
width:610px;
padding:0 10000px 0 0;
}
But it adds a horizontal scroller. So i did try adding overflow:hidden; to the body. Which removes the scroller but i can still scroll everything left and right with the mouse.
Anyone got any ideas how i can achieve what i'm after? or will i need to use some js to make this work?
Thanks in advance.
Just remove the -10000px right margin and the 10000px right padding and it works. What do you need that for?
Use overflow-x: hidden on the body element. This will prevent the horizontal scroll but may trip you up in older versions of IE - Tested in IE8 and Chrome.
Edit:
You could also write some jQuery to grab the Window viewport height/width like: $(window).height();, and size your entire page's "container" div accordingly. This will allow you to know what numbers you're working with for setting the negative/position margins in your "divider" hack.
I think i've sorted it. I wrapped all the page content inside a div and added overflow hidden to that (rather than body). This worked in everything except IE7, but i can do a simple work around for IE7. Thanks for all the replies, Jeff sent me down the right path thanks.
I'm new to this site and thought I might give it a shot. I've been having a problem for quite some time now but as my project evolved other problems was solved, but this has remained. And finding the right thing wasn't easy. Im not even sure what the term is for this kind of thing.
Anyway, I want a background image to the right and left of my main page. It need to be z-indexed below the actual page(incase people with low resolutions view the page) so that it doesn't extend over the main page and makes the content unreadable. It needs to go below the actual page if low resolutions are used.
I've been using the following code to do the work for me right now:
<img style="position: absolute; top: 120px; left: 10px; width: 121px; height: 443px; z-index: -1;" src="../admin/images/background_text.png">
Problem is that this isn't working to good with older versions of IE for example and in some cases not at all in others. As you can see it has a set position on my page(left side its higher up on the page) which is also something I want to achieve.
I hope I explained this good enough and cheers to this site. Seems like a great place to find solutions.
Cheers, Martin.
Try this:
<body style="background: url('../admin/images/background_text.png') 120px 10px;" > rest of the page...
this sets the background for the whole page (what it seems kind of like you're doing?) to the given image.
I would also size your image to the desired size if it isn't already, then you don't need to supply width and height (or worry about IE rendering the resize).
if you're really just putting it on the side, I might use a table or div setup and set the background on that (not knowing how your page is setup).
Im not sure if i understand your question or not.
Anyway. Dont set your z-index on the image. I would set position relative on the layers that needed to be at the top.
Remember that IE6 dont get the z-index. It figures out which comes first and then its the last one that is on top, even though it haves a lower z-index.
Here's an improved answer for you:
Give your "wrapper" div the background image as described before. Then extend your main table all the way to the right (or wrap it in another table or div with 100% width) and give that the right side background image. Then the images are still behind all the content and they both should behave as you want them to.
if you need more info on the background css attribute, check out the WDG page