I have something like this:
<li>
<div class="">
<a href="http://www.youtube.com/watch?v=1111" target="_blank">
<img src="http://img.youtube.com/vi/1111/default.jpg" />
</a><a href="http://www.youtube.com/watch?v=1111" target="_blank">
<h6>abcd</h6>
</a>
<p>
1234 views
</p>
</div>
</li>
//multiple li like above inside ul
i'm trying to achieve the effect like in related videos on youtube, with an image on the left, and the text appearing to the right of the image (and not flowing under the image) - how can it be done?
eg:
thanks
Floats and margins can be your friend here. For example:
<style type="text/css">
.videoitem {
height:90px;
margin-bottom:15px;
}
.image {
float:left;
margin-right:10px;
}
</style>
<div class="videoitem">
<a href="http://www.youtube.com/watch?v=1111" target="_blank">
<img class="image" src="http://img.youtube.com/vi/1111/default.jpg" />
</a><a href="http://www.youtube.com/watch?v=1111" target="_blank">
<h6>abcd</h6>
</a>
<p>
1234 views
</p>
</div>
<div class="videoitem">
<a href="http://www.youtube.com/watch?v=1111" target="_blank">
<img class="image" src="http://img.youtube.com/vi/1111/default.jpg" />
</a><a href="http://www.youtube.com/watch?v=1111" target="_blank">
<h6>abcd</h6>
</a>
<p>
1234 views
</p>
</div>
Related
I have this fiddle:
https://jsfiddle.net/bnqksu4y/
Here is the HTML:
<html>
<head>
</head>
<body>
<h2><i></i>Support Forum</h2>
<div>
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
<img alt="" height="40" src="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=40&d=mm&r=g" srcset="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=80&d=mm&r=g 2x" width="40"></a>
<h4>
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
Andrew Truckle</a></h4>
<a href="https://www.website.co.uk/logout/">
Log Out</a> </div>
</body>
</html>
Basically, I want the name to show to the right of the avatar. And Log Out should show underneath.
If I use a float:left on the img and h4 objects then then everything shows side by side, including Log Out which is not what I want.
How to fix?
Solution 1:
<html>
<head>
</head>
<body>
<h2><i></i>Support Forum</h2>
<div>
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
<img alt="" height="40" src="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=40&d=mm&r=g" srcset="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=80&d=mm&r=g 2x" width="40"></a>
<h4 style="display:inline">
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
Andrew Truckle</a></h4>
<br>
<a href="https://www.website.co.uk/logout/">
Log Out</a> </div>
</body>
</html>
Basically, I just changed <h4> to <h4 style="display:inline">
Is it something like this? or something different?
Fiddle:
https://jsfiddle.net/n8Lrg1d6/
I have tried to get the solution without modifying the HTML. Assuming that you do not have any control on HTML part. Below is the CSS which helps you align your tags.
But if you can modify your HTML, I would suggest that you add some class or id and add the below CSS to respective selector instead of applying globally.
Solution:
h4, img {
display: inline-block;
vertical-align: middle;
}
a[href*="logout"] {
display: block;
}
<html>
<head>
</head>
<body>
<h2><i></i>Support Forum</h2>
<div>
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
<img alt="" height="40" src="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=40&d=mm&r=g" srcset="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=80&d=mm&r=g 2x" width="40">
</a>
<h4>
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
Andrew Truckle</a>
</h4>
<a href="https://www.website.co.uk/logout/">
Log Out</a>
</div>
</body>
</html>
<body>
<h2><i></i>Support Forum</h2>
<div>
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
<p> <img src="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=40&d=mm&r=g"
alt="" height="40"> <a href="https://www.website.co.uk/support-forums/users/chuckie/">
Andrew Truckle</a>.</p>
Log Out
</div>
</body>
Easiest is to just insert content into the tags : <p> text, image, link... </p>
First put the anchor tag of the Log Out link outside and below the div tag. because avatar, name and log out are sibling and children of div so you can't use use float and flex box to layout avator, name respectively and log out beneath them the. you can only layout using with CSS relative and absolute positioning
try this;
<html>
<head>
<title>Document</title>
</head>
<body>
<h2><i></i>Support Forum</h2>
<div>
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
<img alt="" height="40" src="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=40&d=mm&r=g" srcset="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=80&d=mm&r=g 2x" width="40">
</a>
<h4>
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
Andrew Truckle</a>
</h4>
</div>
Log Out
</body>
</html>
html body{
margin:0;
padding:0;
}
body div{
display: flex;
justify-content: flex-start;
align-items: center;
}
This question has probably been asked a million times; however, I can't seem to find an answer to my issue.
I have a footer that contains aligned copyright text and I am trying to add 3 logos to the right of it (without a line break). Once the screen is too small to contain the copyright and the logos, I want to move the logos below the copyright.
<footer>
<div class="legal">
<B>PRIVACY NOTICE</B> |
<B>LEGAL NOTICE</B>
<p>
Trademark text
</p>
<br />
<p>
Copyright text
</p>
</div>
<div class="logos">
<a href="#" target="_blank">
<img src="logo1.png" />
</a>
<a href="#" target="_blank">
<img src="logo2.png" />
</a>
<a href="#" target="_blank">
<img src="logo3.png" />
</a>
</div>
</footer>
I tried wrapping the copyrights and the logos in two separate divs and using float: left and right but failed. Since I need my copyright text to be aligned in the middle of the footer as shown above.
Any guidance would be greatly appreciated.
There are ways on how you want to achieve what you wanted.
Once the screen is too small to contain the copyright and the logos, I
want to move the logos below the copyright.
You will need to use CSS Media rule to achieve that.
You can try using CSS Flexbox.
footer{
width:100%;
display:flex;
flex-flow: row wrap;
align-items:center;
}
.legal{
width:80%;
text-align:center;
}
.logos{
width:20%;
text-align:right;
}
#media screen and (max-width:800px){
.legal{
width:100%;
}
.logos{
width:100%;
text-align:center;
}
}
<footer>
<div class="legal">
<B>PRIVACY NOTICE</B> |
<B>LEGAL NOTICE</B>
<p>
Trademark text
</p>
<p>
Copyright text
</p>
</div>
<div class="logos">
<a href="#" target="_blank">
<img src="logo1.png" />
</a>
<a href="#" target="_blank">
<img src="logo2.png" />
</a>
<a href="#" target="_blank">
<img src="logo3.png" />
</a>
</div>
</footer>
You can try using CSS Grid.
footer{
width:100%;
display:grid;
grid-template-rows: 1fr;
grid-template-columns: 80% 1fr;
align-items: center;
}
.legal{
text-align:center;
}
.logos{
justify-self: end;
}
#media screen and (max-width: 800px){
footer{
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr;
}
.logos{
justify-self: center;
}
}
<footer>
<div class="legal">
<B>PRIVACY NOTICE</B> |
<B>LEGAL NOTICE</B>
<p>
Trademark text
</p>
<p>
Copyright text
</p>
</div>
<div class="logos">
<a href="#" target="_blank">
<img src="logo1.png" />
</a>
<a href="#" target="_blank">
<img src="logo2.png" />
</a>
<a href="#" target="_blank">
<img src="logo3.png" />
</a>
</div>
</footer>
For more info about Grid and Flexbox. Please see this links CSS Flexbox | CSS Grid
Also please see this link for Media Rule | CSS Media Rule
Hope this helps
I have 2 images that I want to show side by side, with the title above as part of a hyperlink.
<div id="image">
<a href="file:///L:/file" style="text-decoration:none;" Title="Project Reports">
<p>New Reports</p>
<img src="http://tableau/" style="width:304px;height:228px;" />
</a>
<a href="file:///L:/file2" style="text-decoration:none;" >
<p>Project Reports</p>
<img src="http://tableau/" style="width:304px;height:228px;"/>
</a>
If I remove the p tag around the titles, it displays inline, but I need the title to be on top of the image.
CSS:
#image {
display: inline-block;
float: left;
}
Here. Proper HTML and CSS.
a {
display: inline-block;
text-decoration: none;
}
<div id="image">
<a href="file:///L:/file" title="Project Reports">New Reports<br>
<img src="http://tableau/" style="width:304px;height:228px;" />
</a>
<a href="file:///L:/file2">Project Reports<br>
<img src="http://tableau/" style="width:304px;height:228px;"/>
</a>
</div>
add float:left; in a
#image {
display: inline-block;
width:1000px;
clear:both;
}
#image > a{
float: left;
display:inline-block;
}
<div id="image">
<a href="file:///L:/file" style="text-decoration:none;" Title="Project Reports">
<p>New Reports</p>
<img src="http://tableau/" style="width:304px;height:228px;" />
</a>
<a href="file:///L:/file2" style="text-decoration:none;" >
<p>Project Reports</p>
<img src="http://tableau/" style="width:304px;height:228px;"/>
</a>
I have a few wrapped images in my HTML file:
<div id="banners">
<div id="friend">
<a target="_blank" href="http://www.google.com">
<img src="../assets/images/friends/friend_1_256.png" alt="TEST 1" width="200" height="200">
</a>
</div>
<div id="friend">
<a target="_blank" href="https://www.google.com">
<img src="../assets/images/friends/friend_2_512x157.png" alt="TEST 2" width="400" height="123">
</a>
</div>
</div>
I want to display these images in a row. I have tried solutions such as float: left or display: inline-block but none of them works. Is it possible to display wrapped images inline?
It should work. Try something like this.
#friend {
display: inline-block;
border: 1px solid red; /*Just to highlight */
width:200px; /*Set width according to parent id banners*/
text-align:center /*center image*/
}
<div id="banners">
<div id="friend">
<a target="_blank" href="http://www.google.com">
<img src="https://i.stack.imgur.com/kMcaV.jpg?s=328&g=1" alt="TEST 1" width="200" height="200">
</a>
</div>
<div id="friend">
<a target="_blank" href="https://www.google.com">
<img src="https://i.stack.imgur.com/kMcaV.jpg?s=328&g=1" alt="TEST 2" width="400" height="123">
</a>
</div>
</div>
Try this out, it worked for me, hope it will resolve your issue as well
#friend{display:table-cell;}
Basically I have put a gallery into the website that I am making, and it works well. But. The pictures just scroll down the left side of the screen. I would like half of the pictures to be to the right of the other pictures... Here is a screenshot of my website (With Hi-tech red boxes drawn in paint to show where I would like half of the pictures to go)
http://tinypic.com/view.php?pic=hx3fbb&s=8#.U2JPKYFdX-k
Here is my code....(html)
<div class="img">
<a target="_blank" href="Gallery/Ss1.jpg">
<img src="Gallery/Ss1.jpg" alt="Screenshot1" width="500" height="400">
</a>
<div class="desc">Death vs Colossus</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/Ss2.jpg">
<img src="Gallery/Ss2.jpg" alt="Screenshot2" width="500" height="400">
</a>
<div class="desc">Death's forge</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/Ss3.jpg">
<img src="Gallery/Ss3.jpg" alt="Screenshot3" width="500" height="400">
</a>
<div class="desc">Death vs Horseman</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/Ss4.jpg">
<img src="Gallery/Ss4.jpg" alt="FanArt1" width="500" height="400">
</a>
<div class="desc">Horse Jump</div>
</div>
<p></p>
<div class="img">
<a target="_blank" href="Gallery/fa1.jpg">
<img src="Gallery/fa1.jpg" alt="FanArt1" width="500" height="400">
</a>
<div class="desc">Fan Art #1</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/fa2.jpg">
<img src="Gallery/fa2.jpg" alt="FanArt2" width="500" height="400">
</a>
<div class="desc">Fan Art #2</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/fa3.jpg">
<img src="Gallery/fa3.jpg" alt="FanArt3" width="500" height="400">
</a>
<div class="desc">Fan Art #3</div>
</div>
<div class="img1">
<a target="_blank" href="Gallery/fa4.jpg">
<img src="Gallery/fa4.jpg" alt="FanArt4" width="500" height="400">
</a>
<div class="desc">Fan Art #4</div>
</div>
and here is my CSS code;
div.img
{
margin:5px;
padding: 5px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:5px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:5px;
}
So again, I would basically like the Fan art pictures to appear to the right of the Screenshot pictures. I tried making a new div class for the fan art and changing the float to 'right' but that didn't work.
Thankyou in advance for your time and input :)
There are a couple different methods you could use for this. You could use floats or display: inline-block.
http://jsfiddle.net/Davidicus/p4Qkh/
Here is a simple float example.
I have a pen where i am using "inline-block" to float elements. Click on the little eye icon in the css panel to see the compiled css.
http://codepen.io/davidicus/pen/vxIra