I've been scratching my head over this for the last few hours. I'm trying to make an input field that stays put at the bottom of the page, similar to the Omegle chat bar.
I've set my height to 100% (well, 99, because if it's set to 100 the page has unnecessary scroll bars) and set the CSS bottom property to 0, but no matter what I try, the bar stays floating around 10% down the page.
My CSS code is:
html {
height:99%;
width:99%;
}
input.chatbar {
bottom:0;
width:90%;
height:5%;
outline:none;
resize: none;
border:none;
border-bottom:#000 medium solid !important;
}
and my HTML code 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>Global Chat</title>
</head>
<body>
<input class="chatbar" />
</body>
</html>
and here is a JSFiddle of it.
I want it to float above the page and scroll with the user, like the Omegle bar. How would I do this?
Sorry, I know this is a basic question, but I can't find the answer anywhere else.
Add position: fixed; to the css
Also be careful about the percent heights. Check out min and max height properties
Related
I hate to even ask something that seems so dumb but I just dont get this. All I want to do is have a blue div at the top of my window that stretches across the entire window. I thought width:100%; would do just that but its leaving gaps around the edges for some reason.
My 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" />
<title>Untitled Document</title>
<link href="_css/wikiToolBox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="iWikiTopPanel" class="iWikiTopPanel"></div>
</body>
</html>
My css:
#charset "utf-8";
/* CSS Document */
.iWikiTopPanel{
width:100%;
height:200px;
background-color:#205081;
margin:0px;
border-bottom: 1px solid #2e3d54;
clear: both;
float:left;
}
body{
padding:0px;
/*set This thinking it might fix the issue, it didnt*/
}
Here's a pic of what I end up with:
And here's the element as seen in Chrome's element inspector:
I dont get it. So where is the padding/margin coming from and how do I get rid of it?
Try:
body{
margin:0;
}
You have a margin against your <html> tag.
Can it be done - crossbrowser (IE9, Mozilla, Chrome, Opera) ?
In this snippet .box border is affected by zoom property. Can this be avoided ?
<!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>
<style type="text/css">
.box {
zoom: 3;
-moz-transform: scale(3); /* FF fix */
border: 1px dotted black;
padding:10px;
}
</style>
</head>
<body>
<div class="box">content</div>
</body>
</html>
I'm not really sure what you expect here. If you apply the zoom property to any element, then all of it's measurements will be transformed by 1/x. Away your example, the best way to do this would be to divide the intended measurements by the value of your zoom. In your example, if you wanted to keep padding at 10px (or thereabouts), you'd use padding:3px instead.
However, because your issue is with the border property and specifically, having set 1px as the value, you can't divide this by your zoom value. Instead, you're going to have to wrap HTML around it:
<div class="border">
<div class="box"></div>
</div>
And move your border styling from .box to .border
Working Fiddle
Let me preface this question with the warning that I'm a self-taught (amateur) web developer (and not a very good one). I've been trying for a long time to find an effective way of centering web pages using AP Divs. I've tried setting "margin: 0 auto;" and I've tried setting "margin-left: auto;". Both work for that one div. But I then have to use that as a wrapper to design within, so when I put more divs inside that, they don't center.
I may be completely approaching this wrong; if so, please correct me. Code (not working) for a basic version of what I want to do is below. If you run that code, if I were to place, say, an image in apDiv1, it would scale to the page size fine; but the text in apDiv2 does not.
<!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>Test Page</title>
<style type="text/css">
#apDiv1 {
margin: 0 auto;
width:600px;
}
#apDiv2 {
position:absolute;
width:50px;
height:24px;
z-index:1;
left: 47px;
top: 29px;
}
</style>
</head>
<body>
<div id="apDiv1">
<div id="apDiv2">Hello</div>
</div>
</body>
</html>
I can center a div inside another div just fine using margin-left:auto; and margin-right:auto;:
Working example: http://jsfiddle.net/xjKhT/
In my own opinion, it is not good to use appdivs(coz it depends on how you positioned it on the design). You can do it(centering stuffs) on your own, check this:
Centering(Simple Sample)
<style>
#header {
margin:auto;
width:600px;
background:#000;
padding:5px;
}
#title {
width:50px;
margin:auto;
background:#CCC;
padding:5px;
}
</style>
<div id="header">
<div id="title">Hello World</div>
</div>
Custom AppDivs adds extra styles which is not really necessary:)
Updated example
Ok after some guessing and poking I think you mean that you want to absolutely position the elements inside the center-aligned wrapper.
position: absolute will be absolute to the page UNLESS the parent has position: relative.
#apDiv1 {
margin: 0 auto;
width:600px;
position:relative;
}
I realise this question has been asked many times but i am going crazy trying to figure it out.
I am quite new to html and want to built a static header (940px x 30px) containing our logo, navbar, and a few social networking icons.
What i'm struggling to do is make the header fit the entire page, it leaves part of my background on show on the left, top and right sides which is frustrating.
below is the code i have used.
HTML 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" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>TWChome</title>
</head>
<body>
<div id="header">
<div id="headercontents">
Hello
</div>
</div>
</body>
</html>
CSS Code
#charset "utf-8";
/* CSS Document */
body {
background-image:url(../images/bg.jpg);
}
div#header {
display:block;
width:auto;
height:auto;
background-image:url(../images/bar.jpg);
}
div#headercontents {
width:50%;
}
Try this:
body{margin:0;padding:0}
it is actualy not that hard:
#header {
width: 940px;
height: 30px;
margin: 0 auto;
}
First you set the dimensions you say you want it to have, and then you center it. Nothing more to it. Also I have no idea why you are setting the #header-contents to a width of 50%...
update for header with background image:
#header {
height: 30px;
background: url(../images/bar.jpg) no-repeat center center; /* for a single image with height of approx 30px */
background: url(../images/bar.jpg) repeat; /* alternative for a tile you want to repeat */
}
#headercontents {
width: 940px;
margin: 0 auto;
}
and indeed always apply some reset css as stated by others.
I am trying to make a SIMPLE Css percent bar.
OK go to http://htmledit.squarefree.com/
and copy/paste this in it:
<!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" xml:lang="en" lang="en">
<head>
<style>
#perc {
width:667px;
border:4px solid blue;
}
#perc_in {
width:100%;
padding:3px;
font-size:17pt;
background:red;
margin:3px;
}
</style>
</head>
<body>
<div id="perc"><div id="perc_in">100%</div></div>
</body>
</html>
As you can see the red inside bar is overlapping the blue border... why? :\
By the W3C box model, margins and padding add to the width of a <div>. So instead of 100%, the width becomes more than that, and causes the progress bar to overflow the blue border.
You'll have to change the 3px margin of #perc_in to a 3px padding on #perc, and remove the padding on #perc_in.
Here is the updated code (added by Blaenk):
#perc {
width:667px;
border:4px solid blue;
padding:3px;
}
#perc_in {
width:100%;
font-size:17pt;
background:red;
}
The reason is: W3C box model. It says that final width of an element is a sum of width and padding properties. So if you declare that element suppose to have width: 100% (to be exact: 667 pixels in this case) and also declare that element should have 3-pixel padding from left and right (total: 6 px) the final width of the element is: 667 + 3 + 3 = 673 pixels.