I am trying to center my webpage. Also there is a min 1000px with and it scales up. Currently my page as it scales it is off centered 30%-center-70%. I am confused as to why this is happening. If anyone can explain why this is happening that would be great.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<style type="text/css">
#page {
position:relative;
display:block;
width:75%;
margin:auto;
min-width:1000px;
z-index:0;
}
#pageImg {
position:absolute;
width:75%;
margin:auto;
min-width:1000px;
z-index:1;
}
#navBarImg {
position:absolute;
width:75%;
margin:auto;
min-width:1000px;
z-index:2;
}
</style>
</head>
<body>
<div id="page">
<img id="pageImg" src="../Navigation/backgroundImg.png" />
<div id="navBar">
<img id="navBarImg" src="../Navigation/navBarBGImg.png" />
</div>
</div>
</body>
</html>
Maybe try 50% on your page width... I think you got your result from doing a 75% of 75%...
example - http://jsfiddle.net/rob_towner/q8vKK/
#page {
position:relative;
display:block;
width:50%;
margin:auto;
min-width:1000px;
z-index:0;
}
There is additional code to consider that you haven't posted yet. This can be inferred because the code you did post works as you intend it to. A working example (the 1000px width won't fit in the default window size of the rendered window, use the sliders to expand it and see your code is working).
Your CSS I used:
#page {
position:relative;
display:block;
width:75%;
margin:auto;
min-width:1000px;
z-index:0;
}
#pageImg {
position:absolute;
width:75%;
margin:auto;
min-width:1000px;
z-index:1;
}
#navBarImg {
position:absolute;
width:75%;
margin:auto;
min-width:1000px;
z-index:2;
}
Related
I am trying to add a min width to a div that uses a fixed position. I'm not sure if its possible my code below works fine if I remove the fixed positioning.
What I am trying to achieve is to protect the text in the red area (contains links) from being resized below certain 200px;
EDIT THIS IS THE FULL CODE
<!doctype html>
<html>
<head>
<style>
#header{
height:60px;
width:100%;
background-color:#000;
position:fixed;
top:0;
left:0;
}
#leftdiv{
width:15%;
height:200px;
background-color:#ED6062;
float:left;
position:fixed;
left:0;
top:60px;
min-width:100px;
}
#middlediv{
width:25%;
height:200px;
background-color:#F0E92B;
float:left;
position:fixed;
left:15%;
top:60px;
}
#rightdiv{
width:60%;
height:200px;
background-color:#26D978;
float:left;
position:fixed;
left:40%;
top:60px;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id='header'></div>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</body>
</html>
JSFiddle https://jsfiddle.net/85mpvxo7/
The min-width works as expected, your problem is that #middlediv has left: 15% and is on top of #leftdiv and #leftdiv is actually wider than you can see it behind #middlediv.
I'm not sure if it fullfills all your requirements, but check this, I'm using a div wrapper with grid display so the left grid item has a width with max-content. Then the other two divs need to use the rest of the space so I put them inside another div. https://jsfiddle.net/n3o679pf/
EDIT: It can be cleaner using just a flex on the wrapper https://jsfiddle.net/n3o679pf/2/ so no need for that ugly #therest div I put using a grid.
<div id='header'></div>
<div id='wrapper'>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</div>
and the CSS
#wrapper {
display: flex;
width: 100%;
position: fixed;
top:60px;
margin: 0;
}
#leftdiv{
height:200px;
background-color:#ED6062;
min-width:200px;
}
#middlediv{
width:35%;
height:200px;
background-color:#F0E92B;
}
#rightdiv{
width:65%;
height:200px;
background-color:#26D978;
}
I'm trying to make a site that scales properly based on browser size. I'm aware that usually requires to keep all width and heights set to 100%, however I have no clue how to set it when there's a minimum-height and minimum height for the header and footer. A school logo will be in the header which is unreadable when too small, and a google calendar in the sidebar.
What I'd like to do is set it up so that the header and subheader (dark blue and dark grey bars) are set to be a fixed position. The sidebar (black bar) set to fixed, as well as the footer (light grey). The content section (white box) I'd like to be the only scrollable section that contains all of the news and updates. No matter how I set it up something is always moving inappropriately.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Website Layout Test
</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
</head>
<body>
<div id="header-container">
<div id="header"></div>
<div id="sub-header"></div>
</div>
<div id="content-container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
and the css
#header-container{
width:100%;
height:96px;
position:relative;
}
#header{
width:100%;
background-color:#013066;
height:60px;
position:fixed;
}
#sub-header{
width:100%;
background-color:grey;
margin-top:60px;
height:36px;
position:fixed;
}
#content-container{
width:100%;
height:100%;
position:relative;
padding-bottom:55px;
background-color:pink;
}
#content{
background-color:white;
float:left;
height:100%;
width:100%;
position:relative;
}
#sidebar{
width:315px;
height:100%;
background-color:black;
position:fixed;
right:0px;
}
#footer{
position:fixed;
bottom:0px;
height:40px;
width:100%;
background-color:#f6f6f6;
}
add z-index:10 to #header-container....and all your problems will be solved!!
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Website Layout Test
</title>
<style>
#header-container{
width:100%;
height:96px;
position:relative;
z-index: 10;
}
#header{
width:100%;
background-color:#013066;
height:60px;
position:fixed;
}
#sub-header{
width:100%;
background-color:grey;
margin-top:60px;
height:36px;
position:fixed;
}
#content-container{
width:100%;
height:1021px;
position:relative;
padding-bottom:55px;
}
#content{
background-color:white;
float:left;
height:100%;
width:100%;
position:relative;
border: 10px solid red;
}
#sidebar{
width:315px;
height:100%;
background-color:black;
position:fixed;
right:0px;
}
#footer{
position:fixed;
bottom:0px;
height:40px;
width:100%;
background-color:#f6f6f6;
}
</style>
</head>
<body>
<div id="header-container">
<div id="header"></div>
<div id="sub-header"></div>
</div>
<div id="content-container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
I don't think you need all the position: relative; stuff in there if you're using floats. Another thing you can do is add "overflow: auto" to the content div and do "overflow: hidden" on the others. Have you looked into bootstrap. This is very easy if you're using bootstrap. Check out: http://getbootstrap.com/ , it makes this type of stuff very very easy.
I am using four DIVs: container, header, content and footer.
Based on the text or images the content DIV is expanded but the header and footer div do not expand in IE7, IE8 and IE9 but works fine in Firefox, IE10 and IE11.
HTML:
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
CSS
<style>
body {
height:100%;
margin-left: 0;
margin-top: 0;
padding:0;
width:100%;
position: relative;
display:inline-block;
}
#header {
top:0px;
height:75px;
width:100%;
}
#container {
display:table;
width:100%;
height:100%;
}
#content {
width:100%;
height:auto;
}
#footer {
top:5px;
bottom:0px;
height:45px;
width:100%;
}
</style>
Any ideas?
You have a fixed value on footer and header
#footer
{
top:5px;
bottom:0px;
/*height:45px;*/
width:100%;
}
#header
{
top:0px;
/*height:75px;*/
width:100%;
}
When it has fixed value, the element won't expand. The min-height could be a simple solution but a browser that doesn't support CSS2.0 won't process it right and could give you an unexpected result.
ANSWER UPDATED...
I'm giving you an answer that you might have expected. I still don't know what you are trying to achieve, what kind of layout do you need, and etc. But with a wild guess, I tweaked this code. It's going to be the exact answer for you if what you wanted was making header and footer responsive to the content div.
body {
margin-left: 0;
margin-top: 0;
padding:0;
}
#header {
top:0px;
width:100%;
height:75px;
position:absolute;
background-color:#eaeaea;
}
#content {
display:table;
padding:75px 0 45px;
height:150px;
position:relative;
}
#footer {
bottom:0px;
width:100%;
height:45px;
position:absolute;
background-color:#1d1d1d;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="content">
<h3>Expanding as you expected....</h3>
<h5>
* Try remove these h3 and h5 element. <br/>
the result will be nothing on your screen because no dimension is given to content div.
</h5>
<div id="header"></div>
<div id="footer"></div>
</div>
</body>
</html>
Try and see above code result and test how it expands as the content div gets smaller or bigger.
style.css
body
{
height:100%;
margin-left: 0;
margin-top: 0;
padding:0;
width:100%;
position: relative;
display:inline-block;
}
.header
{
top:0px;
height:75px;
width:100%;
}
.container
{
display:table;
width:100%;
height:100%;
}
.content
{
width:100%;
height:auto;
}
.footer
{
top:5px;
bottom:0px;
height:45px;
width:100%;
}
**index.xhtml**
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:pm="http://primefaces.org/mobile"
>
<f:view>
<h:head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
</h:head>
<h:body>
<div class="container">
<div class="header" class="ui-layout-unit-header ui-widget-header">
<ui:include src="${ModuleGenerator.headerPageh}" />
</div>
<div class="content" class="ui-panel-content ui-widget-content">
<ui:include src="/pages/system/homeContent.xhtml"/>
</div>
<div class="footer" class="ui-layout-unit-footer ui-widget-header">
<ui:include src="${ModuleGenerator.headerPageh}" />
</div>
</div>
</h:body>
</f:view>
</ui:composition>
I have posted my full code of my layout...i hope it will okey for you to undestand yourself and reply.
this page working fine in IE10,IE11 and firefox but not works in IE6,IE7 and IE8.
what i am trying to achieve is? when the content(width) of div is expand dynamically the header and footer div(width) also expand based on content(width).
When we scroll down the page on browser then that page need to get centre alignment.
i am the beginner.
if you need further details post me.i will reply.
having a very hard time getting my header image to be centered.
body {
font-family:Verdana, Genova, sans-serif;
background-color:#000;
}
divWrapper {
width:700px;
margin:20px auto;
}
divHeader {
width:700px;
background-color:#999;
}
and my html...
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Just Messing Around</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="divWrapper">
<div id="divHeader"><img src="raiderd.png" width="405" height="68"/></div>
</div>
</body>
</html>
just seems to stay stuck in the top left no matter what i do...
the "#" for IDs are missing
#divWrapper {
width:700px;
margin:20px auto;
}
#divHeader {
width:700px;
background-color:#999;
}
The image won't be centered just because you have two nested tags of the same width. You might try using ...
#divHeader img {
display:block;
text-align:center;
}
<div id="divHeader"><img src="raiderd.png" width="405" height="68"/></div>
Truthfully, I forget (and I'm eating dinner). It all depends on what the final look of the header div will be. Everything centered? In that case, I might put text-align:center; on the <div> . You should get it by tinkering, though.
Above is true, also the #divHeader needs to have margin: auto; width must be smaller than the wrapper..
Check out this Jsfiddle. Change the text for your image and increase the divHeader width to be the size of your image (must still be less than your wrapper).
http://jsfiddle.net/f5yGQ/
body{
width:90%;
}
#divWrapper {
width:700px;
background-color:#999;
margin:auto;
}
#divHeader {
width:20px;
margin: auto;
}
You can ignore the body attribute
Okay so I haven't been able to find a question with an answer yet, so I decided to make my own.
I am trying to create a 100% fluid layout, which technically I have done.
http://stickystudios.ca/sandbox/stickyplanner/layout/index2.php
BUT, what I want to do now, is to make the page 100% in HEIGHT... But I don't want the page to scroll I want the inner DIV to scroll.
So I believe in short I want it to detect the height of the viewport screen, go 100%, and then IF content is longer then the screen, scroll the specific DIV, NOT the page.
I hope this makes sense.
<html>
<body style="overflow:hidden;">
<div style="overflow:auto; position:absolute; top: 0; left:0; right:0; bottom:0">
</div>
</body>
</html>
That should do it for a simple case
I believe this will work for your case
<html>
<body style="overflow:hidden;">
<div id="header" style="overflow:hidden; position:absolute; top:0; left:0; height:50px;"></div>
<div id="leftNav" style="overflow:auto; position:absolute; top:50px; left:0; right:200px; bottom:50px;"></div>
<div id="mainContent" style="overflow:auto; position:absolute; top:50px; left: 200px; right:0; bottom:50px;"></div>
<div id="footer" style="overflow:hidden; position:absolute; bottom:0; left:0; height:50px"></div>
</body>
</html>
this example will give you a static header and footer and allow the navigator and content area to be scrollable.
This is a different way to do this with all abs panels, it will fail on IE6, but I can provide the workaround CSS for IE6 if that is a requirement:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fluid Layout</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style rel="stylesheet" type="text/css">
body { background-color:black; margin:0px; padding:0px; }
.pageBox { position:absolute; top:20px; left:20px; right:20px; bottom:20px; min-width:200px}
.headerBox { position:absolute; width:100%; height:50px; background-color:#333; }
.contentBox { position:absolute; width:100%; top:52px; bottom:32px; background-color:blue; }
.footerBox { position:absolute; width:100%; height:30px; background-color:#ccc; bottom:0px; }
.contentBoxLeft { position:absolute; width:20%; height:100%; background-color:#b6b6b6; }
.contentBoxRight { position:absolute; width:80%; left:20%; height:100%; background-color:white; }
.contentBoxLeft,
.contentBoxRight { overflow:auto; overflow-x:hidden; }
</style>
</head>
<body>
<div class="pageBox">
<div class="headerBox">Header</div>
<div class="contentBox">
<div class="contentBoxLeft">ContentLeft asdf asdf adsf assf</div>
<div class="contentBoxRight">ContentRight asdf asdfa dasf asdf asdfd asfasd fdasfasdf dasfsad fdasfds<br /><br />asdfsad ff asdf asdfasd</div>
</div>
<div class="footerBox">Footer</div>
</div>
</body>
</html>
make overflow:auto for the div
overflow:auto;
on the DIV style
You should just know that the size of the div should increase so it can show scrolls in it.
If you increase the page's size (which should be with style="overflow: hidden;" on the body)
it won't work.
If you don't want to use position:absolute (because it messes up your print out if your margins need to be different than all zeros) then you can do it with a little bit of JavaScript.
Set up your body and div like so to allow the div to scroll:
<body style='overflow:hidden'>
<div id=scrollablediv style='overflow-y:auto;height:100%'>
Scrollable content goes here
</div>
</body>
This technique depends on the div having a set height, and for that we require JavaScript.
Create a simple function to reset the height of your scrollable div
function calculateDivHeight(){
$("#scrollablediv").height(window.innerHeight);
}
And then call this function on both page load and on resize.
// Gets called when the page loads
calculateDivHeight();
// Bind calculate height function to window resize
$(window).resize(function () {
calculateDivHeight();
}
You can try this:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style rel="stylesheet" type="text/css">
.modal{width:300px;border:1px solid red;overflow: auto;opacity: 0.5;z-index:2;}
.bg{background:-webkit-linear-gradient(top,red,green,yellow);width:1000px;height:2000px;top:0;left:0;}
.btn{position:fixed;top:100px;left:100px;}
</style>
</head>
<body style='padding:0px;margin:0px;'>
<div class='bg' style='position:static'></div>
<div class='modal' style='display:none'></div>
<button class='btn'>toggle </button>
</body>
<script>
var str='',count=200;
while(count--){
str+=count+'<br>';
}
var modal=document.querySelector('.modal'),bg=document.querySelector('.bg'),
btn=document.querySelector('.btn'),body=document.querySelector('body');
modal.innerHTML=str;
btn.onclick=function(){
if(bg.style.position=='fixed'){
bg.style.position='static';
window.scrollTo(0,bg.storeTop);
}else{
let top=bg.storeTop=body.scrollTop;
bg.style.position='fixed';
bg.style.top=(0-top)+'px';
}
modal.style.display=modal.style.display=='none'?'block':'none';
}
</script>
</html>