I am creating a fix layout (960px wide) for my web-template. But I want my menu-bar's width as the width of the browser (which means, as wide as possible without margins).
CSS for body :
body{
width:960px;
min-width:960px;
margin:auto auto;
}
How can i do that ?
A layout like this : http://www.google.com/analytics/index.html
(notice the fixed width of body and the menu bar is wider than that)
What I think you want is to have your content in the 960px region centered, but have the ability to have other content (your menu in this case) that can be the full size of the page. To be able to do that, you can't have the width of the body itself set like you do. Instead, you should have some HTML like:
<html>
<head>
:
</head>
<body>
<div id="ContentBox">
: put your content here
</div>
<div id="Menu">
: Menu content here
</div>
</body>
</html>
Then in your CSS:
#ContentBox {
margin: 0 auto;
width: 960px;
}
#Menu {
/* Whatever is applicable */
}
As for the Google Analytics site, they have separate sections of the page at full width, with the color, borders, etc. defined, then a region just like #ContentBox I described above in each section. You can even make it a common class and reuse it, like:
<body>
<div id="HeaderBar">
<div class="ContentBox">
:
</div>
</div>
<div id="GreyBGRegion">
<div class="ContentBox">
:
</div>
</div>
</body>
CSS:
#HeaderBar {
border-bottom: #CCCCCC 1px solid;
background-color: #000000;
color: #FFFFFF;
}
#GreyBGRegion {
border-bottom: #CCCCCC 1px solid;
background-color: #F0F0F0;
color: #000000;
}
.ContentBox {
margin: 0 auto;
width: 960px;
}
You can do it this way: DEMO
#header{
float:left;
padding:15px 0;
width:100%;
}
Related
I'm experiencing an issue with overflow content in divs. I am using SharePoint and some of the content [namely Libraries or Lists or big webparts containing the aforementioned] will extend past the visible display space, but the body content doesn't scroll properly.
My structure looks something like this:
html {100%}
body { background: #010831; font: 500 1em 'Raleway'; height: auto; min-height: 100%; margin:0; overflow:hidden;}
#container { margin: 0 auto; min-height: 100%; }
#topBar {background: #010831; font: inherit; padding: 5px; height: 80px; margin-bottom: 1px;}
.topline {width:100%; height:20px; font-size:0.8em; color:#fff;}
.social {width: 30%; float:right; text-align: right; font-size: 1.2em;}
#searchBar {width: 25%; float:right;}
#searchBox {border-radius: 10px; width: 250px; background:#343a5d; height:25px; color: #fff; font-size:1.2em;}
#quicklaunch {width:18%; min-height: 35%; color: #666; font: 600 1em 'Raleway'!important; padding-top:4px;}
#main {width:100%; background:#fff; display:flex;}
#s4-workspace {width:auto!important; overflow:auto!important; background:#fff;}
#content {width:80%}
#footer {background:#000; width:100%}
<body>
<div id="s4-workspace">
<div id="bodyContainer">
<div id="container">
<!-- this is the beginning of my custom coding, and my own styles. -->
<header id="topnav">
TOP NAV MENU HERE
</header>
<section id="main">
<div id="quicklaunch"> SIDE NAV HERE</div>
<div id="content"> ALL USER DRIVEN CONTENT GOES HERE</div>
</section>
<footer id="footer"></footer>
</div>
</div>
</body>
What's happening is that the Content div that's set to 80% won't display content that extends past the screen properly. The content overflows but the background is my body color (dark Blue). I can't set the content div width to 100%, as that will make the entire div go under the sideNav AND it affects how webparts then display. [They stretch across the entire screen forever, since by default SP allows the webparts to take up full width of their containing zone].
Essentially, all I want is for the background color of my content div to stretch when the content overflows.
I am new in Grails and displaying list of users by using list.gsp page but when list have less items say 1 or 2 then footer is appears after two record instead of taking it's fix position at bottom of browser.
I have tried by updating my css in main.css and also applying css to 'g:layoutBody' tag.but result is same.
Any one can please help me how to set footer at bottom.
i am using following css in 'g:layoutBody' tag-
<g:layoutBody style="position: fixed;left: 0px;bottom: 30px;width: 100%;"/>
my main.css has this code -
body {
background: #ffffff;
color: #333333;
margin: 0 auto;
max-width: inherit;
margin-left:20px;
margin-right:20px;
overflow-x: hidden; /* prevents box-shadow causing a horizontal scrollbar in firefox when viewport < 960px wide */
-moz-box-shadow: 0 0 0.3em #255b17;
-webkit-box-shadow: 0 0 0.3em #255b17;
box-shadow: 0 0 0.3em #255b17;
}
and footer css is
.footer {
background: #abbf78;
color: #000;
clear: both;
font-size: 0.8em;
margin-top: 1.5em;
padding: 1em;
min-height: 1em;
}
.footer a {
color: #255b17;
}
This is a purely HTML/CSS issue, so the same applies for GSPs and standard HTML pages.
What you're after is a "sticky footer", and it can be most easily achieved by wrapping your content in a container which pushes the footer to the bottom of the page.
Here's a working example (updated with content from question): http://jsfiddle.net/spikeheap/ujttV/2/
The key bits are to structure the HTML with something which extends below your content:
<body>
<div class="wrapper">
<div id="content">
...
</div>
</div>
<div class="footer">
This is a footer message
</div>
</body>
Then you can use CSS to set the height of the wrapper to be 100%:
html, body{
height: 100%;
}
.wrapper {
min-height: 100%;
}
Finally your footer can be clever and pull itself up from below the bottom of the page by using a negative margin-top:
.footer {
position: relative;
margin-top: -200px;
height: 200px;
background-color: #cecece;
}
You'll notice pretty quickly that if you make the window really small, or grow your content, that it's truncated, so your content block should have padding equal to the footer height (to make sure it pushes it down when it fills the space:
#content {
padding-bottom: 200px;
}
Update
The layoutBody tag is used for rendering the body of your gsp, so you could have layouts/mytemplate.gsp:
<!DOCTYPE html>
<html>
<head>
<g:layoutHead />
</head>
<body>
<div class="wrapper">
<div id="content">
<g:layoutBody />
</div>
</div>
<div class="footer">
This is a footer message
</div>
</body>
And then in (for example) index.gsp:
<head>
<meta name="layout" content="mytemplate">
</head>
<body>
Welcome to my website. Check out the amazing footer
</body>
I have two pages that differ only by the content contained in the content-box div tag. You can see them here:
Tall Version
Short Version
I have included the html/css code for the short version below. I would like to have the short version display so that if the amount of content does not fill up the entire page, the footer will still stick to the bottom AND the entire area between the header and the footer in the middle of the screen is the white corresponding to the content-box div.
What do I need to change to accomplish this?\
Update 1 I made a new page doing what #smallworld suggested. It can be seen here. This has a sticky footer, but I would like the outside "container" box to extend the height of the page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii">
<style type="text/css">
#main {
width: 100%;
min-height: 100%;
height: 100%;
}
body {
width: 100%;
}
#header,#content { position:relative; right:0;left:0}
#header{
height:75px; top:0;
background: #4396CA;
}
#footer{
width: 100%;
position: relative;
height:50px;
bottom: 0;
left: 0;
background: #4396CA;
}
#content{
top:00px;
background: #F0F8FF;
min-height: 100%;
height: 100%;
}
#content-box {
width: 950px;
margin: 0 auto;
background-color: #FFFFFF;
text-align: left;
border-right: 1px solid #B0B0B0;
border-left: 1px solid #B0B0B0;
padding-bottom: 20px;
padding-top: 20px;
min-height: 100%;
height: 100%;
}
</style>
<title>EmbeddedAnalytics - Test Page</title>
</head>
<body>
<div id="main">
<div id="header">this is header</div>
<div id="content">
<div id="content-box">
<b>Content does not take up all of box. But still want footer to "stick" to bottom</b><br>
line1<br>
line2<br>
line3<br>
Last Line<br></div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
EDIT: See jsfiddle at http://jsfiddle.net/smallworld/gcpNh/ - I have used class="xyz" instead of using id="xyz" in your example. I know that stretching to 100% height shouldn't be as difficult and stressful, but in reality, it is. I feel your pain and that's why trying to help as much as I can. I made one more correction - it should have been padding-bottom, not margin-bottom on "main" class.
CSS:
html { height:100%;min-height:100% !important;margin:0;padding:0; /** see height, min-height values here. **/ }
body{ overflow:auto;padding:0;margin:0;height:100%;min-height:100% !important; /** see height, min-height values here. **/ }
.main {
position:relative;min-height:100%; height:auto; background:cyan;
/** see position, height, min-height values here. Height auto to make sure
that main div resizes if window size changes after initial rendering **/
}
.header { display:block;height:50px;position:relative;background:yellow;text-align:center;padding:10px; }
.content { padding:20px;margin-bottom:50px; /** bottom margin here to make sure that footer does not cover the content area **/ }
.footer { display:block;position:absolute;bottom:0;left:0;width:100%;height:50px;background:red;color:white;text-align:center;padding:10px; /** see position, top, left, and width properties here. **/ }
HTML
<div class="main clearfix">
<div class="header">header</div>
<div class="clearfix content">
<h1>Goal of this fiddle is to demonstrate sticky footer implementation</h1>
And domonstrate this with least amount of CSS and HTML, without using any extraordinary hacks.
<p>Your content goes in here. Add lot more content, and resize browser window to several different sizes to see how your page is rendered as compared to with very little content.</p>
</div>
<div class="footer">footer</div>
</div>
I am new to HTML/CSS. I want a horizontal strip of the screen to be black, on a red background. Using CSS, I define a wrapper with a black background and a body with a red background.
Unfortunately, when there's a horizontal scrollbar, the wrapper only takes up the part of the page that can be seen with the scrollbar at the extreme left. The area of the page to the right of this is entirely red.
Here is the relevant HTML and CSS:
<div id="wrapper">
<div id="page" class="container">
<div id="content">
<h2 class="title">Foo</h2>
<div class="Body">
<p>Bar</p>
</div>
</div>
</div>
</div>
#wrapper {
background-color: #000000;
}
.container {
width: 1000px;
margin: 0px auto;
}
#page {
padding-top: 280px;
}
#content {
float: left;
width: 620px;
padding-right: 40px;
}
body {
margin: 0;
background: #FF0000;
}
you need to specify the minimum width for div #wrapper
#wrapper {
min-width: 1000px;
}
Hi Guys I have this site:
http://www.ryansammut.com/orijen/
Basically so far I managed to make the top part strech as a background, now I need to make the other parts too. I'm not sure how to do it, so I'm asking for ideas how this would be done best, keeping the positioning all relative and the background image would adjust according to the needed content area.
PS. This is only needed for resolutions greater than 1280px, so zoom out if you need to see what's happening.
You can not stretch those elements because they are contained in a div named 'wrapper', which has a maximum width of 1280px.
add the following properties to : header, contentbackground, and footer:
margin-left:auto;
margin-right:auto;
this will make sure the elements are centered.
then remove the width property from #wrapper, and add the background to it so it reads as follows :
#wrapper {
position: relative;
margin: 0 auto;
top: 0px;
padding: 0px;
background-image: url(../images/contentBG.png);
}
However, now we won't see the horizontal stretch of the header anymore, so we need to move #header above #wrapper.
<div id="header">
...
</div>
<div id="wrapper">
...
</div>
Don't use tables, use DIVs only.
No need to include FlowPlayer script two times.
I dont see you use JQuery (no need to include that).
Replace Dreamweaver's rollover images with proper CSS:
.item {background: image.jpg}
.item:hover {background: image_rollover.jpg}
Get sprite images (you can read here: http://css-tricks.com/css-sprites/)
As the original question... you have to use two DIVs for each "row", like this:
#header_wrapper {
float: left;
width: 100%;
background: header_backgroud.jpg;
}
#menu_wrapper {
float: left;
width: 100%;
background: menu_backgroud.jpg;
}
#content_wrapper {
float: left;
width: 100%;
background: content_backgroud.jpg repeat center top;
}
.wrapper {
margin: 0 auto;
width: 1260px;
}
<div id="header_wrapper">
<div class="wrapper">
--- header content ---
</div>
</div>
<div id="menu_wrapper">
<div class="wrapper">
--- menu content ---
</div>
</div>
<div id="content_wrapper">
<div class="wrapper">
--- page content ---
</div>
</div>
You need to change the structure to something like this:
<div id="header">
<div>
<ul>Nav</ul>
</div>
</div>
<div id="mainContent">
<div>Content</div>
</div>
<div id="footer">
<div>Content</div>
</div>
Then the CSS could look something like this:
div#header { width: 100%; background: black; }
div#header div { width: 600px; margin: 0 auto; background: url(...); }
div#mainContent { width: 100%; background: url(...); }
div#mainContent div { width: 600px; margin: 0 auto; }
div#footer { width: 100%; background: black; }
div#footer div { width: 600px; margin: 0 auto; }
It is fast written, hope you can see the idea? I can't see why you would go with position absolute or relative. Use margin: 0 auto; to center divs instead :)