I'm not a CSS expert so I might be missing something obvious. I'm trying to set a relative size header and footer (so that on larger monitors, the header and footer are larger than on smaller screens). To do this, I'm using a percentage height. However, this only works if I set the position to absolute. The problem is, setting it to absolute means that it overlaps the main part of the screen (inbetween the header and footer). Setting it to relative doesn't work since it relies on items being inside the header/footer.
This is what my header looks like:
.header
{
position:absolute;
top:0px;
background-color:white;
width:100%;
height:30%;
}
the ASPX page simply contains
<div class="header"></div>
Is there a way to get relatively proportioned header and footers?
Thanks
In order to have elements take a percentage height, you need to define the HTML and BODY to have a defined height as well. Since you don't know what this is, use 100%.
html, body {
height:100%;
}
To use percentage heights the parent needs to have a fixed height, because if the parent is height auto then it will depend on the height of the child content....which depends on the parent height etc. I think when you set the position to be absolute it takes the screen viewport as the parent element which does have a fixed size (theory by me), which is why it works with absolute.
I don't think its a good idea to try and do the proportional header and footer based on the browser resolution. It really doesn't make much sense to me, honestly, you're going to need to try and scale up and down the font sizes or images you have in the header to match etc. If you really want I would suggest having different CSS stylesheets which users can choose (or is selected automatically by javascript). This way if someone has a huge resolution they can choose the larger one if they want (or its automatically chosen for them). That way you don't have to deal with any scaling issues.
Related
I have a web page as follows (see img)
A certain div has a width of 100% which is filling the whole viewport.
When checking on Chrome, the viewport size is 500px while the CSS size is 536.
Does anyone have an idea why it's different please ?
Thanks.
Cheers,
Many modern visualization techniques, such as parallax, require larger elements than the actual viewport size and a smart usage of transform properties in order to create particular visual effects and/or illusions.
Your picture is actually showing a part of the parent element displaying properties particular to such techniques, clearly showing: -webkit-logical-width:800px and perspective-origin: 400px 300px.
For any element with a position value other than fixed, width:100% usually results into the child having an equal width with the parent, not with the viewport. There are notable exceptions from this rule, though.
If you need a more in-depth explanation as to why does the parent have a different width than the viewport (and it's parent parent, and so on... - all the way to the viewport), you need to post a Minimal, complete and verifiable example and I'll lay down each of the ancestors of your element affecting its width.
If, on the contrary, you don't really need to know what's going on at parents level, but are looking for a way to make your current element as wide as the viewport, you probably want to give it a width value of 100vw.
I'm trying to make my site responsive and I'm having trouble creating containers divs where their height responds to the content within them. I've tried setting height to 100% but it's not working for.
Most of the content blocks are flowing below each other as I resize my browser but the containers aren't expanding to fit around them.
HomePage
Does anyone know do I have anything fundamentaly wrong in how the page is built that is preventing me from acheiving this?
Cheers.
You need to clear your floats. One example is .mission-statement. When you have multiple divs floating inside a div, the container collapses on itself. In your case, it's only partially collapsing because you have a min-height set.
You do this easily by doing something like this:
.mission-statement:after {
clear: both;
display: table;
content: '';
}
To affect all divs you can change .mission-statement:after to div:after
Images will automatically have a height of 100% of the image relative to the width and the percent tag is percent of the browser window. What you may want is a width tag that might be max-width=*px and let the height be determined by the image itself.
Instead of letting me write you an answer I will refer to a really good thread about this. The solution anyway is something called clearfix.
css - What is clearfix?
Being new to CSS, I have looked at similar posts on stackoverflow regarding this issue, but none of the resolutions seem to help with my site.
I am using a template for the site and trying to edit the CSS so that the page will maintain one width, and not shift it's elements when the window is resized.
An example page can be found here: (removed link for client)
The content is contained within a wrapper currently set to relative position:
#page_wrapper
{
position: relative;
}
I tried to change it to this:
#page_wrapper
{
min-width: 960px;
}
This doesn't seem to be doing the trick though. When I resize the window, everything still shifts. Any ideas what else I need to change?
Your site is using Twitter Bootstrap: twitter.github.com/bootstrap/
It won't be a totally simple process to do what you want but a starting point would be going to this page:
http://twitter.github.com/bootstrap/customize.html
There you could uncheck the "Responsive" checkboxes and change the Grid System elements to be whsatever you want. It may however be best to leave those as they are.
Then download the css files and replace the ones on your site and see if that helps (ensure you make a back-up of your current files first).
There are a few things going on here:
The navigation has float: right on it somewhere. This means that when its width, plus the width of anything it sits next to is wider than its container, it's going to shift so that it can fit.
Your min-width is too narrow If your min-width is 960px, but the width of your navigation, plus the width of your logo (the two elements that sit side by side), plus any margins, paddings, and borders, add up to anything more than 960px, then it's not going to sit in line. You need to either adjust your min-width, or adjust the calculated width of the elements to fit within that 960px minimum. This can be done either by making margins/paddings smaller, decreasing the text size, setting explicit widths, or any combination thereof.
your elements are probably moving around because you have them in the same tag so if you want your elements to hold their positions you need to use a different for each element and align them to your preference perhaps on css or inside the tag(that's up to you). Otherwise in a div tag if you follow the same procedure for each element you shouldn't have any problems. That goes for sentences too... you need to make each word in a sentence be in between individual
I'm working on a website for a client, and I'm not excellent at css... still in the process of learning a lot about divs. I made a div that is supposed to stretch 100% of the page, and it works, unless a user is browsing from a lower resolution (1024 x 768 for example) and has to scroll horizontally, the div will then only extend to the original length of the browser window.
That coupled with the fact that my footer is behaving the same way, and is not sticking to the bottom of the page.
The code/website can be found at:
http://cliqthis.com/temp/roadhouse/index.php
Thank you for any assistance, or an explanation of why this is happening would be helpful as I am still in the process of learning.
You see the scrollbar for resolution 1024x768 because <div id='container'> has a width of 1064 pixels set on it. The parent div will have a minimum width of 1064 due to this.
Are we talking about the black bars not extending all the way to the right?
You need to make sure not only that those divs' widths are 100%, but that all their ancestors' widths are also 100%. With normal (static) positioning, the 100% width means 100% of the element's parent's width.
Using the Web Developer addon in Firefox, with Outline Current Element turned on should prove very helpful in determining which elements aren't as wide as they need to be. (Move your mouse around the page and it will outline the element you're over, and tell you the css selector path to it).
Also you might want to compare the structure to the original template you used. It seems odd to me that, for example, you have an empty div.#footer element, and then a table.foot element after it, rather than inside of it. Perhaps you accidentally broke something there?
Set up a minimum width for the div.
div.class { /* ... */ min-width: ___px !important; /* ... */ }
i really need your help with a CSS-Layout. I tried a few time, however i've no chance (and actually no idea how) to solve it. Moreover I don't even know if it's possible the way I want it!
The #mainContent should always be centered horizontally in the browserwindow. It should be 1024px in width and a 100% of the windowheight. Now the difficult part. I need two divs, one on the left side, one on the right side of the #mainContent. Both should be 100% in height, but should ALWAYS have the rest of the browserwindow. If the browserwindow has only 1024px in width #navLeft and #navRight are invisible.
Is that even possible, if so, HOW?
thank you
1024 is a poor choice of widths. Monitors with 1024 x 768 resolution will ALWAYS get vertical scroll bars. 960px wide is the common choice.
You put the whole thing in a wrapper DIV:
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
Inside you have three DIVS, floated-left with specified widths.
Controlling the visibility, based on the user's browser width needs to be done via JavaScript. CSS alone cannot do this.
CORRECTION: this article explains how, and it's something I never knew you could do.