Any bootstrap experts around? - GoFuckYourself.com

boneless · 10-03-2013, 03:57 AM

Got an annoying problem, im trying to make a tube layout using bootstrap, so far so gooed, header navbar all weent well, even a carrousel and advert next to it no fucking problem. Until i hit the thumbnails :D

To clarify, i made a screenshot of whats going on:

Now the code i use for the first thumbnail (the one that works):

Code:

<li class="span2">
<div class="thumbnail">
<a href="#">
<img src="tn.jpg" alt="">
</a>
<h6>Tanner sucks hard cock</h6>
<span>See tanner mayes suck her boyfriends cock dry</span>
<hr>
<div class="thumbinfo1">250.345</div>
<div class="thumbinfo2">25:00</div>
<div class="thumbinfo1"><img src="5-stars.png"></div>
<div class="thumbinfo2">2 days ago</div>
<hr>
<center>...</center>
</div>
</li>

It works cause of the added three dots on the bottom, also the second hr doesnt show up, annoying!

then the second thumb i use the following code:

Code:

<li class="span2">
<div class="thumbnail">
<a href="#">
<img src="tn.jpg" alt="">
</a>
<h6>Tanner sucks hard cock</h6>
<span>See tanner mayes suck her boyfriends cock dry</span>
<hr>
<div class="thumbinfo1">250.345</div>
<div class="thumbinfo2">25:00</div>
<div class="thumbinfo1"><img src="5-stars.png"></div>
<div class="thumbinfo2">2 days ago</div>
<hr>
</div>
</li>

Now this one screws up big time as yall can see (border surrounding the entire cell is now only around the thumb cell).

So how to bloody fix this so it normally wraps around the entire cell and not just the thumbnail?

tia,
Ed

miXXXture · 10-03-2013, 05:50 AM

no idea about bootstrap... but assuming thumbinfos are floating elements, it may help using something like <br clear="all" /> after them instead of <hr>... also i would use image sprite for stars

Manfap · 10-03-2013, 05:58 AM

Code:

<div class="thumbnail cf">

http://nicolasgallagher.com/micro-clearfix-hack/

add this to your css

Code:

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

boneless · 10-03-2013, 06:06 AM

Excellent guys, both solutions work but the latter makes my hr work as well.

muchas gracias!

regards,
Ed

10-03-2013, 03:57 AM	#1
boneless Confirmed User Industry Role: Join Date: Dec 2002 Location: in your head Posts: 3,625	Any bootstrap experts around? Got an annoying problem, im trying to make a tube layout using bootstrap, so far so gooed, header navbar all weent well, even a carrousel and advert next to it no fucking problem. Until i hit the thumbnails :D To clarify, i made a screenshot of whats going on: Now the code i use for the first thumbnail (the one that works): Code: <li class="span2"> <div class="thumbnail"> <a href="#"> <img src="tn.jpg" alt=""> </a> <h6>Tanner sucks hard cock</h6> <span>See tanner mayes suck her boyfriends cock dry</span> <hr> <div class="thumbinfo1">250.345</div> <div class="thumbinfo2">25:00</div> <div class="thumbinfo1"><img src="5-stars.png"></div> <div class="thumbinfo2">2 days ago</div> <hr> <center>...</center> </div> </li> It works cause of the added three dots on the bottom, also the second hr doesnt show up, annoying! then the second thumb i use the following code: Code: <li class="span2"> <div class="thumbnail"> <a href="#"> <img src="tn.jpg" alt=""> </a> <h6>Tanner sucks hard cock</h6> <span>See tanner mayes suck her boyfriends cock dry</span> <hr> <div class="thumbinfo1">250.345</div> <div class="thumbinfo2">25:00</div> <div class="thumbinfo1"><img src="5-stars.png"></div> <div class="thumbinfo2">2 days ago</div> <hr> </div> </li> Now this one screws up big time as yall can see (border surrounding the entire cell is now only around the thumb cell). So how to bloody fix this so it normally wraps around the entire cell and not just the thumbnail? tia, Ed __________________ icq:148573096 skype:dabone2 email:boneless(a)mgpteam(.)com

10-03-2013, 05:50 AM	#2
miXXXture Confirmed User Industry Role: Join Date: Jul 2009 Posts: 217	no idea about bootstrap... but assuming thumbinfos are floating elements, it may help using something like <br clear="all" /> after them instead of <hr>... also i would use image sprite for stars __________________ I use Namesilo for domains and Mojohost, DigitalOcean & Vultr for hosting

10-03-2013, 06:06 AM	#4
boneless Confirmed User Industry Role: Join Date: Dec 2002 Location: in your head Posts: 3,625	Excellent guys, both solutions work but the latter makes my hr work as well. muchas gracias! regards, Ed __________________ icq:148573096 skype:dabone2 email:boneless(a)mgpteam(.)com