I have written some HTML code inside PHP with echo as below:
echo '<a class = "fragment" href = "'.$row['url'].'" target = "_blank" >';
echo '<div>';
echo "Title: $title"; echo '<br/>';
echo "URL:"; echo '<h4>' .$url. '</h4>';
echo "Preview : $preview"; echo '<br/>';
echo "Image url: $image"; echo '<br/>';
echo '</br>';
echo '</div>';
echo '</a>';
Problem is $url appears on a new line and in bold text. Though i have not used here <b> or <br/> before and after it.
How can I show it like
URL : www.url.com
same like other parameters appears?
CSS effect appears properly.
css for h4:
.fragment h4
{
padding: 0;
margin: 0;
color: #000;
}
.fragment h4:hover
{
background-color:#ccc;
text-decoration: underline;
}
An h4 tag is (a) a heading tag (hence the boldness) and (b) a block-level tag (hence the new line). If you don't want these aspects, why are you using it?
If you want to style this text, you should use the tag provided for the purpose: <span>. Give it a class or an id and style that.
Related
I want to change height for a <br> tag.
This code written inside HTML tag which I have tried:
echo "<br style="padding-top:xxpx;">"
But, it doe not work:
echo " $x" . " Degree"."<br>"."<br>"."<br>"."<br>";
echo " $y" . " percent"."<br>"."<br>"."<br>";
echo " $a" . " percent"."<br>"."<br>"."<br>"."<br>";
echo " $b" . " percent"."<br>"."<br>"."<br>"."<br>";
echo " $c" . " percent"."<br>"."<br>"."<br>"."<br>";
echo " $d" . " percent";
header("Refresh:5");
//}else {
//echo "No Results";
//}
//$conn->close();
?>
</div>
As the 'margin' doesn't work in Chrome, that's why I used 'border' instead.
br {
display: block;
content: "";
border-bottom: 10px solid transparent; // Works in Chrome/Safari
}
#-moz-document url-prefix() {
br {
margin-bottom: 10px; // As 'border-bottom' doesn't work in firefox and 'margin-bottom' doesn't work in Chrome.
}
}
This is a tiny CSS for answering your question:
br
{
display: block;
margin: 10px 0;
}
But, I suggest you use <div> for formatting your layout, instead of using <br> tag.
Changing height of <br> is not appreciated. Place <br> element inside a <p> tag and apply line-height to the <p> element
echo '<p style="line-height:30px;margin:0px;"><br></p>
or simply the best try this
echo"<p style='margin:0px;'line-height:20px;>Your content Here</p>";
Please excuse the excessive use of echo here, as I'm using IP.Content which allows pure PHP or pure html, but not a mix of them both. I'm attempting to get a layout in which I have the following
xxx-------xxxxxxxxxxxxxxxxxxxxxxxxxxx
Where a - resembles free space. I am trying to not use floating variables, so using a table display seems like the proper way to handle this. Here's my simplistic code below, you can see by the two widths what I'm going after, however the table display automatically expands to fill the remaining space.
echo '<div style="display: inline-table; width: 100%;">';
echo '<div id="categories" style="width: 20%; display: table-cell;">';
echo '<div class="box">';
echo 'Hello world2.';
echo '</div>';
echo '</div>';
echo '<div id="content" style="width: 70%; display: table-cell;">';
echo '<div class="box">';
echo 'Hello world.';
echo '</div>';
echo '</div>';
echo '</div>';
You can use borders to space the divs.
Use HTML-Padding.
for more referece : www.w3schools.com/css/css_boxmodel.asp
I am currently trying to create a login button that is similar to that of dropbox. There is another thread available on how to do this, but I wish to do it differently. Note I tried to follow the code provided in that thread as close as I can, but it was a failed attempt.
Rather than having a link written in text, my button refers to a link through an image. Furthermore, when the button is pressed, I want another image to popup right below it.
Here is my code:
html/ jquery /php code:
echo '<div id = popup>';
echo '';
echo '<div id = "popupimage"> </div>';
echo '</div>';
echo '<script type="text/javascript src="jquery.js">';
echo '$("#popup").click(function(e){
$("#popupimage").css("visibility","visible");
e.stopPropagation();
});';
echo '</script>';
css code:
#logbutton{
top:50px;
left:850px;
position: absolute;
background-image: url(../images/buttons/loginbutton.png);
width:59px;
height:28px;
}
#popupimage{
top:63px;
left:887px;
position: absolute;
background-image: url(../images/popupimage.png);
visibility: hidden;
width:400px;
height:600px;
}
If possible I would also like to know if this can be done using html 5 and css only?
Thanks in advance
I have managed to do this. Here is the code:
echo '';
echo '<div id = "popup">';
echo '<div id = "popupimage"> </div>';
//HTML INSIDE POPUP
echo '</div>';
echo '<script type="text/javascript" src="jquery.js"></script>';
echo '<script>';
echo '$("#loginbutton").click(function(e){';
echo '$("#popup").css("visibility","visible");';
echo 'e.stopPropagation();';
echo '});';
echo '$("#popup").click(function(e){';
echo 'e.stopPropagation();';
echo '});';
echo '$("body").click(function(e){';
echo '$("#popup") . css("visibility", "hidden");';
echo '});';
I have a css question.
I have the following php code which displays a name.
while ($db_field = mysql_fetch_assoc($result)) {
print $db_field['ship_name'] . "<BR>";
I'm trying to add some text style to it but I'm not that good in css and I'm somehow lost.
I'm trying to do something like <t> $db_field['ship_name'].<t/> but it gives me an error.
judging by your comment, probably you want
print "<span class='t'>".$db_field['ship_name']."</span><BR>";
and for your CSS file define
.t { font-size: 50pt; color:black; text-shadow: 0 1px 2px white; }
There are 2 ways of doing this. Either you embed html in PHP or write separate HTML snippet. I will show you the both ways :
The first one is already explained above in the answer by sinclairchase.
echo "<td>" . $db_field['ship_name'] . "</td>";
The other way is :
<?php while ($db_field = mysql_fetch_assoc($result)) {
?>
<td>
<?php print $db_field['ship_name'] . "<BR>"; ?>
</td>
<?php } ?>
I dont unsderstand why you write t in question it would be td.
This will echo out the data into a span tag:
echo "<span>" . $db_field['ship_name'] . "</span>";
To add a css class:
echo "<span class=\"class_name\">" . $db_field['ship_name'] . "</span>";
Then in your css file:
span.class_name { font-size:24px; color:#666; }
I have the following css code:
#Layer3
{
position:absolute;
width: 89%;
height: 40%;
left: 10%;
top: 56%;
background-color: #f1ffff;
}
#Layer3 h1
{
font-size: medium;
color: #000033;
text-decoration: none;
text-align: center;
}
.tableheader {
border-width:10px; border-style:solid;
}
.tablecontent {
height: 95%;
overflow:auto;
}
However, when I use this PHP to generate the html
echo '<div id="tableheader" class="tableheader">';
echo "<h1>{$query} Auctions</h1>" . "\n";
echo "</div>";
echo '<div id="tablecontent" class="tablecontent">';
echo "<table border='0' width='100%'><tr>" . "\n";
echo "<td width='15%'>Seller ID</td>" . "\n";
echo "<td width='10%'>Start Date</td>" . "\n";
echo "<td width='75%'>Description</td>" . "\n";
echo "</tr>\n";
// printing table rows
foreach ($rows as $row)
{
$pk = $row['ARTICLE_NO'];
echo '<tr>' . "\n";
table contens generated in here
echo '</tr>' . "\n";
}
echo "</table>";
}
echo "</div>";
which generates this html:
<div id="tableheader" class="tableheader">
<h1>hardy Auctions</h1>
</div>
<div id="tablecontent" class="tablecontent">
<table border='0' width='100%'>
<tr>
<td width='15%'>Seller ID</td>
<td width='10%'>Start Date</td>
<td width='75%'>Description</td>
the rest of table stuff
</div>
The stylesheet is correctly referenced so I am unsure what is causing the error. But there is no border around tableheader at all. Both of these layers are in Layer3 which no longer displays properly on the page.
#tableheader {
border: 10px solid #000;
}
Try giving it a color.
EDIT: since its id is tableheader, try changing the style selector to be an id. You could also try using !important to see if anything is overriding your class selector.
Specificity values:
inline: 1000; id: 100, class: 10, element: 1
!important trumps all other non-important declarations.
Start by browsing the HTML DOM in the rendered page either using Firebug in Firefox or using the IE Developer Toolbar in IE.
That way, you can see what styles are actually associated with the element in the rendered page. It's a lot easier to debug the issue from there.
One possibility is that there's a syntax error somewhere in the CSS file causing the styles not to be applied correctly.
I've just had a quick look at this and it seams fine, I've also created a local copy of these and the styles work out okay as well, I get a nice thick black border around the h1 text.
So from what your explaining something is either overwriting the styles, or the styles aren't being applied to the page.