I want to center my web page footer and create a reasonable gab between it and the above content. Currently, the footer has a line and paragraph joined to the above content. I can push down the content but the line does not move. I am sure the property I am missing out in my css style sheet. Could someone help?
This is my html mark up:
<div id="footer">
<p>Copyright (c) 2010 mysite.com All rights reserved</p>
</div>
Which css property can I use to solve this problem? A sample would be appreciated. Thanks.
#footer{
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Center a div horizontally? Typically done by setting margin: 0 auto, or margin-left: auto; margin-right: auto.
And if you want a gap above it, give it a top margin.
Use margin:auto to centre blocks with CSS, and margin-top or padding-top to make a gap above it:
#footer {
margin-left:auto;
margin-right:auto;
margin-top:2em;
}
I've used 2em for the top margin; feel free to change that as you like, even to a fixed pixel size if you prefer. You can also use padding-top as well as or instead of margin-top, depending on exactly what you need to achieve, though the centering can only be done with margin left/right, not padding.
The above code can be condensed using the shorthand margin code, which lets you list them all in the same line of code:
#footer {
margin: 2px auto 0 auto;
}
(sequence is top, right, bottom, left)
hope that helps.
I solved it with this:
#footer {
width: 100%;
height: 28px;
border-top: 1px solid #E0E0E0;
position: absolute;
bottom: 0px;
left: 0px;
text-align: center;
}
You can center the text with the following CSS
#footer {
margin: 0 auto;
}
If you want more space on top add
margin-top: 2em;
after the previous margin line. Note that order matters, so if you have margin-top first it gets overwritten by margin rule.
More empty vertical spacing above the footer can also be made using
padding-top: 2em;
The difference between margin and padding can be read about W3C's CSS2 box model. The main point is that margin makes space above the div element's border as padding makes space inside the div. Which property to use depends from other page elements' properties.
I used this code for bottom copyright.
.footer-copyright {
padding-top:50px;
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Panel01 {
vertical-align:bottom;
bottom: 0;
margin-left:auto;
margin-right:auto;
width: 400px;
height: 100px;
}
Notes:
#Panel1 is the id for a DIV and the above code is CSS.
It is important that the DIV is large enough to contain the items
within it.
#footer{
text-align:center
}
.copyright {
margin: 10px auto 0 auto;
width: 100%;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-style: normal;
text-align: center;
color: #ccbd92;
border-top: 1px solid #ccbd92;
}
Related
I'm trying to get the h1 text on the top center of the page, but when I add a border the width of the border extends the entire top part of the page. When I decrease of the width of the element using CSS the border pushes the text towards the left.
Before changing width
After changing the width
Demo :
JSfiddle
Remove float property and add margin: 0 auto to center h1 as it is a block element.
JSFiddle
Try pasting this in the css,
h1{
text-align: center;
border: 3px solid green;
width: 50%;
margin:0 auto;
}
The changes made are: removed "float:center;" and added "margin:0 auto;"
Hope this helps.
You can use margin: 0 auto in your css like this
h1{
text-align: center;
border: 3px solid green;
width: 50%;
margin:0 auto;
}
Hope this helps
The issue is with the float, there is no float for center, just left and right. Because you have declared a width you can use margin: 0 auto which will center your h1. Keep in mind that if you remove the width the margin: 0 auto will not work.
h1{
text-align: center;
border: 3px solid green;
width: 50%;
margin:0 auto;
}
I've tried to align last div element / elements using text-align-last property but it didn't work. I have much divs in the center, but my page is different on each resolution so I can't control if elements will be perfectly and none of them will be in last line alone or so, that's why I want to align them to left.
Fiddle: http://jsfiddle.net/ecn8c0pt/
Picture of my site:
Adding the following CSS will work.
http://jsfiddle.net/ecn8c0pt/1/
#gallery h2{
margin: 0;
height: 80px; /*Added height for the Heading */
font-size: 1.1em;
font-weight: 300;
color: #33CCFF;
}
.project{
display: inline-block;
margin: 0 15px 40px;
width: 156px; //To show in jsfiddle i reduced the width.
text-align: left;
float: left; //MUST CHANGE: Once you align left it will automatically float to left. Also the number of count per row will depends on the window width and div width.
}
.project .thumbnail{
width: 156px;//To show in jsfiddle i reduced the width.
height: 144px;
border-radius: 3px;
}
try adding styles to your CSS like these:
float:left;
min-width: 200px;
max-width: 200px;
and try to fix the width for the wrapping div tag
for example:
.wrapper {
width:1000px;
}
see in example DEMO and try to predict the width now when you control it good luck!
I am using HTML and CSS.
I can't display all of my content in the middle of the screen for varying display sizes.
I have attempted to use % in place of PX but it's unsuitable for small screen size such as 800*600 pixels.
Also I have performed web searches but my lack of in-depth knowledge of HTML is hindering my progress.
my code is this:
<style type="text/css">
#Line5
{
color: #7B7BC0;
background-color: #7B7BC0;
border-width: 0px;
}
#wb_Text1
{
background-color: transparent;
border: 0px #8B8B00 solid;
padding: 0;
}
<body>
<hr id="Line5" align="center" style="position:relative;top:28px;width:803px;height:93px ;z-index:0;">
<div id="wb_Text1" style="position:absolute;left:406px;top:58px;width:308px;height:36px;text-align:center;z-index:1;">
<span style="color:#FFFFFF;font-family:Arial;font-size:32px;"><strong><em>SAMPLE TEXT</em></strong></span></div>
can someone correct this piece of code for me?
Don't know what your desired output is like. But check this out.
Click Here for Demo
<div id="wb_Text1">
<span class="head"><strong><em>SAMPLE TEXT</em></strong></span>
</div>
Here updated code and its working fine.
<div id="wb_Text1" style="position:relative;display:table;margin-left:auto;width:100%;height:36px;text-align:center;margin-right:auto;z-index:1;background-color: #7B7BC0;">
<span style="color:#FFFFFF;font-family:Arial;font-size:32px;"><strong><em>SAMPLE TEXT</em></strong></span></div>
Not clear about your question but I think Either of the examples below could work for you ;
if you want it to be standards compliant, use this in your stylesheet:
body {
text-align:center;
}
#mainContainer {
margin:0 auto;
}
the body thing makes it work in IE, the margin:0 auto; makes it center in most other browsers.
you might have to go in and reset some of your main containers to text-align:left; because the body text-align:center sometimes cascades down into the site content, but you can counteract that by adding
text-align:left;
to #mainContainer
Or,
There may be better methods, but this works in all browsers so far :
body {width: /*fixed width or percentage here*/; height: auto; margin: 0 auto; padding: 0; background: #; color: #; font: ; text-align: center;}
or set body width to 100% and then just make a container div for your page
#container {width: /*fixed width or percentage here*/; height: auto; margin: 0 auto; padding: 0; background: #; color: #; font: ; text-align: center;}
Also not quite sure what you're asking for. I'm interpreting it as you wanting the div to be centered vertically and horizontally, so that's what I'm going for.
HTML
<div id="wb_Text1">
<b>SAMPLE TEXT</b>
</div>
CSS
body {
height: 100%;
width: 100%; //these two are so that the automatic margins work for the div.
}
#wb_Text1 {
height: 93px; //or whatever height you want
width: 300px; //or whatever width you want (can be in %)
background-color: #7B7BC0;
border: 0px;
padding: 0px;
font: 32px Arial;
line-height: 93px; //should be same as the height if you've only got one line of text and you want it vertically centered in the div
color: #fff;
text-align:center;
margin: calc(0.5 * (50% - 46.5px)) auto; //first value makes it vertically centered, the second makes it horizontally centered.
margin: -webkit-calc(0.5 * (50% - 46.5px)) auto; //for Safari
}
Here's what's happening inside the calc():
50% gives you half the total height of the page,
46.5px is half of the div's height, which in this case is 93,
50% - 46.5px gives you the amount of space needed to center the div vertically
Fiddle here: http://jsfiddle.net/Shiazure/hA9KB/
i thank all those who helped me. Problem was solved by adding the following code.
<style type="text/css">
div#container
{
width: 990px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
....
.....
........
<body>
<div id="container">
...
....
Thank you so much that help a rookie !
I'm stuck with this its the problem
<div id="example1">
<div id="example2"> </div>
<div id="example3"> </div>
</div>
I need to align the div with id example3 under example 2 and if it's possible just in the footer and center of the div with id example1. how can i do it?? i have days trying and more close it's like this.
CSS
#example3{
margin-left:auto;
margin-right:auto;
margin:0;
height:80px;
position:absolute;
top:170px;
}
#example2{
height:153px;
width:305px;
float:left;
background:url(Logo.png);
}
thanks for your help
For one thing, position:absolute won't let you set margins.
For another, you've got
margin:0;
which is resetting your auto on the left+right. Try
margin:0 auto;
Here's a JSFiddle which accomplishes what you're trying to do (more or less).
EDIT
OK, but now you've now introduced a third problem, in the float:left, which will override the auto margin and always float left.
Also, the problems I mentioned above haven't been addressed. To summarize: no floats, no absolute positions, and try not to override the margin by styling it twice.
Are you trying to have a 17px space between #example2 and #example3? Here's an updated link, evolved from the last one, that does this new behavior: JSFiddle
Going by the CSS you have I think you need to swap the div that's absolutely positioned to the "logo" (#example2), then you can just margin the top of example 3 to get the top 170px spacing
Example : jsfiddle
try:
#example1{
background: #eee;
height: 250px;
position: relative;
overflow: auto;
}
#example2 {
background: #444;
color: #fff;
position: absolute;
top: 0;
left: 0;
height:152px;
width:305px;
}
#example3 {
background: #007;
color: #fff;
width: 300px; /* adjust to suit */
height: 80px;
margin: 170px auto 0 auto;
}
if you don't know the width of #example3 - and so can't use the auto left and right margins - then you can center it another way by changing it to display: inline-block and setting text-align: center on #example1
I am having trouble for some reason with getting the bottom of my page to have some padding. I have a content box that goes to the end of the page and hits the bottom and doesn't look the greatest. I want to give some space from the bottom of the page to fix this issue, but it seems that margin-bottom isn't working as I expect it to? I have included the following code which should be everything that affects the content box. I have tried removing the margin:0 in the html/body (even though I kind of need that), but that doesn't seem to work either? I feel like I am missing something really obvious.
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
text-align:left;}
#content {
position: absolute;
left: 50%;
margin-left: -368px;
top: 104px;
padding-left: 35px;
padding-right: 35px;
padding-top: 15px;
padding-bottom: 15px;
background-color: white;
border: 1px solid black;
width: 664px;
margin-bottom: 20px;}
Any help would be greatly appreciated :) Thanks!
Live link - http://quintinmarcus.com/portfolio/
Since content has position: absolute, its after margins do nothing, nor should it stretch the inner height of the body so that the body's padding-bottom does anything.
If you want to centre your layout, modify your current style for #content to the following:
CSS:
#content {
width:664px;
margin:104 auto 20px auto;
padding: 15px 35px;
background-color: white;
border: 1px solid black;
}
This will also enable you to give the margin at the bottom you want.