I am aiming for a fixed width layout, with width:1008px across all monitors. Here's my HTML-
<body>
<div id="god_container">
<div id="root">
... all content ...
</div>
</div>
</body>
and CSS -
#god_container{
background:url("/site_media/images/bg-1008.png") repeat-y scroll center center #D4D9DD;
margin:auto;
position:static;
width:auto;
}
#root {
background-color:#FFFFFF;
margin:auto;
width:1008px;
color:#000000;
font-family:Verdana,Arial,sans-serif;
font-size:10pt;
}
body{
color:#373737;
font:16px arial;
line-height:1;
background-color:#D4D9DD;
}
I thought this would solve it. But when I render, the root css does not adhere to 1008px value. Also root's background-color does not show as #FFFFFF i.e. White. It still shows my body's background-color. What am I doing wrong?
UPDATE: To anyone interested I have found excellent ready-made CSS layouts at http://www.dynamicdrive.com/style/layouts/category/C12/
Giving the background-image and color to the body, makes sure it is displayed on all pages, and have the #god_container act as a wrapper for the page, center it by margin:0 auto; and give it the width:1008px;.
Also you don't have to give the position:static; to the #god_container wrapping div, instead use position:relative; to make sure all child divs, are placed inside it even if positioned absolutely.
At last, giving #root a width:100% will place the div to it's parent div width.
Try using this CSS:
body{
color:#373737;
font:16px arial;
line-height:1;
background:url("/site_media/images/bg-1008.png") repeat-y scroll center center #D4D9DD;
}
#god_container{
margin:0 auto;
position:relative;
width:1008px;
}
#root{
background-color:#FFFFFF;
margin:auto;
width:100%;
color:#000000;
font-family:Verdana,Arial,sans-serif;
font-size:10pt;
}
Not sure if I'm missing something here, but it could be much simpler. You don't need a wrapper DIV... the body can handle that. All you need is your root DIV.
CSS
body{
background: #D4D9DD url("/site_media/images/bg-1008.png") repeat-y center;
color:#373737;
font: 16px/1 Arial;
}
#root {
background: #FFFFFF;
color: #000000;
margin: 0 auto;
width: 1008px;
}
HTML
<body>
<div id="root">
... all content ...
</div>
</body>
Here ya go: http://jsfiddle.net/XdA92/1/
Try the below.
give the back ground url to the main body so that it will go to all pages
#god_container{
background:url("/site_media/images/bg-1008.png") repeat-y scroll center center #D4D9DD;
margin:auto;
position:static;
text-align:left;
width:1008px;
}
Related
I have a (relatively) simple layout, with fixed header and footer divs. The content div is split in two "full height" divs with display: inline-block;. The left div is used for navigation and the right one for the actual content and has overflow-y: scroll;. The problem is that I cannot set the width of the right div to fill the remaining space. I have tried using float (as a last resort) but the right div was pushed downwards and, honestly, I'd prefer not to use floats.
Is filling the remaining width possible in my scenario? I would very much like to not hardcode the width of the right div.
Here's the JSFiddle example.
Simple HTML structure:
<html>
<head></head>
<body
<div id="container">
<div id="header">This is the header area.</div>
<div id="content">
<div id="leftContent"> </div>
<div id="textContent">
<p>Hello world (and other content)</p>
</div>
</div>
<div id="footer">This is the footer area.</div>
</div>
</body>
</html>
CSS excerpt:
html, body { margin:0; padding:0; height:100%; }
#container { position:relative; margin:0 auto; width:750px; overflow:hidden;
height:auto !important; height:100%; min-height:100%; }
#header { border-bottom:1px solid black; height:30px; }
#content { position:absolute; top:31px; bottom:30px; overflow-y:none; width:100%; }
#leftContent { display:inline-block; height:100%; width:200px;
border-right:1px solid black; vertical-align:top; }
#textContent { display:inline-block; height:100%; vertical-align:top; overflow-y:scroll;
width:540px; /*would like to not have it hardcoded*/ }
#footer { position:absolute; width:100%; bottom:0; height:30px; }
Edit:
Thanks to Prasanth's answer, I was able to achieve what I wanted. The solution was to set
display:flex; flex-direction:row; on the #content div and
width: 100%; on the #textContent div.
Testing on IE 11 (and downwards in compatibility mode) did not produce unwanted results.* The new version can be found here.
*Edit: This method works properly in IE11. In IE10, the scrollbars do not appear if the content of the #content div requires scrolling. The layout works thought. In IE <10 it does not work at all.
You can use Flexbox to achieve this
Go through this and you will get what you need
.content{ display:flex } .content > div { flex: 1 auto; }
and beware of browser support
The problem: (http://i.imgur.com/mU5HBoa.png)
As you can see in the image above the mainContent floats just below the actual top op the browser view port, i cant make it stick to the top and stay centered at the same time.
Also a quick side question, how do i get the #mainContent, .rightContentBorder and .leftContentBorder to get their height from the #contentBox ID
body {
background-image:url(img/CampusDjursland_Tourneyhjemmeside_grafik/RESTEN/BG_pattern.png);
background-repeat:repeat;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
p {
text-align:left;
}
li {
text-align:left;
}
#contentBox {
margin: 1px auto 1px auto;
width:786px;
height:auto;
min-height:700px;
max-height:none;
}
.leftContentBorder {
width:27px;
height:700px;
float:left;
background-image:url(img/CampusDjursland_Tourneyhjemmeside_grafik/RESTEN/Leftside_orangebar1px.png);
background-repeat:repeat-y;
}
.rightContentBorder {
width:27px;
height:700px;
float:right;
background-image:url(img/CampusDjursland_Tourneyhjemmeside_grafik/RESTEN/Rightside_orangebar1px.png);
background-repeat:repeat-y;
}
#mainContent {
margin: 0 auto 0 auto;
width:732px;
height:700px;
background-color:#CCC;
}
The HTML
<body>
<div id="contentBox">
<div class="leftContentBorder"></div>
<div class="rightContentBorder"></div>
<div id="mainContent">
test
</div>
</div>
</body>
do a basic css reset like this:
* {
margin:0;
padding:0;
}
This removes default paddings margins on all elements.
Have you tried setting the body and html margin/padding in css?
html, body {
padding:0;
margin:0; }
As for getting the divs to take the height of their parent div. You can set divs to have height:100%; but that means nothing if the parent div doesn't have a set height. Your parent div has height:auto so it won't work.
body {
margin:0;
padding:0;
}
I wouldn't really touch the parent html. If the body rule fails, best guess are different values set along the way. If all else fails you could use positioning and make it absolute. Prepare for headaches though.
I have a fixed navbar using curved ribbon images that have transparent bits above and below the actual ribbon and I have a scaling full size background (so I can't make a navbar with a matching background at the top). I would like the page content to disappear behind the ribbon, halfway through the navbar as the user is scrolling.
It's the same problem as these two questions and the answers (which are good) aren't working for me.
Hide scrollable content behind transparent fixed position divs when scrolling the page?
Hide Scrolling Content Under Transparent Header
This is what I don't want:
http://imageshack.us/photo/my-images/213/badnr.jpg/
This is kind of what I want but without the scrollbars:
http://imageshack.us/photo/my-images/534/scrolled.jpg/
Thanks in advance for any help, it's greatly appreciated, this site has and will continue to teach me a lot.
The css z-index attribute should do the trick to place any element in front of or behind another element. Like so:
<style type="text/css">
body, html {
margin:0 auto;
padding:0;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
/* Header Styling */
#header {
color:#FFF;
background: url(/images/header-back.png) repeat-x;
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
z-index:1;
}
#headerWrap {
width:1024px;
margin:0 auto;
height:50px;
}
/* Sub Header */
#subHeader {
position:fixed;
top:50px;
margin:0 auto;
z-index:1;
}
#subHeaderWrap {
height:30px;
width:830px;
border-bottom:thin solid #333;
background: url(../images/subheader.png) repeat-x;
}
/* Contaier */
#container {
margin:0 auto;
width:1024px;
min-height:600px;
}
#containerWrap {
margin-top:50px;
}
/* Menu */
#sidebar {
float:left;
width:140px;
min-height:600px;
}
#content {
border-left:#333333 solid thin;
border-right:#333333 solid thin;
border-bottom:#333333 solid thin;
float:left;
width:830px;
min-height:600px;
padding-top:30px;
margin-bottom:10px;
}
#contentWrap {
width:830px;
margin:0 auto;
padding-bottom:10px;
}
</style>
<div id="container">
<div id="header" style="z-index:1;"/* Places div on top */">
This is transparent.
</div>
<div id="containerWrap">
<div id="sidebar">
Menu Items Here
</div>
<div id="content">
<div id="contentWrap">
<div id="subHeader" style="z-index:1;"/* Places div on top */">
<div id="subHeaderWrap">
This div is transparent too, but is now on top.
</div>
</div>
Anything here is scrollable and will scroll under the divs above with z-index:1;
</div>
</div>
I have found the solution you're looking for.
You're going to use a little Jquery and some CSS. I will assume you're loading the latest version of Jquery in your footer.
The header will be fixed, the elements inside it will be absolute. We will not focus on elements inside the header because that really doesn't matter for this, but if you were to put a menu and logo in the header you would make them absolute.
HTML Div with class header assigned or if you prefer you could just create a <header></header> element, whichever. But for this example we will use a class.
<div class="header">...Your Header Elements In this...</div>
CSS
body {background: url('../img/page-background.jpg') no-repeat top center fixed; background-size: cover;}
.header {position: fixed; top: 0; left: 0; width: 100%; height: 100px; background: transparent;}
JS - I use a seperate JS file and then load this after I've loaded Jquery in the footer.
$(window).scroll(function() {
"use strict";
var windowYmax = 1;
var scrolledY = $(window).scrollTop();
if (scrolledY > windowYmax) {
$('.header').addClass("hide-content");
} else {
$('.header').removeClass("hide-content");
}
});
Add this CSS for new class assigned:
.hide-content {background: transparent url('../img/page-background.jpg') no-repeat top center fixed; background-size: cover;}
Here is a JSfiddle: The Fiddle
I was not able to get the JS to work in JSfiddle for some reason, maybe someone can fix that issue, but I don't really have the time to mess with JSfiddle much, but wanted to provide an example to the end result. So I just added the class that gets assigned by the JS to the div in the HTML and you can see the result in the preview pane.
I have a title (h1) which is centered on the page. I want to add lines to the left and right of the title, so that they fill the rest of the page's width.
However, I want the lines to adapt to the title's width, which is dynamic. So, I want the line's width to be dynamically calculated.
Here's an example of what I'm trying to accomplish: http://jsfiddle.net/cAEqE/1/
In the example I set the lines' width to 35% so they could get the effect that I want. However, if the title is longer, it will break into 2 lines, and I don't want that to happen.
My boss told me to avoid javascript, so it would be excellent to use only CSS. However, if this turns out to be impossible, I will turn to good old jQuery.
Cheers!
Edit: the website has a background-image, so I can't use a background on the h1. Thanks!
You can write like this:
CSS
h1 {
font-size: 26px;
text-align:center;
display:inline-block;
*display:inline;/* For IE7*/
*zoom:1;/* For IE7*/
background:#fff;
padding:0 10px;
}
#title {
text-align:center;
border-bottom:1px solid #97999C;
height:10px
}
HTML
<div id="title">
<h1>TITLE TEST</h1>
</div>
Check this http://jsfiddle.net/cAEqE/27/
UPDATED
Check this http://jsfiddle.net/cAEqE/63/
Instead of using divs for the lines, you should use a background image on the parent div.
For example, your HTML would be much simpler:
<div id="content">
<h1>TITLE TEST</h1>
</div>​
And your CSS would be:
h1 {
font-size: 26px;
background-color: white;
display:inline;
padding:0 30px;
}
#content {
text-align:center;
width:100%;
background:transparent url(https://jira.atlassian.com/s/en_UKtovngv/725/4/1.0/_/images/mod_header_bg.png) repeat-x left center;
margin:0;
padding:0;
}
I've stolen a fair bit of this code from Jira which does basically what you're after.
I want my footer to take height same as the remaining bottom space. Currently I'm using following css for footer:
clear: both;
float: left;
background-color: #1F1102;
color: #E4F2FA;
min-height: 60px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
padding: 0;
padding-top: 10px;
text-align: left;
width: 100%;
min-width: 1000px;
margin: auto;
The result is:
Here as you can see the black has take only minimum height. I want it to take whole remaining space after it [that is marked with question marks]. Which changes do I have to make to get this?
note:- I don't want to give position:fixed to make it stick to bottom.
Well, the short answer is, You Can't!
The longer answer? You can fake it.
Why can't you?
Because a block level element is not able to strech and fill a space in height.
Fake it how?
Use the same background color as the footer for the container (or the same background image), that will cause it to appear like it's always fills up the entire space.
This is now possible with flexbox using a method similar to what is described here https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/. Do this, except put the flex-grow: 1 in the footer element instead of the content element (in the article it's listed as flex: 1).
You don't really can make a block-element span to the full height available in CSS. Best way is find use some workaround, which looks alike.
For example you may use a background-color (for the body/wrapper) or a centered background-image positioned to the bottom…
This worked like a charm for me (originally from how-to-keep-footer-at-bottom-of-page-with-css):
Put this in your css:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ededed;
padding:10px;
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
Then in your index/master/_layout/whatever:
<body>
<div id="wrapper">
<div id="header">
</div><!-- #header -->
<div id="content">
</div><!-- #content -->
<div id="footer">
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
I had the same type of problem. What worked for me was to add a few pixels of padding to the footer and it ended up taking up the bottom of the page.
This is what did it for me:
footer{
padding-bottom:10px;
}