anthelo Posted March 8, 2011 Share Posted March 8, 2011 Hello, im having problem with a simple table.. I want the title and the conent do not have space.. if you can see on the picture on some cases is doing it (if the text is big) Any ideas? <div class="main mainRegular"> <div class="boxBody" id="mainBody"> <div id="mainNewsSoccer"> <div id="HomeNewsSoccerIMG"><div id="HomeNewsSoccerTitle"><?php echo MenuTitlePodosfero; ?></div></div> <?php $query = "SELECT *, date_FORMAT(Date, '%H:%i') as Date_Time FROM tblnews WHERE Category = 1 ORDER BY `Id` DESC LIMIT 4"; $result = mysql_query($query); while($row = mysql_fetch_assoc($result)) { ?> <div class="small_item"> <table border="0" cellspacing="0"> <tr> <td> </td> <td> </td> </tr> <tr> <td rowspan="2"><a href="<?php echo BASE_URL;?>index.php?pid=article&artidread=<?php echo $row['Id'];?>"><img src="<?php echo html_entity_decode($row['Thumb']);?>" border="0" width="110" height="64" /></a></td> <td style="max-height: 45px;" ><a href="<?php echo BASE_URL;?>index.php?pid=article&artidread=<?php echo $row['Id'];?>"><strong><?php echo html_entity_decode(substr($row['Title'],0,437));?></strong></a> <?php echo html_entity_decode(substr($row['Article'],0,700));?></strong><a id="mainNewsMore" href="<?php echo BASE_URL;?>index.php?pid=article&artidread=<?php echo $row['Id'];?>">...<?php echo goToArticle; ?></a></td> </tr> </table> </div> <?php } ?> </div> </div> </div> CSS .small_item { float: left; width: 280px; margin-left: 10px; margin-right: 10px; margin-top: 10px; max-height:190px; } [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 8, 2011 Share Posted March 8, 2011 yes don't use tables for this unless you know when to use them. What i would suggest is to make a nice media box, in a div. <div class="media-box"> <img src="image.jpg" alt=" " /> <h2>title</h2> <p>some text</p> <div> Let php provide the content. Than in css set a a standard width and height for the div and let it float left; let the image float left and give it some margin-right so it doesn't touch the text That's what i would do since it's much more clean. it uses pretty much the same technique as here. but it uses an extra float on the image. Hope it helps. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 8, 2011 Share Posted March 8, 2011 So if you would have read both articles above you could have made something like this: <body> <style type="text/css"> div.media-box{ float:left; margin-right:10px; overflow: hidden; background:#0055BB; padding:3px; border:1px solid #fff; color:#fff; } .media-box img{ float:left; margin-right:5px; } </style> <?php for($i=0;$i<80;$i++){ $num = $i+1; echo '<div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <strong>This is a title</s> <p>this is some text, lalalala lalalala lalalala lalalalala lalalala</p> </div>' ; } ?> </body> just run it it works out of the box Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 8, 2011 Share Posted March 8, 2011 i see i made an error </s> should be </strong> no reason why it's got copied like that. Quote Link to comment Share on other sites More sharing options...
anthelo Posted March 8, 2011 Author Share Posted March 8, 2011 thank you m8, grate idea but the results are the same. I dont want any space so im doing (playing around and nothing happened) .media-box p{ float:right; } Quote Link to comment Share on other sites More sharing options...
anthelo Posted March 8, 2011 Author Share Posted March 8, 2011 done it.. thank you soooo much Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 8, 2011 Share Posted March 8, 2011 what do you mean results are the same. could you be a little more precise in what exactly is the same. Why are you even floating the paragraph? have you make got it online somewhere, maybe the stuff inherits properties from you sytle sheet without even knowing it. Look here for an example working Explanation on it can be found here Note though I use a reset.css for everything. You might want to do the same, since a paragraph has some default margin's at the top and bottom. -edit: is it solved?? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.