I can't get my social media buttons to align left or right on the footer of my website. I'm not sure what I'm doing wrong, can anyone please help?
I have tried margin-left, margin-right, float: left, float: right
This is what I have and all it does is center.
HTML
<footer class="container-fluid text-center">
<div class="row" id="contact">
<p class="col-sm-4"></p>
<h1>Reach me here</h1>
<br>
<br>
<a href="https://twitter.com/Aarons_coding" target="_blank">
<img src="images/twitter.png" alt="twitter" id="twitt">
<br/> Follower me
</a>
<a href='https://www.facebook.com/freelancecoding/posts/1534409766779543' target="_blank">
<img src="images/fb.png" alt="fb" id="fb">
<br/>Like Me on FB
</a>
<a href='https://www.linkedin.com/in/aaron-s-706193125' target="_blank">
<img src="images/link.png" alt="linkedin" id="link">
<br/>Connect with me
</a>
</div>
<ul>
<li>Top</li>
<li>About the Designer</li>
</ul>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d401398.0917589909!2d-85.9569564028764!3d38.18847214627973!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88690b1ab35bd511%3A0xd4d3b4282071fd32!2sLouisville%2C+KY!5e0!3m2!1sen!2sus!4v1470171263135"
width="350" height="250" frameborder="0" style="border:0" allowfullscreen></iframe>
<div style="clear: both"></div>
</footer>
CSS
#twitt {
width: 95px;
height: 95px;
margin: 5px 5px 0 18px;
}
#fb {
width: 95px;
height: 95px;
margin: 5px 0 5px;
}
#link {
width: 95px;
height: 95px;
margin: 5px 5px 0 5px;
}
footer {
background-color: rgba(0, 0, 0, 1);
font-size: 12px;
padding: 20px 0;
text-align: center;
}
footer .col-sm-4 {
display: flex;
justify-content: flex-end;
}
footer ul {
float: right;
text-align: right;
list-style: none;
}
footer li img {
width: 32px;
height: 32px;
}
You probably didn't set styles on correct elements.
If you do it like this it works:
#contact a{
float: left;
}
Example here https://jsfiddle.net/hw3odrba/
You need to set a new style in your css, in case you want to align items to the right:
#contact a{
float: right;
}
Related
I would like to know if someone could help me with a CSS topic.
I am creating a page model through CSS, but it turns out that there is a part that does not stay the same as the rest.
It appears as follows:
enter image description here
And it should look like this, like the footer in the following image.
Do you suggest any ideas? I leave here the code that I have used for CSS.
enter image description here
I attach the HTML and CSS code used.
I tried to move the height and width but can't find the solution.
<!--Inicio de pie de página-->
<div class="clearfix"></div>
<footer id="footer">
<div class="wrap">
<div id="menu_footer">
<h5>Menú</h5>
<ul>
<li>Inicio</li>
<li>Blog Personal</li>
<li>Currículum</li>
<li>Contacto</li>
</ul>
</div>
<div id="location">
<h5>¿Dónde estamos?</h5>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3037.4968410733713!2d-3.690925684351!3d40.41999606336424!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd42289a4a865227%3A0x98278b3a144a86f1!2sPuerta%20de%20Alcal%C3%A1!5e0!3m2!1ses!2ses!4v1599489227264!5m2!1ses!2ses"
width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false"
tabindex="0">
</iframe>
<div id="info">
<h5> Desarrollado con</h5>
<p>
<img src="img/html5-badge-h-css3-graphics-multimedia-performance-semantics.png"
alt="Creado con HTML y CSS">
</p>
<h5>Optimizado para</h5>
<p id="browsers">
<a href="#">
<img src="img/firefox-icon.png" alt="Firefox" title="Firefox">
</a>
<a href="#">
<img src="img/chrome.png" alt="chrome" title="Chrome">
</a>
<a href="#">
<img src="img/Opera_256x256.png" alt="Opera" title="Opera">
</a>
<a href="#">
<img src="img/safari.png" alt="Safari" title="Safari">
</a>
<a href="#">
<img src="img/android.png" alt="Android" title="Android">
</a>
<a href="#">
<img src="img/ios.png" alt="Apple" title="Apple">
</a>
</p>
<h5>Autor</h5>
<p>©Cristina Martínez - acmartinez96.blogspot.com</p>
</div>
</div>
</div>
</footer>
<!--Fin de pie de página-->
</body>
</html>
/FOOTER/
#footer h5
display: block;
background: url(../img/pxgray.png), white;
height: 55px;
letter-spacing: 2px;
text-align: center;
font-family: "BebasNeue";
font-size: 40px;
line-height: 55px;
color: black;
border-radius: 5px;
margin-bottom: 15px;
#footer ul
text-align: left;
margin: 20px;
font-size: 25px;
#footer ul li
margin-top: 10px;
padding: 5px;
border-bottom: 1px solid #cccccc;
#footer ul li a
display: block;
height: 40px;
#footer iframe
width: 100%;
height: 300px;
margin-top: 10px;
border-radius: 5px;
box-shadow: 0x 0px 5px grey;
border: 5px solid white;
}
#footer img
margin-bottom: 15px;
#footer #browsers img{
width: 45px;
Thanks!
Try to use flexbox it's very helpful.
the rendering you request can be done simply this way
<div class="flex">
<div class="ll">Menu</div>
<div class="ll">Map</div>
<div class="ll">Footer</div>
</div>
div.ll {
background: #fff;
margin: 20 auto;
width: 200px;
padding: 50px;
text-align: center;
}
div.flex {
display: flex;
}
You can test it by using sandbox
Instead of a footer, try creating a <div> or <section> and align that to the right.
I have translated an image up to go behind a div to make it fit the design, however it leaves a white space below it, where the original image would be. How would I go about fixing this?
This is for a website, I've tried translating the sitemap up however then there is even more white space below the sitemap.
HTML:
<div class="portfolioImage" id="images">
<div class="portLogoImages" id="myDIV5">
<img src="./resources/portfolio/logoportfolio/logoPortfolio1.png" alt="" class="portfolioImages">
<img src="./resources/portfolio/logoportfolio/logoPortfolio2.png" alt="" class="portfolioImages">
<img src="./resources/portfolio/logoportfolio/logoPortfolio3.png" alt="" class="portfolioImages">
<img src="./resources/portfolio/logoportfolio/logoPortfolio4.png" alt="" class="portfolioImages">
<img src="./resources/portfolio/logoportfolio/logoPortfolio5.png" alt="" class="portfolioImages">
</div>
</div>
<div class="sitemap portAdjustment"> <!-- SITEMAP -->
<div class="sitemapItems">
<img src="./resources/sitemapLogo.png" alt="" class="sitemapLogo" width="166.3px" height="22px">
<div class="links">
<p >Home</p>
<p>Products</p>
<p>Portfolio</p>
<p>About Us</p>
<p>Contact Us</p>
</div>
<div class="finePrint">
<p>X is a part of the family company X that specialises in custom made design ranging from logo design to apparel design.</p>
<p>X</p>
</div>
</div>
</div>
CSS:
.portfolioImages {
border: none;
font-size: 0px;
transform: translateY(-25px);
max-width: 100%;
}
.portLogoImages {
border: none;
font-size: 0px;
transform: translateY(-25px);
max-width: 100%;
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.sitemap {
width: 100%;
height: 215px;
background-color: #f4f4f4;
padding: 30px 0px 30px 0px;
display: block;
text-align: center;
}
.finePrint {
padding-top: 70px;
color: #c8c8c8;
}
.sitemapItems {
padding: 0px 30px 0 30px;
display: block;
}
.sitemap a {
text-decoration: none;
color: #c8c8c8;
transition-duration: .2s;
display: inline-block;
padding-right: 4px;
}
.sitemap a:hover {
text-decoration: underline;
color: #434343;
}
I expect there to be no white space however there is still white space below it.
Just use margin-top instead transform
I'm trying to position three images, one to the left, one to the right, and one in the center, with equal space both sides, but this code is not working:
#header {
background: lightgrey;
background-color: rgba(256, 256, 256, 0.47);
margin: 15px auto 0px auto;
display: block;
height: 80px;
width: 965px;
}
#capçalera1 {
float: left;
margin-left: 15px;
margin-top: 16px;
margin-bottom: 16px;
}
#capçalera2 {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
}
#capçalera3 {
float: right;
margin-right: 15px;
margin-top: 18px;
margin-bottom: 18px;
}
<div id="header">
<div id="capçalera1">
<a href="http://www.uib.cat/">
<img src="/images/logoblue2.png" width=138px height=44px/>
</a>
</div>
<div id="capçalera3">
<a href="http://www.iac3.eu/">
<img src="/images/iac3ieec.jpeg" width=58px height=40px/>
</a>
</div>
<div id="capçalera2">
<img src="/images/test.png" width=531px height=51px/>
</div>
</div>
The left and right images are ok, but the centered one is "glued" to the left one. I want to be able to put it top margin, and to be equally spaced from left and right image.
Thanks for your help!
<div id="header">
<div id="capçalera1">
<img src="/images/logoblue2.png" width=138px height=44px/>
</div>
<div id="capçalera3">
<img src="/images/iac3ieec.jpeg" width=58px height=40px/>
</div>
<div id="capçalera2">
<img src="/images/test.png" width=531px height=51px/>
</div>
</div>
Thats to complicated...
Try this.
<div id="header">
<ul>
<li><img src="/images/logoblue2.png" width=138px height=44px/></li>
<li><img src="/images/iac3ieec.jpeg" width=58px height=40px/></li>
<li><img src="/images/test.png" width=531px height=51px/></li>
</ul>
</div>
CSS
#header ul {
margin: 0;
padding: 0;
}
#header ul li {
display: inline-block //or you can float them,
}
#header ul li:nth-child(even){
margin: 0 10px;
}
you can use one div and three spans like
<div class="container">
<span>
<img ... >
</span>
<span>
<img ... >
</span>
<span>
<img ... >
</span>
css :
.container{ width:50%; margin:0 auto; text-align:center}
.container span{ width:30%; margin:0 1%; }
`
This looks like a job for flexbox! Remove all styling on the capcaleras, and put:
#header {
display: flex;
justify-content: space-around;
background: lightgrey;
background-color: rgba(256, 256, 256, 0.47);
margin: 15px auto 0px auto;
display: block;
height: 80px;
width: 965px;
}
Keep in mind, though, that support for this is not great.
I have a content with Title, image and description. I have 3 differents contents, which i have to put side by side. What would be better do achive this ? I did with <ul>. But the image wasnts below title, and description below image, so i just but after <li></li> a break, and it worked. But in IE it doesnt.
Here is what i got - > http://jsfiddle.net/5xfR9/12/
<div id="content">
<ul>
<li>
<h3>Custom clearance</h3><br/>
<img src="..." style="width:360px; height: 160px;" alt="Custom clearance" /><br/>
<p style="width:360px;">...<br />Learn more <img src="images/arrow.png" alt="learn more" style="width:6px; height:9px; border: 0px;"/><br/>
</p>
</li>
<li>
<h3>Cargo Inspections</h3><br/>
<img src="..." style="width:360px; height: 160px;" alt="Custom clearance" /><br/>
<p style="width:360px; padding">...<br />Learn more <img src="images/arrow.png" alt="learn more" style="width:6px; height:9px; border: 0px;"/>
</p><br/>
</li>
<li>
<h3>Our Location</h3><br/>
<img src="..." style="width:360px; height: 160px;" alt="Custom clearance" /><br/>
<p style="width:360px;">....<br />Learn more <img src="images/arrow.png" alt="learn more" style="width:6px; height:9px; border: 0px;"/>
</p><br/>
</li>
</ul>
</div>
using this CSS
#content {
width: 100%;
min-height: 450px;
display: block;
padding-bottom:40px;
}
#content ul li {
display: inline;
list-style: none;
float: left;
min-width:32%;
}
#content ul li > h3 {
text-decoration: none;
display:block;
float:left;
font-size: 24px;
margin: 0 0 0 20px;
font-family: gothamlight;
padding: 10px 20px 10px 20px;
}
#content ul li > img {
display: block;
float:left;
margin: 0 0 0 10px;
padding: 0px 25px 0px 25px;
}
#content ul li > p {
text-decoration: none;
line-height: 1.3;
display:block;
color: #404041;
float:left;
font-size: 14px;
margin: 0 0 0 20px;
padding: 5px 20px 5px 20px;
display: block;
}
I guess I did it wrong, I put <br /> after a <li></li>, so that content would be vertical.
But of course IE is smart and it shows Content 1 for the whole width page, and other content is after the first one.
I have created a design which is below
http://jsfiddle.net/g9TT7/1/
i want to put logo means below top and left side of the page
<a href="index.html" style="margin-top:10px;position:relative!important;width:200px;display:block;" class="img1">
<img src="image/img_2.png" alt="logo" />
</a>
here i want to put business name in the center of the page and logo will be on the left side of the page. I have set position absolute in my logo but not working.
Please help me to do this.
I hope you want something like this:
Demo
Add css float:left in your logo style and remove position absolute from business div.
You can also adjust position from top and left by playing with margin.
HTML:
<div class="b" style="text-align:center;">
<a href="index.html" class="img1">
<img src="image/img_2.png" alt="logo" />
</a>
<div class="business_name" >
Business
</div>
<div class="clear"></div>
</div>
CSS:
.clear
{
clear:both;
}
.img1{
margin-top:20px;
width:200px;
display:block;
float:left;
}
.business_name {
width: 78%;
font-size: 43px;
font-weight: bold;
float: left;
text-align: center;
line-height: 28px;
margin-top: 5px;
}
.b {
font-size: 25px;
font-weight: bold;
width: 78.5%;
text-align: left;
height: 50px;
margin: 0px;
color: rgb(67, 161, 240);
}
.img1 {
float: left;
margin: 2px 0px 0px;
width: 20%;
text-align: left;
border: 0px solid red;
}
Something like this? http://jsfiddle.net/ADDTn/
<div class="header">
<a href="#" class="logo">
<img src="img.jpg" />
</a>
<h1>Bussiness</h1>
<div class="clear"></div>
</div>
css
.header {
width: 100%;
height: 100px;
}
.logo {
display: block;
float: left;
}
h1 {
text-align: center;
}
.clear {
clear: both;
}
Assign the z-index value
<a href="index.html" style="margin-top:10px;position:relative!important;width:200px;display:block; z-index: 1;" class="img1">
<img src="image/img_2.png" alt="logo" />
</a>
see this demo