I want to display the menu in inline form but it's not working .Any help ?(Don't worry about the pictures).Here is a screenshot of what I want to achieve.The "As seen " will occupy the red holder on the screenshot.
<div class="header" style="display:inline;">
<div style="font-size:26px;">
<span> As seen on</span>
</div>
<div>
<img style="vertical-align: middle; background-color:#000;" src="<?php echo get_template_directory_uri(); ?>/images/marketing_ignite_logo.png" />
</div>
<div>
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.gif" alt="Logo Buyseoleads">
</div>
<div class="seenBefore2" style="font-size:26px;">
<span>As seen on</span>
</div>
<div>
<img style="vertical-align: middle; background-color:#000;" src="<?php echo get_template_directory_uri(); ?>/images/release_wire_logo.png"/>
<!--img src="<?php //echo get_template_directory_uri(); ?>/images/daily-news-newspaper-headline.jpg" alt="Daily News Newspaper Headline"-->
</div>
</div>
Not a lot to go on here but I'll give it a try.
Every <div> has block context by default. Setting display: inline; on a parent <div> will not get inherited by child <div>s. Apply display: inline; to all <div>. Use <span> instead of <div> as it's an inline element by default and won't try to take up the whole width of the parent element by default.
Personally I would change the markup a bit if you're Looking to create a menu. Use <nav>, <ul>, <li>, <a> etc. instead. Perhaps something like I have below.
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
li {
padding: 3px 6px;
float: left;
}
li img {
vertical-align: middle;
}
<header>
<nav>
<ul>
<li>As seen on
<a href="#">
<img src="http://placehold.it/50x50/ffcc00/">
</a>
</li>
<li>As seen on
<a href="#">
<img src="http://placehold.it/50x50/cc0000/">
</a>
</li>
</ul>
</nav>
</header>
The problem is that display: inline; won't allow any block styling. And you used it on block element. If you want elements to be on the same line, you should consider using, for example, float property
.header div {
float: left;
}
But do not forget about clearing the floats.
If I understand you correctly, you want your blocks (as seen on, with image) in a row? If so, you can use floats. Note also I have replaced your images with placeholdit ones.
https://jsfiddle.net/aa8zs200/
<div style="width: 100%; position: relative;">
<div style="float: left; margin-right: 10px;">
<div style="font-size:26px;"><span> As seen on</span></div>
<div>
<a href="https://www.marketingignite.com/basic-commonsensical-seo-tips-and-tricks/" target="_blank">
<img style="vertical-align: middle; background-color:#000;" src="http://placehold.it/350x150" /> </a>
</div>
</div>
<div style="float: left; margin-right: 10px;">
<div style="font-size:26px;"><span> As seen on</span></div>
<div>
<img src="http://placehold.it/350x150" alt="Logo Buyseoleads">
</div>
</div>
</div>
span{
margin:0;
padding:0;
}
or
span{
display:block;
float:left;
padding:0 10px;
}
For this question,You should set the display:inline attribute for all of the inner divs, not for the outer div.
Related
How to remove this space among the pictures?
I'm to learning to create a gallery, but I can't remove the space among the pictures, what should I do?
The code:
body {
background: #E6E6E6;
}
<body class="imagens">
<img src="imagens/imagem1.png">
<img src="imagens/imagem2.png">
<img src="imagens/imagem3.png">
<img src="imagens/imagem4.png">
<img src="imagens/imagem5.png">
</body>
The space between the images is due to the whitespace between the <img> elements in your source code. By default, <img> elements have their CSS display property set to inline, meaning they act as emojis would in regular text (if you leave space between them, they will have space between them; if you don't leave space between them, they won't have any space between them).
So the HTML-based approach to solving this issue is to remove all whitespace characters between the elements:
<body class="imagens">
<img src="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150">
</body>
A CSS-based approach might be to apply something along these lines:
.imagens {
overflow: hidden;
}
.imagens img {
float: left;
}
You can use float.
.clearfix::after, .container::after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.images img {
float: left;
}
<div class="images clearfix">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
</div>
You can use float: left and make them display: block. No need for anything else...
img {
display: block;
float: left;
}
<div>
<img src="http://placehold.it/120x120">
<img src="http://placehold.it/120x120">
<img src="http://placehold.it/120x120">
<img src="http://placehold.it/120x120">
<img src="http://placehold.it/120x120">
</div>
You can use a small hack using HTML comments as spacers between the elements:
<img src="imagens/imagem1.png"><!--
--><img src="imagens/imagem2.png"><!--
--><img src="imagens/imagem3.png"><!--
--><img src="imagens/imagem4.png"><!--
--><img src="imagens/imagem5.png">
The simplest fix will be to set the below CSS property
Although I recommend not using this fix in the body element
.container{
background: #E6E6E6;
font-size:0px;
}
Cause of the problem: Source: here
because white space is significant for inline elements. You can always
float your images if you want to have them line up.
Since there is an enter between the images, we get this problem!
.container {
background: #E6E6E6;
font-size: 0px;
}
<body class="imagens">
<div class="container">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
</div>
</body>
I want the first image to stick to the top of the container and the following images should be below it... top:0; lets the image be..200px above the container and if I just say position:relative its always in the middle...;
<div class="container">
<div class="card_left">
<p style="font-size:1.6em; padding: 15px 0;"><b>Title</b></p>
<p style="font-size:1.2em;">Long text</p>
</div>
<div class="card_right">
<img src="../res/images/artikel1bild.PNG"/>
<img src="../res/images/artikel1bild.PNG"/>
</div>
Use display: block so there will be no other images in the same line and margin: auto for centering the image
img {
display: block;
margin: auto;
width: 200px;
}
<div>
<img src="https://www.w3schools.com/css/paris.jpg" />
<img src="https://www.w3schools.com/css/paris.jpg" />
<img src="https://www.w3schools.com/css/paris.jpg" />
</div>
Just add <br /> after each image if you want to stick to HTML:
<div class="card_right">
<img src="../res/images/artikel1bild.PNG"/><br />
<img src="../res/images/artikel1bild.PNG"/><br />
</div>
Or the better way would be to make a separate CSS file and set display: block; for your img tags:
img {
display: block;
}
Example: https://jsfiddle.net/nk8fbr76/
try this
img {
margin: 0, auto;width: 200px;display:inline-block;height:100px;
}
<div class="card_right">
<img src="https://www.w3schools.com/css/img_fjords.jpg"/>
<img src="https://www.w3schools.com/css/img_fjords.jpg"/>
</div>
I'm trying to align two divs horizontally inside my HTML: the first one contains an image and the second a text, and this is the used code:
<div style="float: left; width: 55px;">
<img src="../img/look.svg" alt="">
</div>
<div style="display: inline-block;">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
I tried many methods, but I've been unable to get the text line in the same level as the image vertical axis, and the text inside the second div gets displayed very far from the image vertically.
So, is there any possibility to fix that?
The problem is with the float. The vertical-align: middle; line-height: 1; will fix the issue:
div {
display: inline-block;
vertical-align: top;
line-height: 1;
}
div:first-child {
width: 55px;
}
<div>
<img src="//placehold.it/50?text=DP" alt="">
</div>
<div style="display: inline-block; vertical-align: middle; line-height: 1;">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
Preview
Top Alignment:
Middle Alignment:
The vertical-align decides the vertical alignment. If you want the image and text to be on the same line, use vertical-align: top.
A few things first:
don't use inline styles
don't mix float with inline-block
Option 1: using flebox
section {
display: flex;
gap: 10px;
}
<section>
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
</section>
Option #2 using inline-block
div {
display:inline-block;
vertical-align:top;
margin-right:10px
}
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
Option #3 using float
div {
float: left;
margin-right:10px
}
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
flexbox to the rescue.
I added your divs inside another one, which will align its items. In my CSS my image has 100px so I changed the width to 100px. Change yours accordingly.
.halign {
display:flex;
align-items: center;
}
<div class="halign">
<div style="width: 100px;">
<img src="http://lorempixel.com/100/100/" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
</div>
Try to seprate the CSS and HTML and do not mix display:inline-block with float:left. Also use clear:both after both div
<style>
.fisrstDiv {
float: left;
display:block;
}
.secondDiv {
float: left;
display:block;
}
.clear {
clear: both;
}
</style>
HTML
<div class="fisrstDiv">
<img src="//placehold.it/50?text=DP" alt="">
</div>
<div class="secondDiv">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
<div class="clear"></div>
So as a newbie web developer I am stuck on how to center all 3 images in the middle of the screen. I read up on it and came across margin:auto;. Tried it, didn't work.
This is the CSS:
<style>
.social
{
float:left;
margin:5px;
}
.main_block
{
margin:auto, auto;
}
</style>
This is the HTML:
<div class="main_block">
<img class="social" src="http://lorempixel.com/400/200/"> <a href="#"><img class="social" src="http://lorempixel.com/g/400/200/" alt="Facebook"> <img class="social" src="http://lorempixel.com/400/200/" alt="Google +"> </a>
</div>
Help is much appreciated.
FIDDLE
You need to display the images as block and then apply margin auto
Also your HTML is not correct:
<div class="main_block">
<div class="ib">
<a href="#">
<img class="social" src="http://lorempixel.com/50/50/" />
</a>
<a href="#">
<img class="social" src="http://lorempixel.com/g/50/50/" alt="Facebook" />
</a>
<a href="#">
<img class="social" src="http://lorempixel.com/50/50/" alt="Google +" />
</a>
</div>
</div>
CSS:
.social
{
float: left;
}
.ib {
display: inline-block;
}
.main_block {
text-align: center;
}
I'm not sure if you wanted them to stack over each other, or just to center them.
Stack them over each other
JSFiddle
To stack them over each other, you want to have position:absolute; in the .social tag, that way they won't try to avoid each other. The problem is, margin:auto; won't work then. The only solution I've found to fix this to to set the left: and right: positions to 1%;.
Just center them
JSFiddle
This one is to just center them. You would just want to use margin-left:auto; and margin-right:auto;. With this, you don't need to use position:absolute;.
You have to set a width on the main-block class and remove the comma.
Your style should look something like this:
.main_block
{
width: 40em;
margin:0 auto;
}
How can I put the following elements on the same line? I know it has to do with the display property, but that's the one that always stumps me and can never seem to get to work.
http://jsfiddle.net/MgcDU/4137/
HTML:
<div class="container">
<div class="small-video-section">
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-last">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
</div>
</div>
CSS:
.small-video-section {
height: 134px;
}
.thumbnail-container {
width: 220px;
margin-top: 15px;
margin-right: 20px;
display: inline-block;
}
.thumbnail-last {
width: 220px;
margin-top: 15px;
display: block;
}
Thanks. :)
You could use float: left or float: right
img {float: left;}
Note, you'll have to use clearfix which Mr Gallagher explains nicely or follow with any element that has clear: both; on it to get the results you expect.
You can position them absolutely
img {position: absolute;}
and then position one by one using left and right or margins
img.image-one {left: 0: top: 0;}
img.image-one {right: 300px; top: 0;}
img.image-three {margin-left: 100px;}
/*etc etc...*/
EDIT: didn't notice the divs, you should put float left on those as someone else mentioned, however both options technically work in your case. Theres probably a dozen more ways to do this...
Changing display:block to display:inline-block in your .thumbnail-last rule will do it.
try float: left on the divs. That will get everyone to show up in line. other wise block elements introduce a break
Try this code :- Use only float:left
<div class="container">
<div class="small-video-section">
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-last" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
</div>
</div>
All your code are ok. But , I have only added style in HTML part.
Update link :-
http://jsfiddle.net/MgcDU/4148/
Its working fine.
It's an old post but it cames when searching for place elements on the same line with bootstrap so I will help others.
Boostrap has the Inline form class to place some elements on the same line (it's left aligned).
Bootstrap CSS inline form