heres the image of the error I tried several methods on how to align the footer at the bottom but I haven't found any solution what method should I use to solve the problem?
<footer>
<div class="container">
<nav class="footer-nav">
<ul>
<li>About us</li>
<li>Contact</li>
</ul>
</nav>
<nav class="footer-nav">
<ul>
<li>
<a href="#" class="social-link">
<img src="/img/iconmonstr-facebook-2.svg" alt="" />
Facebook
</a>
</li>
<li>
<a href="#" class="social-link">
<img src="/img/iconmonstr-instagram-11.svg" />
Instagram
</a>
</li>
</ul>
</nav>
</div>
</footer>
Add style to the footer element:
style="position:absolute; bottom:0px"
You can use position: absolute as recommended by avi,
But I generally recommend against absolute where possible.
This can be also solved using flexbox.
set the flex-direction to column,
and set flex: 1 on the main part which you want to take all space (generally you don't want the header and footer to expand)
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
header {
background-color: red;
}
main {
flex: 1;
background-color: green;
}
footer {
background-color: blue;
}
<header>Header<</header>
<main>Main</main>
<footer>Footer</footer>
NOTE: you must set the body and html height to 100% in order for that to work.
https://jsfiddle.net/jszht5xp/19/
Related
Hello everyone when i hover the a tag i class dropdown dropmenu won't apear.
I try to change .dropdown by nav tag and it works but it works when i hover on the whole nav.
CSS :
.dropmenu {
display: none;
position: absolute;
text-align: center;
background-color: #fafafa;
margin-top: 20px;
width: 100%;
height: 100%;
}
}
.dropdown :hover: .dropmenu {
display: block;
}
HTML
<header>
<nav>
<div class="navleft"><h1>Morocco.</h1></div>
<div class="navmid">
<ul>
<li>
<div class="dropdown">
Decouvrir le Maroc
</div>
<div class="dropmenu">
<ul>
<li>Histoire</li>
<li>Histoire</li>
<li>Histoire</li>
<li>Histoire</li>
</ul>
</li>
</div>
<li>Destination</li>
<li>Infos Pratique</li>
<li>Nous contacter</li>
</ul>
</div>
<div class="navright">
<img src="/img/menu_FILL0_wght400_GRAD0_opsz48.svg" alt=""/>
</div>
</nav>
</header>
I try to replace .dropmenu by nav tag and it work but it work on the all navbar and not a only
You have errors on CSS and HTML
<header>
<nav>
<div class="navleft"><h1>Morocco.</h1></div>
<div class="navmid">
<ul>
<li>
<div class="dropdown">
Decouvrir le Maroc
</div>
<div class="dropmenu">
<ul>
<li>Histoire</li>
<li>Histoire</li>
<li>Histoire</li>
<li>Histoire</li>
</ul>
</div>
</li>
<li>Destination</li>
<li>Infos Pratique</li>
<li>Nous contacter</li>
</ul>
</div>
<div class="navright">
<img src="/img/menu_FILL0_wght400_GRAD0_opsz48.svg"
alt=""/>
</div>
</nav>
</header>
.dropmenu {
display: none;
position: absolute;
text-align: center;
background-color: #fafafa;
margin-top: 20px;
width: 100%;
height: 100%;
}
.dropdown:hover ~ .dropmenu {
display: block;
}
First: the <div class="dropmenu"> is not closing at the good place
Second: you have an extra bracket that you don't need in your CSS file
Three: the css is not good (the ~ is used to sibling "brothers" element)
I don't know if my english is good enough, but hope it will help you
For my school project I am allowed to choose a topic that is based on work we've been doing for the past two years. I chose web development. I'm creating site that simply collates various resources relevant to the subject matter, and that's easy.
The only issue I'm running into is centering elements when there is a navbar on the side.
For example, I'm trying to include this image of 'Brackets' on the homepage, but when I want to center it, it centers relative to screen and not relative to the container.
(The arrows point to where I'm trying to center things from)
Link to jsfiddle
.navbar-fixed-left {
width: 140px;
position: fixed;
border-radius: 0;
height: 100%;
}
.navbar-fixed-left .navbar-nav > li {
float: none;
/* Cancel default li float: left */
width: 139px;
}
.navbar-fixed-left + .container {
padding-left: 160px;
}
/* On using dropdown menu (To right shift popuped) */
.navbar-fixed-left .navbar-nav > li > .dropdown-menu {
margin-top: -50px;
margin-left: 140px;
}
.sidebarheader {
height: 35px;
border-radius: 1px;
border-bottom: 2px solid #9d9d9d;
}
.sidebaritem {
height: 35px;
}
body {
background-color: #fcfcfc;
}
.jumbotron {
margin-top: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-left">
<a class="navbar-brand" href="index"><i class="fa fa-code" aria-hidden="true"></i></a>
<ul class="nav navbar-nav">
<!-- HTML Section-->
<li class="sidebarheader">HTML
</li>
<li class="sidebaritem">Basic Reference
</li>
<li class="sidebaritem">Bootstrap
</li>
<li>Icons
</li>
<!-- CSS Section-->
<li class="sidebarheader">CSS
</li>
<li class="sidebaritem">Basic Reference
</li>
<li class="sidebaritem">Specificity
</li>
<li class="sidebaritem">Selectors
</li>
<li class="sidebaritem">Fonts
</li>
<!-- Javascript Section-->
<li class="sidebarheader">Javascript
</li>
<li class="sidebaritem">Basic Reference
</li>
<li class="sidebaritem">Plugins
</li>
</ul>
</div>
<div class="container">
<div class="page-header">
<h1>Web Developer Reference</h1>
<p>A website containing information for web development.</p>
</div>
</div>
<img class="center-block" src="http://brackets.io/img/hero.png">
Otherwise you made a simple mistake, you did not include img tag to container. It is outside container element.
Here is the corrected code. I've noticed you have included margin in image itself. You don't need that margin.
<div class="container">
<div class="page-header">
<h1>Web Developer Reference</h1>
<p>A website containing information for web development.</p>
</div>
<div class="page-content">
<img class="responsive" src="http://brackets.io/img/hero.png">
</div>
</div>
EDIT: I've made some other adjustments to your code. I am not sure if you want that, but it works better. I've also added responsive image, that fits container every time.
img.responsive {
width:100%;
height:auto;
}
I know that there are thousands of Topics about Footers but I still cannot ajust mine, I have tryed alot of things but nothing helped..... The footer should be always at the bottom of the page visible only when I scroll down the content.
Hope someone will have any suggestions!
This is my footer:
<div class="wrap">
......
</div>
<div class="footer">
<div class="container">
<div class="col-sm-4">
<img class="menu-icon" src="img/other/user.png"><h11>Account</h11>
<ul class="unstyled">
<li>ddd</li>
<li>ddd</li>
</div>
<div class="col-sm-4">
<img class="menu-icon" src="img/other/gear.png"><h11>Support</h11>
<ul class="unstyled">
<li>ddd</li>
<li>ddd</li>
<li>ddd</li>
<li>ddd</li>
</div>
<div class="col-sm-4">
<img class="menu-icon" src="img/other/share.png"><h11>Share Us</h11>
<ul class="unstyled">
<li><img class="menu-icon" src="img/other/tw.png">Twitter</li>
<li><img class="menu-icon" src="img/other/fb.png">Facebook</li>
<li><img class="menu-icon" src="img/other/gp.png">Google Plus</li>
</div>
</div>
</div>
CSS:
html,
body {
height: 100%;
}
.wrap {
height: auto !important;
min-height: 100%;
}
.footer {
position:absolute;
bottom:0;
width:100%;
height: 140px;
background-color: #222;
}
Check if the below link works with you.
Fiddle
#footer {
position: relative;
background-color: darkcyan;
color: white;
z-index: 1;
}
Im not a 100% sure what your trying to achive. but i suspect that the error might be in your css.
you are currently using:
position:absolute;
And if you want your footer to stick to the bottom of the content, you shouldnt need to manipulate the element to use absolute positioning.
Is this the issue you are facing?
this example is using position:absolute as your code suggests.
https://jsfiddle.net/pvwLu49x/1/
is this what you are trying to do?
https://jsfiddle.net/pvwLu49x/2/
I am trying to make my list items all the same width. I've tried setting the widths in the css and nothing changes. Can anyone figure this out?
Here is an image to show what I am talking about:
HTML:
<body>
<div class="content-wrapper" id="container">
<header>logo
<nav>navigation</nav>
</header>
<div class="clear-fix"></div>
<div id="body">
<section class="main-content">
<section class="leftPane">
<h2>Categories</h2>
</section>
<section class="rightPane">
<div class="checkout">
<h1>Checkout</h1>
<ul class="steps">
<li><a href="http://localhost:59213/Cart">
<div id="step0" class="arrow_box_grey">
Shopping Cart</div>
</a>
</li>
<li><a href="http://localhost:59213/Cart/Student">
<div id="step1" class="arrow_box_grey">
Student</div>
</a>
</li>
<li><a href="http://localhost:59213/Cart/Delivery">
<div id="step2" class="arrow_box_grey">
Delivery</div>
</a>
</li>
<li>
<div id="step3" class="arrow_box_green">Payment</div>
</li>
<li>
<div id="step4" class="arrow_box_blue">Finish</div>
</li>
</ul>
</div>
</section>
<div class="clear-fix"></div>
</section>
</div>
</div>
And here if my fiddle with the code: http://jsfiddle.net/M74Em/
You need to change this style:
.main-content .checkout ul.steps li div {
display: inline;
width: 1000px;
}
You can't set widths for inline elements so try this:
.main-content .checkout ul.steps li div {
display: inline-block;
width: 100px;
}
Example
From twBootstrap, applied to <ul>'s (demo):
.ul-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.ul-justified > li {
display: table-cell;
float: none;
width: 1%;
}
and slap .ul-justified to any ul-list you want aligned, and you get equal width <li>'s automatically fit parent ul's width.
QUESTION: I am trying to get my {{TEXT}} or ".acton" section to remain centered in the body of the page and between the footer and header at all times.
I'm using this template to build out landing pages in a marketing automation software called ACT-ON. So hopefully whatever fix we can put in for the body content to remain centered will take.
Here is my jsfiddle:
http://jsfiddle.net/misterizzo/dMu79/
<body>
<div id="bg">
<img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png">
</div>
<div id="main">
<div id="header">
<div id="top-left"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo">
</div>
<div id="nav">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
<div class="acton">
{{TEXT}}
</div>
<div id="footer">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
</div>
</div>
</body>
Hopefully this is my last questions on this template i've been building.
I sincerely appreciate all the help from everyone so far!
you can easely use the display : table,table-row/table-cell properies along with : vertical-align:middle; if your HTML is valid and with the structure needed.
Reset CSS should be loaded in front of your own CSS, it will, as well, avoid to use !important.
// comment // is not a valid comment in CSS, but /* comment */ is.
http://jsfiddle.net/dMu79/7/
basicly the structure is :
<body or wrapper><!-- as heigh/width:100%; and display:table -->
<header> as table-row</header>
<main> as table-cell and height:100% , it will shrink to leave space to header and footer</main>
<footer> as table-row</footer>
</body or wrapper>
Here is one solution that may work for you:
Demo Fiddle
CSS:
.acton {
width: 900px;
position: relative;
margin-left: auto;
margin-right: auto;
height: auto;
top: 106px;
}
You're HTML is broken in places and is missing a closing div. I've fixed it in this Fiddle and the updated code is below:
<div id="header">
<div id="top-left">
<img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo">
</div>
<div id="nav">
<ul>
<li>
<span class="button">NewsWorthy</span>
</li>
<!-- the closing span's were after the closing A -->
...
</ul>
</div>
</div> <!-- this div was missing -->
I fixed it by setting a margin top in the .action section.
Also I removed the position-right and position-left
Notice that the margin-top is set to 40%. This is because it takes in to account the nav and the footer. You can play with the margin depending on the other content that is added above it or below it.
working jsfiddle
http://jsfiddle.net/dMu79/9/
.acton {
width: 900px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 40%;
text-align: center;
}