I have gotten frustrated enough trying to finish this mock up website that I have come crawling to you guys for help. I am having 2 issues at the moment. First my content wrapper background which is all white keeps getting pushed up whenever I open Firebug to examine my code. Second my content wrapper white background is not including my footer in Firefox. In IE it includes it most of the way but not 100%. Cuts off a line of text. Any help would greatly be appreciated.
html,body {height:100%;width:100%;}
html,body,#End {margin:0;padding:0;}
body {
text-align: center;
position:absolute;
}
Content_Wrap {
text-align: left;
width: 864px;
margin: 0 auto;
height:100%;
background-color:#FFF;
}
address{
font-family:'Advent Pro', sans-serif;
font-size:14px;
float:left;
color:#195a80;
height:100px;
width:auto;
}
copyright{
font-family:'Advent Pro', sans-serif;
font-size:14px;
float:right;
color:#195a80;
height:40px;
width:auto;
}
footer{
height:300px;
width:inherit;
float:left;
}
Address and copyright sit inside the footer while everything except for my end div sits inside the content wrap. When I check with Firebug it shows the footer within the wrapper.
Link to mockup I am working on. http://ninjasquared.com/LWM/
Remove height:100% from #Content_Wrap and let wrapper to fill around it. Adding overflow: hidden; to #Content_Wrap will do trick for you!
Just replace your #Content_Wrap with this:
CSS:
#Content_Wrap {
background-color: #FFFFFF;
margin: 0 auto;
overflow: hidden;
text-align: left;
width: 864px;
}
Hope it helps you!
Are you targeting IDs, classes?
body and html are elements
but Content_Wrap and copyright are probably IDs or classes and should be referenced like #copyright or .copyright respectively.
Here's a w3schools link for ID/class references.
Related
This is my css code:
* {
box-sizing:border-box;
}
body {
font-family:Raleway, sans-serif;
text-decoration:none;
line-height:1.42857143;
margin:0;
}
html {
position:relative;
min-height:100%;
}
.wrapper {
width:960px;
margin-left:auto;
margin-right:auto;
}
JSfiddle:
http://jsfiddle.net/yb2sLhox/
I need page like same margin such as header, content and footer. left and right side margin should be same space.. like this http://postimg.org/image/ojhkt7bg3/a099ed23/
When resizing the window is working correctly. I think in content part need to change it.
Can anybody help me?
You can try adding padding to your section
section{
padding: 0px 30px;
}
OR
Try adding some width to your section like this
section{
width:90%;
margin:auto;
}
DEMO
Okay so this is quite hard to explain but basically I position the title div perfectly so that it is centered in the header div.
It remains in this position on some computers.
However, on other computers it jumps further down the page - even with the same positioning attributes. (This is tested on the same web browser.)
I have tried with absolute, relative etc. positioning, still no luck!
Note: This div contains text.
CSS:
#header {
position:relative;
height:170px;
background-color: #30A7BF;
margin:0px auto;
padding: 1px;
}
#title {
position: relative;
top: -20px;
left: 315px;
}
Thanks!
Hi is difficult to understand exactly your issue but I can give you a few tips to have a nice center vertical and horizontal:
For horizontal alignment you can use display:inline-block if you want all the div centered:
#header {
text-align:center;
}
#title {
display:inline-block;
}
For vertical align use line-height equal to the total height
#header {
line-height:170px;
}
This only work for one line text if you want another option tell me
And the demo here http://jsfiddle.net/8JLzy/7/
Edit
To work with a text of more than one line you can do this : First your html add a wrapper inside #title:
<div id="header">
<div id="title">
<div class="center">Your Title</div>
</div>
</div>
And on the CSS work with display property:
#title {
display:table;
height:100%;
margin:auto; /*Make the horizontal*/
}
#title .center {
display:table-cell;
vertical-align:middle;/*Make the Vertical*/
}
New demo http://jsfiddle.net/8JLzy/16/
use line-height, not position:relative
#header {
/*position:relative;*/
height:170px;
background-color: #30A7BF;
margin:0px auto;
padding: 1px;
font-size:1em;
}
#title {
line-height:0.5em; /* for example, or instead use padding-top: */
padding-left: 315px;
}
I'm trying to align a 'div' attribute to the center of the page (horizontally). The problem is that whatever attributes I've used, the 'div' continues to be aligned to left. The 'div' which I am reffering to, is the page 'div' of the webpage, which is inside the 'html' and the 'body' attributes. Here's the CSS code:
#page{
margin-top:20px;
margin-bottom:20px;
margin-left: auto;
margin-right:auto;
border-color: black;
border-style: solid;
border-width: thin;
overflow:auto;
padding-bottom: 10px;
padding-top: 0px;
width:1200px;
background-color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
color:black;
font-size:12px;
height:700px;
}
and the 'html', 'body' CSS code is the following:
html,body {
background-color:#FFFFFF;
margin-left: auto;
margin-right: auto;
}
Note that if I remove the "overflow" property, the div is aligned to the center of the page (although, it overlays the menu which is on top of it) but I need the "overflow" property to automatically add scrollbars if the width/height of the page which would be displayed inside this div is greater than those specified in the CSS.
I haven't coded anything in awhile, however normally when I am creating a centered page:
html, body { width: 100%; height: 100%; margin: 0 auto; text-align: center; }
Then for the div:
#page { width: 900px; overflow: hidden; text-align: left; margin: 20px 0 20px 0; }
That may or may not work, like I said, it has been awhile.
In order to margin:auto works in your case is required to have a defined width/height for your main containers which are HTML and BODY
IMPORTANT:Both HTML and BODY elements must be ruled with the width/height properties
Do as follows
html,body {
background-color:#FFFFFF;
width:100%;
height:100%;
}
and watch this fiddle
It seems your div is filling full screen width. So center alignment will not have any visible effect on the div. Try to use a span instead.
Following will NOT work
<body style="text-align:center">
<div>Foo</div>
</body>
Following should work
<div style="text-align:center">
<span>Foo</span>
</body>
<div style="margin:0px auto;">sfsfsafafas</div>
Use this code surely it will make the div to center.
Simple:
HTML
<div id="page"></div>
CSS
#page {
width: 350px; height: 400px; border: 1px solid #000; margin: auto
}
jsFiddle example
You might also look at the "left" and "right" attributes for centering a if you are trying to center horizontally.
For instance, if your width was 60% of the page (width:60%), you could set (left:20%) and (right:20%) which MAY center it, however that depends on how your div is positioned. (position:absolute) or (position:relative).
(position:absolute) with the above width, left, and right should center horizontally.
There is also <center> enter code </center> within HTML that has worked for me in the past.
I'm not a guru with this though, so I don't know what "best practice" to use in your case.
I made a site with pictures and when i enter on the picture page and ...click on Next, Preview pictures the picture float to right. In IE work well but in Google Chrome, Mozilla,Safari ...the middle page float to right.
I tried change in css but nothink .You can help me pls?
Thanks in advance !
The class "content" i put in header and the css code
body {
/*background-color: none;
border-radius: 25px;
background-image:url('/images/gray_jean.png');*/
background: #ffffff;
color: #000000;
margin:0;
padding:0;
}
.content {
position:relative;
margin:0 auto;
margin-left: auto;
margin-right: auto;
text-align: center;
width:100%;
clear: both;
}
Thanks
Replace your current code to this,
.content {
margin:0 auto;
text-align: center;
width:100%;
}
Remove the position:relative; from the .content.
.content {
position:relative; // Remove this
}
And try, may be?
I am using this site.
Aim :
I want to move my footer based on the content of every page.
1)If there is more content then i want to put my footer after the content.
2)I want to fix the footer to the bottom of the window screen, if there is no content like this in the following picturealt text http://www.freeimagehosting.net/uploads/e893eac88b.png
My existing CSS :
I am currently using min-height property in #content to keep the footer at the bottom.
#footer_outer{
width:100%;
background:#444;
padding:10px 0 0 0;
margin-top:50px;
height: 130px;
}
#footer {
margin:0 auto;
width:834px;
height:auto;
overflow:hidden;
}
#content {
padding:5px;
margin:0 auto;
width:890px;
height:auto;
min-height:450px;
}
body {
font-family:'Helvetica Neue', helvetica, arial, sans-serif;
color:#757575;
font-size:14px;
padding:0;
margin:0;
background:#FAFAFA;
}
Please help me in achieving my aim. Thanks a lot in advance.
regards,
vaths
1. Use fixed position divs
http://www.dailycoding.com/Posts/creating_always_visible_div_using_css.aspx
Change CSS to
#footer {
margin:0 auto;
width:834px;
height:auto;
overflow:hidden;
position: fixed;
bottom: 0px;
}
2. How to keep footers at the bottom of the page
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page