I am updating my website
-- WEBSITE --
A web developer made it years an ago.
Now I put an SSL Encryption on the website. But after that change, it seems there is an unwanted margin in the header on some pages.
I can't seem to find out where it's coming from. [Image: unwanted margin between header menu items][1]
My screen resolution is: 1920 x 1080
Anybody knows how to solve this?
I tried already to use different widths for the menu items and margins.
But I think I am doing something wrong..
This is what I'm seeing when I click the link:
I think it possibly has something to do with just your screen resolution, but I'm not an expert. I know I've had plenty of experiences were if I scroll too fast or I resize the viewport, I get black lines in between items that flicker and then disappear, so it could be something like that.
Thank you all for responding.
I found the solution in siva - abc's answer.
I added 'background-size: cover' to the list items in the CSS classes and now the problem is solved!
Thanks all!
Related
Ok, So I have customized a Twenty Fourteen theme from WordPress. Everything works find minus a couple things. The top header shows a white background if its stretched. The footer also shows a white background if its stretched. The funny thing is there is no white background in the css code? I have even looked in the functions.php to see if it was hard coded issue and nothing. I tried to inspect the element and all it says it shows up before and after? I tried adding background: none; to all the before and after codes and still shows up. Does anyone have a clue I have linked the site I am developing on.
Website: http://www.soslidesigns.com/flh
If worst comes to worst I can simply re-design it and I have a feeling I might have to. Would be nice to get your guys feedback. Like I said I have tried everything I could think of simple issues like this always through me in a loop.
Thanks in advanced.
Your white background write here in body (background:none). This set white background to all site. If you need set another color to header - change background in .site (in this file)
So hey guys. I'm new to the site, but have a problem concerning my footer image positioning. I'm sure it's basic for all of you, but I've tried several methods that I came across online, and had no luck. In the end, I decided to ask around.
My issue is this. The CMS I use ( http://www.animerelief.com/ ) and/or ( http://www.anime-static.com/ ) - if you scroll down to the bottom of any page, you'll see that (in a 1080x1920 resolution) the footer aligns with the text properly, and in the center of the footer area. My problem is, in any resolution under that, the footer moves, and ends up out of place with the website.
How do I go about maintaining a single position for the footer image and/or text/links in it?
Thanks for your help!
Regards,
Simply add a min-width to the body that it's equal to your holder width.
body { min-width: 1087px; }
I'm stuck with a div that is in one position while the page loads, and in another position as the page finishes loading. I've spent nearly all afternoon on this one little thing, and cannot seem to grasp why this is happening.
I am using wordpress, so there are plenty of different conditional tags for different templates but I can't see the problem in the template files. The div that seems to be giving me the hard time is the container. I changed the background color of the container on the template that I'm stuck on, so I can see what its doing while the page loads, and it looks to me like once the page is loads 45px of either margin-top or padding-top are being applied to the container.
Does anyone have any ideas? I've gone through conditional tags, and my style sheets and I just don't get why its behaving the way it is. Any help would be greatly appreciated.
It's taken me a couple of page refreshes but I think I can see your problem:
There is this particular DIV: class="entry-image-container" that is loaded into the page despite not being required and is causing your drop down as this element seems to be loading via Opacity in the DOM ....
If you hit F12 and open up the entry-image-container tag, hit refresh on the page you will notice that the entry-image-container is loaded through Opacity and seems to be causing a delay in loading (i'd have posted an image but StackOverflow says im not of higher enough rep yet)
Perhaps including a conditional statement for this tag would resolve the issue for you?
I hope this has helped in some way - Using Chrome on Mac OSX
The header has a 44px padding (22px 0 44px).
For me (current stable FF, Win7) nothing is moving.
I've been trying to debugg this for hours now with no success. I blieve i boiled it down to the background slider which is SUPERSIZED.js. Unfortunately their forum lacked support also.
If someone fires up IE9 and goes to http://www.designobvio.us/avproduktor/
you'll see that everytime you move the mouse across the screen the first two LI (home & news) flicker with the mouse movement.
I've google'd this problem for hours does anyone have any incite?
jQuery Mouse Flicker in IE
I believe that this is a similar issue however, my menus must be bi-lingual therefore this fix will not work?
I'll gladly provide full package for anyone if you can help!
Thank you so much for your time,
Matthew
Solution to your problem is to set some high z-index in css style of these elements. I tried it in developer tools of IE and it helped (I've added it manually to the style of LI elements in the menu). Let say
.menu-item {z-index: 10000;}
My website at http://www.oblivionro.net isn't properly vertically-aligned when you click on a different link in the menu.
For example, if you go from the home page to the ventrilo page, you'll notice that the alignment of the website shifts to the right and down a bit. I know a fair bit about php, but I'm not that great when it comes to css and designing websites.
Anyone know what the problem might be? Thanks in advance.
Your link doesn't work for me, but I can guess what the problem is. To fix it, add:
html {
overflow-y: scroll
}
That will force the vertical scrollbar to always be visible, so there will no longer be a "shift" when you move between pages that do/do not have a vertical scrollbar.