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;
}
Related
I want to push the footer to the bottom of the page and since the page doesn't have much content the footer floats up and doesn't move to the bottom.
I tried positioning my footer as a fixed element as a workaround and it works but it doesn't in this condition:
In this dimension the footer behaves like you see and it is perfectly expected, hence showing a loophole in my workaround.
This is the website's address: https://n-ii-ma.github.io/Portfolio-Website/contact.html
These are the codes for that part:
/* Contact Footer */
.contact-footer {
position: fixed;
bottom: 10px;
left: 0;
right: 0;
}
<body>
<header>
<h1 class="main-title">Nima's Portfolio</h1>
<nav class="navigation">
<ul>
<li>
Home
</li>
<li>
Projects
</li>
<li>
Contact Me
</li>
</ul>
</nav>
</header>
<main>
<section class="contact-section">
<h2>Contact Me</h2>
<p>Use the links below to contact me and I'll reach out to you as soon as possible</p>
<div class="links">
<a href="https://github.com/n-ii-ma" target="_blank">
<i class="fab fa-github fa-3x"></i>
</a>
<a href="#">
<i class="fas fa-envelope-square fa-3x"></i>
</a>
</div>
</section>
</main>
<footer class="contact-footer">© All Rights Reserved</footer>
</body>
Is there a way for my footer to always stay at the bottom of the page?
Simple solution that is fully supported is to use Flexbox.
We give the body a min-height: 100vh so it spans at least the entire viewports height.
The default margin of the body will make the page overflow by default. To counter that, we need to reset the margin with: margin: 0
We re-add a padding. The default margin of most browsers is 8px. SO I chose that. You can take what ever you like.
The padding will also cause an overflow because of the box-modell. To counter that we use: box-sizing: border-box
Then we use flexbox: display: flex.
To maintain the normal block-level behavior we use: flex-direction: column
To push the footer at the bottom we use: margin-top: auto;. That will push the footer to the bottom of the page if the page content is less then the viewport height.
body {
margin: 0;
padding: 8px;
box-sizing: border-box;
min-height: 100vh;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
<body>
<header>
<h1 class="main-title">Nima's Portfolio</h1>
<nav class="navigation">
<ul>
<li>
Home
</li>
<li>
Projects
</li>
<li>
Contact Me
</li>
</ul>
</nav>
</header>
<main>
<section class="contact-section">
<h2>Contact Me</h2>
<p>Use the links below to contact me and I'll reach out to you as soon as possible</p>
<div class="links">
<a href="https://github.com/n-ii-ma" target="_blank">
<i class="fab fa-github fa-3x"></i>
</a>
<a href="#">
<i class="fas fa-envelope-square fa-3x"></i>
</a>
</div>
</section>
</main>
<footer class="contact-footer">© All Rights Reserved</footer>
</body>
I have a problem with the navbar-fixed-top item. It hides content form the container.
This is a common problem solved by adding the following css code :
body { padding-top: 70px; }
Now, when I load my page, the container is not hidden by the navbar anymore. The problem is when I want to go to a specific item in the page with a href=#item. In this case, the item is always hidden by the navbar.
I have created a simple code on Codeply which shows this problem. In this example, when I click on "Got to test3", the item <h2 class="font-weight-light">TEST3</h2> is hidden by the navbar.
Here is the code below :
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
HELLO NAVBAR
</nav>
<div class="container py-2">
<div class="row">
<div class="col">
<div class="sidebar-sticky" id="menu">
<ul class="nav flex-column">
<li class="nav-item">
Go to test1
</li>
<li class="nav-item">
Go to test2
</li>
<li class="nav-item">
Go to test3
</li>
<li class="nav-item">
Go to test4
</li>
</ul>
</div>
</div>
<div class="col">
<div id="test">
<h2 class="font-weight-light">TEST1</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
<div id="test2">
<h2 class="font-weight-light">TEST2</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
<div id="test3">
<h2 class="font-weight-light">TEST3</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
<div id="test4">
<h2 class="font-weight-light">TEST4</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
</div>
</div>
</div>
Here's the solution
body {
padding-top: 70px;
}
#test{
padding-top:90px;
}
#test2{
padding-top:90px;
}
#test3{
padding-top:90px;
}
#test4{
padding-top:90px;
}
For the current case, you could add the padding to the div elements which have a h2 following them (such as "Test3"). Adding div h2 { padding-top: 70px; } does that for your current structure. However, in order to not depend on the h2 following a div as you further develop your project, you could also create an own class to which the padding-top-rule applies, and add it to those elements for which it is needed.
Hope that helps.
From the question Fixed page header overlaps in-page anchors, the solution is not the accepted answer but is in the answers. So I'll repeat it here.
I have add this class in the css file :
.hreflink::before {
content: "";
display: block;
height: 70px; /* fixed header height*/
margin: -70px 0 0; /* negative fixed header height */
}
and then I have define every element I want to go to with this class, for example :
<div id="test3" class="hreflink">
I have nowhere indent from the header, but I don't know how to fix it?
<header class="page-header">
<section class="logo">
<i class="logo-img"> </i>
</section>
<section class="menu">
<ul class="main-menu">
<li>Главная</li>
<li>Правила</li>
<li>Тест</li>
<li>Список смотрителей</li>
</ul>
</section>
<section class="profile-avatar">
<img height="50px" width="50px" src="img/ava.png">
<ul class="profile-menu">
<li>
Профиль
</li>
<li>
Выйти
</li>
</ul>
</section>
</header>
If I add clearfix to the header it gives to him more height..
Code is here https://jsfiddle.net/tLtkmcy9/
Right solution is to add height to class with the float: right;
It is your class="profile-avatar" if you take him float right of it is not anymore like that you have to play with the height and it will be ok! try height: 50px;
Please try with the below code for the HTML mentioned below
style="position: relative;top: -4px;left: -4px;"
<section class="page-desc" style="
position: relative;
top: -4px;
left: -4px; ">
<p class="caution">Перед тем как подавать заявку на смотрителя, Вы должны пройти тест!</p>
</section>
I'm trying to have a ul and a span elements to stick to the bottom of their containing div. The only way I managed to so is through setting them with position:relative and playing with bottom: x for each element separately (according to its size).
Is there a more standard way to do it?
Here is the code: jsfiddle
<div id="header">
<div id="top_menu">
<span id="logo">TechSystems</span>
<span id="sub_logo">think smarter</span>
<div id="menu_content">
<ul>
<li>home</li>
<li>about</li>
<li>contact us</li>
</ul>
</div>
</div>
</div>
<div id="slideshow">
</div>
Try adding to #menu_content:
#menu_content
{
position:fixed;
bottom: 0px;
}
See: https://jsfiddle.net/x7p35mrz/
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.