I want the footer to stay at the bottom of the page. Right now, it's at the top... I've posted my html and all my css so you can see. I figured it might be easier to do it that way? I've tried to add containers that stretch the body to the bottom, but it messes with my other containers on the page and makes them fall off way into the top. I need a quick answer because this is due in a week!
* {
margin:0;
padding:0;
}
body {
font-family:Arial;
background:#fff url(images/bg1.png) repeat;
background-size: 700px;
height: 100%;
min-height: 100%;
}
.title {
width:548px;
height:119px;
position:absolute;
background:transparent url(title.png) no-repeat top left;
}
#content {
margin:0 auto;
}
#horizon {
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
visibility: visible;
display: block;
}
#stuff {
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #fff;
opacity: 0.6;
margin-left: -500px;
position: absolute;
top: -125px;
left: 50%;
width: 1000px;
height: 250px;
visibility: visible;
overflow: scroll;
padding: 10px;
border: 5px dotted #F3DECD;
text-align: center;
}
footer {
}
<body>
<div id="content">
<div class="title"></div>
<div class="navigation" id="nav">
<div class="item user">
<img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
<h2>Home</h2>
<ul>
<li>About the Shop</li>
<li>About the Artist</li>
</ul>
</div>
<div class="item home">
<img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/>
<h2>How-To's</h2>
<ul>
<li>Jewelry</li>
<li>Clay</li>
</ul>
</div>
<div class="item shop">
<img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/>
<h2>Portfolio</h2>
<ul>
<li>Jewelry</li>
<li>Clay</li>
<li>Digital</li>
</ul>
</div>
<div class="item camera">
<img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/>
<h2>Contact</h2>
<ul>
<li>Questions</li>
<li>Suggestions</li>
</ul>
</div>
</div>
</div>
<div id="horizon">
<div id="stuff">
<h2> Welcome! </h2><br>
<p>This is a page that I have created for all my jewelry. This will be updated with new information periodically.</p>
</div>
</div>
<footer>
<a href="">
<img height="32" width="32" alt="'s Deviantart" src="deviantart.png">
</a>
<a href="">
<img height="32" width="32" alt="'s Think Jewelry Page" src="facebook.png">
</a>
</footer>
you could simply set a div with a position of absolute. It would look something like this:
html:
<div id='footer'></div>
css:
#footer{
height:45px;
width:100%;
background-color:grey;
position:absolute;
bottom:0;
}
You can use a fixed footer:
HTML
<footer>
...
</footer>
CSS
footer {
position: fixed;
left: 0px;
bottom: 0px;
height: 150px;
width: 100%;
}
The footer will always be visible in the viewport at the bottom of your page, check out this codepen.
If you are looking for a sticky footer approach check this.
For a sticky footer that is always present at the end of main content, I’ve always found using a wrapper containing a negative push div (set as the same size as the required footer) is a simple, yet the most solid approach.
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
height: auto !important;
height: 100%;
min-height: 100%;
margin: 0 auto -150px;
}
.push {
height: 150px;
}
footer {
height: 150px;
background-color: #900; /*red */
}
HTML
<html>
<head>
<!-- -->
</head>
<body>
<div class="wrapper">
<p>Main Content</p>
<!-- -->
<div class="push"></div>
</div>
<footer>
<p>Footer Content</p>
<!-- -->
</footer>
</body>
</html>
See codepen example here:
http://codepen.io/anon/pen/EaPRQb
Simply change the push div and footer heights to be the desired height (in my example 150px) and the wrapper's bottom margin to be a negative of that height (ie. -150px in my example)
You can try like this,
footer
{
position:fixed;
}
Related
I want to create a #necker div with the same height, and width, and to center him the same way as my #header div that fixed to top of screen.
I tried to copy the data from the #header div to #necker div and margin in down from top. Failed :(. Could you help me?
#header {
position: fixed;
display: inline-block;
margin: 0 10%;
top: 0px;
width: 80%;
height: 150px;
background: rgb(217, 47, 54);
z-index: 1;
}
#necker {
position: relative;
display: inline-block;
margin: 0 10%;
margin-top: 142px;
width: 80%;
height: 150px;
background: rgb(245, 210, 83);
}
<html>
<head>
<title> Yakir Freed </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
<img id="logo" src="images/logo.png" alt="Yakir Freed" />
<div class="Categories" id="Cate1">
<h2>Home Page</h2>
</div>
<div class="Categories" id="Cate2">
<h2>About us</h2>
</div>
<div class="Categories" id="Cate3">
<h2>Support</h2>
</div>
<div class="Categories" id="Cate4">
<h2>Sales!</h2>
</div>
<div class="Categories" id="Cate5">
<h2>Contact us</h2>
</div>
</div>
<div id="necker"></div>
</body>
</html>
The div can't center the same as the menu, because the position: fixed casues it to ignore the default margin from the browser stylesheet. If you add margin: 0 to body the two elements will be centered in the same spot.
#header {
position: fixed;
display: inline-block;
margin: 0 10%;
top: 0px;
width: 80%;
height: 150px;
background: rgb(217, 47, 54);
z-index: 1;
}
#necker {
position: relative;
display: inline-block;
margin: 0 10%;
margin-top: 142px;
width: 80%;
height: 150px;
background: rgb(245, 210, 83);
}
body {
margin: 0;
}
<div id="header">
<img id="logo" src="images/logo.png" alt="Yakir Freed" />
<div class="Categories" id="Cate1">
<h2>Home Page</h2>
</div>
<div class="Categories" id="Cate2">
<h2>About us</h2>
</div>
<div class="Categories" id="Cate3">
<h2>Support</h2>
</div>
<div class="Categories" id="Cate4">
<h2>Sales!</h2>
</div>
<div class="Categories" id="Cate5">
<h2>Contact us</h2>
</div>
</div>
<div id="necker"></div>
<div class="makeitscroll"></div>
What's exactly what you are not expecting from your code? If the problem is that the two div hasn't got the same width, try removing the margin and padding from the body (so 80% results in both cases in the same number of pixels).
The fixed block use the complete viewport width to calculate the 80%, instead, the #necker use the body width (using the default margin or padding that the browser is applying)
body{
margin: 0px;
padding: 0px;
}
If that's not your problem, I can't see what you need to achieve, please, could you be more specific?
I believe below solution will help you. Thing you missed is default margin <body> has. Deleting it fixes the issue.
Key part
body {
margin: 0;
}
Snippet
body {
margin: 0;
}
#header {
position: fixed;
display: inline-block;
top: 0px;
margin: 0 10%;
width: 80%;
height: 150px;
background: rgb(217, 47, 54);
z-index: 1;
}
#necker {
position: relative;
display: inline-block;
margin: 0 10%;
margin-top: 142px;
width: 80%;
height: 150px;
background: rgb(245, 210, 83);
}
<html>
<head>
<title> Yakir Freed </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
<img id="logo" src="images/logo.png" alt="Yakir Freed" />
<div class="Categories" id="Cate1">
<h2>Home Page</h2>
</div>
<div class="Categories" id="Cate2">
<h2>About us</h2>
</div>
<div class="Categories" id="Cate3">
<h2>Support</h2>
</div>
<div class="Categories" id="Cate4">
<h2>Sales!</h2>
</div>
<div class="Categories" id="Cate5">
<h2>Contact us</h2>
</div>
</div>
<div id="necker"></div>
</body>
</html>
website :https://wells-demo.squarespace.com/
Need logo in center of page section excluding left sidebar(header) in squarespace WELLS template on all format mobile,desktop etc.I am trying to figure out but no result.following is my code
$(document).ready(function(){
$('#headerWrapper #header ').after('<div id="logo1" data-content-field="site-title"><h1 class="logo image" data-shrink-original-size="23" style="letter-spacing: 0.0869565em;"><img src="//static1.squarespace.com/static/5adfd10929711421a9b29d21/t/5adfdbac562fa79909bad158/1524908392416/?format=750w" alt="L ETO BRIDAL" width="130" height=50"></h1></div>');
});
#logo{display:none;}
#headerWrapper{top:4px!important}
#logo1 h1 a img {
height:70px!important;
}
#logo1 {
left: 300%;
position: absolute;
text-align: center !important;
top: 10px !important;
transform: translateX(-50%);
Based on your current CSS, this should do it:
#logo {
width: 100%;
text-align: center;
}
#media (min-width: 801px) {
#logo {
position: fixed;
width: calc(100% - 340px);
top: 0;
margin-left: 240px;
box-sizing: border-box;
background-color: #ffffff85;
padding: .5rem 0;
border-bottom: 1px solid #fff;
}
}
Note: in current form, your question is not really useful to future visitors.
You can read the structure i made below using w3.css from w3schools. I have given a border colour to every div so you can see the boundary of that div and it will make it easy to learn for you.
.outer
{
border:1px solid red;
min-height:100px;
width:100%;
}
.inner-left
{
border:1px solid green;
}
.inner-right
{
border:1px solid blue;
}
.centetr
{
text-align:center;
}
.photo
{
width:95%;
margin:0px auto;
height:40px;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-container outer">
<!--left side-->
<div class="w3-quarter inner-left">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
<div class="w3-rest inner-right">
<div class="w3-container w3-margin-bottom centetr">
NAME
</div>
<div class="w3-container">
<div class="w3-half">
<img src="" class="photo">
</div>
<div class="w3-half">
<img src="" class="photo">
</div>
<div class="w3-half">
<img src="" class="photo">
</div>
<div class="w3-half">
<img src="" class="photo">
</div>
</div>
</div>
</div>
I'm really not sure that my title is correct english. Hehe. But fortunately I can explain my problem in pictures ;-)
My problem is this:
body {
font: calibri;
background-color: #2d2e29;
margin-left: 150px;
margin-right: 150px;
margin-bottom: 0px;
margin-top: 0px;
}
p {
margin: 0px;
}
nav {
position: fixed;
width: 100%;
height: 80px;
background-color: #FFFFFF;
opacity: 0.75;
top: 0;
left: 0;
margin-left: 150px;
margin-right: 150px;
}
nav ul {
float: right;
list-style-type: none;
padding: 0;
margin-top: 30px;
margin-right: 30%;
}
nav li {
display: inline;
}
nav a {
margin: 5px;
color: black;
}
nav a:hover {
color: #99cccc;
}
#Forside {
background-color: #3f5c93;
height: 800px;
}
#Mig {
background-color: #ccc2a6;
height: 800px;
}
#Faerdigheder {
background-color: #3f5c93;
height: 800px;
}
#Projekter {
background-color: #ccc2a6;
height: 800px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Kontakt {
background-color: #3f5c93;
height: 800px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#logo {
height: 100%;
width: 200px;
background: url("Logo.png");
margin-top: 10px;
margin-left: 50px;
background-repeat: no-repeat;
position: absolute;
background-size: 200px;
}
<div id="all">
<nav>
<!-- navigations-element (menu) -->
<div id="logo"></div>
<ul>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Forside">
Forside
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Mig">
Mig
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Faerdigheder">
Færdigheder
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Projekter">
Projekter
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Kontakt">
Kontakt
</a>
</li>
</ul>
</nav>
<div id="Forside">
<br>
<br>
<br>
<br>
<br>Forside
</div>
<div id="Mig">
<br>
<br>
<br>
<br>
<br>
<div class="meleft">
<h1>Mig</h1>
<p class="textleft">Lots of words
</p>
</div>
<div class="meright">
<img src="sdp.png" alt="sdp" id="sdp1" />
</div>
</div>
<div id="Faerdigheder">
<br>
<br>
<br>
<br>
<br>
<div class="skillsleft">
<img src="Collage1.png" alt="Collage" id="Collage" />
</div>
<div class="skillsright">
<h1>Færdigheder</h1>
<p class="textright">Lots of words
</p>
</div>
</div>
</div>
I added my code to fiddle, so you can see the problem:
http://jsfiddle.net/9Lj6ck3L/
I hope you can understand the code even though some words is in Danish :-)
Given the HTML and CSS provided, set the width of the nav to calc(100% - 300px);
Demo Fiddle
Otherwise you are telling it to be the full viewport width, offset from the left by 150px which is why it seems to overspill to the right. Using calc you can say, "fine, stretch to the viewport width, but minus the margins"
Working fiddle - http://jsfiddle.net/9Lj6ck3L/11/
Changed width of your header bar.
nav {
position:fixed;
width:63.5%;
height:80px;
background-color:#FFFFFF;
opacity:0.75;
top:0;
left:0;
margin-left:150px;
margin-right:150px;
}
Hope this helps.
Your problem is position:fixed. This element does not inherit anything from it's parent in terms of width.
Your best bet would be to wrap the nav in another <div> and make that position fixed. Then give the <nav> inside it the width that you want.
Move the <nav> outside of the #all div and put your margins on #all instead of the body.
Then give your <nav> css of box-sizing: content-box or box-sizing: padding-box to solve the width issue.
Im trying to put together some images together with an text under the images which will work as an menu, which should be centered horizontal under an header. The website is supposed to work as an responsive website. The HTML and CSS code is currently looking like this:
Edited
I want 5 images, each one of them shall have a text under them. And I want the my images together with the text to be centered.
HTML
<nav>
<div id="content">
<img src="ikoner/icon_90_2.png"/>
<div class="text">Utvecklingen sedan 90-talet</div>
</div>
<div id="content">
<img src="ikoner/icon_html5.png"/>
<div class="text">HTML5</div>
</div>
<div id="content">
<img src="ikoner/icon_html5video.png"/>
<div class="text">HTML5 Video</div>
</div>
<div id="content">
>img src="ikoner/icon_responsive.png"/>
<div class="text">Responsive Webdesign</div>
</div>
<div id="content">
<img src="ikoner/icon_heart.png"/>
<div class="text">Emotional Design</div>
</div>
</nav>
CSS
#content {
position: relative;
width: 15%;
display: inline-block;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#content img {
padding-top: 370px;
width: 100px;
}
.text {
font-size: 12px;
font-family: 'ciclethin';
text-decoration: none;
}
You're not aligning your "Nav" div anywhere.
So, I've changed the id="content" to classes, because IDs should be unique to the page.
Set nav element to text-align:center. Here's a fiddle, and the relevant code:
http://jsfiddle.net/cw16tkdn/2/
<nav>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Utvecklingen sedan 90-talet
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">HTML5
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">HTML5 Video
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Responsive Webdesign
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Emotional Design
</div>
</div>
</nav>
and CSS:
nav {
text-align:center;
}
.content {
display: inline-block;
text-align: center;
}
.content img {
width: 100px;
}
.text {
font-size: 12px;
font-family:'ciclethin';
text-decoration: none;
}
maybe you want this: (i have changed id=content with class=content in html code!)
.content {
position: relative;
width: 100px;
display: inline-block;
height: 520px;
text-align: center;
vertical-align:bottom;
}
.content img {
padding-top: 370px;
width: 100px;
display:block;
margin: auto;
}
.text a {
font-size: 12px;
font-family: 'ciclethin';
text-decoration: none;
}
.text {
height: 3em;
}
When i do my web design, meet a problem when i need to do
[LEFT LOGO] then [TITLE(CENTER)] then [RIGHT LOGO]
The problem appear at RIGHT LOGO there, it doesn't align with LEFT LOGO.
The right logo is under the line of TITLE(CENTER)
here is my code sample, thanks:
<div class="navigation">
<div id="left">
<a title="Multimedia" href="#">
<img src="images/logo.png"/>
</a>
</div>
<div id="title">Tutor Program</div>
<div id="right">
<a href="#" title="Inspire and Innovate">
<img src="images/tagline_alt.png"/>
</a>
</div>
css:
.navigation{
height:auto;
background-color:#666;
width:85%;
margin:auto;
min-width:800px;
}
#title{
text-align:center;
margin: auto;
font-family:‘Arial Black’, Gadget, sans-serif;
font-size: 20px;
color: #FFF;
}
#left {
float: left;text-align:left;
margin: auto;
}
#right {
float: right;text-align:right;
margin: auto;
}
a img { border: 0; }
simply move the right container above the left container check below
<div class="navigation">
<div id="right">
<a href="#" title="Inspire and Innovate">
<img src="images/tagline_alt.png"/>
</a>
</div>
<div id="left">
<a title="Multimedia" href="#">
<img src="images/logo.png"/>
</a>
</div>
<div id="title">Tutor Program</div>
</div>
I thing its work an another way i have some changes in style width depends of logo width. if it is not set in center then change the width %.
#title{
text-align:center;
margin: auto;
font-family:'Arial Black', Gadget, sans-serif;
font-size: 20px;
color: #FFF;
width:59%;
float:left;
}
.clear {
clear:both;
margin:0px;
font-size:0px;
}
and add a div after the last div with class clear.
<div id="right"> .... </div>
<div class="clear"> </div>
You could also display your divs as a table and table-cells, like this:
HTML
<div class="navigation">
<div id="left">
left
</div>
<div id="title">
title
</div>
<div id="right">
right
</div>
</div>
CSS
.navigation {
width: 100%;
display: table;
table-layout: fixed;
}
.navigation > div {
display: table-cell;
}
.navigation div:nth-child(1) {
background: lightgray;
}
.navigation div:nth-child(2) {
background: gray;
text-align: center;
}
.navigation div:nth-child(3) {
background: lightgray;
text-align: right;
}
Also check the JSFiddle Demo