I am making a website however my logo is going behind the header even though the z-index is set higher. I do not know why? I have set a positioning so why is it not working? The overlays are both transparent .png s as I wanted to make it compatible with all browsers and RGBa is not.
The css is:
#charset "utf-8";
body {
margin-left: 0px;
margin-right:0px;
margin-top: 0px;
padding:0px;
z-index:-101;
}
#wrapper{
margin-left:17.3875%;
}
#BG {
height: auto;
width: 100%;
position: fixed;
z-index: -100;
left: 0px;
top: 0px;
min-height: 100%;
min-width: 1040px;
}
/*HEADER*/
/*===================================================================*/
#header{
margin:0px;
padding:0px;
z-index:-98;
position:fixed;
z-index:-99;
width:65.225%;
height:18.2022472%;
background:url(WireFrame/Nav%20Bar.png)
}
.logocontainer{
width:34.1510157%;
height:100%;
margin:0;
padding:0;
z-index:-1;
position:absolute;
}
.logoimage{
max-height:100%;
max-width:100%;
z-index:1;
position:absolute;
}
#navigation{
}
/*BODY*/
/*===================================================================*/
#bodyoverlay{
background:url(WireFrame/Body.png);
position:fixed;
z-index:-99;
height:100%;
width:65.225%;
background-repeat:repeat-y
}
#body{
z-index:-98;
height:100%;
width: 100%;
}
The html is:
<!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>Home</title>
<link href="CSS.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="file:///U|/Year 8/ICT/Webdesign/WireFrame/Background.jpg" name="BG" width="4000" height="2670" id="BG" />
<div id = "wrapper">
<header>
<div id = "header">
<div class="logocontainer">
<img src="WireFrame/Logo.png" class="logoimage" /> </div>
<nav>
<div id = "navigation"> </div>
</nav>
</div>
</header>
<!---->
<div id = "body">
<div id = "bodyoverlay">
</div>
<div id = "Content">
</div>
</div>
</div>
</body>
</html>
There are a number of things wrong with the way you are using the z-index property:
Firstly, you have to define a position for each element that has a z-index.
Secondly, z-index does not order everything in a page absolutely -- there are different stacking contexts.
(You also have multiple z-indexes in the #header)
Here's an excellent article on z-index that everyone should read and that should hopefully help you clear up the issues in your code.
Items that are part of the layout should be CSS backgrounds, not inline images. It makes all of these issues suddenly go away.
Related
I am having a problem that has wasted a lot of time already, I have to ask people for help, Please see the image and the code for clarity
Code page index (parent):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="divParentIframeChatbox" style="
width:700px;
height:5px;
position:fixed;
right:400px;
bottom:5px;
background-color:rebeccapurple;
">
<iframe id="iframeChatBox"
src="http://localhost:53398/chatbox.html"
style="
height:100%;
width:100%;
"></iframe>
</div>
</body>
</html>
Code page iframe(child):
<html>
<head>
</head>
<body>
<div style="
width: 300px;
height: 500px;
position: fixed;
right: 0px;
bottom: 5px;
background-color: red;">
</div>
</body>
</html>
NOTE: For a number of reasons i can't set increase height of divParentIframeChatbox ,
Thanks so much
You need to set the z-index of divParentIframeChatbox to some higher value say:
.divParentIframeChatbox{
z-index: 2147483000;
}
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.
The code at the link below displays fine in Google Chrome and IE9. It displays terrible in IE8. Any ideas for how to make it display correctly in IE8? I would like to keep it as a 3-column layout with a fixed middle column and the sides fluid/liquid/flexible and also fill the vertical space to 100% full height of the web browser.
http://jsfiddle.net/STVinMP/eZ7Nb/
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>title here</title>
<style type="text/css">
.header {
display: table;
width: 100%;
height:100%;
text-align:center;
}
.header > div {
display: table-cell;
vertical-align:top;
}
.col {
width:20%;
}
#rightcol {
width:10%;
background-image:url('http://quetico.info/images/topo.png');
}
#leftcol {
width:10%;
background-image:url('http://quetico.info/left.jpg');
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
}
#midcol {
background:#d0eadd;
/* ffff8b; */
padding-top:55px;
}
</style>
</head>
<body>
<div class="header container">
<div id="leftcol" title="portage photo by Hans Solo"></div>
<div id="midcol" class="col col-2">
<div id="divLeftInd">some text here</div><!-- ######## end of divLeftInd ##### -->
</div><!-- ####### END OF DIV FOR midcol -->
<div id="rightcol"></div>
</div><!-- ####### END OF DIV FOR header container -->
</body>
</html>
i think that background-size not supported in ie 8
You can try with sizingMethod attribute of filter property as proposed in this answer
If I am clear on what your goal is I think this will work.
<html>
<body style="margin:0px; padding:0px;">
<div style="height:100%; width:100%; margin:0px; padding:0px; background-color:#333;">
<div style="width:80%; min-width:960px; margin-left:auto; margin-right:auto; background-color:#fff" height:100%;>
<p>info here</p>
</div>
</div>
</body>
</html>
In a nutshell, i want a right div float to extend vertically 100%
but it only works when i don't include <doctype> on my html
in today's standard, do i really have to add <doctype>?
This is the result in Internet Explorer:
this is just simple html
<html>
<head>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#left {
background:yellow;
float:left;
width:70%;
min-height:100%;
}
#right {
background:pink;
float:right;
width:30%;
min-height:100%;
}
</style>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
in today's standard, do i really have to add <doctype>?
You don't have to do anything, but the absence of the DOCTYPE is essentially asserting that you conform (in the loosest sense of the term) to an unknown/inconsistent "quirks" standard.
I imagine the solution is as simple as setting the height of the parent container to 100% or to a specific pixel height.
ensure that height is set on the HTML and BODY elements.
ensure that height is set on any parent containers.
Working example: http://jsfiddle.net/7xxFj/
<div id="one">
First column
</div>
<div id="two">
second column
</div>
HTML, BODY { height: 100%; }
#one { height: 100%; width: 30%; float: left; background-color: red; }
#two { height: 100%; width: 70%; float: left; background-color: blue; }
As #BoltClock pointed out in the comments, you probably want a layout that can extend beyond 100%. This requires a little more effort (but still works well within the standard).
This article shows several methods for accomplishing layouts with equal column heights. More methods here.
If you are thinking of considering IE (any version for that matter, lets not digress to this topic), then you are better of specifying the DOCTYPE. I have seen many pages which do not do this properly through IE into the famous Quirks mode.
Use this Code
<!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>Untitled Document</title>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#right {
background:blue;
float:left;
width:30%;
height:100%;
}
#left {
background:yellow;
float:left;
width:70%;
height:100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
Sorry if I can't explain with code, I'm newbie with CSS. How can I do this?:
HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS DIV issue</title>
</head>
<body>
<div id="div1">
<img src="image-800x216.gif" />
</div>
<div id="div2">
<img src="image-567x43.gif" />
</div>
</body>
</html>
Is intended to work with IE (all), Opera, Safari, Chrome and FF. Is possible or I'm dreamer?
http://jsfiddle.net/XTkA2/30/
#div1 {
position: absolute;
top: 38%;
right: 1em;
width: 62%;
max-width: 50em;
outline:#999 solid 1px;
}
#div2 {
position: absolute;
bottom: 0.63em;
right: 1em;
width: 46%;
max-width: 35.44em;
outline:#999 solid 1px;
}
I've added outline for you to make divs visible. You may delete them.
Uhm...i don't understand what is your intention...but...do you want to align two images, one above another on the page center or one beside another or both images on right-bottom?
If you want to align elements in page, try this:
/* Both images aligned side-by-side at page center */
div.div1, div.div2
{
float: left;
margin: 0 auto;
}
/* One images at right, another at left */
div.div1
{
float: left;
}
div.div2
{
float: right;
}
Page bottom alignment is not possible...i guess.
Put you can use margin-top css property to do the trick.
Hope it helps.
After applying and mixing your all helpful answers and hours and hours of reading and trying css/html code from different sites... I have what I want; well, almost in 95% due to browsers compatibility. Here's the code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS DIVs alignment issue</title>
<style type="text/css">
#div1 {
width:62%;
min-width:16em;
max-width:50em;
right:1em;
top:38%;
margin-right:1em;
height:auto;
z-index:0;
position:absolute;
}
#div2 {
width:46%;
min-width:10em;
max-width:35.44em;
right:1em;
bottom:6%;
margin-right:1em;
height:auto;
z-index:0;
position:absolute;
}
.stretch {
width:100%;
height:auto;
min-width:10em;
}
</style>
</head>
<body>
<div id="div1">
<img src="http://placekitten.com/800/216" class="stretch" />
</div>
<div id="div2">
<img src="http://placekitten.com/567/43" class="stretch" />
</div>
</body>
</html>
By the way, although I prefer placehold.it to placekitten.com I use the last because the images must resize while screen does too.
You can check the result here. (Thanks to ted)