I have a problem..
I am trying to make my footer bar but it is not going very well.
The copyright logo, the year and my name are on the left and the social icons have to go to the right. I can't solve this problem! ;( I can't float it to the right.
If someone knows how it works, please react! :D
footer {
width: 100%;
height: 50px;
clear: both;
background-color: #303030;
color: #868686;
position: relative;
}
footer span {
display: table-cell;
vertical-align: middle;
height: 50px;
}
.footerwidth {
width: 80%;
margin: 0 auto;
}
.icons {
float: right;
width: 150px;
}
<footer>
<div class="footerwidth">
<span>© 2016 Jasper Mulder
<div class="icons">
<img src="../images/icons/facebook.png">
<img src="../images/icons/instagram.png">
<img src="../images/icons/linkedin.png">
</div>
</span>
</div>
</footer>
Thank you for helping me!
Change your HTML and put the social icons before the copyright span:
<footer>
<div class="footerwidth">
<div class="icons">
<img src="../images/icons/facebook.png">
<img src="../images/icons/instagram.png">
<img src="../images/icons/linkedin.png">
</div>
<span>© 2016 Jasper Mulder</span>
</div>
</footer>
Move your .icons div outside the <span> and also add float: left to the span:
footer {
width: 100%;
height: 50px;
line-height: 50px;
clear: both;
background-color: #303030;
color: #868686;
position: relative;
}
footer span {
display: table-cell;
vertical-align: middle;
height: 50px;
float: left;
}
.footerwidth {
width: 80%;
margin: 0 auto;
}
.icons {
float: right;
width: 150px;
}
<footer>
<div class="footerwidth">
<span>© 2016 Jasper Mulder</span>
<div class="icons">
<a href="#">
<img src="../images/icons/facebook.png">
</a>
<a href="#">
<img src="../images/icons/instagram.png">
</a>
<a href="#">
<img src="../images/icons/linkedin.png">
</a>
</div>
</div>
</footer>
I also added line-height: 50px; as a little bonus ;)
Here you go, there are many solutions.
footer span {
position:relative;
top:15px;
left:-110px;
height: 50px;
}
Do not use table for layout.
http://codepen.io/damianocel/pen/BjdWWq
Here is the jsFiddle for your problem.
Please go through it.
https://jsfiddle.net/dhqp3Ln5/
css should be:
.footerwidth {
width: 80%;
margin: 0px auto;
PADDING-TOP: 15PX;
}
footer span {
display: inline-block;
height: 50px;
}
.icons {
float: right;
HEIGHT: 50PX;
width: 150px;
}
HTML should be:
<div class="footerwidth">
<span>© 2016 Jasper Mulder</span>
<div class="icons">
<img src="../images/icons/facebook.png">
<img src="../images/icons/instagram.png">
<img src="../images/icons/linkedin.png">
</div>
</div>
Demo: https://jsfiddle.net/9n4cav1o/
Related
Right now I have a footer that is always at the bottom of the page. This is fine until I have more content than can fit on the page, which means when you scroll down, the footer scrolls up as if its fixed..
Here is my CSS:
.footerWrap{
clear: both;
position:absolute;
width:100%;
bottom:0;
}
.footer {
position: relative;
margin-bottom: 0px;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #000000;
color: #FFFFFF;
}
.footerLinks{
padding-left: 150px;
text-align: left;
}
.footerLinks p {
display: inline;
}
.footerLinks a {
color: #169e98;
}
.footerSocial{
text-align: right;
}
And my HTML:
<!--Footer-->
<div class="footerWrap">
<div class="footer">
<div class="footerLinks">
Privacy Policy<p> |</p>
Sitemap<p> |</p>
<p>© 2017</p>
</div>
<div class="footerSocial">
<img src="image/findfb.png" alt="Find us on Facebook">
</div>
</div>
</div>
Essentially, I want to put the footer Div below the text content.
it is very easy :
wrap your html code in
<div class="page">
...
</div>
and just add css
.page{
position:relative;
}
that is all
I'm desperately trying to format two images side by side using CSS.
I want the first one to be fixed-size and the second one to take up the remaining width (but it should stop growing when it has the same height as the first one). This is my code:
<span style="height:80px; width:100%">
<img src="images/navicon.png" style="width:60px; height:60px; padding:10px 10px 10px 10px; "/>
<img src="images/logo.png" style="max-height:60px; padding: 10px 10px 10px 10px;" />
</span>
But instead of the second image shrinking (maintaining aspect-ratio) when there is not enough space, the line breaks.
Thanks for any help!
This possible solution requires CSS calc(), see the demo follows.
div {
height: 100px;
overflow: hidden;
font-size: 0;
}
span {
display: inline-block;
vertical-align: top;
}
span:nth-child(2) {
width: calc(100% - 100px);
}
span:nth-child(2) img {
width: 100%;
height: auto;
}
<div>
<span><img src="http://lorempixel.com/100/100" /></span>
<span><img src="http://lorempixel.com/100/100" /></span>
</div>
JSFiddle: http://jsfiddle.net/Low7k16d/
HTML:
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/160/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/100/60/abstract/1"></div>
</div>
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/60/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/1000/60/abstract/1"></div>
</div>
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/1000/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/1500/600/abstract/1"></div>
</div>
CSS:
.image-container {
width: 100%;
display: flex;
align-items: flex-start;
}
.image {
margin: 10px;
padding: 0;
flex-shrink: 0;
}
.image img {
width: 100%;
margin: 0;
padding: 0;
max-height: 80px; /*Line added to limit height*/
}
.image-auto {
flex-shrink: 1;
height: auto;
}
And I updated the Pen: http://codepen.io/czoka/pen/XbJXVO
I don't completely understand your question but this is what I thought you mean.
NOTE: this is my updated version of sdcr's answer.
CSS:
div {
height: 80px;
font-size: 0;
}
span {
display: inline-block;
vertical-align: top;
padding:10px;
}
span:nth-child(1) img {
max-height: 60px;
}
span:nth-child(2) img {
width: 100%;
HTML
<div>
<span><img src="http://lorempixel.com/100/100" /></span>
<span><img src="http://lorempixel.com/output/people-q-c-924-67-9.jpg" /></span>
</div>
See jsfiddle:
http://jsfiddle.net/Low7k16d/4/
I am struggling trying to get the text to sit next to the image, its just not happening, please can some one explain what im doing wrong here? much appreciated!
.alignright {
float: right;
}
.source {
overflow: hidden;
width: auto;
height: 100%;
}
.source img {
width: 100%;
}
.margin25 {
margin:25px;
}
<!--LEFT CONTAINER DIV-->
<div style="float:left;width:40%;margin-left:2%;">
<div class="source" style="width:20%;">
<img src="http://placehold.it/150x150">
</div>
<h1 class="alignright">Recommendations?</h1>
<br />
<h2 class="margin25">main text</h2>
</div>
<!--LEFT CONTAINER DIV-->
Try using tags instead of div with display:initial in all 3 tags (img, h1, h2) and in h1 and h2 span tag set the float property to right or left.
Just corrected what was needed :
(click on full page in code snippet or else you will not see the difference with your own result)
.wrap {
width: 40%;
margin-left: 2%;
}
.alignright {
display: inline;
}
.source {
float: left;
overflow: hidden;
width: 20%;
height: 100%;
}
.source img {
width: 100%;
}
.margin25 {
margin: 25px;
display: inline;
}
<div class="wrap">
<div class="source">
<img src="../image/recomendbutton.jpg">
</div>
<h1 class="alignright">Recommendations?</h1>
<br />
<h2 class="margin25">main text</h2>
</div>
.alignright {
margin-top:-40px;
width: 77%;
float: right;
}
.source {
overflow: hidden;
width: auto;
height: 100%;
}
.source img {
width: 100%;
}
.margin25 {
margin:25px;
}
<!--LEFT CONTAINER DIV-->
<div style="float:left;width:40%;margin-left:2%;">
<div class="source" style="width:20%;">
<img src="http://placehold.it/150x150"><span>
</div>
<h1 class="alignright">Recommendations?</h1></span>
<br />
<h2 class="margin25">main text</h2>
</div>
<!--LEFT CONTAINER DIV-->
I have a div with width: 180px; and height: 180px;.
How can I center a fontawesome icon horizontally and vertically inside the container?
Note: i may also add text below the icon
<div style="width:180px; height:180px; float:left;">
<i class="fa fa-search fa-4x"></i>
</div>
should look something like this:
Try this:
.centered{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
.container{
width:100px;
height:100px;
}
On mobile.
You can do it like this
#search{
background: gray;
width:180px;
height:180px;
float:left;
line-height: 180px;
text-align: center;
vertical-align: bottom;
}
#search > p {
margin-top: -155px;
}
Working example http://jsfiddle.net/kasperFranz/h91p8w4e/3/ (using icon instead of fa in the example, but shouldn't affect the result.)
I'm probably too late here, but it's a common question, so here's a simple working idea, the interesting side of it is that it adapts to the container size:
span{
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
text-align: center;
width: 15px;
height: 15px;
display: block;
}
Asuming to my comment, here is a JSFIDDLE
Without setting relative or absolute
html
<div class="myDiv">
<div class="content_wrapper">
<!--i class="fa fa-search fa-4x">test</i-->
<i class="icon-search icon-4x"></i><br />
<span class="myText">Search</span>
</div>
</div>
css
.myDiv{
width: 180px;
height: 180px;
float: left;
background: #ccc;
text-align: center;
display: table;
}
.content_wrapper{
display: table-cell;
vertical-align: middle;
}
.myText{
font-weight: bold;
font-size: 20px;
}
CSS
/* This parent can be any width and height */
.block {
text-align: center;
background:#ccc;
margin-bottom:10px;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
HTML
<div class="block" style="height: 300px;">
<div class="centered">
<h1>Some text</h1>
<p>p1</p>
</div>
</div>
<div class="block" style="height: 200px;">
<div class="centered">
<h1>Some text</h1>
<p>p2</p>
</div>
</div>
<div class="block" style="height: 600px;">
<div class="centered">
<h1>Some text</h1>
<p>p3</p>
</div>
</div>
DEMO
Update 1:
DEMO
I know it's a bit late and you probably already figured this out.
I was able to achieve what you were looking for by wrapping the icon and text in a div then adding padding to that.
See the attached pen.
http://codepen.io/ForTheJim/pen/YPxveR
<p data-height="268" data-theme-id="0" data-slug-hash="YPxveR" data-default-tab="result" data-user="ForTheJim" class='codepen'>See the Pen <a href='http://codepen.io/ForTheJim/pen/YPxveR/'>Centering Icon Question</a> by Jim (<a href='http://codepen.io/ForTheJim'>#ForTheJim</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
Short way just add display: grid; place-items: center; to your div and your ready to go.
like this:
<div style="width:180px; height:180px; display: grid; place-items: center;">
<i class="las la-user-circle"></i>
</div>
I just have a silly issue (I think...) with a div tag in html.
I want to positionate a background relative image at top left corner, half image outside its container.
Issue is that container doesn't fill to all Its content. I try to use "overflow: auto" property but left corner image turns hidden.
My html:
<div class="content">
content of the page
</div>
<footer id="footer">
<div class="column" id="footer-izda">
<span id="logo-sup"> </span>
<span>conecta con nosotros</span>
<ul>
<li class="twitter">outside of box </li>
<li class="facebook">outside of box</li>
</ul>
</div>
<div class="column" id="footer-dcha">
<div class="module widget_nav_menu deepest">Copyright © 2013</div>
</div>
</footer>
My CSS:
.content{
margin-bottom: 2%;
}
footer{
background-color: #333333;
color: #EDEDED;
padding: 1%;
display: block;
/*overflow: auto;*/
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.column #logo-sup{
background: url('http://formate21.es/wp-content/themes/master/images/footer.png') left top no-repeat;
width: 26px;
height: 26px;
top: -25px;
left: 0;
float: left;
position: absolute;
}
#footer-izda {
float: left;
width: 50%;
position: relative;
text-align: left;
}
I wrote this on jsfiddle: http://jsfiddle.net/ecXba/10/
Any suggestion?
Put below code just before </footer> tag.
<div style="clear:both;"></div>
Hope this helps!