I am trying to display this content in a line so that it shows with Shopping on the left of my page and content in the "right" div on the right. I have tried floating the div to the right but that didn't work.
Any help is much appreciated.
<header>
<h1>Shopping</h1>
<div id="cart"
<img src="images/cart.png" width="80" height="80">
<p> Cart: 0 </p>
Login
</div>
</header>
Like this
<h1> and <div> are block element so they take a whole line each. You have to make them as below to display them in a line.
header h1, header #cart {
display:inline-block;
}
Well there're a few more methods to show them in a line, but this is the easiest.
Try this https://jsfiddle.net/g6camng3/1/
HTML
<header>
<h1>Shopping</h1>
<div id="right">
<img src="http://placehold.it/350x150" width="80" height="80">
<p> Cart: 0 </p>
Login
</div>
CSS
h1 {
float: left;
display: inline-block;
}
#right {
display: inline-block;
}
I would suggest you to use span instead of p tag :
<header>
<h1>Shopping</h1>
<div id="cart"
<span><img src="images/cart.png" width="80" height="80"></span><span> Cart: 0 </span><span>Login</span>
</div>
</header>
Related
How to make the coffee image close to the text?example as it should be
how did I manage to do this
.cup {
float: right;
}
.mbc {
font-size: 60px;
}
<div class="page1">
<div>
<div>
<h1 class="mbc">Make better<br>coffee<img src="Coffe.png" alt="Coffe image" width="70px" height="67px" class="cup"></h1>
<p>why learn how to blog?</p>
</div>
<img src="Croods.png" alt="Croods" width="476px" height="323px">
</div>
</div>
Right now, float right makes the image always go to the right side. If the image is positioned inline (display: inline, which is the default value), the image would be placed correctly.
<h1>This is<br/>your text<img width="30" style="margin-left: 10px" src="https://hotemoji.com/images/dl/d/coffee-emoji-by-twitter.png" /></h1>
Can someone show me how to put text under every individual image and also images must be in same line which is working? I understand that default display for "a" tag is block and for "img" tag is display inline.
This is my code:
HTML
<div class="other-content">
<div class="search">
<h1>We Offer best experience in the world</h1>
<img src="../Images/beach.jpg" alt="beach" width="200px" height="150px">
<p>sadasdasd</p>
<img src="../Images/desert.jpg" alt="desert" width="200px" height="150px">
<p>sadasdasd</p>
<img src="../Images/evergreen.jpg" alt="maoutin" width="200px" height="150px">
<p>sadasdasd</p>
<img src="../Images/snow-pathway.jpg" alt="snow-pathway" width="200px" height="150px">
</div>
</div>
CSS
.other-content .search {
background: #ffffff;
height: 300px;
text-align: center;
}
.other-content .search p{
display: inline;
}
Just put the picture with the text in separate divs and make the divs width smaller until the text is below the picture. And with these divs, assign display:inline-block;
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
I am trying to modify the HTML5 Boilerplate header to have a central image with a word either side like so:
as you can see I managed to do it, this was however only using parts of boilerplate and bad css that broke h5bp's usefulness. I would like to utilize h5bp correctly now and achieve the same thing. I'm just not sure how to do it.
My current attempt looks like this:
The image is not in between the words, even tho the order in the mark up is like so:
<div id="header-container">
<header class="wrapper clearfix">
<div class="center">
<h1 id="title">First</h1> <img src="img/mf_coffee_cup.png" alt="" height="280" width="340" /> <h1 id="title">Second</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
Relevant CSS:
.center { display: table; margin: 0 auto; }
#title
{
padding: 20px;
display: inline;
font-size: 4.5em;
border-top: 4px solid #5dc1c4;
border-bottom: 4px solid #5dc1c4;
}
If anyone could explain why the text is not either side of the image that would be greatly appreciated.
Thank you
Edit:
While the answer below is valid I actually solved this problem by putting the < img > into the < h1 > instead of having them separated, like so:
<h1 id="title">First <img src="img/mf_coffee_cup.png" alt="" height="280" width="340" /> Second</h1>
With your HTML and just this CSS, the three items will display together on one line:
.center h1 {display: inline;}
Working demo: http://jsfiddle.net/jfriend00/yK7Qy/
FYI, I notice that you're using the same id="title" in multiple places. That won't work for you because a given id can only be present on one object in the page. You probably want to change that to class="title".
It may be easier to just put all the text and image in one <h1> tag like this:
<div id="header-container">
<header class="wrapper clearfix">
<div class="center">
<h1>
<span class="title">First</span>
<img src="http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg" alt="" />
<span class="title">Second</span>
</h1>
</div>
</header>
</div>
Demo here: http://jsfiddle.net/jfriend00/CHv4k/
Try using display:inline-block; rather than display:inline. I don't have the project in front of me so I'm not sure of this will work.
However, if it does the image will be in the wrong spot. You must simply use vertical-align or margin-top:-##px.
A slightly different approach, using spans, and only one h1 tag:
<div id="header-container">
<header class="wrapper clearfix">
<div class="center">
<h1 class="title">
<span>First</span>
<img src="http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg" alt="" />
<span>Second</span>
</h1>
</div>
</header>
</div>
And I also changed some of the CSS:
.center h1 {display: block; }
// Add vertical align to the image, rather than the h1
.center img {margin: 0 10px; vertical-align: middle;}
Fiddle here
EDIT: This might make more sense, check this image. http://puu.sh/rt8M
The image just goes through the padding. I want the title div to expand vertically to accommodate the image. While keeping the text centered and the center of the image should intersect the line the text is on.
I want to align an img to the left (and then another after the text to the right). I've tried various properties but none seem to do it right. Can anyone help?
To clarify, I want the image against the left side of the screen or browser window. The div stretches from the left to the right of screen, as you would expect of a header/title div.
Float;left seems to make the img drop out of the div tag. I should mention there is a text-align:center; property on the tag. But it doesn't fix the problem when removed so I'm not sure it's that.
The HTML
<div id="header">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" alt="" width="86" height="98" />
Page Header Title
</h1>
</div>
</div>
I created a little dabblet code example for you. I think this is what you are trying to do?
http://dabblet.com/gist/2492793
CSS:
.logo{
float:left;
width: 86px;
height:98px;
display:block;
}
.img2{
float:right;
display:block;
}
.clear{
clear:both;
}
HTML:
<div id="header">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" alt="" />
Page Header Title
<img class="img2" src="images/img2.png" alt="" />
<div class="clear"></div>
</h1>
</div>
</div>
The reason the logo is dropping out of the div is because it is not cleared.
This should fix things up.
Use this
<div id="header" style="float:left">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" width="86" height="98" />
Page Header Title
</h1>
</div>
#logo{
display: flex;
justify-content: space-evenly;
}
<div id="logo">
<img src="https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="something" width="100" height="100"/>
<h1>Hello World</h1>
</div>