I have a webpage I am working on for a school project. Here is the jsfiddle.
https://jsfiddle.net/adamkerik/6c17ajqa/
<footer>
<div class="social-container">
<ul class="social-icons">
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
</div>
<!--text-->
<h1>Follow Us</h1>
<div class="uzex">
<div class="vr"></div>
<ul>
<li><strong>Contact Us</strong></li>
<li>3678 Poe Road</li>
<li>Mount Pleasant, South Carolina 29464</li>
<li>843-216-9434</li>
</ul>
</div>
</footer>
The problem is that on the footer of the page, I want the content to be centered with the "div class va" in the middle of the buttons and the list. I just cant seem to get the content centered. Thanks for any help!
ps the css is in the jsfiddle page, cause i know that will probably be needed
Add this to your footer element CSS:
margin: 0 auto;
display: block;
text-align:center;
Fiddle: https://jsfiddle.net/6c17ajqa/6/
You need to make this container to be center.
.social-container {
width: 400px;
position: absolute;
z-index: 6;
margin: 0 auto;
left:50%;
top: 60%;
transform:translate(-50%, -50%)
}
Follow the link of fiddle https://jsfiddle.net/jb7f2mwy/
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'm new to CSS and HTML, so I got stuck on a very stupid step. The thing is that fa-list-ul icon is wrong positioned. Without text-align:center it positions fine. Any way to fix it? Thanks for spending your time with my problem.
Here's the JSFiddle
And here is my code :
.player{padding:.75rem 1rem;margin-bottom:1rem;line-height:36px}
.player_play{font-size:36px;vertical-align:middle}
.radio_name{vertical-align:middle}
.radio_icon{padding-right:5px;vertical-align:middle}
.radio_select{font-size:20px;vertical-align:middle}
<nav class="player">
<div class="container">
<div class="float-left">
<i class="fa fa-play-circle player_play action"></i>
</div>
<div class="radio_volume">
<i class="fa fa-volume-down"></i>
<i class="fa fa-music radio_icon accent_color"></i><span class="radio_name"> Anison</span>
</div>
<div class="float-right">
<i class="fa fa-list-ul radio_select action"></i>
</div>
</div>
</nav>
Using display: flex will make every element inside that container have the same horizontal size so this should solve your problem:
.container {
display: flex;
}
.float-left {
flex: 1;
}
.radio_volume {
text-align: center;
flex: 1;
}
.float-right {
flex: 1;
}
.float-right i {
float: right;
margin-top: 10px;
}
also here's the jsfiddle: https://jsfiddle.net/fqkvv8es/3/
You can make use of Bootstrap's classes, which results in less code than what the chosen answer uses:
JSFiddle
HTML
<nav class="player">
<div class="container">
<div class="row justify-content-between align-items-center">
<i class="fa fa-play-circle player_play action"></i>
<div class="radio_volume">
<i class="fa fa-volume-down"></i>
<i class="fa fa-music radio_icon accent_color"></i><span class="radio_name"> Station</span>
</div>
<i class="fa fa-list-ul radio_select action"></i>
</div>
</div>
</nav>
CSS
.player {
padding: .75rem 1rem;
margin-bottom: 1rem;
line-height: 36px
}
.player_play {
font-size: 36px;
}
.radio_icon {
padding-right: 5px;
}
.radio_select {
font-size: 20px;
}
JSFiddle
I have a div inside another div and the effect that I'd like to achieve is the classic three products icons next to each other with some explanatory text underneath.
The content of a the text div doesn't push down the following content and overlaps it. I've tried many different solutions but i didn't find anything that works in this case.
I'm afraid that the absolute positioning and negative margin of the inner div makes it harder.
I would appreciate any suggestions. Thanks!
HTML
<div class="icon-group">
<div class="icon">
<i class="fa fa-book fa-4x" aria-hidden="true"></i>
<div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
</div>
<div class="icon">
<i class="fa fa-plane fa-4x" aria-hidden="true"></i>
<div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
</div>
<div class="icon">
<i class="fa fa-quote-right fa-4x" aria-hidden="true"></i>
<div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
</div>
</div>
<div class="clear"></div>
<h3 class="after-icons">What people say about me</h3>
CSS
.icon-group, icon-caption-group {
height: 100px; display: table; width:100%; table-layout: fixed}
.icon, .icon-caption {
display: table-cell;
text-align: center;
vertical-align: middle;
position: relative;}
.icon-caption {
border-bottom: 3px solid #E8EAF6;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
width: 50%;
margin: -15% 0 0 -25%;
margin-top: 20%;
}
.after-icons {
margin-top: 30px
}
You don't need to positioning the content you can simply do like this way, check with the below snippet
.icon-group, icon-caption-group {height: 100px; display: table; width:100%; table-layout: fixed}
.icon, .icon-caption {
display: table-cell;
text-align: center;
vertical-align: middle;
position: relative;}
.icon-caption {
border-bottom: 3px solid #E8EAF6;
vertical-align: middle;
display: block;
margin: 0 auto;
width: 50%;
}
.after-icons {
margin-top: 30px
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="icon-group">
<div class="icon">
<i class="fa fa-book fa-4x" aria-hidden="true"></i>
<div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
</div>
<div class="icon">
<i class="fa fa-plane fa-4x" aria-hidden="true"></i>
<div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
</div>
<div class="icon">
<i class="fa fa-quote-right fa-4x" aria-hidden="true"></i>
<div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
</div>
</div>
<div class="clear"></div>
<h3 class="after-icons">What people say about me</h3>
How about increasing the top margin of the after-icons class? I've increased it to 130, and this pushes the text below the div.
Your css leads to a very difficult situation of trying to expand the parent (icon class) based on an the size of an absolute positioned child which is better avoided Make absolute positioned div expand parent div height
keep you html markup the same and erasing your clear div and your css becomes very simple
All you need to do is apply padding or margin to icon class to space the icons
.icon {
float: left;
width: 33%;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="icon-group">
<div class="icon clearfix">
<i class="fa fa-book fa-4x" aria-hidden="true"></i>
<div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
</div>
<div class="icon clearfix">
<i class="fa fa-plane fa-4x" aria-hidden="true"></i>
<div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
</div>
<div class="icon clearfix">
<i class="fa fa-quote-right fa-4x" aria-hidden="true"></i>
<div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
</div>
</div>
<h3 class="after-icons">What people say about me</h3>
NOTE: clearfix is usually needed for older browsers and I chose the simplest implementation of it but if you want to support very old browsers do a search for clearfix
Here is a working jsfiddle https://jsfiddle.net/GiorgosK/x3evnxpn/
I have a Gallery view where i use UL LI element with float left to make it sit like a gallery in as many lines a needed based on the content. After the first line it seems to go hay wire as shown below. Looks like the problem is in Firefox on both MAC/Win7
Link: http://archangle.mink7.com/portfolios (footer Gallery)
<ul class="gallery">
<li> <img alt="video" src="/img/portfolios/video.jpg"> <span><i class="fa fa-link"></i></span> </li>
<li> <img alt="Concept Gallery" src="/img/portfolios/concept-gallery-2.jpg"> <span><i class="fa fa-link"></i></span> </li>
<li> <img alt="Concept Gallery" src="/img/portfolios/concept.jpg"> <span><i class="fa fa-link"></i></span> </li>
<li> <img alt="Residential Gallery" src="/img/portfolios/residential-gallery2.jpg"> <span><i class="fa fa-link"></i></span> </li>
<li> <img alt="Residential Gallery" src="/img/portfolios/residential-gallery-1.jpg"> <span><i class="fa fa-link"></i></span> </li>
<li> <img alt="Commercial Image" src="/img/portfolios/commercial-gallery-2.jpg"> <span><i class="fa fa-link"></i></span> </li>
</ul>
CSS:
.gallery {
list-style: none outside none;
margin: 0;
padding: 0;
}
.gallery li {
float: left;
width: 33%;
}
.comment-image, .gallery li, .post-small .image, .post-image, .portfolio-item {
display: block;
position: relative;
}
The heights are inconsitenet in FireFox and therefore you are getting an orphan in that last row. Try adding this to your gallery li's:
.gallery li {
float: left;
width: 33%;
height:100px;
overflow:hidden;
}
This will force consistent height on your image containers (li's) and cut off any excess image height.
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;
}