while editing the template of my blog i saw that header size is set to 660px by the css property
width:660px
.Now i want to make my header spread across the whole lenth of the browser and also i don't want to specify some specific length in pixels ,so that the blog don't look odd in widescreen vs normal monitors .how do i do that ?
width: 100%
should do the job. (Incidentally, if your header is a div or other block element, you can leave the width value away altogether or set it to auto. It will then assume the full width of the surrounding container (in this case, probably the browser window) no matter whether you've specified borders or paddings.
Related
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
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 use VS2010, C#, ASP.NET; I read some data from SQL server and fill my DIV, I don't want to give this DIV a fixed height or scroll bar, rather I want it to have its height automatically set to maximum data, what should I do? how should I set my styles?
also I have another horizontal DIV that should be displayed at the bottom of page, how can I set it so that it is always fixed to bottom of page (not bottom of screen)?
a good example is the Related questions column in this site! and the gray horizontal DIV at the bottom of page
thanks
The default behavior of divs is to contain all their data. If they are not, then you are overriding that behavior somewhere, either by setting an explicit height, or by having content items that are taken out of the normal flow (floats or absolutely positioned items).
I have coded myself into a CSS corner. Have a look at this page:
http://staging.jungledragon.com/image/1082/sizes/large
Open this page and make sure the width of your browser window is smaller than the total width of the content, so that a horizontal scrollbar appears. If you now scroll to the right, you will notice that both the header and footer are broken, the reason being that they are set to 100%. 100% means the width of the viewport, not the browser window itself.
In my search for a solution, this one pops up a lot:
http://www.springload.co.nz/love-the-web/backgrounds-disappear-on-horizontal-scroll/
This is no solution for me since I do not know in advance how wide my footer and header need to be. Also, I cannot simply set it to a very high min width value since that would always trigger scrollbars, even when they are not needed.
How can I extend my headers and footers to the size of the actual browser window, whilst still getting proper horizonal scrollbar behavior. Is it possible at all?
I apologize that this isn't a definitive solution, but if you take a look at the page with a nice CSS debugger you can see that the width of html and body do not stretch to accommodate the overflowing image.
That's why the header and footer don't stretch. width:100% does not mean "width of the viewport", it means "width of the containing block."
The containing block is body. And body isn't stretching. It's is remaining constant regardless of the the width of the image. Thus the width of #wrappertop et al is not 100% of the horizontally-scrolling viewport. It's 100% of the body.
If you're really dead set on the viewport scrolling horizontally and having the header and footer stretch, I would first attempt to apply CSS to body (and/or html, which behaves as a containing block...sort of) to see if you can get them stretching. Then your header and footer probably will, too.
Centering the image or giving it a max-width are two good solutions -- but if that's not what you want, that's your prerogative. :-)
If I get a chance I'll see if I can experiment a little. But it's lunchtime. It's a place to start looking though.
You could set the minimum width of your header and footers to the width of your middle column (#colful), or the maximum width the page will ever be with images included.
min-width: 123px;
And you need to center the middle column too, instead of doing a left margin do something like this:
width: 900px;
margin: auto 0;
... ok nevermind, you already did. You need to contain the image inside that column. You can either manually resize the image, or do an overflow property like "overflow: none;"
I have created a master page in asp.net which dont have any server side control as of now. I used div every where rather than table. There is not even a single Table right now in the page. Now When i tried to use that master page on other pages I found that div section that was holding the body content of the page is not expanding as the content is growing and content is overflowing on other sections.
Do we have any way to make div expandable with keeping minimum height fixed.
i.e. If the content is less than the minimum height set than regions should be shown with minimum height that was set else if content is more than minimum height then height starts growing with the page.
How can we do this.
This is my site where i want to make make about us and contact us page to be expandable.
You can find the css named style.css within the site.
By default a div will expand beyond the size specified using the min-height CSS property. My guess is that you are looking at the wrong thing as the cause of this issue. For your information IE6 I believe ignores the min-height property and will shrink to its content size even when the content size is smaller than the specified min-height.
UPDATE:
When you detect a browser with the problem mentioned above (i.e Internet Explorer 6) use JavaScript to measure the height of the wrapper DIV using it's offsetHeight and then subtract that value from what the min-height should be. If the value is positive then set the style.height value to the min height value.
Try this css:
div {
min-height: 100px;
overflow: hidden;
}
This overflow: hidden is a css-hack so to say. Maybe it helps you out here...