I have some css issues. I'm trying to remove the space between a image and a label, and it does not work.
This is what I have:
And this is what I want:
I have problems with removing the space below he pictures and the same problem with the labels and the other div below them. In the same time I do not know how to position inline the headers from the footer.
This is my fiddle with my html and css:
https://jsfiddle.net/cwd6qw3o/
div img {
display: inline-block;
height: 30%;
width: 23%;
}
div.subtitle {
background-color: #333333;
color: white;
display: inline-block;
margin-top: 0;
text-align: left;
width: 23%;
}
div.subcolor {
background-color: #ba0927;
display: inline-block;
height: 5px;
width: 23%;
}
div.footer {
display: inline-block;
background-color: #e6e6e6;
width: 100%;
height: 5%;
}
Please tell me what i am doing wrong :).
Thanks !
I think it is not a good structure in your HTML,why not wrap your item in the same li such as
<ul>
<li>
<img src="~/Content/cont1.png"/>
<p>Bosch Car Service</p>
</li>
<li>
<img src="~/Content/cont2.png"/>
<p>Afspraak Proefrit</p>
</li>
<li>
<img src="~/Content/cont3.png"/>
<p>Afspraak onderhoud</p>
</li>
<li>
<img src="~/Content/cont4.png"/>
<p>Routebeschrijiving</p>
</li>
</ul>
You can remove spaces with the following CSS:
div {
font-size: 0;
}
div.subtitle {
font-size: 1rem;
}
Live preview: JSFiddle
Additional styling is necessary.
please try below code
div::after {
content: "";
width: 60%;
}
.image-div {
float: left;
width: 100%;
}
div img {
float: left;
height: 30%;
margin-right: 1%;
width: 23%;
}
div.subtitle {
background-color: #333333;
color: white;
float: left;
margin-right: 1%;
margin-top: 0;
text-align: left;
width: 23%;
}
.sub-div {
float: left;
width: 100%;
}
div.subcolor {
background-color: #ba0927;
float: left;
height: 5px;
margin-right: 1%;
width: 23%;
}
<body>
<img src="~/Content/slide1.png" id="slide" />
<div class="image-div">
<img src="http://dummyimage.com/200x200/000/fff"/>
<img src="http://dummyimage.com/200x200/000/fff" />
<img src="http://dummyimage.com/200x200/000/fff" />
<img src="http://dummyimage.com/200x200/000/fff" />
</div>
<div class="sub-div">
<div class="subtitle">
Bosch Car Service
</div>
<div class="subtitle">
Afspraak Proefrit
</div>
<div class="subtitle">
Afspraak onderhoud
</div>
<div class="subtitle">
Routebeschrijiving
</div>
</div>
<div>
<div class="subcolor" id="sub1"></div>
<div class="subcolor" id="sub2"></div>
<div class="subcolor" id="sub3"></div>
<div class="subcolor" id="sub4"></div>
</div>
<div class="footer">
<div class="images">
<img src="~/Content/fb.jpg"/>
<img src="~/Content/contact.jpg"/>
<img src="~/Content/route.jpg"/>
</div>
<div class="information">
<div class="contact">
<h1>Houman BVBA</h1>
<label>Boterstraat 6</label>
<label>B-2811 Hombeek (Mechelen)</label>
<label>Tel. 015 41 39 39</label>
<label>Fax. 015/43 24 40</label>
</div>
<div class="schedule">
<h1>Openingsuren</h1>
<label>Maandag: 9u-12u|13u-18u</label>
<label>Dinsdag: 9u-12u|13u-18u</label>
<label>Woensdag: 9u-12u|13u-18u</label>
<label>Donderdag: 9u-12u|13u-18u</label>
<label>Vrijdag: 9u-12u|13u-18u</label>
<label>Zaterdag: 9u-12u|13u-18u</label>
</div>
</div>
</div>
</body>
Related
I want to make the images in day_time_block can cover the title class.
I also want to make all contents in day_time_block can be shown by overflow-x, but when adding overflow-x: auto; in scroll div, the images in day_time_block were covered by title div. like the following code. How to fix it?
HTML:
<html>
<body>
<div>
<div class="daily_content">
<div class="title">
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="img_title"/>
<div class="daily_title">Title</div>
</div>
<div class="scroll">
<div class="day_time_block">
<div class="day_time_text">Sunday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Monday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Tuesday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Wednesday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Thursday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
<style>
body {
margin: 0px;
}
.title {
background: #ED3632;
height: 25px;
}
.img_title {
width: 30px;
height: 20px;
float: left;
margin-left: 15px;
margin-right: 5px;
}
.daily_title {
color: #f6ff52;
font-size: 1em;
}
.daily_content {
background: #000000;
height: 3000px;
}
.scroll {
color: #ffffff;
font-size: 1em;
width: 480px;
overflow-x: auto;
white-space: nowrap;
background-color: aqua;
border: 1px red solid;
display: flex;
}
.day_time_block {
float: left;
color: #ffffff;
font-size: 1em;
padding-left: 8px;
}
.day_time_text {
font-size: 1em;
display: inline-block;
}
.daily_img {
width: 30px;
height: 20px;
margin-left: 10px;
position: relative;
top: -10px;
}
</style>
overflow work with display:block...but if you want to use display:flex then create parent div for that and make this display:block and apply overflow on parent div.
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>
I am making a web that's like a facebook where there is a image on the left and text on the right but if the text reach the bottom of the image it goes to the bottom of image. Its hard to explain so I will attached a screenshot
.comment {
width: 100%;
}
.comment img {
height: 40px;
width: 40px;
border-radius: 20px;
margin-right: 10px;
float: left;
}
.comment img:after {
content: "";
}
strong {
color: #365899;
font-weight: bold;
}
<div id="View_post-1" class="row">
<div>
<div class="comment">
<img src="../Image/Mark Anthony Fernandez.jpg">
<small>
<strong style="">Mark Anthony Fernandez</strong>
</small>
<br />
<div>
<span style="font-size:small;position:relative;word-wrap:break-word;">commentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcomment</span>
</div>
<br>
</div>
</div>
</div>
If I understand well you don't want the text to wrap around the image to the left.
You can use flexbox to achieve that and it will give you a responsive solution.
I have created a codepen for your case: https://codepen.io/frexos/pen/yPjqYm
<div id="View_post-1" class="row">
<div>
<div class="comment">
<img src="../Image/Mark Anthony Fernandez.jpg">
<div class="text">
<small>
<strong style="">Mark Anthony Fernandez</strong>
</small>
<br />
<div>
<span style="font-size:small;position:relative;word-wrap:break-word;">commentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcomment</span>
</div>
</div>
<br>
</div>
.comment {
width: 100%;
display: flex;
}
.comment img {
display: block;
height: 40px;
width: 40px;
border-radius: 20px;
margin-right: 10px;
float: left;
}
.comment img:after {
content: "";
}
strong {
color: #365899;
font-weight: bold;
}
.text {
min-width: 10%;
word-wrap: break-word;
}
It looks you are using bootstrap to set your layout, you can use media object for this, check updated snippet below... for detail reference click here
.comment{
width:100%;
}
.comment img{
border-radius: 50px;
}
.comment img:after{
content:"";
}
strong{
color:#365899;
font-weight:bold;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="View_post-1" class="row">
<div>
<div class="comment">
<div class="media">
<div class="media-left">
<img class="media-object" src="https://dummyimage.com/50x50/cccccc/ff0000.png&text=Sample-Text">
</div>
<div class="media-body"><small>
<strong style="">Mark Anthony Fernandez</strong>
</small>
<br />
<div>
<span style="font-size:small;position:relative;word-wrap:break-word;">commentcommentcommentcom mentcommentcommentcommentcommen tcommentcommentcommentcommentcommentc ommentcommentcommentcom mentcommentco mmentcommentcomme ntcommentcommentcommentcomme ntcomm entcommentcommentcomme ntcommentcommentcommentcommentcommen tcommentcommentcommentcommentcommentcommentcommentc ommentcommentcomm entcomment</span>
</div>
<br>
</div>
</div>
</div>
</div>
</div>
If you always know the width of the image you can just add a padding left to your div containing the text.
.comment > div{ padding-left: 50px;}
.comment {
width: 100%;
}
.comment img {
height: 40px;
width: 40px;
border-radius: 20px;
margin-right: 10px;
float: left;
}
.comment img:after {
content: "";
}
strong {
color: #365899;
font-weight: bold;
}
.comment > div{ padding-left: 50px;}
<div id="View_post-1" class="row">
<div>
<div class="comment">
<img src="../Image/Mark Anthony Fernandez.jpg">
<div>
<small>
<strong style="">Mark Anthony Fernandez</strong>
</small>
<br />
<div>
<span style="font-size:small;position:relative;word-wrap:break-word;">commentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcomment</span>
</div>
</div>
<br>
</div>
</div>
</div>
Try this:
.comment div{
display: flex;
word-break: break-all;
}
Please try this code:
.comment {
display: inline-block;
width: 100%;
}
.comment .image {
float: left;
width: 80px;
}
.comment img {
height: 40px;
width: 40px;
border-radius: 20px;
margin-right: 10px;
float: left;
}
.content {
float: left;
width: -webkit-calc(100% - 80px);
width: -moz-calc(100% - 80px);
width: -ms-calc(100% - 80px);
width: calc(100% - 80px);
}
.comment img:after {
content: "";
}
strong {
color: #365899;
font-weight: bold;
}
<div id="View_post-1" class="">
<div>
<div class="comment">
<div class="image">
<img src="../Image/Mark Anthony Fernandez.jpg">
</div>
<div class="content">
<small>
<strong style="">Mark Anthony Fernandez</strong>
</small>
<br />
<div>
<span style="font-size:small;position:relative;word-wrap:break-word;">commentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcomment</span>
</div>
</div>
</div>
</div>
</div>
hi I'm assigned to do a basic profile page for class, but for one of the html pages I am unable to put the text in front of each individual image, i removed my attempts at it to help ease confusion.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr></hr>
<img src="assets/images/gym.jpg" alt="gym">Gym
<img src="assets/images/hiking.jpg" alt="hiking">Hiking
<img src="assets/images/overwatch.jpg" alt="overwatch">Overwatch
<img src="assets/images/running.jpg" alt="running">Running
<img src="assets/images/programming.jpg" alt="programming">Programming
</div>
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
You'll need to absolute position your text in front of the image with css. It helps to wrap each image and text item into a block to apply the css.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="assets/images/gym.jpg" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="assets/images/hiking.jpg" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="assets/images/overwatch.jpg" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="assets/images/running.jpg" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="assets/images/programming.jpg" alt="programming">
<span>Programming</span>
</div>
</div>
css:
.item {
position: relative;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Edit: Added a simplified fiddle example
* {
box-sizing: border-box;
}
.aboutmeprofile {
float: left;
background-color: white;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.item {
position: relative;
width: 100%;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
text-align: center;
width: 100%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="programming">
<span>Programming</span>
</div>
</div>
The best way to do this is to create a div for the label and use the image as the background-image for the div.
background-image: image.png
jsfiddle
this is what I came up with. Just add the other images and its respective label:
#h2, #h3 {
color: #4aaaa5;
text-align: left;
font-size: 30px;
font-weight: bold;
font-family: 'Georgia', Times, Times New Roman, serif;}
#linebreak {
clear: both;
border: 1px solid gray;
width: 100%;
margin: 0;
padding: 0;}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.container {
height: 100%;
width: 100%;
position: relative;
}
.image {
width:100%;
height:100%;
}
.text {
position: absolute;
color: white;
left: 50%;
top: 50%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Gym
</span>
</div>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Hiking
</span>
</div>
</div>
Hope it helps!
You can simply do this with position:absolute property , first you need to create a relative div , then call the image and h2 inside the div , then set absolute position to h2
Check with the snippet
.content_div {
position:relative;
}
.content_div h2 {
position:absolute;
bottom:25px;
color:#fff;
font-size:18px;
}
.content_div h2 span {
background:rgba(0,0,0,0.8);
padding:10px;
display:block;
border-bottom:2px solid #000;
}
.content_div h2 span:last-child{
border-bottom:none;
}
<div class="content_div">
<img src="http://www.picgifs.com/graphics/c/cute/graphics-cute-160852.jpg" alt="image" />
<h2>
<span>A Movie in the Park:</span>
<span>Kung Fu Panda</span>
</h2>
</div><!-- /.content_div -->
I am often using div to box in information but I have notice that the wrapping box might sometimes not fill out the space and this leads to elements from other wrappers entering the box area.
For example :
<div>
<div style="length:150px;">my info1</div>
<div style="length:50px;">my Info2</div>
</div>
Take a look at this example
.topic {
width: 500px;
background-color: green;
display: block;
}
.topic .tInfo {
float: left;
width: 460px;
background-color: blue;
}
.topic .tName {
width: 460px;
background-color: brown;
}
.topic .tTime {
width: 460px;
background-color: lime;
}
.topic .tUImgLnk {
width: 40px;
height: 40px;
float: left;
position: relative;
background: red;
}
.topic .tUImgLnk .tUImg {
margin: 0px auto;
display: block;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
position: absolute;
}
<div class="topic" data-reactid=".24rl768raww.$0">
<div class="tUImgLnk" data-reactid=".24rl768raww.$0.0">
<a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0">
<img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0">
</a>
</div>
<div class="tInfo" data-reactid=".24rl768raww.$0.1">
<div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a>
</div>
<div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span>
</div>
</div>
</div>
<div class="topic" data-reactid=".24rl768raww.$0">
<div class="tUImgLnk" data-reactid=".24rl768raww.$0.0">
<a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0">
<img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0">
</a>
</div>
<div class="tInfo" data-reactid=".24rl768raww.$0.1">
<div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a>
</div>
<div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span>
</div>
</div>
</div>
I have used <br style="clear:both"/> at the end of each wrapper box but is this really the best way to go?
This is happenning because you don't have a wrapper , and the elements are liberaly floating;
in the below snippet I wrapped your elements in rows with article selector and cleared floats:
.topic {
width: 500px;
background-color: green;
display: block;
}
.topic .tInfo {
float: left;
width: 460px;
background-color: blue;
}
.topic .tName {
width: 460px;
background-color: brown;
}
.topic .tTime {
width: 460px;
background-color: lime;
}
.topic .tUImgLnk {
width: 40px;
height: 40px;
float: left;
position: relative;
background: red;
}
.topic .tUImgLnk .tUImg {
margin: 0px auto;
display: block;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
position: absolute;
}
article:after {
content: "";
display: table;
clear: both;
}
<article>
<div class="topic" data-reactid=".24rl768raww.$0">
<div class="tUImgLnk" data-reactid=".24rl768raww.$0.0">
<a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0">
<img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0">
</a>
</div>
<div class="tInfo" data-reactid=".24rl768raww.$0.1">
<div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a>
</div>
<div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span>
</div>
</div>
</div>
<article>
</article>
<div class="topic" data-reactid=".24rl768raww.$0">
<div class="tUImgLnk" data-reactid=".24rl768raww.$0.0">
<a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0">
<img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0">
</a>
</div>
<div class="tInfo" data-reactid=".24rl768raww.$0.1">
<div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a>
</div>
<div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span>
</div>
</div>
</div>
</article>