I have a box in which text is presented in spans. I used line-height to change the spacing within a section, but need to have a different distance between sections.
See orange box on this page:
https://theslowroad.org/category/destinations/asia/laos/#
I tried using margins and padding but it doesn't seem to have an effect.
'<span class="boxhead">' . 'Major stops:' . '</span>' . '<span class="boxtext">' . $where . '</span>' . '<br>' .
'<span class="boxhead">' . 'Memorable moment:' . '</span>' . '<span class="boxtext">' . $moment . '</span>' . '<br>' .
'<span class="boxhead">' . 'Did you know?' . '</span>' . '<span class="boxtext">' . $fact . '</span>';
?>
CSS:
.boxhead {
margin-right: 18px;
font-weight: bold;
font-style: italic;
text-transform: uppercase;
padding-bottom: 19px;
}
.boxtext {
padding-bottom: 19px;
}
.infobox {
line-height: 1.2em;
clear: both;
background-color: #bf593a;
color: white;
padding: 5%;
border-radius: 10px ;
margin-left:6%;
margin-right: 6%;
margin-top: 8%;
margin-bottom: 10%;
}
Thanks!
A simple way is to change your .boxtext selector to:
.boxtext {
padding-bottom: 19px;
display: inline-block;
}
But I suggest grouping all the span.boxhead span.boxtext classes with a <div class="boxgroup">
'<div class="boxgroup"><span class="boxhead">Major stops:</span> <span class="boxtext">' . $where . '</span></div>' .
'<div class="boxgroup"><span class="boxhead">Memorable moment:</span> <span class="boxtext">' . $moment . '</span></div>' .
'<div class="boxgroup"><span class="boxhead">Did you know?</span> <span class="boxtext">' . $fact . '</span></div>';
(also took some liberty removing superfluous string concats, hope you don't mind.)
and changing the .boxtext selector to:
.boxgroup {
padding-bottom: 19px;
}
Related
I have designed a two column display using table.
I want to align image to the bottom inside td. I used vertical-align: top property in td to show the text from top but here is another problem, I want to show image with the text as well but sometimes when text get larger then some td boxes looks larger than another td boxes, I want to show equal td boxes.
There is free space in bottom of some td boxes, I think if I show the image from bottom then free space will shift from bottom to mid so these boxes will look attractive.
I do not want to show the image from top but bottom for that purpose i used another div for the image inside td but all in vain.
Note:- I have tried different positions properties like relative, absolute but none of them working (and sorry for my English).
$rows = $result->num_rows; // Find total rows returned by database
if($rows > 0) {
//if ($result->num_rows > 0) {
// output data of each row
$cols = 2; // Define number of columns
$counter = 1; //
$nbsp = $cols - ($rows % $cols); // Calculate t
echo '<table width="100%" align="center" cellpadding="4"
cellspacing="10" border= 1px solid white>';
while($row = $result->fetch_assoc()) {
$ads = $row['ads_id'];
$id = $row['user_id'];
if(($counter % $cols) == 1) { // Check if it's new row
echo '<tr>';
}
echo "<td>";
echo "<a href='welcome.php?user_id=$id&&ads_id=$ads'>";
echo "Book title - ". $row["title"] ."<br>";
echo "Book author - " . $row["author"] . "<br>";
echo "Price - " . $row["price"]. "<br>";
echo "Grade - " . $row["grade"]. "<br>";
echo "Description - " . $row["descrip"]. "<br>";
$img = $row['pic'];
echo "<div class=csc>";
echo '<img src="'.$img.'">';
echo"</div>";
echo "</a>";
echo "</td>";
if(($counter % $cols) == 0) {
echo "</tr>";
}
$counter++;
//echo "</table>";
}
if($nbsp > 0) { // Add unused column in last row
for ($i = 0; $i < $nbsp; $i++) {
echo '<td> </td>';
}
echo '</tr>';
}
echo '</table>';
} else {
echo "0 results";
}
$conn->close();
?>
This is the CSS part
table {
width: 100%;
text-align:center;
}
th, td {
vertical-align: top;
text-align: left;
padding: 8px;
background: #D9E4F5;
width: 50%;
font-family: georgia;
.csc{
bottom:1000px;
}
.csc img{
display: inline-block;
width: 100%;
height: 100px;
margin-top: 100px;
bottom:2000px;
}
First of all you've missed a } in your css.
This may solve your problem:
table {
width: 100%;
text-align: center;
}
th, td {
vertical-align: bottom; /* This is what you need */
text-align: left;
padding: 8px;
background: #D9E4F5;
width: 50%;
font-family: georgia;
}
.csc{
bottom: 1000px;
}
.csc img{
display: inline-block;
width: 100%;
height: 100px;
margin-top: 100px;
bottom: 2000px;
}
I have a problem that I cannot manage to wrap my section properly.
I have a div "container" that with a php part is populated by few divs and I don't know how to properly wrap it with the border:solid of my created div.
html/php part
<div class = "listaCarrello" id ="listaCarrello "style="display: <?php echo !isset($_GET['riepilogo'])&&isset($_SESSION['username'])? "block":"none"?>">
<?php
$isEmpty = true;
foreach ($_COOKIE as $key => $val) {
$query = $connection->query("SELECT * FROM prodotto WHERE IDProdotto = $key");
if ($query != null) {
$isEmpty = false;
$row = $query->fetch_assoc();
echo "<div class = \"elemCarrello\">";
echo "<p class=\"nomeCarrello\">" . $row['nomeProdotto'] . "</p>";
echo "<div class = \"imgCarrello\">";
echo "<img src = \"img/" . $row['immagine'] . "\" alt=\"" . $row['nomeProdotto'] . "\"height=\"150px\" width=\"150px\">";
echo "</div>";
echo "<div class=\"prezzoCarrello\">";
echo "<p>Prezzo unitario " . $row['prezzo'] . "</p>";
echo "<p> Quantità: " . $val;
echo " - Prezzo totale: ";
echo "€" . $row['prezzo'] * $val . "</p>";
$totale = $totale + ($row['prezzo'] * $val);
echo "<p> Modifica la Quantità: ";
echo "<input type='number' id = 'quantita' name='quantita' value='" . $val . "'>";
echo "<button onclick='refreshCookie($key, document.getElementById(\"quantita\").value)'>AGGIORNA</button>";
echo "</div>";
echo "<button class='eliminaCarrello' onclick='eliminaCookie($key)' style='background: white'> <img src='img/elimina.png' height='50' width='50'> </button>";
echo "</div>";
}
}
?>
</div>
<?php
if (!$isEmpty) {
echo "<div class='checkOut'>";
echo "<p>Totale: €" . $totale . "</p>";
echo '<button id="2ndphase" onclick="goToAddress()">AVANTI</button>';
echo "</div>";
}
?>
css part
.listaCarrello{
border:solid;
border-color: lightgray;
border-radius: 10px;
text-align: center;
margin-top: 5px;
width: 99%;
margin-bottom: 5px;
padding-bottom: 50px;
}
.elemCarrello{
margin-top: 5px;
width: 99%;
text-align: left;
float:left;
display: block;
margin-bottom: 5px;
border: solid;
margin-left: 5px;
border-radius: 10px;
}
.nomeCarrello{
padding-left: 10px;
font-weight: bold;
}
.imgCarrello{
float: left;
padding-left: 10px;
}
.eliminaCarrello{
margin-top: -13px;
margin-bottom: 10px;
}
Sorry for my English and I hope that you understood what I am saying.
I have attached a image as an example
Set the "container" divs overflow styling to auto.
container{
overflow:auto;
}
I have a Wordpress widget and inside the widget I am displaying profile information. Some times the text for the 2nd row is too long and it overflows past the widget container.
What would be a good way to deal with this, and how could I implement it in css or html or whatever?
My css
#profileContainer {
float: left;
position: relative;
width: 400px;
display:block;
padding: 5px;
}
#avatarContainer {
width: 55px;
float: left;
padding: 5 5 5 5;
}
#dataContainer {
float: left;
vertical-align: text-top;
word-wrap: break-word;
}
#dataList {
display: inline-block;
}
My html for the output
?>
<div id="profileContainer">
<?php
$img = bp_core_fetch_avatar( 'html=false&item_id=' . $author->getId() );
$img_html = '<img src="' . $img . '"></img>';
?>
<div id="avatarContainer">
<?php
if ($author->getUrl() != null) {
echo "<a href='" . $author->getUrl() . "'>" . $img_html . "</a>";
} else {
echo $img_html;
}
?>
</div> <!--closing avatar container div -->
<div class="overflow-hidden">
<?php
if ($author->getName() != null) {
echo "<b>" . $author->getName() . "</b>";
}
if ($author->getJobTitle() != null) {
echo "<br/>" . $author->getJobTitle();
}
if ($author->getUserName() != null) {
if ($author->getUrl() != null) {
echo "<br/><a href='" . $author->getUrl() . "'>#" . $author->getUserName() . "</a>";
} else {
echo "<br/>#" . $author->getUserName();
}
}
if ($author->getEmail() != null) {
echo '<br/>' . $author->getEmail() . "";
}
if ($author->getPhone() != null) {
echo "<br/> " . $author->getPhone();
}
echo "<br/>";
?>
</div> <!--closing data container div -->
</div> <!--closing container div-->
<?php
in css do this to wrap text in elipsis mode (three dots)
.overflow-hidden{
max-width:400px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
I have the following HTML and PHP:
<?php
if ($_POST["submit"] == "Get Articles") {
$api_url = "https://DonutJuice:so%20many%20people%20in%20my%20bed#api.pinboard.in/v1/posts/all?format=json";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $api_url);
curl_setopt($ch, CURLOPT_HEADER, FALSE);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$json = curl_exec($ch);
curl_close($ch);
$values = json_decode($json, true);
echo "<div class='article-output'>";
echo "<table>";
echo "<tr><th>URL</th> <th>Title</th></tr>";
foreach ($values as $bookmark) {
$bookmark_url = $bookmark["href"];
$bookmark_title = $bookmark["description"];
echo "<tr><td><a href='" . $bookmark_url . "'>" . $bookmark_url . "</a></td> <td>" . $bookmark_title . "</td></tr>";
}
echo "</table>";
echo "</div>";
}
?>
With this CSS:
table {
margin-top: 50px;
padding: 5px 20px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid #a9a8a7;
border-radius: 5px;
}
tr {
height: 50px;
}
th {
color: #173769;
}
td {
width: 60px;
word-wrap: break-word;
color: #444;
}
td:first-child {
padding-right: 30px;
}
But whenever I press the button that processes that PHP, I get things like this:
Where they're still breaking the page layout ruthlessly.
How do I fix this?
The word-break property can force wrapping to occur when the lines are too long
http://tinker.io/ca0ae
td {
word-break: break-all;
word-break: break-word;
}
You could always do it on the PHP side:
echo "<tr><td><a href='" . $bookmark_url . "'>" . wordwrap($bookmark_url, 40, "\n") . "</a></td> <td>" . $bookmark_title . "</td></tr>";
Edit td in CSS:
td {
width: 60px;
color: #444;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
I have the following div which looks like
#namehere texthereee today 10 retweet
replay
favorite
i am trying to edit css to let the final shape look like
#namehere texthereee testetest 10 retweet
today replay favorite
my current css looks like
.top-tweet, .top-tweet a
{
font-size: 13px;
text-align: center;
}
.col_3 a
{
font-size: 12px;
}
.top-tweet .col_1
{
width: 60px;
}
.top-tweet .col_2
{
width: 375px;
text-align: left;
}
.top-tweet .col_3
{
width: 100px;
}
.top-tweet .col_4
{
width: 60px;
}
here html which contain the div that i am looking to adjust ,
echo "<div class='divrow top-tweet'>";
echo "<li class='col_1' ><a href='http://www.twitter.com/#!/" . $tweeted_by . "'> <img src='" . $avatar . "' />" . $orig_tweeted_by . " </a></li>";
echo "<li class='col_2'> <div><a class='text_bigger' href='http://www.twitter.com/#!/" . $tweeted_by . "' style='font-size:13px'>#".$tweeted_by."</a></div> " . $tweet . "</li>";
echo "<li class='col_3'> <a href='http://www.twitter.com/#!/" . $tweeted_by . "/status/" . $id . "'>" . $since . " </a> ";
echo "<li class='col_3'> <a href='https://twitter.com/intent/tweet?in_reply_to=" . $id . "'> Reply </a> ";
echo "<li class='col_3'> <a href='https://twitter.com/intent/favorite?tweet_id=" . $id . "'> Favorite </a> ";
echo "<li class='col_4'>".$retweet_count."<br>retweet</li>";
echo "</div>";
}
echo "</div>";
.col_1..3 is today replay fav
Any tips ?
try one class in all div and float left all them and set the width you want for
jsfiddle
you can also give different width
<div class="one">skfhsfs</div>
<div class="one">skfhsfs</div>
<div class="one">skfhsfs</div>
<div class="one">skfhsfs</div>
css
.one{
width:100px;
border:1px solid red;
float:left;
}
It helps if you post the html you're trying to work with.
Anyway, try this.
<div class="main">
<div class="col_1">#namehere</div>
<div class="col_2">
<div>text here.. text here..</div>
<div>
<div class="action">today</div>
<div class="action">replay</div>
<div class="action">favorite</div>
</div>
</div>
<div class="col_3">10 retweet</div>
</div>
.main {width: 500px}
.col_1, .col_3, .action {width: 100px; float: left}
.col_2 {width: 300px; float: left}