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.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technology-BBC News
</title>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#topbar {
width: 1265px;
margin: 0 auto;
height: 40px;
background-color: #FFFFFF;
}
#logo {
margin-top: 8px;
width: 85px;
float: left;
margin-right: 15px;
}
.topbar-section {
float: left;
border-left: 1px solid #CCCCCC;
height: 100%;
}
#signin-img {
width: 22px;
margin-top: 11px;
margin-left: 11px;
float: left;
}
#signin-text {
/* margin-top: 100px; */
position: relative;
top: 10px;
left: 8px;
font-weight: 600;
font-size: 13px;
padding-right: 50px;
}
</style>
</head>
<body>
<div id="topbar">
<img id="logo" src="images/BBC_logo.png" alt="logo">
<div id="singin" class="topbar-section">
<img id="signin-img" src="images/signin.png" alt="">
<span id="signin-text"> Sign in</span>
</div>
</div>
-
</body>
</html>
here I am trying to give margin to #signin-text but it's not working ... I used positioning that worked but margin-top didn't can someone please tell me why the margin-top property in #signin-text not working this is my first question of stackoverflow please forgive if the question is asked in a wrong way. :)
span is an inline element. That's why it can't accept margin. If you change this (change its block level) by giving display: inline-block for example, the margin will affect.
span {
margin-top: 15px;
}
.inline-block {
display: inline-block;
}
<div>
<span>natural</span>
</div>
<div>
<span class="inline-block">inline-block</span>
</div>
Since you're using css property top with margin-top it will not work.top always takes precedence over margin-top when using with position property. Check https://www.w3schools.com/Css/css_positioning.asp for reference. Try using top with a value 100px
spans are the inline elements that take margins horizontally only not vertically, Only the block and inline-blocks can take margins as vertically and horizontally.
Margin properties specify the width of the margin area of a box. The
'margin' shorthand property sets the margin for all four sides while
the other margin properties only set their respective side. These
properties apply to all elements, but vertical margins will not have
any effect on non-replaced inline elements.
there are many solutions to your problem, either use div or specify span tag as inline-block in your style tag. Still, there are many other ways to achieve this
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.
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.