How could I show the thumbnail images align properly on the top left for each news feed?
this is the codes for each item's feed, I couldn't alter the format below because it's was rss feed from external site
<style>
img{
float: left;
width: 100px;
height: auto;
}
.feed-item-title{
clear:right;
}
</style>
<div class="feed-item">
<h3 class="feed-item-title">
Rihanna Hug During VMA Show
</h3>
<div class="feed-item-body">
Former couple share embrace on night when both won major awards.<br />By Hosten
<a href="">
<img type="photo" src="281x211.jpg" />
</a>
<br />
</div>
</div>
Thanks alot.
If you use floats you should clear them.
.feed-item-body:after{
content: '';
display:block;
clear:both;
}
Later Edit: Few extra changes added, here is the working example.
Related
I have a bootstrap colum:
<div class="col-md-4 col-xs-12">
<img src="sample.jpg" style="height:100vh;width:100%;" />
</div>
and a sample picture:
My question is: Is there anyway I could define these two squares on a image as an objects? The problem I am facing is, I have a picture with some elements which would need to be defined as an objects... And I am trying to figure out what would be the best way to do it, if it is possible at all? Is there any software, which can help you with this? Some image to html generator or somethin? Eternal glory to the person who can present me solution! I would appreciate your reply.
Perhaps all you want to do is an image map?
Or, maybe, you want to position other elements over an image (see: example below)?
Or, you should use background image?
Perhaps your use–case could be not oversimplified and we'd be able to provide better solution for your exact need.
You need to be aware of different users and environments, especially if you plan to use this idea for navigation.
.rectangles {
border: solid red 1px;
position: relative;
}
.rectangles img {
outline: dashed blue 1px;
width: 100%;
}
.rectangle {
position: absolute;
outline: dashed red 1px;
color: #fff;
text-align: center;
}
.rectangle:hover {
background: red;
}
.rectangle.first {
left: 24.2%;
top: 14.4%;
width: 30.9%;
height: 20.2%;
}
.rectangle.second {
left: 24.9%;
top: 52.7%;
width: 29.9%;
height: 22.1%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-4 col-xs-12 rectangles">
<img src="https://i.stack.imgur.com/0ClBU.jpg" alt="Image with rectangles">
<a class="rectangle first" href="#">First rectangle</a>
<div class="rectangle second">Second rectangle</div>
</div>
</div>
Although I am not completely sure what you are asking, I think what you are asking for is if you can turn the image into a clickable object. The answer to that is yes. It is actually very simple because all you need is two different images (one for each square) surrounded by <a> tags. Here is the code:
function register1() {
document.getElementById('box').value = "Box 1 Clicked";
}
function register2() {
document.getElementById('box').value = "Box 2 Clicked";
}
div.2 {
position:absolute;
top:200px;
}
<div class="1">
<a onClick="register1()">
<img src="https://i.imgur.com/uomkVIL.png" width="200px" height="200px">
</a>
</div>
<div class="2">
<a onClick="register2()">
<img src="https://i.imgur.com/uomkVIL.png" width="200px" height="200px">
</a>
</div>
<input type="text" id="box" value="Click A Box">
There you go, you have two boxes that are images and can run a function when clicked.
I am currently using Wordpress to build a website and have used an image as the background of my home page but want to add text over the top which also links to another page on my site. Do I need to amend the coding or can this simply be done when editing the page on visual mode? If I need to amend the coding can someone please help??
This is the idea how the text should look over an image. You can easily manipulate the text using CSS.
HTML:
<div class="image">
<img src="images/3754004820_91a5c238a0.jpg" alt="" />
<h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
CSS:
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
Final result:
Reference: http://css-tricks.com/text-blocks-over-image/
i have 2 images.My constraint is that I have to put a new div after the end of the 1st image.But they come on different lines.I googled a lot and found that float:left does the trick
I am already using it,but still they are coming in different lines.I dont know where I am going wrong.
Jsfiddle
span.tab {
padding: 0 50px; /* Or desired space*/
}
.span.tab {
display: inline-block;
float:left;
}
#div23 {
display: inline-block;
float: left;
}
#topdiv1 {
display: inline-block;
float: left;
}
#topdiv3 {
display: inline-block;
float:left;
}
html
<br />
<div id='topdiv1'><div id="widget1" class="sticky1">
<div id='topdiv3'>
<img src="https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50" />
<div id='div23'>
<span class="tab"></span>
<img src='https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50'/>
</div> </div>
Please help.
You don't apply the float to the parent container. You apply the float to the child elements:
#topdiv3 > * {
float:left;
}
http://jsfiddle.net/samliew/b9TWE/1/
If you want to remove the space between the images, remove the span.
http://jsfiddle.net/b9TWE/2/ this fixes it, you just need to have the <a> containing the first image to float
#topdiv3 > a{
float: left;
}
More on how floats work (great article)
By floating the first <a> containing the image you remove it from the regular document flow. the <div> containing the seconds image will resume the normal flow and position itself next to the <a>
Your topdiv3 must be closed before div div23.
<div id='topdiv1'>
<div id="widget1" class="sticky1">
<div id='topdiv3'>
<img src="https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50" />
</div>
<div id='div23'>
<img src='https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50'/>
</div>
</div>
</div>
http://jsfiddle.net/arunu/8gvvr/
I've tested it on firefox and it worked the way you did.
But anyway, your html markup is a little bit confuse, doesn´t it?
I have a word spacing issue which I cannot seem to resolve.
The web page is www.c5d.co.uk/captaintwo.php
The word spacing under the top images look ridiculous. Yet as far as I can see, the CSS is the same.
What am I missing ? If I put a /p tag after Wrigley it works fine but fails validation as there is no opening p tag
Relevant HTML and CSS is as follows:
.captain{word-spacing:185px;display:inline;}
.pres {display:inline; }
.ladycaptain{word-spacing:120px;display:inline; }
<img class="lewis" src="http://www.c5d.co.uk/captain.png" alt="The Captain">
<img class="socialtwo" src="http://www.c5d.co.uk/president.png" alt="President">
<p class="pres">
<br>Captain: John</p> <p class="captain">Lewis President:</p> Bill Wrigley
<img class="lewis" src="http://www.c5d.co.uk/ladycaptain.png" alt="Lady Captain">
<img class="socialtwo" src="http://www.c5d.co.uk/juniorcaptain.png" alt="Junior Captain">
<p class="pres">
<br>Lady Captain: Beryl</p> <p class="ladycaptain">Harrison Junior</p> Captain: Kieran Metcalf
Make the following changes:
.pres {
/* display: inline (remove) */
display: inline-block;
width: 270px;
text-align: center;
}
.captain {
/* display: inline (remove) */
display: inline-block;
width: 270px;
text-align: center;
}
<br> is outdated. Use the self-closing <br /> instead. The names should be wrapped in something (p, span, h3, something). There are 2 styles (one inline (inside the document) and one attached to #header) that are adding around 500px of space there. That's why there is a large gap.
Consider making it easier on yourself.. use 1 class to define each TYPE of object.
#people {
styles for container div
}
.box {
styles for the individual boxes
}
.photo {
styles for <img>
}
.title {
styles for names of people
}
Then just apply the classes to the appropriate item like so
<div id="people">
<div class="box">
<img src="path/image.jpg" class="photo" />
<h3 class="title">Position, name</h3>
</div>
<div class="box">
<img src="path/image.jpg" class="photo" />
<h3 class="title">Position, name</h3>
</div>
etc...
</div>
I've trying to do something that I'm sure is simple, but I can't do it.
All I want to do is have an image and then some text after that image, and be able to control accurately the amount of space between the image and the text.
Here's my code:
<div class="wrap"><div style="width:189px;""position:relative;float:left;top:5px;">
<img src="30000000_1.jpg" style="position:absolute" width="189">
</div>
In my style sheet, wrap has these attributes:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: white;
color: black;
padding: 10px;
margin: auto;
}
I want my text to look like this directly below the image:
Username
Age
Location
Currently, I just add loads of break tags to control where I have the text, but that's messy and there must be a better way.
Thanks in advance for any help.
<div class="wrap">
<div style="width:189px;position:relative;float:left;top:5px;">
<img src="30000000_1.jpg" style="position:absolute" width="189" />
</div>
<br clear="all" />
<div id="bottomText">
Username
<br /><br />
Age
<br /><br />
Location
</div>
</div>
CSS:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: white;
color: black;
padding: 10px;
margin: auto;
}
#bottomText{
margin-top: 10px;
}
Change margin-top: 10px to the desired distance.
Change bottomText to a class rather than an id, if you plan on having more than one.
(Note: I removed your "" from the second div because I'm not sure why that was there.
Check this solution jsfiddle. Personally I will not use inline style, because it becomes more messy. I have used <ul> for the text. This can give you better control over the position of the text.
Just use an Unordered List for the text since it is a list. ul are "block level elements" so they will self-clear. And definitely use an external stylesheet vs. inline styles. External is much cleaner and easier to work with and make changes to. Example: http://jsfiddle.net/codeview/Fk3EK/
HTML:
<div class="wrap">
<img src="30000000_1.jpg">
<ul>
<li>Username</li>
<li>Age</li>
<li>Location</li>
<ul>
</div>
CSS:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: yellow;
color: black;
padding: 10px;
margin: auto;
}
ul { list-style-type:none; }
li { padding:5px 0; }
I can't get it to work. Probably because you guys can't see the other code I have going on. But maybe I was approaching the problem in the wrong way.
Here's my code before I started fiddling with css positioning:
<br><br>
<div class="imgleft">
</div>
<br><br><br><br><br><br><br><br><br><br><br>
<span style="font-weight: bolder;font-size: 12px;"></br><br><br></br>
<font color="green"> User69 </font> <img src="online01.gif" alt="" border="0" style="float:center"><br>
Location:
<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
<script language="JavaScript">document.write(geoip_region_name());</script></span>
</script></br>
<br><br>
The problem is, the images have a set width, but vary in height, so sometimes I'll use 8 break tags, other times 7, but the exact distance beneath each image (where the text goes) is different. And it looks bad.
There are 3 images on the page, so it goes image, text (well, there's an image as well, flashing gif) below image, then another image with text below it, and so on. From top to bottom on the left of the page.
Here are the relevant bits from my css:
.imgleft {
float: left;
width: 120px;
}
.imgleft img {
clear: both;
width: 175px;
padding-bottom: 0px;
}
I'm certain I'm making this way more complicated than it needs to be! Sorry.
I've put a link to my code in the comments to the first answer, if someone could take a look. Thanks.