I am trying to display several social media icons side by side in a footer. I have tried using the float: left property which did not work. Can someone spot my error?
I have the following html code:
<div id="footer">
<div id="v_line"></div>
<div class="social-popout">
<div class="columns">
<ul id="lpro">
<div class="fbicon"><img id="social_me" src="facebook.png" alt="Facebook">
</ul>
<ul>
<div class="linkedin_amandasopkin"><img id="social_me" src="linkedin.png" alt="Linked In">
</ul>
<ul>
<img id="social_me" src="googleplus.png" alt="Google Plus">
</ul>
</div>
</div>
</div>
And the following CSS:
.social_me {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
Remove unnecessary ul tags and add li to each item
CSS:
ul li {
display:inline-block;
}
HTML:
<ul id="lpro">
<li><div class="fbicon"><img id="social_me" src="facebook.png" alt="Facebook">
</li>
<li><div class="linkedin_amandasopkin"><img id="social_me" src="linkedin.png" alt="Linked In">
</li>
<li><img id="social_me" src="googleplus.png" alt="Google Plus">
</li>
</ul>
DEMO
Just correcting some html errors:
1) Remove the unnecessary ul
2) Remove the div inside the <a> tags
3) Your id="social_me" is wrong.. It is a class, not an id.
4) After that, no need for css what so ever (<a> and <img> tags are already inline elements by default): http://jsfiddle.net/M665q/
<div id="footer">
<div class="social-popout">
<div class="columns">
<a class="social_me" href="https://www.facebook.com/" target="_blank"><img src="facebook.png" alt="Facebook" /></a>
<a class="social_me" href="https://www.linkedin.com/" target="_blank"><img src="linkedin.png" alt="Linked In" /></a>
<a class="social_me" href="https://plus.google.com/" target="_blank"><img src="googleplus.png" alt="Google Plus" /></a>
</div>
</div>
</div>
Put them all in one <ul> and the <div> tags next to the images was messing it up.
Something like this should work:
<div id="footer">
<div id="v_line"></div>
<div class="social-popout">
<div class="columns">
<ul id="lpro">
<img id="social_me" src="facebook.png" alt="Facebook">
<img id="social_me" src="linkedin.png" alt="Linked In">
<img id="social_me" src="googleplus.png" alt="Google Plus">
</ul>
</div>
</div>
</div>
<ul id="navlist">
<li><div class="fbicon"><img id="social_me" src="facebook.png" alt="Facebook"></li>
<li><div class="linkedin_amandasopkin"><img id="social_me" src="linkedin.png" alt="Linked In"></li>
<li><img id="social_me" src="googleplus.png" alt="Google Plus"></li>
</ul>
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
float: left;
}
it sounds like you're having a problem linking your CSS to your HTML page. Try putting it into the head.
<html>
<head>
<style type="text/css">
.lpro li {
float: left;
padding: .5em;
list-style-type: none;
}
</style>
</head>
<div id="footer">
<div class="social-popout">
<div class="columns">
<ul class="lpro">
<li><img src="facebook.png" alt="Facebook"></li>
<li><img src="linkedin.png" alt="Linked In"></li>
<li><img src="googleplus.png" alt="Google Plus"></li>
</ul>
</div>
</div>
</div>
</html>
I was able to get it working by creating three different unordered lists. I used:
.column {
float:left;
padding: 10px 20px 0px 10px;
}
ul{
list-style-type:none;
padding-left:0px;
text-decoration:none;
padding-top: 10px;
}
.title-logo{
color: #5E81F4;
font-family: 'Inter', sans-serif;
margin-left: 10px;
}
.logo a{
display: flex;
justify-content: start;
align-items: center;
}
<div class="logo">
<a href="/#">
<div class="shap-logo">
<H1>O</H1>
</div>
<h3 class="title-logo">Ohara</h3>
</a>
</div>
I tried this for my code, but I don't know it's correct or not.
Related
I am trying to create a footer with 2 Images who link to a page.
The two links / Images shall stay on the right side of the footer.
The Images shall stand next to each other with a Little margin.
How to I manage this with css?
<footer>
<a href="http://www.google.de/" target="_blank">
<img src="test.jpg" alt="logo.jpg">
</a>
<a href="http://www.google.de" target="_blank">
<img src="test.jpg" alt="logo.jpg">
</a>
</footer>
Wrap them in a div and float it.
CSS:
.images-container {
float: right;
}
.images-container a {
margin-left: 5px;
}
HTML:
<footer>
<div class="images-container">
<a href="http://www.google.de/" target="_blank">
<img src="test.jpg" alt="logo.jpg">
</a>
<a href="http://www.google.de" target="_blank">
<img src="test.jpg" alt="logo.jpg">
</a>
</div>
</footer>
hi if you are using bootstrap framework try this code
html
<footer class="clearfix">
<ul class="links pull-right">
<li> <a href="http://www.google.de/" target="_blank">
<img src="test.jpg" alt="logo.jpg">
</a>
</li>
<li>
<a href="http://www.google.de" target="_blank">
<img src="test.jpg" alt="logo.jpg">
</a>
</li>
</ul>
</footer>
css
.links
{
list-style-type:none;
padding:0;
}
.links li
{
display:inline-block;
}
You can use float:right for your hyperlinks
footer a {
float:right;
}
footer a:first-child {
margin-left: 10px;
}
<footer>
<a href="http://www.google.de/" target="_blank">
<img src="http://placehold.it/50" alt="logo.jpg">
</a>
<a href="http://www.google.de" target="_blank">
<img src="http://placehold.it/50" alt="logo.jpg">
</a>
</footer>
I'm trying to set up separate sections within the body that would show info in them like this
using float: left; doesn't help, it only messes up the page layout.
here's my html...
#a,
#g {
background-color: #6d6d6d;
color: #bdc3c7;
list-style: none;
}
#pic {
margin: +5% 0 0;
border: 3px solid black;
}
#wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 5%;
list-style: none;
}
<div Id="wrapper">
<section>
<ul id="a">
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<p>info</p>
</a>
</li>
</ul>
</section>
<section>
<ul id="g">
<li>
<a href="img/googleplay.jpg">
<img src="img/googleplay.jpg" alt="" width=180px id="pic">
<p>info</p>
</a>
</li>
</ul>
</section>
</div>
Why are you using the same name for multiple instances of the same id for your images? ID's are supposed to be unique, you're better of using a class if you're going to group. Check my solution out for your question:
#a, #g {
color: #bdc3c7;
list-style: none;
}
.pic {
margin:+5% 0 0;
border: 3px solid black;
float:left;
}
.sections {
height:100px;
background-color: #6d6d6d;
}
.info {
margin:+5% 10px;
float:left;
}
#wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 5%;
list-style: none;
}
<div Id="wrapper">
<section class="sections">
<ul id="a">
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px class="pic">
<p class="info">info</p>
</a>
</li>
</ul>
</section>
<section class="sections">
<ul id="g">
<li>
<a href="img/googleplay.jpg">
<img src="img/googleplay.jpg" alt="" width=180px class="pic">
<p class="info">info</p>
</a>
</li>
</ul>
</section>
</div>
I classed the section tags as that's what you would need to add the background colour to and set a height. You would need to set a height as the items are floating so they would not stretch the section automatically, so you need to provide a fixed height.
I added classes to your paragraphs as these would also need to be floated left as well as your images. Also you needed to add the same margins as your images.
I changed your pics ID's to classes.
If you have any questions, let me know.
change id="pic" to class="pic". because ID should be used 1 time in a page..
then write in css:
.pic {
float: left;
}
Try using float:right
#wrapper ul {
padding: 0;
margin: auto;
width: 80%;
list-style-type: none;
}
#wrapper ul li {
background-color: #6d6d6d;
padding: 30px;
margin-bottom: 20px;
display: table;
width: 100%;
}
#wrapper ul li img {
float: left;
}
#wrapper ul li .details {float: right;width: 75%;}
<div Id="wrapper">
<section>
<ul id="a">
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<!-- Wrapped into div -->
<div class="details">
<p>info</p>
</div>
</a>
</li>
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<!-- Wrapped into div -->
<div class="details">
<p>info</p>
</div>
</a>
</li>
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<!-- Wrapped into div -->
<div class="details">
<p>info</p>
</div>
</a>
</li>
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<!-- Wrapped into div -->
<div class="details">
<p>info</p>
</div>
</a>
</li>
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<!-- Wrapped into div -->
<div class="details">
<p>info</p>
</div>
</a>
</li>
</ul>
</section>
</div>
I changed your code and list things a bit.. Tell me if i misinterpreted your question..
<html>
<head>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<style>
#a, #g {
background-color: #6d6d6d;
color: #bdc3c7;
list-style: none;
width: 100%;
}
#pic {
margin: +5% 0 0;
border: 3px solid black;
display:table-cell; width:100px;height:100px;
}
#wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 5%;
list-style: none;
}
section{
width: 100%;
}
</style>
</head>
<body>
<div Id="wrapper">
<section>
<a href="img/appstore.jpg" id="a">
<div style="display:table" id="g">
<div style="" id="pic">
<img src="img/appstore.jpg" width=180px alt="">
</div>
<div style="padding:12 16;">
<p>info</p>
</div>
</div>
</a>
</section>
<section>
<a href="img/googleplay.jpg">
<div style="display:table" id="g">
<div style="" id="pic">
<img src="img/googleplay.jpg" alt="" width=180px>
</div>
<div style="padding:12 16;">
<p>info</p>
</div>
</div>
</a>
</section>
</div>
</body>
</html>
I'm having a little trouble with floating my elements. I have some phantom margin that has appeared on my 3rd col element; as seen in the image below;
I have tried adding; box-sizing: border-box; but this doesn't help either. Is there something I am missing?
Code
#f-wrap {
position: relative;
width:100%;
margin: 0 auto;
}
.row {
display: inline-block;
width: 100%;
}
.col {
display: inline-block;
float: left;
width: 45%;
margin: 2em 1em;
background: #f0f;
}
<section class="ctre s-f">
<div id="t-wrap">
<div class="row">
<div class="col">
<img src="img-bin/mgi-logo.png" alt="MGI Technology logo." width="20%"/>
</div>
<div class="col">
<h3 class="f-h">Related Links</h3><br/>
<ul>
<li class="f-lnk">Home</li>
<li class="f-lnk">About us</li>
<li class="f-lnk">Products</li>
<li class="f-lnk">News</li>
<li class="f-lnk">Contact us</li>
<li class="f-lnk">Recycle</li>
<li class="f-lnk">Site map</li>
</ul>
</div>
</div>
<hr class="style-two"/>
<div class="row">
<div class="col">
<h3 class="f-h">Social</h3><br/>
<ul>
<li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
<li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
<li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
</ul>
</div>
<div class="col f-txt">
<h3 class="f-h">Find Us</h3><br/>
MGI Technology<br/>
<br/>
MAP
</div>
</div>
</div>
</section>
Any assistance I can get with this would be greatly appreciated...
Update: Have now tried vertical-align:top; and removed float:left. Issue persists.
Temporary Live Example
your snippet is not showing any issue but anyhow, but it seems that's due to by default inline-block is vertical-align:baseline, so you must set to vertical-align:top
plus remove unnecessary float:left
#f-wrap {
position: relative;
width:100%;
margin: 0 auto;
}
.row {
display: inline-block;
vertical-align:top;
width: 100%;
}
.col {
display: inline-block;
vertical-align:top;
width: 45%;
margin: 2em 1em;
background: #f0f;
}
<section class="ctre s-f">
<div id="t-wrap">
<div class="row">
<div class="col">
<img src="img-bin/mgi-logo.png" alt="MGI Technology logo." width="20%"/>
</div>
<div class="col">
<h3 class="f-h">Related Links</h3><br/>
<ul>
<li class="f-lnk">Home</li>
<li class="f-lnk">About us</li>
<li class="f-lnk">Products</li>
<li class="f-lnk">News</li>
<li class="f-lnk">Contact us</li>
<li class="f-lnk">Recycle</li>
<li class="f-lnk">Site map</li>
</ul>
</div>
</div>
<hr class="style-two"/>
<div class="row">
<div class="col">
<h3 class="f-h">Social</h3><br/>
<ul>
<li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
<li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
<li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
</ul>
</div>
<div class="col f-txt">
<h3 class="f-h">Find Us</h3><br/>
MGI Technology<br/>
<br/>
MAP
</div>
</div>
</div>
</section>
UPDATE:
Looking at your live site, the issue is that the other col has another class f-txt which has a property font-size:8pt and with that, change the height of the column.
So either you apply the same class to the first .col or remove that property
I'm trying to code a Nav bar for my site but as soon as I implemented css imgBox my links stopped working. The're in the same directory so I don't believe this is the problem but for the life of me I can't figure out what's wrong
here's the HTML code
<ul id="menu">
<li> <div class="imgBox" id="img1"> </div> </li>
<li> <div class="imgBox" id="img2"> </div> </li>
<li> <div class="imgBox" id="img3"> </div> </li>
</ul>
and here's the css
.imgBox
{
float:left;
border: 1px solid #9325BC;
}
#img1
{
background: url(images/home.png) no-repeat;
width: 129px;
height: 50px;
}
#img2
{
background: url(images/media.png) no-repeat;
width: 112px;
height: 50px;
}
.imgBox:hover
{
-moz-box-shadow: 0 0 30px #0000cc;
-webkit-box-shadow: 0 0 30px #0000cc;
box-shadow: 0 0 30px #0000cc;
}
Any help will be greatly appreciated
You must close all tags you open. link tags and div tags. Also if you want your link to be visible it must contain at least a word or image.
<ul id="menu">
<li><div class="imgBox" id="img1"> Index </div> </li>
<li> <div class="imgBox" id="img2"> Media </div></li>
<li> <div class="imgBox" id="img3"> Social media</div></li>
</ul>
<ul id="menu">
<li> <div class="imgBox" id="img1"> </div> </li>
<li> <div class="imgBox" id="img2"> </li>
<li> <div class="imgBox" id="img3"> </li>
</ul>
Is this what you're trying to do?
Working version of your question can be found here: JSFIDDLE
<li> <div class="imgBox" id="img1"> Some Text here </div> </li>
The problem was that you did not close your href element
I am trying to make a list of images horizontal. They keep displaying vertical. Any idea what I am doing wrong?
<div ng-repeat="i in product.images">
<ul id="navlist">
<li>
<img class="thumbnail" ng-src="{{i.image}}"> </img>
</li>
</ul>
</div>
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
You need to put the 'ng-repeat' in the li tag (not the div), otherwise you are repeating the entire div, which is not inline. Here's a link to a CodePen with this code http://codepen.io/jwncoexists/pen/XbdOVY
<body ng-app="ImageDemo">
<div ng-controller="Demo.controller">
<div>
<ul id="navlist">
<li ng-repeat="i in product.images">
<img class="thumbnail" ng-src="{{i.image}}">
</li>
</ul>
</div>
</div>
</body>
calthoff, if you remove the ul, li and float the images..then how about this for simplicity's sake:
<div ng-repeat="i in product.images">
<img class="thumbnail" ng-src="{{i.image}}">
</div>
img
{
float: left;
padding-right: 20px;
}
<div ng-repeat="i in product.images">
<ul id="navlist">
<li>
<img class="thumbnail" ng-src="{{i.image}}" />
</li>
<li>
<img class="thumbnail" ng-src="{{i.image}}" />
</li>
</ul>
</div>
< img > tags are self-closing, your code should work like this.