I have two divs inside of a navbar, and when attempting to display them inline, they show up like this rather than side by side:
Here's the HTML:
<!--Nav starts here-->
<nav class="navbar">
<div class="navbar-item-set">
<div class="navbar-item">
<a href="index.html" class="navbar-text">
<img src="images/sad_robot.png" alt="" width="45" height="45"/>
<br>
ID2 Games
</a>
</div>
<div class="navbar-item">
<a href="index.html" class="navbar-text">
<img src="images/sad_robot.png" alt="" width="45" height="45"/>
<br>
Fizz + Hummer
</a>
</div>
</div>
</nav>
<!--Nav ends here-->
And the respective CSS:
.navbar{
height: 80px;
text-align: center;
font-size: 1.7rem;
background-color: black;
}
.navbar-item-set{
width: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
.navbar-item{
display: inline;
margin-left: auto;
margin-right: auto;
width: 150px;
color: white;
}
What's causing this strange layout?
Change
.navbar-item{
display: inline;
margin-left: auto;
margin-right: auto;
width: 150px;
color: white;
}
To
.navbar-item{
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 150px;
color: white;
}
Removing the <br/> elements in the HTML should do the trick.
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I'm trying to align multiple inline-blocks at the top of my page, but for reasons that are baffling to me, it's not working. The CSS could hardly be cleaner or less, but the top isn't aligning properly. I thought it could be a floating issue, but even after applying a clear:both it doesn't fix this.
Please see the program here:
https://jsfiddle.net/yezwocta/
#page {
text-align: center;
}
.article {
width: 350px;
height: 150px;
margin: 5px;
display: inline-block;
background-color: #fafafa;
}
.article img {
float: left;
width: 150px;
height: 130px;
margin-top: 10px;
}
.content {
position: relative;
display: inline-block;
width: 170px;
height: 130px;
margin-top: 10px;
margin-left: 10px;
text-align: left;
}
.title {
font-size: 1.2rem;
}
.source {
font-size: 0.8rem;
position: absolute;
bottom: 0;
left: 0;
}
<div id="page">
<div class="article">
<a href="https://cnn.com" target="_blank">
<img alt="News" src="https://loremflickr.com/150/130/news?random=1">
<div class="content">
<span class="title">Cable News Network</span>
<span class="source">CNN</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">
<img alt="Firefox browser" src="https://loremflickr.com/150/130/browser?random=2">
<div class="content">
<span class="title">Get the Latest Firefox Browser</span>
<span class="source">Mozilla</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.kproxy.com/" target="_blank">
<img alt="kproxy" src="https://loremflickr.com/150/130/proxy?random=3">
<div class="content">
<span class="title">Surf the web anonymously and bypass filters</span>
<span class="source">kproxy</span>
</div>
</a>
</div>
</div>
Add vertical-align: top; to your .article CSS (the default is baseline):
#page {
text-align: center;
}
.article {
width: 350px;
height: 150px;
margin: 5px;
display: inline-block;
background-color: #fafafa;
vertical-align:top;
}
.article img {
float: left;
width: 150px;
height: 130px;
margin-top: 10px;
}
.content {
position: relative;
display: inline-block;
width: 170px;
height: 130px;
margin-top: 10px;
margin-left: 10px;
text-align: left;
}
.title {
font-size: 1.2rem;
}
.source {
font-size: 0.8rem;
position: absolute;
bottom: 0;
left: 0;
}
<div id="page">
<div class="article">
<a href="https://cnn.com" target="_blank">
<img alt="News" src="https://loremflickr.com/150/130/news?random=1">
<div class="content">
<span class="title">Cable News Network</span>
<span class="source">CNN</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">
<img alt="Firefox browser" src="https://loremflickr.com/150/130/browser?random=2">
<div class="content">
<span class="title">Get the Latest Firefox Browser</span>
<span class="source">Mozilla</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.kproxy.com/" target="_blank">
<img alt="kproxy" src="https://loremflickr.com/150/130/proxy?random=3">
<div class="content">
<span class="title">Surf the web anonymously and bypass filters</span>
<span class="source">kproxy</span>
</div>
</a>
</div>
</div>
Thank you all for your replies. As it turns out it had to do with the original image sizes. I am new to StackOverflow so now I know to use filler images. Thanks Again!
I have been designing a website and I have run into a strange error that I can't figure out. I have 3 <div> elements in side <a> centered using text-align center. The <div> and/or the <a> element seem to have a vertical offset from the next one. I hope there's a solution,
.iconCardCont {
text-align: center;
}
.iconCard div {
background-color: #86b55bff;
width: 160px;
height: 200px;
display: inline-block;
text-align: center;
margin-left: 20px;
margin-right: 20px;
}
.iconCard img {
margin-top: 20px;
}
.iconCard h2 {
background-color: white;
width: 140px;
margin-left: auto;
margin-right: auto;
color: #86b55bff;
}
.iconCard a {
vertical-align: bottom;
overflow: hidden;
}
<section class="iconCardCont">
<a href="" class="iconCard">
<div><img src="http://via.placeholder.com/98x105">
<h2>Calendar</h2>
</div>
</a>
<a href="" class="iconCard">
<div><img src="http://via.placeholder.com/98x105">
<h2>Signup</h2>
</div>
</a>
<a href="" class="iconCard">
<div><img src="http://via.placeholder.com/98x105">
<h2>Info</h2>
</div>
</a>
</section>
As you can see if you run that snippet all the items line up, unlike in your screenshot, this happens even with actual images that aren't broken (in future try use https://placeholder.com/ for questions on here) so I think there must be something else in your code that is causing an issue.
One thing to note is that in your css .iconCard a doesn't refer to anything as your <a> tag is the tag with that class so it's looking for other <a> tags within that.
I think what you might be looking for is vertical-align but you'll need to set this for your container, rather than the items you are trying to align within it.
.iconCardCont {
text-align: center;
}
.iconCard div {
background-color: #86b55bff;
width: 160px;
height: 200px;
display: inline-block;
text-align: center;
margin-left: 20px;
margin-right: 20px;
}
.iconCard img {
margin-top: 20px;
}
.iconCard h2 {
background-color: white;
width: 140px;
margin-left: auto;
margin-right: auto;
color: #86b55bff;
}
.iconCard a {
vertical-align: bottom;
overflow: hidden;
}
<section class="iconCardCont">
<a href="" class="iconCard">
<div><img src="http://via.placeholder.com/150x100">
<h2>Calendar</h2>
</div>
</a>
<a href="" class="iconCard">
<div><img src="http://via.placeholder.com/150x100">
<h2>Signup</h2>
</div>
</a>
<a href="" class="iconCard">
<div><img src="http://via.placeholder.com/150x100">
<h2>Info</h2>
</div>
</a>
</section>
i think you mean the space you marked with some dashes right ?
one way is to set the parent font size to zero and give the child a font size.
.iconCardCont {
text-align: center;
font-size: 0;
}
.iconCard div {
background-color: #86b55bff;
width: 160px;
height: 200px;
display: inline-block;
text-align: center;
margin-left: 20px;
margin-right: 20px;
font-size: 20px;
}
.iconCard img {
margin-top: 20px;
}
.iconCard h2 {
background-color: white;
width: 140px;
margin-left: auto;
margin-right: auto;
color: #86b55bff;
}
.iconCard a {
vertical-align: bottom;
overflow: hidden;
}
<section class="iconCardCont">
<a href="" class="iconCard">
<div><img src="CalendarIcon.png">
<h2>Calendar</h2>
</div>
</a>
<a href="" class="iconCard">
<div><img src="SignupIcon.png">
<h2>Signup</h2>
</div>
</a>
<a href="" class="iconCard">
<div><img src="InfoIcon.png">
<h2>Info</h2>
</div>
</a>
</section>
On my contact gif I have used the social media symbols as a link to my social media sites, however, the Twitter and the GitHub link is not working and I cannot figure out why. The Facebook and the CodePen link does work. Also is there a better way correctly line and organize the Here is the links so that they can stay more consistent? site if you want to take a look for yourself misaelalopez.com. Thank you for your help!
#contact
{
background-image: url(https://lh3.googleusercontent.com/-2wI0PCtgivjkGQruaV-_2JYgbuD-yNFkRLN_DGAPXHxFq5gac-lnc5IheHflI6V_Z9AtgJjyfF-LBGa4tt_W6XB2Xs26xEyAH46S7kJlgiyHeIbi-ZM62zJuHcjJuZNnhO9lMGt6jw);
height: 250px;
padding: 300px;
margin: 0 auto;
background-size: cover;
}
#contact h1
{
color: white;
position: relative;
text-align: center;
}
#contact h2
{
color: white;
position: relative;
text-align: center;
}
.facebook
{
position: relative;
float: left;
}
.twitter
{
position: relative;
left: 50px;
float: left;
}
.instagram
{
position: relative;
left: 100px;
float: left;
}
.gitHub
{
position: relative;
left: 150px;
float: left;
}
.codePen
{
position: relative;
left: 200px;
}
<div id="contact">
<div class="Content">
<div class="facebook">
<a target="_blank" href="https://facebook.com/misael.a.lopez"><img src="http://www.freeiconspng.com/uploads/facebook-transparent-12.png"></a>
</div>
<div class="twitter">
<a target="_blank" href="https://twitter.com/cables25"><img src="https://s3.amazonaws.com/piktochartv2-dev/v2/uploads/a8f46883-78d7-4dfc-b0b3-be090e70e2b3/27c835d6dd2cbb4b696abd3e7ac9c0370bbedefe_original.png"></a>
</div>
<div class="instagram">
<a target= "_blank" href= "https://www.instagram.com/misael2590/?hl=en"><img src= "http://bbcpersian7.com/images/instagram-clipart-png-transparent-background-3.jpg" alt="Instagram"></a>
</div>
<div class="gitHub">
<a target= "_blank" href="https://github.com/Misael2590"><img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-256.png" alt="GitHub"></a>
</div>
<div class="codePen">
<a target= "_blank" href="https://codepen.io/misael25900/"><img src= "http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png" alt="CodePen"></a>
</div>
<br>
<h1>Reach out to me!</h1>
<h2>Email me at Misael25900#gmail.com</h2>
</div>
</div>
Try this..
#contact
{
background-image: url(https://lh3.googleusercontent.com/-2wI0PCtgivjkGQruaV-_2JYgbuD-yNFkRLN_DGAPXHxFq5gac-lnc5IheHflI6V_Z9AtgJjyfF-LBGa4tt_W6XB2Xs26xEyAH46S7kJlgiyHeIbi-ZM62zJuHcjJuZNnhO9lMGt6jw);
height: 250px;
padding: 300px;
margin: 0 auto;
background-size: cover;
}
#contact h1
{
color: white;
position: relative;
text-align: center;
}
#contact h2
{
color: white;
position: relative;
text-align: center;
}
.facebook
{
position: relative;
float: left;
}
.twitter
{
position: relative;
left: 50px;
float: left;
}
.instagram
{
position: relative;
left: 100px;
float: left;
}
.gitHub
{
position: relative;
left: 150px;
float: left;
}
.codePen
{
position: relative;
left: 200px;
float: left;
}
<div id="contact">
<div class="Content">
<div class="facebook">
<a target="_blank" href="https://facebook.com/misael.a.lopez"><img src="http://www.freeiconspng.com/uploads/facebook-transparent-12.png" width="20px" height="20px"></a>
</div>
<div class="twitter">
<a target="_blank" href="https://twitter.com/cables25"><img src="https://s3.amazonaws.com/piktochartv2-dev/v2/uploads/a8f46883-78d7-4dfc-b0b3-be090e70e2b3/27c835d6dd2cbb4b696abd3e7ac9c0370bbedefe_original.png" width="20px" height="20px"></a>
</div>
<div class="instagram">
<a target= "_blank" href= "https://www.instagram.com/misael2590/?hl=en"><img src= "http://bbcpersian7.com/images/instagram-clipart-png-transparent-background-3.jpg" alt="Instagram" width="20px" height="20px"></a>
</div>
<div class="gitHub">
<a target= "_blank" href="https://github.com/Misael2590"><img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-256.png" alt="GitHub" width="20px" height="20px"></a>
</div>
<div class="codePen">
<a target= "_blank" href="https://codepen.io/misael25900/"><img src= "http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png" alt="CodePen" width="20px" height="20px"></a>
</div>
<br>
<h1>Reach out to me!</h1>
<h2>Email me at Misael25900#gmail.com</h2>
</div>
</div>
The links ' don't work ' because you arrange the divs in a wrong way. They overlap each other. So the codepen div is overlapping the twitter,instagram,github links. Because it's positioned on top of them > you set left:200px which moves the codepen div 200px from left but because it doesn't have floaT:left like the others, it has by default width:100% , where 100% is the width of the entire #contact .content
If you set float:left to the divs, this is not the way to arrange them. You need to set them a width. Having 5 divs, that's 100%/5 = 20% . And because you want some margins between them ( spaces ) , you can use calc() as shown below.
Also that padding:300px on #contact is a very bad idea. I don't know what you were trying to achieve with that. Anyway, i changed that also
( Changed a bit your html also because using float gets the elements out of their default float in the document )
All CSS styles are at the top of the code, in HTML i added a .footer-content div wrapping around the footer text
#contact .Content {
float:left;
width:100%;
}
#contact .Content > div {
float: left;
width: calc(20% - 15px);
margin: 0 7.5px;
}
.footer-content {
float: left;
width: 100%;
}
img {
max-width: 100%
}
#contact {
background-image: url(https://lh3.googleusercontent.com/-2wI0PCtgivjkGQruaV-_2JYgbuD-yNFkRLN_DGAPXHxFq5gac-lnc5IheHflI6V_Z9AtgJjyfF-LBGa4tt_W6XB2Xs26xEyAH46S7kJlgiyHeIbi-ZM62zJuHcjJuZNnhO9lMGt6jw);
height: 250px;
padding:300px 30px;
width:100%;
margin: 0 auto;
background-size: cover;
}
#contact h1 {
color: white;
position: relative;
text-align: center;
}
#contact h2 {
color: white;
position: relative;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="contact">
<div class="Content">
<div class="facebook">
<a target="_blank" href="https://facebook.com/misael.a.lopez"><img src="http://www.freeiconspng.com/uploads/facebook-transparent-12.png"></a>
</div>
<div class="twitter">
<a target="_blank" href="https://twitter.com/cables25"><img src="https://s3.amazonaws.com/piktochartv2-dev/v2/uploads/a8f46883-78d7-4dfc-b0b3-be090e70e2b3/27c835d6dd2cbb4b696abd3e7ac9c0370bbedefe_original.png"></a>
</div>
<div class="instagram">
<a target="_blank" href="https://www.instagram.com/misael2590/?hl=en"><img src="http://bbcpersian7.com/images/instagram-clipart-png-transparent-background-3.jpg" alt="Instagram"></a>
</div>
<div class="gitHub">
<a target="_blank" href="https://github.com/Misael2590"><img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-256.png" alt="GitHub"></a>
</div>
<div class="codePen">
<a target="_blank" href="https://codepen.io/misael25900/"><img src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png" alt="CodePen"></a>
</div>
</div>
<div class="footer-content">
<h1>Reach out to me!</h1>
<h2>Email me at Misael25900#gmail.com</h2>
</div>
</div>
I've been struggling with this simple and basic problem for the last day and can't seem to find a solution for it nowhere.
I'm having a container div on my website, in which there are four social network buttons, and what I'm trying to achieve is vertically align them in to the middle
of the container, so there's equal amount of free space on top of them and underneath them.
Please note, that I've linke normalize.css and reset.css to my html.
Muh code:
HTML
<div class="social-line-container">
<div class="social-line-buttons-group">
<a href="#0"><img src="socialicons/facebook.png" alt="FB"><a/>
<a href="#0"><img src="socialicons/twitter.png" alt="TW"><a/>
<a href="#0"><img src="socialicons/google.png" alt="GO"><a/>
<a href="#0"><img src="socialicons/youtube.png" alt="YT"><a/>
</div>
</div>
CSS
.social-line-container {
width: 66%;
height: inherit;
margin: 0 auto;
}
.social-line-buttons-group a{
display: inline-block;
vertical-align: middle;
height: 100%;
float: right;
padding: 2px;
margin: 0 3px;
}
Any help will be much appreciated.
All you need to add is clear
.social-line-container {
width: 66%;
height: inherit;
margin: 0 auto;
}
.social-line-buttons-group a {
display: inline-block;
/*vertical-align: middle;*/
height: 100%;
float: right;
clear: both; /* add */
padding: 2px;
margin: 0 3px;
}
<div class="social-line-container">
<div class="social-line-buttons-group">
<a href="#0">
<img src="socialicons/facebook.png" alt="FB"><a/>
<a href="#0">
<img src="socialicons/twitter.png" alt="TW"><a/>
<a href="#0">
<img src="socialicons/google.png" alt="GO"><a/>
<a href="#0">
<img src="socialicons/youtube.png" alt="YT"><a/>
</div>
</div>
.social-line-container{
border:2px solid black;
}
.social-line-buttons-group{
display:flex;
align-items: center;
justify-content: center;
height:100%;
}
.social-line-buttons-group a{
padding: 2px;
margin: 0 3px;
}
img{
width:50px;
height:50px;
}
<div class="social-line-container">
<div class="social-line-buttons-group">
<img src="http://lh3.googleusercontent.com/-ElsaNCI_yKg/VcXI_VFictI/AAAAAAAAINA/MeFjL1Ymaac/s640/StylzzZ%252520%252528289%252529.png" alt="FB">
<img src="https://upload.wikimedia.org/wikipedia/it/archive/0/09/20160903181541!Twitter_bird_logo.png" alt="TW">
<img src="http://www.userlogos.org/files/logos/annyella/google3.png" alt="GO">
<img src="http://logok.org/wp-content/uploads/2014/08/YouTube-logo-play-icon-219x286.png" alt="YT">
</div>
</div>
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