I want to have a button with width:auto; and display:block;. This button should be centered with margin:0 auto. But if I take all together, it will not work.
What am I doing wrong?
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>asd</title>
</head>
<body>
I am an example content and I should be above the button. I want to have an auto width and being centered
<style type="text/css">
.btn{
color:black;
font-size: 14px;
line-height:14px;
text-align: center;
font-weight: bold;
margin:0 auto;
height:14px;
display:block;
cursor: pointer;
background-color:red;
padding:15px;
text-decoration:none;
}
</style>
<a class="btn">helloworld</a>
</body>
</html>
You can use inline-block instead of block:
body {
text-align:center;
}
.btn{
display:inline-block;
}
The demo Fiddle
Another option use display:table, with this the margin auto can work:
.btn {
display:table;
margin: 0 auto;
}
The demo Fiddle
If you set it as width: auto, then the element will fill the entire screen. So it is centered, but you can't tell since it's taking up the entire screen. Simply change width: auto to a fixed width like 50px or 30% and it will center properly. Demo
If you have variable content, then get rid of the height: 15px and it will work. It will also look a little nicer with width: 65%. Demo
Related
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.
I have a page with a container div 900px wide, margin is auto. I have a header tag within this 150px high.
I want the header to consist of ann image on the left, some text and then another image on the right (opposite the imagine on the left). When I put two img tags in the header div, the second image is on lower than the first. I've tried amending to an inline display without any luck.
Any ideas?
CSS
html, body {
background-color: #ccd6cc;
margin: 0px;
padding: 0px;
}
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
}
.hidden {
display: none;
}
#page-container {
width: 900px;
margin: auto;
background-color: white;
}
#header {
height: 150px;
background-color: yellow;
}
#content {
line-height: 18px;
}
img#mcclogo {
display:inline;
float:left;
margin:0;
padding:0;
}
img#bactulogo {
display:inline;
float:right;
margin:0;
padding:0;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="curvy.corners.trunk.js"></script>
<head>
<title>Intranet Layout</title>
<link rel="stylesheet" type="text/css" href="test_layout.css" media="screen" />
</head>
<body>
<div id="page-container">
<div id="header">
<img id="mcclogo" src="../images/logo.gif" alt="xx" width="244" height="48" />
<img id="bactulogo" src="../images/bactu3.gif" alt="xx" width="260" height="124" />
</div>
<div id="content">
Content
</div>
</div>
</body>
</HTML>
Assuming html is correct, http://jsfiddle.net/sbAvB/
css should be something like this then:
#main{
width:900px;
margin: auto; }
#header{
height:150px;
width:100%
}
#picL
{
float:left;
}
#text{
position:absolute;
left:50%;
right:50%;
width:70%;
}
#picR
{
float:right;
margin-right:0px; }
Likely the issue is a lack of a position/margin variables set in the css properties. To align multiple objects in a line, one way to do this is.
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:
I will a style of asp.net webpage like:
body
{
font-family: Times New Roman, Serif;
color: #000000;
text-align: center;
min-height:100%;
height:auto;
}
#container
{
/*background-color: #00CCFF; */
margin: auto;
width: 100%;
}
#header
{
/* background-color: #FF00FF; */
width: 100%;
height: 95px;
background-image:url('../Images/Back_logo.png');
background-repeat:repeat-x;
background-color:Transparent;
}
#menu
{
/*background-color: #FFFF00; */
height:40px;
}
#left
{
/* background-color: #00FF00; */
width: 20%;
float: left;
text-align:left;
border:1px solid #C8E3F1;
background-color:#EEFFFF;
overflow:hidden;
}
#center
{
width: 79%;
float: right;
/* background-color: #FF0000; */
}
#footer
{
/*background-color: #008000; */
clear: both;
height:70px;
margin-top:10px;
background-image: url('../Images/footer.png');
background-repeat:repeat-x;
background-color:Transparent;
}
I have a problem is the height of page not 100%. I used min-height or height is 100% in body, but don't work. The footer change by the long of content center. How to fix?
The html is very simple:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="layout.master.cs" Inherits="layout" %>
<!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 runat="server">
<title>Layout</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link href="App_Themes/theme1/custom.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="header">HEADER</div>
<div id="menu">MENU</div>
<div id="left">LEFT</div>
<div id="center">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server"</asp:ContentPlaceHolder>
</div>
<div id="footer">FOOTER</div></div>
</form>
</body>
</html>
In other pages use this Master Page, the div have ID is center can stretch or shrink belong to the contain in it. So that the display of footer isn't exact.
Use HTML, Body
html, body {
height: 100%;
}
#footer
{
/*background-color: #008000; */
clear: both;
height:70px;
position:absolute;
bottom:0px;
margin-top:10px;
background-image: url('../Images/footer.png');
background-repeat:repeat-x;
background-color:Transparent;
}
We need to give 100% height to both the html and the body tag. This is often overlooked but is vitally important as no element will adjust to a percentage height unless it knows what it’s parent height is currently occupying. As the container is a descendant of the body tag which is a descendant of the html tag, then this is required.
100% height is one of those things CSS doesn’t do so easily. When you specify an element to have a height of 100%, the 100% refers to the containing element’s height. The containing element would then need to be 100% the height of its containing element and so on. The trick is to set the height of the outermost elements to be 100%
Put html { height: 100% } at the beginning and see if it helps.
Make sure that the height is set to 100% in every point of your Xpath layout hierarchy. That is html->body->form->div id="center"
style="height:100% "
You can then continue using style="height:100% " in the child pages that will inherit from ContentPlaceHolder2 at the inheriting content place holder.
There are areas you might need to adjust(lower) the % height to allow other elements to fit in the area e.g. the other div s.
I have a container box1 that has a certain width (which might change depending on its content). That box contains box2 which has a fixed width (it could be an icon). Next to box2, I have box3 with some text. I want the text to use all the space available to the right of box2. With the HTML pasted below, you get:
So far so good. If the text gets longer, it doesn't wrap around box2 (which is what I want), however, it doesn't make box1 grow, which is my problem. You'll tell me "hey, if you made box3 a position: absolute, how could you expect it to make box1 grow?". Well, I don't but then, how can I get box3 to show next to box2, use all the horizontal space available, and make box1 grow if necessary? (Do I need to say that I'd like this work on IE6 onward, and to avoid using a table?)
<!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">
#box1 { position: relative }
#box3 { position: absolute; left: 2.5em; right: .5em; top: .5em }
/* Styling */
#box1 { background: #ddd; padding: 1em 0.5em; width: 20em }
#box2 { background: #999; padding: .5em; }
#box3 { background: #bbb; padding: .5em; }
body { font-family: sans-serif }
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="box1">
<span id="box2">2</span>
<span id="box3">3</span>
</div>
</body>
</html>
You need box 3 to be a block level element, so use display:block and then toss in an overflow:hidden in conjunction with float-ing box 2:
<!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">
#box1 { }
#box2 { float:left; }
#box3 { display:block;overflow:hidden; }
/* Styling */
#box1 { background: #ddd; padding: 1em 0.5em; width: 20em }
#box2 { background: #999; padding: .5em; }
#box3 { background: #bbb; padding: .5em; }
body { font-family: sans-serif }
</style>
<script type="text/javascript">
</script>
<title>How to do a `float: left` with no wrapping?</title>
</head>
<body>
<div id="box1">
<span id="box2">2</span>
<span id="box3">3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br /></span>
</div>
</body>
</html>
Amazing all the things overflow:hidden can do :D
There are a couple of ways to achieve this. Two common ones is either to have an empty element right after with a clear: both like so (inline css just for demo):
<span class="box1">...</span>
<br style="clear:both"/>
Another way is to use overflow: hidden like so:
<span class="box1" style="overflow: hidden">...</span>
However, there are problems with both of these solutions. With the first one you add unnecessary and ugly markup. And with the second if you want something to be positioned outside of your box (like a position: absolute) it won't be visible.
A more common, modern solution is to use the ::after pseudo-element and clear that like so:
.box1::after {
content: '';
display: table;
clear: both;
}
I'd recommend the following:
#box1
{
position: relative; /* or some other positioned value */
}
#box2
{
width: 10px;
height: 10px;
position: absolute;
top: 0;
left: 0;
}
#box3
{
margin-left: 10px;
}
If #box2 is of a fixed size, you can simply use a margin for #box3 to prevent its overlapping of #box2, and since it's not positioned, #box1 will grow as #box3 grows.