I don't understand why my footer is sitting slightly above the bottom of my webpage and not directly on the bottom
h6 {
font-family: Neue Haas Grotesk, sans-serif;
font-weight: 300;
font-size: 1.4vw;
color: white;
position: relative;
display: block;
}
.footer {
position: relative;
display: inline;
bottom: 0;
width: 100%;
height: 100%;
margin-bottom: 0;
padding: 0;
}
<div class="footer">
<h6>© Alex Burger. All rights reserved<br>Further information can be requested through email.</h6>
</div>
The <h6> tag has a native margin. So your problem will be solved with:
.footer h6 {
margin-bottom: 10px;
}
Note that setting margin: 0px have not the result that you expect, this will only be solved changing other parts fo your document.
Related
I have tried this very same method on a previous website in which it worked. I am not sure why isn't it working now.
body {
max-width: 100%;
}
#header_encapsulator {
max-width: 1000px;
margin: auto;
background-color: orange;
}
header {
position: fixed;
max-width: 60em;
width: 100%;
}
.logo {
float: left;
font-family: 'Tangerine', cursive;
font-size: 3rem;
padding: 0 0 0 1rem;
text-decoration: none;
font-weight: bold;
color: black;
}
nav {
float: right;
padding: 1.5rem 1rem 0 0;
}
nav a {
text-decoration: none;
}
nav a:first-child {
padding-right: .8rem;
}
h1 {
font-size: 2rem;
text-align: center;
padding: 12rem 0 2rem 0;
font-family: 'Roboto Slab', serif;
}
<div id="header_encapsulator">
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
</header>
</div>
<h1>Heading</h1>
I am not sure why margin:auto inside #header_encapsulator doesn't center <header> if I don't specify a max-width. The website will break on a monitor with >1000px width. It doesn't take 10000px value not does it take % values too.
Secondly, the header_encapsulator should show a orange background image edge to edge of the display. It doesn't show. I know that empty divs/sections doesn't display it's properties, but I have done it before, the exact same way.
Edit:
I have created a simpler html and css file with the same code. You can download it here and test it locally. I don't get the orange background 100% of the monitor width.
Don't know if there's any reason to have the #header-encapsulator not being fixed itself instead of the header inside (which causes the encapsulator to be "empty", thus, not having a height), but simply moving the position: fixed property to #header-encapsulatorand adding a width: 100% should fix the issue
Edit: Removed 10000px max-width property from #header_encapsulator and width:100% from header.
body {
max-width: 100%;
}
#header_encapsulator {
width: 100%;
background-color: orange;
/*Put it in here*/
position: fixed;
}
header {
/*Removed it from here*/
max-width: 60em;
margin:auto
}
.logo {
float: left;
font-family: 'Tangerine', cursive;
font-size: 3rem;
padding: 0 0 0 1rem;
text-decoration: none;
font-weight: bold;
color: black;
}
nav {
float: right;
padding: 1.5rem 1rem 0 0;
}
nav a {
text-decoration: none;
}
nav a:first-child {
padding-right: .8rem;
}
h1 {
font-size: 2rem;
text-align: center;
padding: 12rem 0 2rem 0;
font-family: 'Roboto Slab', serif;
}
<div id="header_encapsulator">
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
</header>
</div>
<h1>Heading</h1>
You are specifying max-width: 100%.
This is the maximum width that will be taken up by the div and in order to reach this width, the div element will require enough content to fill it to 100%.
Use width instead of max-width. This will force any div to be the specified width, regardless of content.
Give a height to your #header_encapsulator like so:
#header_encapsulator {
width: 1000px;
background-color: orange;
height: 100px; // or anything you want
}
plus if you want margin: auto header you should do something like:
#header_encapsulator header {
margin: auto;
//other css if you want
}
I have been looking around on stackoverflow to find the answer on my problem but I couldn't find it. The problem is that I have a background img where I want to have text on it. But if I use postition: absolute; the text disappears. I also don't want it in my style because I going to use this on different pages with different images.
Visit problem
HTML:
<body>
<div id="header">
<img src="http://www.larsdejonge.nl/werk/img/background.jpg" class="begin">
<h1>Aangenaam Klassiek</h1>
<h2>Vormgeving & Frontend</h2>
</div>
</body>
And my CSS:
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html, body {
width: 100%;
height: 540px;
background: #efede7;
}
body {
background: #efede7;
font-family: 'Montserrat', sans-serif;
color: #fff;
line-height: 1.3;
}
#header {
}
.begin {
width: 100%;
max-height: 540px;
}
h1 {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 3em;
font-weight: 700;
color: #fff;
text-align: center;
}
h2 {
font-family: 'ProximaNova', sans-serif;
font-size: 1.5em;
color: #c7c7c7;
text-align: center;
}
h2::after {
content: '';
width: 80px;
display: block;
background: #272f38;
height: 10px;
margin: 30px auto;
text-align: center;
}
I hope someone is smarter than me and could figure this out?
Thanks for already looking into it!
You put your background as image, so it's not just background, but also element with dimension. You should remove your <img /> and put it as background using CSS.
#header {
background: url('http://www.larsdejonge.nl/werk/img/background.jpg');
}
Remove the header image from your html and use CSS properties instead.
See DEMO which uses this updated CSS snippet:
#header {
background-image: url('http://www.larsdejonge.nl/werk/img/background.jpg');
background-size: auto 540px;
background-repeat: no-repeat;
height: 540px;
}
Background-resize is necessary because your image is way too large.
Remove <IMG> and use the img url as background in CCS:
here is an example:
http://jsfiddle.net/act6uasf/5/
I see that you don't want the img in your CSS but if you want that I think you need to find it out your self. I don't see the big problem using a url in your CSS ore is it just me?
My solution
You can better use it for the time this now, if you find later something else you can always change it.
HTML Code:
<body>
<div id="header">
<div class="text">
<h1>Aangenaam Klassiek</h1>
<h2>Vormgeving & Frontend</h2>
</div>
</div>
</body
CCS Code:
#header {
background-image: url(http://www.larsdejonge.nl/werk/img/background.jpg);
background-repeat: no-repeat;
width: 100%;
height: 540px;
}
.text {
padding-top: 150px;
}
h1 {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 3em;
font-weight: 700;
color: #fff;
text-align: center;
}
h2 {
font-family: 'ProximaNova', sans-serif;
color: #545454;
font-size: 1.25em;
letter-spacing: .06em;
margin: 0;
padding: 0 0 2.5em;
text-align: center;
text-transform: uppercase;
}
h2::after {
content: '';
width: 80px;
display: block;
background: #272f38;
height: 10px;
margin: 30px auto;
text-align: center;
}
If you really want to solve this problem with absolute position, you can use my example
http://jsfiddle.net/act6uasf/2/
here to make absolute property work, you just need to add
position:relative;
to #header, but i recommend you to try solving it with background property.
CSS doesn't prevent you from swapping the image out like you have suggested. I would use a body class.
HTML
<body class="home"><!-- change this class for each page -->
<div class="intro">
<p>
Hello World!
</p>
</div>
</body>
Simply change the class on the body tag for each page, i.e. home, about, contact, etc.
CSS
.home .intro {
background-image: url('path-to-image.jpg');
}
.about .intro {
background-image: url('path-to-some-other-image.jpg');
}
Here is a demo. Swap the class on the body tag from home to about and click Run to see the difference.
I am trying to make my footer stick to the bottom of the page. I want it to have 40px margin above and below but its not working out and keeps going over content in my site. Can someone help me out?
<div id="footer">
<div id="footer-line"> </div>
<div id="footer-nav"> Home | Expertise | Doctors | Facility | Contacts</div>
<div id="footer-copyright">© 2013 Website, Inc. All Rights Reserved.</div>
</div>
#footer {
margin: auto;
width: 900px;
height: 50px;
margin-bottom: 40px;
position: fixed;
bottom: 0;
}
#footer-line {
margin: auto;
width: 900px;
height: 2px;
background-color: #C9DA2A;
margin-top: 35px;
}
#footer-nav {
margin: auto;
float: left;
width: auto;
height: 30px;
color: #666666;
font-size: 16px;
font-family: "Times New Roman", Times, serif;
margin-top: 15px;
text-decoration: none;
}
#footer-nav a {
color: #666666;
font-size: 16px;
font-family: "Times New Roman", Times, serif;
text-decoration: none;
}
#footer-copyright {
margin: auto;
float: right;
width: auto;
height: 33px;
color: #666666;
font-size: 16px;
font-family: "Times New Roman", Times, serif;
margin-top: 17px;
text-decoration: none;
}
You have 2 margins defined in #footer:
#footer {
margin: auto; <----
width: 900px;
height: 50px;
margin-bottom: 40px; <----
position: fixed;
bottom: 0;
}
It should be margin: 40px auto; As a fixed element, it's going to go over the content on your site. You need to accomodate that by shrinking your content container to the height of the fixed bar.
Put a div at the bottom of your content. Something like...
<div class="push"></div>
Then style it with something like this...
.push {
height: 30px;
clear: both;
}
Should get everything pushed down. Works fine on every site I've used it on.
check out the fiddle
http://jsfiddle.net/HZ5NW/
add another div around your code as shown in the fiddle, remove these two lines of css from the footer and add them to the container div.
#container {
position: fixed;
bottom: 40px;
}
I have a problem with some css in my website
this is the main CSS source :
/* html selectors ---- */
html, body {
font-family: 'Arial Unicode MS';
margin: 0;
padding: 0;
background-repeat: repeat-x;
background-color: white;
direction: rtl;
font-size: 10.3pt;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
h1 {
font-size: 17pt;
text-decoration: underline;
top: 3px;
padding-bottom: 10px;
line-height: 25px;
}
h2 {
font-family: david;
font-size: 11pt;
color: #191970;
}
h3 {
font-size: 16pt;
color: white;
margin-left: 15px;
font-weight: bold;
margin-bottom: 20px;
padding-right: 30px;
padding-top: -55px;
font-family: 'Arial Unicode MS';
}
/*page -----------*/
#page {
width: 900px;
padding: 0px;
margin: 0 auto;
direction: rtl;
position: relative;
z-index: 100;
z-index: 5;
background-image: url("images/bgimage.png");
}
#leftshadow {
width: 100px;
height: 900px;
background-image: url("images/leftshadow.png");
position: absolute;
right: 840px;
z-index: none;
top: -25px;
}
#rightshadow {
width: 100px;
height: 900px;
background-image: url("images/rightshadow.png");
position: absolute;
right: -45px;
z-index: none;
top: -25px;
}
My question is how can I move the image-shdow back, behind the main content?
I tried a lot with z-index but I couldn't find a solution, can you help me solve thos problem pleas?
You forgot to use a position property in addition to the z-index property .. z-index will not work unless the element which has the z-index property applied to it is positioned using either:
position: relative;
position: absolute;
position: fixed;
Add one of those (relative preferably in your case) and it will work.
I recommend reworking your DOM structure to accomodate for this case, something like this:
<div class="content">
<div class="page"></div>
<div class="leftshadow shadow"></div>
<div class="rightshadow shadow"></div>
</div>
check out this fiddle of the how the new structure might work - http://jsfiddle.net/wHgm8/
You could also, if you wanted a nice clean shadow around the page, use css3 box-shadow, example here: http://jsfiddle.net/ASc7J/ though support is for newer browsers.
try this in your code:
box-shadow: 5px 0px 5px grey;
in above syntax, 5px is for left, 0px is for top and bottom and again 5px is for right. Play with the values untill you are comfortable. Also make sure you use hex values of color and is apt for a shadow.
You need both a position command, and "none" is not a valid z-index value. -1 works for me.
style="position:relative; z-index:-1;"
I've been meaning to replace the tables in my site with css positioning and have been trying to teach myself through tutorials etc. I've had some early success but it all came crashing down when I tried to create a sidebar. I'm hoping the problem has some kind of simple solution. The relative/absolute positioning of the elements is not going anywhere close to what I wanted to do. My goal is to have a sidebar with images that stack (float?) from top to bottom, with the middle elements being part of an unordered list. I got it to work once but now that stack on top of each other. It has to be the way I am setting the float and the absolute/relative positioning. After reading some articles here I tried adding a div wrapper to put them inside but I think I got myself even more confused. Is it possible someone could nudge me in the right direction? Here is the code:
CSS
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 50px;
padding: 0px;
color: #696969;
height: 160px;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS ----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* PRIMARY LAYOUT ELEMENTS ---------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
top: 0px;
left: 0px;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 0px 4px 4px 4px;
min-height: 420px;
width: 500px;
float: left;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* MISC ----------------------------------------------------------*/
.clear
{
clear: both;
width: 936px;
height: 35px;
}
.title
{
display: block;
float: left;
text-align: justify;
}
.bold
{
font-weight: bold;
}
p.clear
{
clear: both;
height: 0;
margin: 0;
padding: 0;
}
#wrapper
{
position:relative;
height: 500px;
width: 900px;
}
#insidemain
{
position:absolute;
float: left;
width: 500px;
height 180px;
}
/* ---------------- Sidebar Items ---------------------*/
#sidebar /* Sidebar container */
{
position:absolute;
border-top: 1px solid #99CC33;
border-left: 1px solid #99CC33;
height: 300px;
width: 180px;
margin-right: 5px;
padding: 5px 0 0 5px;
}
#sidebarHeader
{
position:absolute;
height: 37px;
width: 172px;
float: left;
background-image: url(../img/TopMenu.jpg);
background-repeat:no-repeat;
}
#sidebarItems ul
{
position:absolute;
height: 27px;
width: 172px;
float:left;
background-image: url(../img/MenuItems.jpg);
background-repeat:no-repeat;
/*left: 6px;
top: 45px;*/
background-position: 0px -27px;
}
#sidebarFooter
{
position:absolute;
height: 46px;
width: 172px;
float:left;
background-image: url(../img/BottomMenu.jpg);
background-repeat:no-repeat;
}
And the HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<link href="Styles/Simple.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div class="header">header
<div class="title">
<h1>
Test Page
</h1>
</div>
</div>
<p class = "clear">clear</p>
<div id="wrapper">
<div id="sidebar">
<div id="sidebarHeader">
</div>
<div id="sidebarItems">
<ul>
<li>test item</li>
</ul>
</div>
<div id="sidebarFooter">
</div>
</div>
</div>
<div id="insidemain">
main
</div>
</div>
<div class="clear">clear</div>
<div class="footer">
<a href="http://www.google.com/">
Blah blah test to see how far this will go across the page blah blha lorem ipsum and various other stuff that is meaningless etc
</a>
</div>
</body>
</html>
Typically (for non-responsive sites especially), you'd have your .wrapper div around the entire content (header, content, sidebar, footer, etc). Then set your .wrappers width. Your .sidebar would have a set width and it would either float: left; or float: right; depending on the side you want it on. Set your .content div's width which would be less than or equal to your .wrapper width - your .sidebar width. Then add your .clearfix below so the .footer falls beneath everything. In most cases (at least for the large page chunks) you can avoid position:absolute; which helps make things more easily fall into place.
You really shouldn't have to float your div's or list. Those are block elements by default and will stack vertically regardless.
Also, as Scrimothy mentioned, you do not want absolutely positioned elements as that will take the element out of the page flow. In other words, they no longer take up "real" space in the page, and instead render at whatever coordinates you position them.
Similarly, floats also take up no space, except with other floated elements. That's why some UI developers will float almost every element on the page and "clear" them using a footer or at key breaks in the page. I personally don't recommend positioning in that fashion, but to each his own.
See if this quick tutorial helps you with some key positioning concepts: HERE
Don't target the same element with both float and position:absolute. It doesn't make much sense. Anywhere where you have float, you should get rid of position:absolute
Next, get rid of those silly class="clear" elements. Instead, target .footer with clear:both and .page with overflow-y:hidden;