I have a code:
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
</head>
<body>
<div id="main_body"></div>
</body>
</html>
And css off style.css:
* {
margin: auto;
padding: 0;
}
#main_body {
width: 568px;
text-align: left;
height: 295px;
background: url(../images/form_BG.png) no-repeat left;
}
When i run firefox is result is:
But when run in IE is result error show in left, not show in center as firefox
Try this:
div {
margin: auto;
padding: 0;
}
#main_body {
width: 568px;
text-align: left;
height: 295px; background: url(../images/form_BG.png) no-repeat left; }
work in all browser
Just add a Doctype to your page, for example, for Transitional XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
or HTML5:
<!DOCTYPE html>
For XHTML it will be good to change the <html> opening tag to this:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
margin:auto doesn't work well in IE. You can wrap the #main_body div with another div containing the style text-align:center. But this will center align all your texts inside the #main_body. So, add another text-align property inside #main_body to override.
i.e.
change the #main_body like:
<div style="text-align:center">
<div id="main_body"></div>
</div>
and if you don't want the text inside #main_body to be center aligned, change the css like:
#main_body
{
width: 568px;
text-align: left;
height: 295px;
border:1px solid red;
margin:auto;
text-align:left;
}
* {
margin: auto;
padding: 0;
}
body { text-align: center; }
#main_body {
width: 568px;
margin:0 auto;
text-align: left;
height: 295px;
background: url(../images/form_BG.png) no-repeat left;
}
The text-align property in the body tag will center the #main_body div in IE, then the text-align property inside the #main_body selector will reset the text alignment within #main_body
Add this css:
#main_body {
width: 568px;
text-align: left;
height: 295px;
background: url(../images/form_BG.png) no-repeat;
margin: auto;
}
See results of the above css in below images
Firefox:
IE:
Related
The layout for this is rather simple and easy to achieve and has been covered here a lot, my problem comes from when I want the right div to be scrollable.
I simply cannot get the left side to be fluid and statically positioned while allowing the right side to be a fixed width and scrollable.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" style="display: none !important;">
body {
margin: 0 0 0 0;
overflow: hidden;
}
#page-wrap {
background: white;
max-width: 100%;
}
#main-content {
background-color: #797979;
padding-right: 350px;
padding-top: 20px;
height: 100%;
float: left;
position: absolute;
}
#right-sidebar {
background-color: #cacaca;
width: 350px;
float: right;
overflow: auto;
height:100%;
}
</style>
</head>
<body>
<div class="page-wrap">
<div id="main-content">
<h2>Content Area</h2>
</div>
<div id="right-sidebar">
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
Try this - jsFiddle
body {
margin: 0 0 0 0;
background-color: #797979;
/*overflow: hidden;*/
}
#page-wrap {
background: white;
max-width: 100%;
}
#main-content {
position:absolute;
right:200px;
left:0px;
padding:20px;
}
#right-sidebar {
background-color: #cacaca;
position:fixed;
overflow-y:scroll;
right:0px;
width:200px;
height:100%;
}
I want to create a menu that has buttons in it but for some reason the buttons dont get aligned at the buttom of the div. I have done this before the same way using tables and then it worked but now im trying without the tables and for some reason this does not work.
my css:
body
{
background: #bbb url(../images/Mywallpap.jpg) no-repeat;
font-family: Sans-Serif;
padding:0;
margin: 0;
}
#Background
{
width: 750px;
margin: 0 auto;
background: #FEFEFE;
}
.Menu
{
height: 60px;
vertical-align: bottom;
}
.Menu div
{
height : 30px;
margin-left: 25px;
padding: 0;
}
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>
<title></title>
<link href="MyCss.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<div id="Background">
<div class="Menu">
<div>
<button>Test</button>
</div>
</div>
</div>
</body>
</html>
what am i missing here?
Try Using this CSS for button
.ButtonClass
{
border: thin groove #000000;
vertical-align: bottom;
}
And if you are looking for alignment inside div.You can use position:absolute; to absolutely position an element within a parent div.
When using position:absolute; the element will be positioned absolutely from the first positioned parent div, if it can't find one it will position absolutely from the window so you will need to make sure the content div is positioned relatively.
So add position:relative; to the content div, remove the float from the button and add the following css:
position: absolute;
right: 0;
bottom: 0;
Vertical align will work only for table cells1:
.Menu
{
display: table-cell;
}
1 Actually it will also work for inline blocks, but with different effect.
http://www.xs4all.nl/~peterned/examples/csslayout1.html
The tutorial above is essentially what I want with a white column that extends to the bottom of the browser. In the tutorial it actually begins at the very top, with the header being a different shade of grey covering the white.
My case, the header would have to match the textured background. So, what I want is to have the container begin below the header. I don't know if it is possible because right now my header pushes the container down.
http://andrew.x10.mx/adam/
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>for adam</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
</div>
<div id="container">
<br class="push"></br>
<div id="content">
<h1>Hi</h1>
</div>
</div>
</body>
</html>
css -
html,body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
#header {
position: absolute;
z-index: 2;
top: 0px;
left: 0px;
width:100%;
height: 49px;
background: #fff url("bg.png") repeat-x top left;
padding: 0;
}
.push {
width: 860px;
height: 49px;
margin: 0;
}
#container {
background: #ff0;
height:auto !important;
height:100%;
position:relative;
width: 860px;
text-align: left;
margin: 0 auto;
min-height:100%;
z-index:1;
}
#content { padding: 10px; }
Only tested it in Firefox, though. :)
Updated: feel free to validate. :)
Updated v2: Had a problem when adding content inside the container. Fixed now, but had to do some more complex-ish stuff.
I have a web page with large div(for example white) and another div that is follows the previous one. The problem is that if white block is big enough and it height is almost or even bigger than the browser window(and scroll bars appear), the red block is in the bottom of the page there is still gap between red div and end of the window in Firefox/Safari/Opera:
But in Explorer/Chrome everything is ok:
My 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></title>
<style type="text/css">
root { display: block; }
html, body{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-family: Tahoma;
background-color: blue ;
}
#container{
position: absolute;
left: 50%;
width: 961px;
height: 100%;
margin-left: -480px;
}
.infContainer{
position: relative;
padding-left: 19px;
background-color: white;
color: #434343;
}
div#footerCopyright{
position: relative;
bottom: 15px;
font-size: 0.75em;
background-color: red;
}
div#bottomFooterDivider{
height: 50px;
}
div#pageBottomDivider{
height: 35px;
}
</style>
</head>
<body>
<div id="container">
<div id="mainBlock" class="infContainer">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
</div>
<div id="footerCopyright">
<div id="bottomFooterDivider"></div>
</div>
</div>
</body>
</html>
How to solve this problem and have the same page without blue gap in Firefox/Opera/Safari.
Actual page:
http://109.74.203.141/stack/1/tmp.html
Your footerCopyright div is set to position: relative; bottom: 15px;
When I set the bottom to 0 it lines up on the bottom in FF.
I'm experiencing an issue with my CSS when working in Firefox. It should be pretty simple. Everything is working fine except that I cannot seem to get the links in the header aligned to the right (the color will change as well as any other modifications except alignment). The only way I can do it is to float it right, but that reverses the order of the links and seems wrong. Maybe there is a better way to deal with the links in the header than the span that I've used? I will have some more links in the header in another position, though, so I need to specify which links I'm referring to somehow...
Take a look at the code below:
First, the 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">#import "layout2.css";</style>
</head>
<body>
<div id="all">
<div id="head">
<span class="headlinks">
Logout
</span>
</div>
<div id="menu">
</div>
<div id="content">
</div>
</div>
</body>
</html>"
Now, the CSS:
/* Layout2.css */
#all {
border: none;
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
}
.headlinks a {
text-align:right;
color:#ffffff;
}
#head {
border: none;
position: absolute;
left: 0%;
width: 100%;
height: 10%;
background-color:#336699;
}
#head h1 {
margin-top: 1%;
text-align:right;
}
#menu {
border: none;
position: absolute;
left: 1%;
top: 12%;
width: 20%;
height: 90%;
padding-left: 1%;
padding-right: 1%;
background-color:#b1b2a3;
}
#content{
border: none;
position: absolute;
left: 25%;
top: 12%;
width: 72%;
height: 90%;
padding-left: 1%;
padding-right: 1%;
background-color: #eeeeee;
}
Thanks!
Change <span class="headlinks> to a <div>, and add text-align: right to its CSS style.
You want:
#head { text-align: right; }
The head div is a block element with 100% width. Headlinks is an inline element containing one link. text-align is used on a block element its contents, not on inline elements to indicate how to place them inside their parent.
An alternative approach is to make headlinks a block level element:
span.headlinks { display: block; text-align: right; }
Which to use depends on what you want to achieve.
Try putting the 'text-align:right' on the 'head' div rather than the 'headlinks' span. This style applies to block level elements like div, not inline elements like span.