I have been running into problems with the height of the header in a site for a uni project.
What I want to achieve is a header which contains a nav, background image slider (which is 100% wide) and speech bubble, with the site content below the header.
At the moment I have it all working as it should be, but the height of the header is not taking into consideration the background image slider, the reason for this being that it (the background-slider) has had to be positioned absolutely. With the current state of the site, I have added a header height in em, this gives me the required spacing on my laptop, but when moving to larger resolution the height is insufficient and the site content runs into the image.
My question is, is there a way of maintaining the current layout but including the functionality of the adjustable header height?
Current site is at: http://beta.immbudden.com
If you are viewing on screen size larger than 1366 x 768, you will see what I mean.
Any help at all would be really appreciated, many thanks in advance!
I actually managed to fix it myself. I positioned the nav absolute, speech bubble absolute and background-slider relative. I then gave each appropriate z-index's. I also had to change the order that each was called in the html, placing the slider from being called first, to last.
Hope this manages to help someone else, and if you need it explained any better just comment here :)
Add a bottom-margin to the header equal to the height of the absolutely positioned nav.
Why not just set the height of the header in pixels? If you have a set height nav and the image slider, you should be able to just set it.
Related
I have a footer styled for my Wordpress site, which is not appearing to reach the full width of the site on mobile. Also, I am always able to scroll width ways, as if the site is wider than the mobile viewport. This only happens on mobile portrait, not on desktop or tablet.
I have all widths set to 100% (the header, the body, the footer and several others) but it seems the footer width renders as 1333px width whereas the header and body widths render as 1349px (as in inspect dev tools on laptop).
I have no fixed widths for any elements set in pixels of over 300px.
The footer is placed outside of the main and the main container but within the body.
I don't think any of the elements within the footer are the problem, as I have removed them and replaced them but the same problem still exists.
Photo included: Gap to right of footer
This problem maybe because one of your HTML tags on the entire webpage (out of the footer) is bigger then the screen
This problem not from the footer,please check the other parts of the webpage
Hi Hazem and thank you for your reply again. Update: I now know what was causing this problem. A left margin set in pixels on my content div that was set to 80% width was adding to the gap to the right of the footer, but only on mobile view. I then realised that my media queries were not working but I have now sorted that out, hence I have sorted the problem.
Thank you for your help.
This is more a question of logic rather than technical.
I have a design where my header is fixed at the top all the time, so is the footer, but the elements inside have percentage widths so the header will change in size as the window changes.
BUT, as the header is always fixed-positioned the content below is covered by it and as I do not know the height of the header I cannot know how much padding-top I must add to the content so it won't get covered by the header.
What do you say?
If height goes automatically, you will need js to control it, taking the height of the fixed div and updating top margin/padding dinamically. Anyway, it would be nice if we could see an example of what you have currently
I have some webpages that do not reach the bottom of my browser viewport. It's particularly annoying because the footer is full width, so it hovers.
What i want to do is place the footer at least at the bottom of the viewport. I do not want to fix it as per the sticky footer solutions.
To make it more difficult, the footer is variable height.
Is it possible either via css/javascript for fixed height/variable height scenarios?
Try this:
x=$(window).height();
$('.content').css('min-height',x+'px');
Help it works
I have a div sidebar which scrolls with the page on my website. Everytime the window resizes, the sidebar would overlap the page content.
Here is a demo page to show the problem:
http://wrasa.org/memberpage_demo.html
Here is the CSS code for the menubar I'm using for my page
.menubar {width: 200px;position: fixed;left: 20px;down: 200px;}
Any suggestions for fixing the problem or using a different code would be welcomed,
Thanks in advance!
As, you are using fixed positioning; div will remain fixed relative to the browser and will overlap if other content shift in the area. This happens because browser don't allocate any space to such divs.
In your problem you be solved by specifying the min-margin to left of main content, which can actually be achieved by min-width css property. just place one more to left of main content with some min width.
You can know more on this from this link
Using a percentage margin in CSS but want a minimum margin in pixels?
I have this website.
The div container contains a background with a grungy look, and the body contains another background that is repeated on the x coordinate.
If you view the site you'll see whitespace on the left and right side. I am wondering how I can set the background images to expand based on the screen resolution. Would it work to set a width based on percentage for each div?
To my knowledge, CSS does not support scaling background images, which is disappointing to say the least. Long story short, you'll probably have to fake it with a fixed-position, z-indexed img tag. That, or what you did: a large image with a background-repeat.
I dont see any issues with what you've got in FF3/IE6/IE7 and chrome. only issue i see is the transparent png in ie6 with the ugly gray behind it.
ie6 I gotta fix but what the customer wants is for the with of the page to size up based on the users computer resolution
Unfortunately, you can't scale the image itself.
What you could do would be remake the div structure so that the inner div contains the center of the grungy background and the sides were tiled through two separate divs. You could then recut the center piece to tile both vertically and horizontally and give it a width that is a percentage of the window size. You could keep it from getting too small via javascript.
This is not an optimal solution, but if the client is set on having it scale with the browser window, this might accomplish it for them.
thanks for all your answers, when i said white space i didnt mean actual white space what i was refering to was that the entire container div wasnt sizing (width wise) towards what the users computer resolution was. and since allot of the divs are set with a background image there is no css code for setting the width on the image but i guess it would work on the divs. but thankfully after talking with the customer he changed his mind and doesnt want it anymore :)