I am trying to alter a websites header, footer and its carousel area on the homepage. But because the site was designed to start the 980 container in the header, go throughout the entire site and end in the footer, it therefore constrains all elements throughout the entire site. But I need the header, menu, homepage carousel and footer, to be 100% width.
I know to try break out of the container, but because this site is so large, breaking the container and putting it back in wrapping around just the content on every element (of which are included all over the templates) will take so long because of how many pages the container right now is effecting just isn't great for me right now, is there any other way to do this?
Here's a live preview of the site: http://bit.ly/1kpGc2G
Might not be best practice but just something to get me by for now.
It's opencart encase it helps.
Are you asking for the entire site to fill the screen width?
It seems like you just need to give the 980 container a width of 100%. Then style all the other elements to suit, giving them padding left and right to bring them back into line.
Edit Example
You said you didn't mind if it was messy I have this...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Width Test</title>
<style>
.wrapper {
width:100%;
overflow: hidden;
}
p {
color: #ccc;
text-align: left;
}
.header, .article, .footer {
display: inline-block;
text-align: center;
background-color: #444;
width: 100%;
max-width: 600px;
padding: 0 30%;
margin: 0;
}
.article {
background-color: #666;
}
.footer {
background-color: #999;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header"><p>Header</p></div>
<div class="article"><p>Article</p></div>
<div class="footer"><p>Footer</p></div>
</div>
</body>
</html>
Basically I have made this so the padding overflows the wrapper, then used text-align:center to centre the content divs. It isn't perfect but I think this achieves what you are asking for.
There are a few issues in your code:
There is a text-align:left on the sitewide container
Most elements have a width:100% directly on the element, meaning they won't be centred. They should have a set width, and max-width:100%;
I.E. I set #category{ width: 1024px; margin: 0 auto;} to get it centered.
Your carousel image does not have a set width, meaning it goes beyond the screen if it is below 1300px.
Set img{max-width: 100%;}.
#footer:
margin: 26px auto; should center it.
I might have forgotten a few things, but this made the site centered for me, including if I zoom in and out, and excludes a potential hoizontal scrollbar.
Related
This seems to be the most perplexing issue of all time, at least for me. Knowing that this page, aside from the header is broken - I have copied the HTML and tried to carefully remove the WordPress related jazz so you get the html of the page.
JsBin Live Page
What I want you to focus on is the footer sitting in the middle of the page. I remove position:absolute and it sort of moves down.... It needs to stay at the bottom of the page.
This is position:fixed this is the only way it stay at the bottom, but see how the footer follows you? I don't want that.
You might say, do min-height: 100% That is not what I want either because then the container, row and column classes that have height of 100% do not work.
What I am trying to accomplish is: this type of layout. But as you can see the footer rides up...
Yes I have tried position:relative as well: check out position:Relative
So as you can see The Live page I linked you too, from everythin gI read on the internet is the right way to achieve this type of layout., How ever I must be doing something wrong ...
Update 1
Before you suggest I am missing divs, I have validated through a div checker for all of MY example and the divs are correct. I am not missing any divs. This is a pure css issue
Before you mark this a duplicate of x, y and z - I have provided three examples of the positions I have tried and none of them has worked:
position:absolute
position:relative
position:fixed - Not what I want. The footer MUST stay at the bottom of the page.
Finally, as stated min-height: 100% on the wrapper (or any other element) is not acceptable as an answer unless you can specify how I can achieve this type of layout.
The way i usually do this, is to add position: relative to html and position: absolute to the footer itself.
The main disadvantage that you have to set margin-bottom=footer-height for the body
<!doctype html>
<html>
<head>
<style>
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 100px; // is equal to footer height
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="footer">footer</div>
</body>
</html>
See the result https://jsfiddle.net/jy0gsgm4/
Removing height:100% from wrapper stops the spacing below the footer.
This is happening because the total height is the 100% wrapper and the height of the navbar. I would suggest putting the navbar into the wrapper div.
I'm a fan of this method.
display: inline-block;
Pretty self explanatory. HTML (Demo)
<div class="verycoolwrapper">
<!-- tons of cool stuff on page -->
<footer id="footerstay">Blah | Blah2 | Hey | Click Here | Copyright 2090</footer>
</div><!-- // end wrapper -->
CSS: (Demo)
.verycoolwrapper {
width: 960px;
background: pink;
margin: 0 auto;
position: relative; // child elements relative to this, no height needed
}
#footerstay {
// your styles
width: 100%;
height: 150px;
background: #ccc;
display: inline-block;
}
Also, alternately; clear float should work for you.
I am building a website to host an online gameserver list for the game Crysis Wars, and have just found out that it's by far easier just to develop the design in Adobe Fireworks, and add the relevant code after.
The current web page that I am designing has a signin box at the center of the page, and it works beautifully.
That is, until we change the size of the browser window.
This is the web page as it normally looks:
It is displayed correctly, but here's the screenshot of when the browser window was resized:
As can be seen, this is an issue with the page, since visitors will have different screen resolutions, and this problem could easily re-occur.
My question is, how can I force these two CSS objects to maintain their position, and never overlap?
This is troublesome since the signin box centers itself on the web page.
The web page can be viewed at crysis-or.eu (please don't berate me for developing on a live website).
HTML Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html>
<head>
<title>Server Portal | Login</title>
<link href="./css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="navbar">
</div>
<div class="loginui">
</div>
</body>
</html>
CSS:
body {
width:100%;
margin-left:-0px;
background-color:07080A;
}
body > .loginui {
width:400px;
height:400px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background:url("http://crysis-or.eu/img/login_b_bg.png") repeat-x;
}
body > .navbar {
width:500px;
height:100px;
position: absolute;
margin-top:50px;
margin-left:100px;
background:url("http://crysis-or.eu/img/navbar.png") repeat-x;
}
I would recommend the following:
Put the nav bar and the login window in separate wrapper-divs that prevent them from overlapping. You can change your HTML to:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html>
<head>
<title>Server Portal | Login</title>
<link href="./css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header id="top-bar">
<div class="navbar">
</div>
</header>
<section id="main">
<div class="loginui">
</div>
</section>
</body>
</html>
Header and Section act just like Div, the only difference is their semantic significance.
Because the .top-bar and .loginui are no longer direct children of the body, your selectors won't work anymore. Change the CSS selectors to just .top-bar and .loginui instead of body > .top-bar and body > .loginui.
The header needs a specified height, and needs its position to be either 'relative' or 'absolute'. An absolutely positioned child element will be positioned absolutely to whatever the closest parent is that is also absolute, or explicitly relative. The background color is for illustration purposes only, and would be removed for production.
header {
position: relative;
height: 200px;
background-color: red;
}
You want the section to fill as much as it can, so it will need absolute positioning. The trick here, the thing that will fix your problem, is adding a min-height attribute to prevent the section from becoming smaller than its contents, thus allowing overlap.
section {
position: absolute;
top: 200px;
left: 0;
right: 0;
bottom: 0;
min-height: 400px;
background-color: blue;
}
That should work for you. The one problem with this solution is that the login window will be centered with respect to its container, rather than the whole window. It will be 100 pixels lower (one half of the header height) than it is with your current design. In order to fix that, if that's important to you, you would need to use a different method of vertically centering it. Put the top as 50%, then use a negative top margin to compensate for half the height plus half of the height of the header, too. Because it has a fixed height, that's easy: (400px + 200px) / 2 = 300px.
.loginui {
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 0;
right; 0;
margin: -300px auto 0;
background: url('path/to/login_b_bg.png');
}
If you add this, it will create a scrollbar when trying to resize the browser instead of laying the elements on top of eachother
body
{
width:100%;
min-width: 950px; //ADD THIS. It sets the minimum browser width before creating a scroll bar.
min-height: 550px; // This does the same thing for a vertical scroll bar.
margin-left:-0px;
background-color:07080A;
overflow-y: scroll; // vertical scroll bar
overflow-x: scroll; //horizontal scroll bar
}
EDIT: ---------------------------------
After looking at your site and playing around a bit, your min-width is not an important factor, just the min height, if you set the values like this, the menus will never overlap.
body
{
width:100%;
height: 100%;
min-height: 750px; // Stops the menus from touching eachother vertically, but they can still line up in the x-direction.
margin-left:-0px;
background-color:07080A;
overflow-y: scroll; // vertical scroll bar
}
When a user lands on the page, I'd like the container that houses the "search" to take up the whole page.
Easy enough: height: 100%;
User scrolls down if desired, sees rest of content.
This is one of those instances where it seems too good to be true...
Perhaps in many cases the user will scroll down and the page will get bigger...
Is this a good solution?
code:
.ss_search{
clear: both;
margin-top: 25px;
height: 100%;
}
Several things you need to watch out for:
Padding and Margins: These will mess with height:100% depending with the margin is applied. For instance if you put a h1 inside a div with height:100% the margin on the h1 will cause issues for you. Also note: html (or body, I forget which one) also have a 5px or 10px padding associated with them.
Height on html/body: Depending on the browser you may experience a div with height:100% not going 100%. You may need to set html and body to a height of 100%. This is what I usually do.
Nothing more comes to mind. Take a look at this. It will have a full screen green area, then when you scroll you will see a full screen red area:
<html>
<head>
<style>
html, body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.full {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="full" style="background:green">
</div>
<div class="full" style="background:red">
</div>
</body>
</html>
They say, that a single picture can explain more than a tousand words, so here's my "more": http://www.imagebanana.com/view/hcqsz5fs/cols.png
My goal is to have the columns as shown on the image, with them together having 100% body width.
And my fiddle is here: http://jsfiddle.net/c2JH3/ (note that this is just a mockup of my current work).
How can I achieve this?
A Quick Note
In your comments, you are saying that you can't use a background image because the height is variable.
The way to fix this is using multiple images, and tell them to repeat or not to repeat on different parts of the page. But I'll go over this after I answer your question directly.
Short Answer
To get 100% body width, you'll want to use percentages (%) on for your width rules. Like this:
#left {
width: 60%;
}
#right {
width: 40%;
}
Fixing Some Problems
One problem you are bound to encounter when you have content that passes the bottom of the screen. In this case, you need to tell the divs to stay side by side.
This should do the trick:
#left {
position: absolute;
top: 0;
left: 0;
width: 60%;
}
#right {
position: absolute;
top: 0;
right: 0;
width: 40%;
}
Back to the Note
Believe me, you don't want to be using percentages on your widths. It makes sizing and scaling extremely hard to design nicely, and changes that you try to make in the future probably won't work without a complete redesign of your css.
Like I was saying before, you want to use multiple images. You'll have background image on the body tag that - going by the design you provided - has the gray-to-orange fade in it. The css would look like this:
body {
background-image: url('path/to/header.jpg') no-repeat;
}
You would then have a wrapper div like the one you already have, that holds the content and such. Inside the wrapper you have:
A header (the logo and navbar), which would have no background (so you can see the body background).
A featured section which holds that really big image in the middle. You can use negative margins to get it centered.
A subnav section for those images in the middle. This would have it's own background image that has a matching part of the background of the body so that it appears to flow in as the image does.
A content section that holds all of the content of the page. This would have an image repeating vertically to look continuous.
#content {
background-image: url('path/to/slice.jpg') repeat-y;
}
A subfooter section that has the curved part of the page (that gray-to-orange curve at the bottom).
And finally a footer section that has all the stuff on the very bottom.
You can use the same structure on the inner pages, you would just use different images and spacing to change the look of the page.
To Sum Up
You will never, ever need to have a 100% width for your wrapping div. (I say this to generalize, there are certain styles that use this, but they aren't the same kind of design).
What you should always try to do first is create images for the body, header, content, and footer sections that create the look you want.
Then have your wrap be a set width in pixels that will stay in the center of the page, while the margins increase and reveal more of the background image.
Have fun and good luck with your design!
I don't know how to use fiddle. But this worked out fine for me.
I just used the background colors and borders to properly show the differences
<!doctype html>
<html>
<head>
<title>xxx</title>
<style>
body{
margin: 0;
}
#wrap {
width: 100%;
}
#left {
width: 600px;
float: right;
border: 1px solid #000000;
}
#right {
width: 350px;
border: 1px solid #000000;
}
#container_left {
width: 55%;
float: left;
background: red;
}
#container_right {
width: 45%;
float: right;
background: blue;
}
</style>
</head>
<body>
<div id="wrap">
<div id="container_left">
<div id="left">
<p>Content</p>
</div>
</div>
<div id="container_right">
<aside id="right">
<p>Sidebar</p>
</aside>
</div>
</div>
</body>
Cheers!
Thank you all for your answers and ideas. They were helpful and I did learn something new (my biggest 'thank you' goes to #Jon for a really great, great post). But, since I can't solve this neither with percents nor backgrounds (since my design is a little more complicated that the one provided), I made my way with jQuery. To sum up, here's my mockup fiddle.
Note: sometimes you'll need to change left 125 to 126, just to make sure both ends meet.
In my website, some pages are having contents that exactly fit in the screen and some pages having scrolling content. All the pages are having, same html structure.
<body>
<div id="header"></div>
<div id="contentArea"></div>
<div id="footer"></div>
</body>
#header {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #EDEDED;
height: 172px;
margin: 0 auto;
overflow: hidden;
padding-top: 2px;
width: 900px;
}
#contentArea {
background: none repeat scroll 0 0 #FFFFFF;
margin: 0 auto;
padding: 0 0 25px;
text-align: left;
width: 900px;
}
#footer {
border-top: 1px dashed #CCCCCC;
margin: 0 auto;
padding: 0;
text-align: center;
width: 900px;
}
When i move to different pages, in some pages the scroll bar appears due to the content, at that time it looks like the whole webpage moved towards left side for some 20px.
How to make the <body> to adjust itself when the scroll bar appears?
Thanks!
The simplest trick is to always display a scroll bar. This is what HTML5 Boilerplate does:
html { overflow-y: scroll; }
if this doesn't fit your needs you will have to use JavaScript. On page load, detect, if body's height is larger than window's height and if not, move #header, #content and #footer to the left, e.g. via padding, or via margin on the body.
However, you have no simple means to find out, how wide the scrollbars themselves are. This, too, needs a detection via Javascript. (Basically: Create an element -> make it's content scrolling -> see how the content width changes.)
i belive you should specify WIDTH css attribute for BODY class:
body {
width:100%;
}
<body style="height:100%; width:100%; overflow:auto;">
<div id="header"></div>
<div id="contentArea"></div>
<div id="footer"></div>
</body>
Here is a jsfiddle link: http://jsfiddle.net/NGWgz/2/
Without fully testing, I suspect the reason you're seeing this is because you have an absolute width of 900px defined for the various elements that appear in the body of the page.
When the scrollbar appears, that's then eating into your screen real estate, and so the content shifts to maintain its 900px width. I would move to a more fluid sizing model, or at least wrap the content in a container of some sort, so that the scrollbar doesn't interfere with it.
The easiest way for me to do this is to use the min-height and max-height properties, that way you will not have to use the Overflow element and therefore the content will not move.
min-height: ... px/em/%
max-height: ... px/em/%
So you will write in your case:
min-height: the original height that you wanted in pixels, percentage or ems;
max-height: auto;
This way it doesn't matter how much content you put inside your box/wrapper/div , it will make the page height bigger without having to change it every time you add something to your page.
You also have the same properties for width but I have not try them.
My sources:
1-I am making a web page and studying software engineering at SB
2-http://www.w3schools.com/cssref/pr_dim_max-height.asp
PS: I know this is already solved, but I think it might be useful for someone else when they are working on their web pages.