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;
}
Related
this is my code, i want to create box in box in css and html
but when i made it,i couldn't move the boxes, i need a margin from top to put the boxes in the center of the box or moving them in to the main box,how can i do this?
code:
<html >
<head>
<style>
ui {
background-color:red;
padding:100px 100px;
}
div1{
background-color:white;
padding:50px 50px;
}
div2{
background-color:yellow;
padding:50px 50px;
}
</style>
</head>
<body>
<ui>
<div1>hello</div1>
<div2>bye</div2>
</ui>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>
Produces: http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex
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.
i'm trying to make a div have a width using the absolute positioning and it work fine in google chrome but in fierfox it doesnt. why is there a conflict ? i tried the exact same code in both browser and on fierfox doesnt reconize it.
<!DOCTYPE HTML>
<html >
<head>
<meta charset="utf-8"/>
<title>Kelma</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<input type="text" id="center" />
</body>
</html>
and this is the css file
#center{
position: absolute;
left:50px;
right: 50px;
}
Take a look at this:
<!DOCTYPE HTML>
<html >
<head>
<meta charset="utf-8"/>
<title>Kelma</title>
<link rel="stylesheet" href="style.css" />
<style>
#wrapper
{
position: absolute;
left:50px;
right: 50px;
}
#center
{
width:100%;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="text" id="center" value="test" />
</div>
</body>
</html>
i wrapper the input with a div, and i applied the styling to the div, and 100% width to the input.
I've gotten it to work with inline css
here is an example from my personal website
<div style="position:absolute; top:60px; bottom:5%; left:5%; right:5%; width:90%; text-align:center;"> SOME TEXT </div>
I personally like to use the percent as it can look better on some sites. Let me know if this works for you! To see it live: http://cbogausch.com/portal It works in both firefox and chrome
Try this:
#center{
position: absolute;
left:0px;
width: 100%;
}
Isn't this what you mean?
body{padding: 0 50px;}
input{width:100%;
Use this on your css:
#center {
margin: 0 auto;
width: 90%;
}
Hgs,
Vinicius =)
I need a div to expand to the whole page width of the HTML document depending on its content.
Here is the scenario:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Traditional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>testing</title>
<style type="text/css">
body
{
background-color:pink;
padding:0;
margin:0;
}
#testDiv
{
background-color:red;
}
</style>
</head>
<body>
<div id="testDiv">
<table width="2000px">
<tr>
<td>
test
</td>
</tr>
</table>
</div>
</body>
</html>
testDiv will only stretch to the size of browser window, but not the whole page itself. I have gotten this behaviour to work with a table layout, but I would prefer if someone could provide a CSS solution. I also need the solution to work for IE 7.
To stretch to the size of content inside of the <div> just set the display rule to inline-block, For IE7 you will have to include a couple hacks as well.
Example
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
<style type="text/css">
body
{
background-color:pink;
padding:0;
margin:0;
}
#testDiv
{
background-color:red;
display: inline-block;
/* IE 7- hacks */
zoom: 1;
*display: inline;
}
</style>
</head>
<body>
<div id="testDiv">
test
<div style="width: 2000px"></div>
</div>
</body>
</html>
try with this. :)
html {width: 100%; height: 100%; padding: 0; margin: 0;}
body {width: 100%; height: 100%; position: relative; padding: 0; margin: 0;}
#testDiv {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
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)