i tried using <input type="text" id="nam_beneficiary" size="70" style ="BORDER-STYLE: none;align:left" value=""/> but it didnt work, pls how can I make it justify from the left, so thyat while printing it will align from the left instead of the right
You can use
margin:0;
padding:0;
try it our self
<!DOCTYPE html>
<html>
<head>
<style>
body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="container">
<div class="right">
<p><b>Note: </b><input type="text" id="nam_beneficiary" size="70" style ="BORDER-STYLE: none;align:left" value=""/> </p>
</div>
</div>
</body>
</html>
Related
#header {
background: black;
color: white;
font-family: Arial;
height: 10%;
text-align: center;
}
#footer {
clear: left;
width: 100%;
height: 10%;
background: black;
color: white;
font-family: Arial;
text-align: center;
}
<html>
<head>
<title>This is a page used by admins to change the content.</title>
</head>
<link REL="STYLESHEET" TYPE="text/css" HREF="../includes/style.css">
<div id="header">
<h2> <strong> Admin page. </strong> </h2>
</div>
<body style="background-color:cyan;">
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertext">
<h3>
<p> Insert your credentials here: Note that if you log in, you will be redirected to the main page.</p>
</h3>
<form action="index.php" method="post" autocomplete="off">
<input type="text" name="username" placeholder="Username" />
<input type="password" name="password" placeholder="Password" />
<input type="submit" value="Submit" />
</form>
</div>
<?php if (isset($error)) { ?>
<strong> <small style="color:aa0000;">
<?php echo $error; ?>
</small></strong>
<?php } ?>
</div>
</div>
<br> <br> <br> <br>
<div id="footer">
Main Page
</div>
</body>
</hmtl>
I have a small site, and for some reason, this appears:
Page with issue. The issue is that a cyan line appears above the black header, when it shouldn't appear.
And the CSS code for the header, where the issue appears:
#header {
background: black;
color:white;
font-family:Arial;
height:10%;
text-align:center;
}
Now, what I've tried (all of these failed):
a) Change the header id on the first div to footer, which has this code:
#footer {
clear:left;
width:100%;
height:10%;
background:black;
color:white;
font-family:Arial;
text-align:center;
}
b) Change the code of header to be the same as footer.
The only thing that works, although I don't know why, is if I write something before the <h2> tag of the first div, like so:
<div id="header">
a<h2> <strong> Admin page. </strong> </h2>
</div>
Which results to this
I honestly don't know why the issue is present only here, because I have other sites where this issue isn't present. Could someone please explain?
Also, this HTML code is under some PHP code, which is essentially a login form.
The collapsing margin is cousing the problem. Remove top margin on h2 or add a padding or a boarder (1px) to a header element
The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing.
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of one or more of its descendant blocks; or no border, padding, inline content, height, or min-height to separate the margin-bottom of a block from the margin-bottom of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.
More on mdn
Add This Line at the top of your CSS file:
* { box-sizing: border-box; margin: 0; padding: 0; }
Working Code:
* { box-sizing: border-box; margin: 0; padding: 0; }
#header {
background: black;
color:white;
font-family:Arial;
height:10%;
text-align:center;
}
#footer {
clear:left;
width:100%;
height:10%;
background:black;
color:white;
font-family:Arial;
text-align:center;
position: absolute;
bottom: 0;
left: 0;
}
<html>
<head>
<title>This is a page used by admins to change the content.</title>
<link REL="STYLESHEET" TYPE="text/css" HREF="../includes/style.css">
</head>
<body style="background-color:cyan;">
<div id="header">
<h2> <strong> Admin page. </strong> </h2>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertext">
<h3>
Insert your credentials here: Note that if you log in, you will be redirected to the main page.
</h3>
<form action="index.php" method="post" autocomplete="off">
<input type="text" name="username" placeholder="Username" />
<input type="password" name="password" placeholder="Password" />
<input type="submit" value="Submit" />
</form>
</div>
<?php if (isset($error)) { ?>
<strong> <small style="color:aa0000;">
<?php echo $error; ?>
</small></strong>
<?php } ?>
</div>
</div>
<br> <br> <br> <br>
<div id="footer">
Main Page
</div>
</body>
</html>
And for god's Sake please learn some basics of HTML
I'm was just passing my time by working on random code of HTML and CSS where I have a div which has class .box and has an Image, Text and a Form in it with input boxes.
I found that when I provide text-align: center; to my parent, all elements comes in the center.
I can't understand what's happening here and why Image and Input boxes react text on text-align: center;
here is the codepen link to my code http://codepen.io/rhulkashyap/pen/MKvzzZ
#import url(https://fonts.googleapis.com/css?family=Roboto);
body{
margin:0;
font-family: 'Roboto', sans-serif;
}
.box{
width:500px;
border:1px solid #ccc;
margin:40px auto;
text-align:center;
padding:20px;
border-radius:5px;
}
<div class="box">
<img src="http://minions-2015.gloryone.pl/it/gfx/images/delivery/minion_1.png" alt="" width="200"/>
<h1>Hello Universe</h1>
<form>
<input type="text" placeholder="Username"/> <br />
<input type="text" placeholder="Password"/> <br />
<input type="submit" value="Login"/>
</form>
</div>
From the CSS specification:
This property describes how inline-level content of a block container is aligned. https://www.w3.org/TR/CSS2/text.html#alignment-prop
All inline and inline-block elements (input, img) are affected of text-align!
You can avoid this by using display:block; for the inner elements (like form, h1, div).
#import url(https://fonts.googleapis.com/css?family=Roboto);
body{
margin:0;
font-family: 'Roboto', sans-serif;
}
.box{
width:500px;
border:1px solid #ccc;
margin:40px auto;
text-align:center;
padding:20px;
border-radius:5px;
}
input {
display:block;
}
<div class="box">
<img src="http://minions-2015.gloryone.pl/it/gfx/images/delivery/minion_1.png" alt="" width="200"/>
<h1>Hello Universe</h1>
<form>
<input type="text" placeholder="Username"/>
<input type="text" placeholder="Password"/>
<input type="submit" value="Login"/>
</form>
</div>
A Test Case
div {
border:1px dashed #000;
text-align:center;
width:500px;
}
.block {
display:block;
}
.inline {
display:inline;
}
<div>
<input type="text" value="standard: inline-block">
<input type="text" class="block" value="with display:block">
<input type="text" class="inline" value="with display:inline">
</div>
When you pass text-align: center, it means that the data inside particular div will be placed center according to a rule. Data can be anything, it can be image, text or input box. Your elements are coming in center because all the inline elements are effected by "text-align: center". Please have a look on the following url https://www.w3.org/Style/Examples/007/center.en.html
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph. This text has no alignment specified.</p>
<div style="text-align:center;border:1px solid red">
This is some text in a div element!
</div>
<p>This is a paragraph. This text has no alignment specified.</p>
</body>
</html>
I've a html page with some div tags in it, I want to put my container div in center of computer screen whether I zoom-in or zoom-out.
I want to modify my html page in such a manner as www.bing.com. The homepage centers on the screen when you zoom-out, whereas, my web page continuously expands while zooming.
My HTML pagecode:
<html>
<head>
<title>
HTML test page
</title>
<style>
.horizontal{
width:100%;
height:100px;
background-color: #bbb;
}
.vertical{
width:100px;
height:70%;
background-color: #bbb;
}
#container{
margin:auto;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<h1 style="font-size:3em; color:Green; text-align:center;">
HTML Test page
</h1>
</div>
</body>
</html>
How to adjust my CSS code so that I can implement centralized page style same of (www.bing.com)? I want to centralize my container div on pressing Ctrl+-
I just check bing.com. It seems they change position and size of their centered div using JS. It centered while page load and the same when page is re-sized. And do not forget absolute position for #container.
<script>
$(window).resize(function() {
doResize();
}
$(document).ready(function(){
doResize();
}
function doResize() {
var windowHeight = $(window).height();
$('#container').css('top',(windowHeight - $('#container').height())/2);
}
</script>
it has something to do with you using percentages rather than say Pixels or EMs
I got it so that it is staying centered but i still have it sticking to the top of the browser.
<html>
<head>
<title>
HTML test page
</title>
<style>
.horizontal{
width:100%;
height:100px;
background-color: #bbb;
}
.vertical{
width:100px;
height:250px;
background-color: #bbb;
}
#container{
margin:auto auto;
width:750px;
height:400px;
}
</style>
</head>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<h1 style="font-size:3em; color:Green; text-align:center;">
HTML Test page
</h1>
</div>
</body>
</html>
Edit possibility
you could use a MediaQuery and set the top:###px so that the rest of your page sets up with the center. but you would probably have to create several CSS Files or write a lot of CSS code to make it work
Answer to css get height of screen resolution
this answer has a link in it to media queries that takes you to w3.org Media Queries site
After looking that bing page you just referred us, I believe this is what you probably want this
<html>
<head>
<title>
HTML test page
</title>
<style>
body {
width: 100%;
height: 100%;
margin:auto;
}
#container {
vertical-align: middle;
margin:auto;
height:100%;
width:100%;
display: table;
}
span {
display: table-cell;
vertical-align: middle;
text-align:center;
font-size:5em;
color:#fff;
}
#inner {
margin:auto;
width:50%;
height:auto;
border:100px solid #bbb;
color:Green;}
</style>
</head>
<body>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<span><div id="inner">HTML Test page</div>
</span>
</div>
</body>
</body>
</html>
This creates a 100px sized border to your div, which is aligned in center as you want
<div class="con">
<div class="left" id="left">
<input type="button" value="set the height of the left panel" id="open" />
</div>
<div class="right" id="right"></div>
</div>
The left and right panel are both floated left,they work well when no scroll bar exist,however if the height of the left panel changed,and the scroll bar will display,then the right panel will go to bottom.
See exmaple here:
At first,the right div will display beside the left,when you click the button,the right will go to bottom.
How to fix it?
update
In fact I can not set the absolute size of the left and right div,since I want them resize according the content autoly.
Fullcode:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
padding:0px;
margin:0px;
height:100%;
}
.con{
float:left;
position:relative;
left:100px;;
top:100px;
border:2px solid red;
max-height:80%;
overflow-y:auto;
}
.left{
background-color:black;
position:relative;
float:left;
}
.right{
background-color:blue;
position:relative;
float:left;
width:300px;
height:200px;
}
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById("open").onclick=function(){
document.getElementById("left").style.height="900px";
//document.getElementById("right").style.width="300px";
//document.getElementById("right").style.height="500px";
}
}
</script>
</head>
<body>
<div class="con">
<div class="left" id="left">
<input type="button" value="set the height of the left panel" id="open" />
</div>
<div class="right" id="right"></div>
</div>
</body>
</html>
This works...
.con{
float:left;
position:relative;
left:100px;;
top:100px;
border:2px solid red;
max-height:80%;
overflow-y:scroll;
}
The best way is to make the left and/or right panel a bit more "narrow"
Hi I have a problem cosidering a floating div that i can't figure out. I know many people have got the same problem but i have not found a normal solution. maybe you can help me ?
I want that the div on the left will grow on it's height when the one on the right will grow it's height. The one on the right will grow dynamicaly, because the text or other things in it will have diffrent sizes.
This is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<style>
#content
{
width:600px;
height:auto;
overflow:hidden;
background-color:#FF3399;
}
#content1
{
width:300px;
background-color:#3333CC;
float:left;
}
#content2
{
width:300px;
overflow:hidden;
background-color:#CCFF66;
}
</style>
</head>
<body>
<div id="content">
<div id="content1">
1
</div>
<div id="content2">
2
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</div>
</body>
</html>
This is the eternal css column height issue. There are some (painful) ways to work around it with pure css, but I've been happy using this jQuery plugin: http://www.cssnewbie.com/equalheights-jquery-plugin/
It's not the "right" way to handle it but in my experience it's the only way that won't drive you insane.
I usually use this snippet of jQuery..
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
equalHeight($('.your-divs'));
Is that ok ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Untitled Document
<style>
#content
{
width:600px;
height:auto;
overflow:hidden;
background-color:#FF3399;
}
#content1
{
width:300px;
background-color:#3333CC;
}
#content2
{
width:300px;
overflow:hidden;
float: right;
background-color:#CCFF66;
}
</style>
</head>
<body>
<div id="content">
<div id="content2">
2
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
<div id="content1">
1
<div style="clear: both"></div>
</div>
</div>
</body>
this solution is what i was looking for but i have a very important question i want to place a div at bottom of the content1 with a static height and width but i can't do it because the div just wont go there the div can also be an imgage, you can't use position:absolute because the content1 div height will not be static so the div in it will not be in one place all the time. I'm using a solution that helped me a lot and I just want to add to it that div at the bottom on content1. So it looks like this content1 have got 2 divs one in the top as first and the other in the bottom. It is very important to use this code because it fixes the div height problem that I mentioned:
<style>
#content
{
width:600px;
height:auto;
overflow:hidden;
background-color:#FF3399;
}
#content1
{
width:300px;
background-color:#3333CC;
}
#content2
{
width:300px;
overflow:hidden;
float: right;
background-color:#CCFF66;
}
</style>
<div id="content">
<div id="content2">
2
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
<div id="content1">
1
<div style="clear: both"></div>
</div>
</div>