I have a outer div which is working correctly in chrome, firefox but not in IE.. I have some contents inside outer div.. to make it center aligned or middle of page i gave this width:970px; height:630px; to outer div... so that i got the contents at the center in chrome and Mozilla... but in the case of IE 7.. in IE its left aligned..
here is my css....
<style type="text/css">
body, html
{
font-family:helvetica,arial,sans-serif;
font-size:90%;
}
div.outer
{
display: block;
margin-left: auto;
margin-right: auto;
width:970px;
height:630px;
position:relative;
}
</style>
here is my full code:
<head><title>home</title>
</head><body class='claro'><div class='outer' style="border:1px solid black;">
<div id="dottedBorderhome">
</div>
<div id="dragIconhome">
</div>
<div class="claro" id="menuDiv2" onclick="setWidgetproperty(this.id,'x','navMenu2');" onmousedown="setMenuBarProperty('navMenu2');" onmouseup="setDocStyle(this.id)" style="border: 1px dotted white; left: auto; position: absolute; top: 17px;">
<!-- here one menu bar will come -->
</div>
<div class="claro" id="divlabel43" onclick="setWidgetproperty(this.id,null,'divlabel43')" onmouseup="setDocStyle(this.id)" style="left: 50px; position: absolute; top: 92px; text-align: right; font-family: Times; font-size: 15pt; font-weight: bold;" >
<label id="label43" onclick="setLblProperty(this.id)" onmouseover="editName('divlabel43',this.id,'label')">
Worklist Manager
</label>
</div>
<div class="claro" id="htmlTableDiv9" onmouseup="setDocStyle(this.id)" style="left: auto; position: absolute; top: 130px; height:70px; width:150px;">
<!-- here its contains table -->
</div>
<div class="claro" id="divImage2" onclick="setWidgetproperty(this.id,'xy','image2')" onmouseup="setDocStyle(this.id)" style="left: auto; position: absolute; top: 70px;">
<img class="images" id="image2" name="Search-icon2.png" onclick="setImgProperty(this.id)" src="images/uploads/Search-icon2.png" style="height: 50px; width: 58px;">
</div>
<div class="claro" id="menuDiv1" onclick="setWidgetproperty(this.id,'x','navMenu1');" onmousedown="setMenuBarProperty('navMenu1');" onmouseup="setDocStyle(this.id)" style="border:1px dotted white; left: auto; position: absolute; top: 640px;">
<!-- here another menu bar -->
</div>
<div id="CWPWORKLIST__1" onclick="setWidgetproperty(this.id,'xy','inner__CWPWORKLIST__1')" ondblclick="editDataGridResponseMapping(this.id)" onmouseup="setDocStyle(this.id)" style="left:auto; position:absolute; top:340px; height: 296px; width: 921px;">
<!-- here another table-->
</div>
</div></body>
As Sven suggested, https://stackoverflow.com/questions/4742877/center-align-div-in-internet-explorer likely holds your answer. Either you've got non-valid HTML that is putting IE7 in quirks mode, or you're missing the doctype.
Try this
<style type="text/css">
body, html
{
font-family:helvetica,arial,sans-serif;
font-size:90%;
}
div.outer
{
display: block;
margin:0 auto;
width:970px;
height:630px;
position:relative;
}
</style>
Use code with proper doc type.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Related
I am trying to resize the icon on the upper left side. I tried to use resize in css but it doesn't change its size when I resized my browser. However, my main image in the middle and all the images on the bottom are able to be resized dynamically. Please give me some advices! Thanks :)
This is the html:
.icon{
display: inline-block;
position:absolute;
left:0;
margin-left:8px;
}
.icon img{
max-width: 45%;
height: auto;
resize: both;
vertical-align: center;
top:0px;
left:20px;
}
.header-text{
display: inline-block;
right:0;
margin-right:8px;
position:absolute;
height:900px;
}
#name{color: #707070;
margin-top: 40px;
margin-bottom: 5px;
font-size: 2.2vw;}
#ninja{
color: #A8A8A8;
margin-top: 1px;
font-size: 2vw;
position:absolute;
top:100px;
right:0px;
}
.line {
position: absolute;
top: 155px;
left: 10px;
height: 8px;
width: 100%;
background-color: #FFCCFF;
}
#nz{
position: relative;
top: 155px;
left: 7.25px;
}
#feature{
position: relative;
top: 145px;
left: 7.25px;
}
#feature h1{
color: #707070;
font-size: 3.2vw;
}
table{
table-layout : fixed
}
#baby-seal{
margin-top: 1px;
margin-bottom: 1px;
font-size: 3.2vw;
}
#wiki-link{
margin-top: 1px;
}
#wiki-link a{
font-size: 2.2vw;
}
.work{
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='/Users/yianlai/Desktop/UDACITY-PROJECT1/project1.css'>
</head>
<body>
<div class='icon' align='left'>
<img src='http://rlv.zcache.ca/kiwi_new_zealand_emblem_sticker-r12b5f18476154510b5c44ff86c3110e5_v9wth_8byvr_324.jpg'>
</div>
<div class='header-text'>
<div align='right'id="name"><h1>Baby Seal</h1></div>
<div align='right' id="ninja">NiNJA</div>
</div>
<div class="line"></div>
<div id="nz" align="center"><img src='http://www.wallcoo.net/nature/new_zealand_landscape/images/A%20melting%20glacier%20in%20New%20Zealand.jpg' style="width: 100%"></div>
<div id="feature">
<h1>FEATURE WORK</h1>
<table style="width:100%">
<tr>
<td>
<div class="work">
<div align="left"><img style="width: 100%" src='http://babyanimalz.com/wp-content/uploads/2013/03/baby-seal-picture.png' ></div>
<div id="baby-seal"><h1>Baby Seal</h1></div>
<div id="wiki-link">https://en.wikipedia.org/wiki/Seal</div>
</div>
</td>
<td>
<div class="work">
<div align="left"><img style="width: 100%" src='http://babyanimalz.com/wp-content/uploads/2013/03/baby-seal-picture.png' ></div>
<div id="baby-seal"><h1>Baby Seal</h1></div>
<div id="wiki-link">https://en.wikipedia.org/wiki/Seal</div>
</div>
</td>
<td>
<div class="work">
<div align="left"><img style="width: 100%" src='http://babyanimalz.com/wp-content/uploads/2013/03/baby-seal-picture.png' ></div>
<div id="baby-seal"><h1>Baby Seal</h1></div>
<div id="wiki-link">https://en.wikipedia.org/wiki/Seal</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
I would remove the <img> from the .icon container and set it as the background image.
The updated css for .icon would be this:
.icon{
display: inline-block;
position:absolute;
left:0;
margin-left:8px;
height:150px;
width:18%;
background:url(http://rlv.zcache.ca/kiwi_new_zealand_emblem_sticker-r12b5f18476154510b5c44ff86c3110e5_v9wth_8byvr_324.jpg) no-repeat;
background-size:contain;
background-position:center center;
}
Of course you can set the height and width to whatever you want. This way the icon will resize with the window and always stay in the center.
See this fiddle for a demo. (resize the frame window to see it in action)
I'm crap with css.
I began building a page with the body set to absolute, and build all elements around this.
When the browser zoom changes, the positioning goes & nothing looks correct (only correct # 100% ).
I changed the body to be relative and re-structed so the main divs that build up the page are running off of the body.
However, it seems I've truly funked this one.
nearly all elelments hide away when updating the body to be relative, even though I understand absolute & relative to work together (parent/child).
ScreenShots:
(Should Look like this (all position absolute))
(The issue I'm trying to resolve. zooming in/out causes the tabs to move up/down (above & below))
(This is when I set body to relative, yes, that's the whole page shot.(below))
css:
body{
position: relative;
margin: 0;
width: 100%;
height: 100%;
//font-family: Arial;
zoom: 100%;
}
#invoiceOptions{
position: absolute;
background-color: #f9dede;
top: 11.9%;
left: 10%;
width: 80%;
height: 33.5%;
border-radius: 10px;
font-size: 15pt;
}
#referals{
position: absolute;
//background-color: #C93939;
top: 11.9%; //11
left: 10%;
width: 80%;
height: 33.5%;
font-size: 15pt;
border-radius: 1%;
}
#orders{
position: absolute;
//background-color: #C93939;
//background-image: url('background.png');
background-repeat: no-repeat;
top:11.9%;
left:10%;
width: 80%;
height: 75%;
border-radius: 1%;
font-size: 15pt;
overflow: scroll;
overflow-x: hidden;
overflow-y: hidden;
}
#orders:hover{
overflow-y: visible;
}
#toolbar{
position: absolute;
background-color: white;
width: 80%;
left: 8%;
height: 20%;
border-radius: 5px;
}
#border1{
position: absolute;
width: 10%;
height: 100%;
background-color: black;
//same for border2, but on right.
}
.tab-links{
position: absolute;
width: 40%;
top: 28.5%;
left: 3%;
background: no-repeat;
border-radius: 20px 20px 0px 0px;
background-color: #dbdbdb;
box-shadow: -1px 1px 1px rgba(0,0,0,0.15);
}
html.
<body>
<div id="toolbar">
<div style="">
<h4 style="position: absolute; top: 5%; left: 15%;">Welcome <?php echo $User[0]; ?>!</h4>
<ul class="tab-links">
<li class="active">Orders <div id='orderCount' style='display: inline;'></div></li>
<li>Referrals <div id='referralCount' style='display: inline;'></div></li>
<li>Options</li>
</ul>
<div style="">
<a href="https://XXXXXXXX.com/mysagepay/" target="_blank">
<IMG style="position: absolute; border-radius: 5%; left: 60%;" border=0 alt=SagePay src="https://live.sagepay.com/mysagepay/images/sagepay_logo.png" width=136 height=50>
</a>
<A href="https://www.businessexpress-uk.com/" target="_blank">
<IMG style="position: absolute; border-radius: 5%; left: 70%;" border=0 alt=SagePay src="https://XXXX.com/Content/images/logo.png" width=140 height=50>
</A>
<A href="http://XXXXX.co.uk/support/staff/" target="_blank">
<IMG style="position: absolute; border-radius: 5%; left: 80%;" border=0 alt=Fusion src="http://XXXXX.co.uk/support/__swift/themes/__cp/images/fusion.gif" width=200 height=50>
</A>
</div>
</div>
</div>
<div class="tab-content">
<div id="tab1" class="tab active">
<div id="orders">
<div class="CSSTableGenerator">
<table width="100%" class='table'>
<thead>
<tr>
<td><b>Customer</b></td>
<td><b>Company</b></td>
<td>User ID</td>
<td><b>Time</b>
</tr>
</thead>
<tbody id="orderBody">
</tbody>
</table>
<div id="orderHolder"></div>
</div>
</div>
<div id="print">
<img src="print.png" title="Print All Invoices"/>
</div>
</div>
<div id="tab2" class="tab">
<div id="referals">
<div class="CSSTableGenerator">
<table width='100%' class='table'>
<thead>
<tr>
<td><b>Account</b></td>
<td><b>Customer</b></td>
<td><b>Referral ID</b></td>
<td><b>UUID</b></td>
<td><b>Time</b></td>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<div id="hold"></div>
</div>
</div>
</div>
<div id="tab3" class="tab">
<div id="invoiceOptions">
<div id="DisplayOptions">
<fieldset style="width: 100%;">
</fieldset>
</div>
</div>
</div>
</div>
<div id='border1'></div>
<div id='border2'></div>
</body>
Notes.
I'm using ajax to populate a web-gen table. I've excluded the table css for now, however comment if required & I will include
update.
I've included tab-links into the css. this is the css for the holder of the tab buttons (grey). The tab buttons themselves are floated left.
the table contents, is a styleless div contaings the 3 tab option contents (referral, order & options).
I'm making a 2 column webpage layout. I wanna make a border that takes 100% of the page height. I have tried a few different things but I alwys get the same result, it only adds border whenever there's content. Anyone has some advice in this?
HTML
<body>
<div id="top">
<nav>
<a class="navitem" href="#">Stream</a>
<a class="navitem" href="/discover">Discover</a>
</nav>
<form action="#" class="form-wrapper cf">
<input type="text" placeholder="Search..." onfocus="this.placeholder = ''" onblur="this.placeholder = 'Search...'" required>
<button type="submit">Search</button>
</form>
</div>
<div id="wrapper">
<div id="content">
<h1> Content</h1>
</div>
<div id="divider"></div>
<aside>
<h1>right bar</h1>
<footer>
<nav>
<a class="navitem_footer" href="/contact">Contact</a>
<a class="navitem_footer" href="/about">About us</a>
<a class="navitem_footer" href="/premium">Premium</a>
</nav>
</footer>
</aside>
</div>
</body>
CSS
#wrapper {
width: 990px;
margin-right: auto;
margin-left: auto;
}
#content {
width: 600px;
float: left;
}
#divider {
position: absolute;
overflow: hidden;
left: 900px;
right: 0;
top: 0;
bottom: 0;
border-left: 1px solid rgba(192,192,192,0.6);
}
aside {
float:right;
width: 390px;
}
footer {
height: 50px;
clear: both;
position:fixed;
bottom:0;
}
Thank you in advance.
I got the border working now, but its covering my header & i tried overflow hidden but that didn't work.
Screenshot : http://i62.tinypic.com/2czbp6s.png
For this you can use tag by which you can easily divide main page into 2 columns
and link will be your HTML pages
CODE:
<!DOCTYPE html>
<html>
<frameset cols="50%,50%" border="10" BORDERCOLOR=#ff0000>
<frame src="first_page.html" frameborder="1">
<frame src="second_page.html" frameborder="1">
</frameset>
</html>
And for 100% border you can use this code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Border around content</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
#wrapper {
position: absolute;
overflow: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 5px solid red;
}
</style>
<!--[if IE 6]>
<style type="text/css">
#wrapper {
width: expression((m=document.documentElement.clientWidth-10)+'px');
height: expression((m=document.documentElement.clientHeight-10)+'px');
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- just a large div to get scrollbars -->
<div style="width: 9999px; height: 9999px; background: #ddd"></div>
</div>
</body>
</html>
here is the css/html
<!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" />
<style>
#chatContainer {
position: fixed;
bottom: 20px;
right: 0;
vertical-align: bottom;
}
.chat {
border: 1px solid #999;
float: right;
margin: 0 5px;
height: 200px;
width: 250px;
vertical-align: bottom;
overflow: hidden;
bottom: 0px;
transition: 1s;
}
.title {
padding: 0.5em;
background-color: blue;
color: white;
}
.text {
padding: 10px;
overflow-y: scroll;
overflow-x: hidden;
height: 120px;
}
.inputText {
width: 100%
}
</style>
</head>
<body>
<div id="chatContainer">
<div class="chat" id="{id}">
<div class="title"> <span>{title}</span>
<div style="float:right">
<input class="minimize" name="" value="min" type="button">
</div>
</div>
<div class="text"> </div>
<div class="chatbox">
<input type="text" class="inputText" placeholder="enter text" />
</div>
</div>
<div class="chat" id="{id}" style="height:100px">
<div class="title"> <span>{title}</span>
<div style="float:right">
<input class="minimize" name="" value="min" type="button">
</div>
</div>
<div class="text"> </div>
<div class="chatbox">
<input type="text" class="inputText" placeholder="enter text" />
</div>
</div>
</div>
</body>
</html>
My problem is that I want the chatbox to be aligned on bottom
Here is now the bad result I got:
Any idea how to fix that ?
(I tried vertical-align with no success)
I have created the fiddle:
http://jsfiddle.net/uwmxT/
(click on min to see the bug)
Don't use float:right but display:inline-box on your chat boxes and vertical-align them to the bottom.
http://jsfiddle.net/willemvb/SfnrU/2/
.chat {
display: inline-block;
vertical-align: bottom;
}
Add width to following id of css :
#chatContainer {
bottom: 20px;
position: fixed;
right: 0;
vertical-align: bottom;
width: 265px; // added width
}
Demo : http://jsfiddle.net/7gEfL/1/
Its actually pretty simple i just made a fiddle which shows a fixed positioned chatbox
with a input area in the bottom of it
i made a innerholder to make sure it works in all browsers
See this fiddle to see the code
code:
<div class="chat">
<div class="innerchat">
<input type="text" class="textbox" placeholder="start chatting" />
</div>
</div>
.chat {
height: 300px;
width: 200px;
display: block;
border: 1px solid #000;
position:fixed;
top:20px;
left:20px;
}
.chat .innerchat {
position:relative;
height:100%;
width:100%;
}
.chat .innerchat .textbox {
position:absolute;
bottom:0;
left:0;
width:100%;
border:none;
background:#ccc;
color:#404040;
height:30px;
text-indent:6px;
}
enjoy
set the box css position to absolute and add to it basic positioning commands to css style
#id_chat{
position:absolute;
bottom:0;
right:250px; /*width of your very right chat box, + you can add e.g. 10px as margin*/
}
http://jsfiddle.net/ueE4b/1/
I have image on the center of the page .
I want to display block of text inside the <div class='contain'> which will be float left to the image. 10px between the image to <div class='contain'>.
I don't want to move the image ,I want to image will stay in the center and just in the right side i put the <div class='contain'>.
I add property clear:both; to image or to the div and I think that I don't know how to use it.
jsfiddle Demo
how can I do that?
Thx
my code:
<h1><a id="toptitle" href="http://www.centerwow.com">portfolio</a></h1>
<div id="container">
<div id="all_pages">
<div class="page">
<h1>Home Page</h1>
<img src="images/yellow_flowers.jpg" width="300px" height="300px">
<div class='contain'>this is the home page bla bla bla</div>
</div> <!-- page1 -->
<div class="page">
<h1>About Us Page</h1>
<img src="images/Pink_Flowers.jpg" width="300" height="300px">
</div> <!-- page2 -->
<div class="page">
<h1>Contact Us Page</h1>
<img src="images/green_flowers.jpg" width="300" height="300px">
</div> <!-- page2 -->
</div> <!-- #all_pages -->
</div> <!-- #container -->
<div id="menu">
<ul>
<li id="1" class="link CC3366 active">Home</li>
<li id="2" class="link 33FF66">About</li>
<li id="3" class="link FFFF33">Contact Us</li>
</ul>
</div> <!-- #menu -->
<div id="footer"><a class="link" href="http://www.centerwow.com">mysite</a></div>
body {
background: #CC3366 url(images/temp.png) center 130px no-repeat ;
overflow:hidden;
margin:0;
padding:0;
}
#container {
width: 1000px;
overflow: hidden;
position: relative;
height: 450px;
margin: 0 auto;
}
#all_pages {
position: absolute;
left: 0;
top: 0;
width: 3000px;
}
.page {
width: 1000px;
height: 400px;
float: left;
text-align: center;
margin-top: 10px;
}
.page img {
margin-top: 10px;
}
#menu {
background: #000;
}
#menu ul {
list-style: none;
width: 457px;
height: 35px;
margin:auto;
}
#menu ul li {
float: left;
color: #FFFF33;
width: 150px;
line-height: 35px;
text-align: center;
cursor: pointer;
}
.active {
color: #fff !important;
}
#footer a{
font-size: 25px;
font-weight: bold;
}
#footer{
line-height: 100px;
background: #CC3366;
width:100%;
height:1000px;
text-align: center;
display: block;
}
#toptitle {
position: absolute;
width:100px;
top: 30px;
left: 30px;
color: #000;
cursor: pointer;
z-index:20;
}
a {
text-decoration: none;
}
#contain{
clear:both;
float:left;
margin-left:10px;
background: blue;
width:300px;
height:300px;
}
.clear{
}
$(".link").click(function(){
var page = $(this).attr("id");
var color = $(this).attr("class");
color = color.substr(5,6);
$('#all_pages').animate({left: (page-1)*(-1000) });
$("body").animate({backgroundColor: '#'+color});
$("#menu ul li").removeClass('active');
$(this).addClass('active');
});
I using table to do the job and it seems work out ok.
<center>
<table>
<tr>
<td valign=top align=right width=50%>Here is the text</td>
<td width=300px><img src='fun.jpg' width=300px height=300px></img></td>
<td width=50%></td>
</tr>
</table>
</center>