I have next HTML code, I want to put copyright span to the center of footer but I am can just put them to the top center. What I need to change in my CSS ?
<div class="main">
<div class="footer">
<span class="copyright">some text block</span>
</div>
</div>
and next CSS
.main { width: 100%; height:1563px; background:url(../images/1.jpg) 50% 0 no-repeat ; overflow:hidden; position:relative;min-height:100%; }
.footer {position:absolute; bottom:0; width:100%; text-align:center; height:60px; background-color: #CDCBB8}
.copyright { font-family:"Myriad Pro", sans-serif; font-size:14px; color:#999; display: inline-block; vertical-align: middle; line-height: normal; }
set line-height:60px for copyright:
jsFiddle
.copyright {
font-family:"Myriad Pro", sans-serif;
font-size:14px; color:#999;
display: inline-block;
vertical-align: middle;
line-height: 60px; /* as the height of container */
}
or set line-height:60px to the continer like this:
.footer {
position:absolute;
bottom:0; width:100%;
text-align:center;
height:60px;
line-height:60px; /* as the height */
background-color: #CDCBB8
}
note: if you have more than one line in your copyright it is better that you set line-height:60px to the container and set line-height:1; to the copyright.
DEMO
Check it on http://jsfiddle.net/dfW66/
.main {
width: 100%;
height:1563px;
background:url(../images/1.jpg) 50% 0 no-repeat;
overflow:hidden;
position:relative;
min-height:100%;
}
.footer {
position:absolute;
bottom:0;
width:100%;
text-align:center;
height:60px;
background-color: #CDCBB8
}
.copyright {
font-family:"Myriad Pro", sans-serif;
font-size:14px;
color:#999;
line-height: 60px;
}
Set line-height to 60px.
vertical-align:middle can put into action by changing display properties of .footer and .copyright to table and table-cell, like this:
.footer{
display:table;
}
.copyright{
display:table-cell;
}
Then your vertical-align:middle will move the copyright text to vertically middle.
Write:
.footer{display:table;}
.copyright{display:table-cell;}
Fiddle here.
If it's just the text you want to center you can do:
text-align: center;
If you want to center the whole div give it a width and call
margin: 0 auto;
on it.
Related
I have a simple template where I show header, content and footer section in the centre, Header has background color and all the contents should have 30px padding on left & right.
I dint it following way but it increases the width.
http://codepen.io/anon/pen/xZapEE?editors=1100
html, body, form {
height: 100%;
background-color: #fff;
height:100%;
}
body {
font-family: "Open Sans","Trebuchet MS",Verdana,Arial,sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 13px;
line-height: 18px;
height: 100%;
margin: 0;
padding: 0;
border: 0;
color: #687074;
height:100%;
background-color: #fff;
}
.main-wrapper{
width:1000px;
margin:0 auto;
position:relative;
height:100% !important;
padding:0 30px;
}
.header-wrapper{
width:100%;
min-height:200px;
background-color:#f5f5f5;
margin:0 auto;
position:relative;
padding:0 30px;
}
.content-main{
width:1000px;
min-height:400px;
margin:0 auto;
position:relative;
height:auto;
background-color:#ccc;
}
.footer-wrapper{
width:1000px;
min-height:200px;
background-color:#f5f5f5;
margin:0 auto;
position:relative;
}
.header-row1{
float:left;
width:100%;
height:150px;
margin-bottom:15px;
}
.header-col1
{
float:left;
width:132px;
width:50%;
}
.header-col2
{
float:right;
width:50%;
}
.header-col2 > h1{
font-size:60px;
text-align:right;
}
.header-logo{
}
.header-row2{
float:left;
width:100%;
height:30px;
margin-bottom:15px;
padding:0 30px;
}
You can use box-sizing to fit it in:
box-sizing: border-box;
Box-sizing values:
content-box: This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.
border-box: The width and height properties include the padding and border, but not the margin.
I am having an issue with my header on my website.
When I try to float the logo to the left, and float the nav to the right at the same time, it pushes all the content down and the 'header' joins the 'section' tag.
This is the JSFiddle if you would like to play around with it, any help would be greatly appreciated. Thank you.
https://jsfiddle.net/wh7wdpmu/
#logo {
width: 125px;
margin-top: 10px;
display: inline-block;
}
nav {
display: inline-block;
}
(Above is the CSS for the logo and nav so far)
I assume you want the logo to the far left and the menu to the far right?
If so you can try this: Demo
I added the floats left and right for the logo and nav respectively. I then added width: 100% to your header as well as an inline-block display property. Remove the excessive img margin to the logo (or add it to the header instead).
body {
background-image:url("http://i300.photobucket.com/albums/nn18/ojijimanuel/LONDONWALLPAPERBLUR_zpstm3nxnwu.jpg");
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
margin-left:100px;
margin-right:100px;
}
#logo {
width:125px;
display:inline-block;
float: left;
}
header {
display: inline-block;
width: 100%;
font-size: 0;
}
section h1 {
color:white;
font-family:arial;
font-weight:bold;
font-size:50px;
}
section {
text-align:center;
margin-top:300px;
}
#learnmore {
border:none;
background-color:#191919;
padding-left:30px;
padding-right:30px;
padding-top:15px;
padding-bottom:15px;
color:white;
float:left;
opacity:0.5;
margin-top:100px;
}
#learnmore:hover {
opacity:1.0;
cursor:pointer;
}
#learnmore a {
text-decoration:none;
color:white;
}
p {
color:white;
font-family:arial;
}
nav {
display:inline-block;
float: right;
}
nav a {
text-decoration:none;
color:#cccccc;
font-family:arial;
padding-right:20px;
font-size:15px;
}
nav a:hover {
color:white;
}
Also, you have an extra <nav> tag in your HTML.
You need to clear the float on your header. Try applying overflow: hidden; on your header.
Updated fiddle
(You also had an extra nav tag in there)
I have two divs side by side in a control (RadRotator).
<div class="title_link_Wrapper">
<div class="title">
<span><%# System.Web.HttpUtility.HtmlEncode(XPath("title").ToString())%></span>
</div>
<div class="link">
<span>Link</span>
</div>
</div>
.title_link_Wrapper {
width:550px;
}
.title{
width: 80%;
float: left;
font-style:italic;
margin-left:6px;
font-weight:bold;
margin-top:6px;
}
.link {
margin-top:6px;
}
It is working in JsFiddle
But is not working in the control:
Any hint?
You can use display:table;(parent div) and display:table-cell;(children div) which gives the same output and works most of the times:
CSS
.title_link_Wrapper {
width:550px;
display:table;
}
.title{
display:table-cell;
width: 100%;
font-style:italic;
margin-left:6px;
font-weight:bold;
margin-top:6px;
}
.link {
display:table-cell;
min-width:60px;
margin-top:6px;
}
Demo Fiddle
Seems like you forgot add float:left; to the div with class link.
i think you need this :
<div class="title_link_Wrapper">
<div class="title">LeftLeft
<span class="link">right</span>
</div>
</div>
css
.title_link_Wrapper {
width:550px;
}
.title{
width: 80%;
float: left;
font-style:italic;
margin-left:6px;
font-weight:bold;
margin-top:6px;
}
.link {
margin-top:6px;
float:right;
}
DEMO
Div by default is Display: Block, which causes an element to be alone on that line.
you will want to force your divs to be Display: Inline
.title{
width: 80%;
float: left;
font-style:italic;
margin-left:6px;
font-weight:bold;
margin-top:6px;
display: inline; /* add this */
}
.link {
margin-top:6px;
display: inline; /* add this */
float: right; /* add this */
}
you may even want to wrap them in a div set to block.
Another thing that may happen is there is no specific width on .link, so if that gets wider than 20% you will spill over into the next row again, since you .title is set to 80%
I have like this little box with text inside, but it is stuck in the top, I have tried using Vertical Align it did not help, here is the code:
.Letters
{
font-size:24px;
color: white;
font-family:Futura, Arial, San-serif;
height:40px;
width: 40px;
margin:2px;
position:relative;
top:5px;
background-color:#3594F0;
text-align: center;
float: left;
display: inline;
vertical-align:middle;
}
jsfiddle link:
http://jsfiddle.net/2Hq3s/
I need the text to be in the absolute middle without enlarging the text.
Add to .Letters
line-height:40px; /* Same value as your 'height' */
vertical-align:middle;
DEMO
Use display: table, table-cell, like here: http://jsfiddle.net/maximgladkov/MALAj/
HTML
<p class="Letters">
<span>aasdfasd<br/>asdfasdfasdf</span>
</p>
CSS
.Letters
{
font-size:24px;
color: white;
font-family:Futura, Arial, San-serif;
height:400px;
width: 400px;
margin:2px;
position:relative;
top:5px;
background-color:#3594F0;
text-align: center;
float: left;
display: table;
}
.Letters span {
display: table-cell;
vertical-align: middle;
}
Use absolute positioning
top:50%;
bottom:50%;
position:absolute;
http://jsfiddle.net/2Hq3s/3/
Use display:table-cell on parent to use vertical align property
Here is a fiddle
<div class="parent">
<p class="Letters">a</p>
</div>
.parent{
background-color:#3594F0;
display:table-cell;
}
So far I have this:
<style>
#success_notification {
position:absolute;
top:0;
width:30%;
text-align:center;
font:20px Georgia;
color:#5C5C5C;
background:#F2FFED;
padding:10px;
}
</style>
<div style="margin:0 auto;"><div id='success_notification'>TESTING.</div></div>
and the div stays on the left... still. What am I doing wrong? Thanks.
You aren't setting left or right, causing your absolutely-positioned element to default to a left of 0. Try this:
#success_notification {
position: absolute;
top: 0;
left: 35%;
width: 30%;
text-align: center;
font: 20px Georgia;
color: #5C5C5C;
background: #F2FFED;
padding: 10px;
}
Here you go.
Removed the position: absolute, added the margin: auto to style, added width 100% to outer div. Works for me.
<style>
#success_notification {
top:0;
width:30%;
margin: auto;
text-align:center;
font:20px Georgia;
color:#5C5C5C;
background:#F2FFED;
padding:10px;
}
</style>
<div style="width: 100%; margin:0 auto;"><div id='success_notification'>TESTING.</div></div>
try this:
#success_notification {
position:absolute;
top:0;
left: 50%;
width:30%;
text-align:center;
font:20px Georgia;
color:#5C5C5C;
background:#F2FFED;
padding:10px;
}
...or even:
float:left;
...or:
float:right
this works great in all browsers