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
Related
I want to give style in my echo tag in php
for example
echo 'hello world';
if i want the text to be bold or color yellow so how do i give style to this?
Ans me the right solution not the shortcut
Thanks.
echo '<span style="font-weight: bold; color: yellow;">hello world</span>';
You can try this:
<?php echo '<span class="heading">Hello World!</span>' ?>
<style>
.heading{color:red;}
</style>
You can generate the HTML according to your requirements.
For e.g.
echo "<b>Hello World</b>"; // Bold text
echo "<i>Hello World</i>"; //Italics text
echo "<div style='text-color:blue;'>Hello World</div>" ; //Blue colored text
There are many other ways you can thave this. Try to generate the correct HTML and CSS.
Beginner to PHP, so I am pretty sure this is a stupid question...but, was hoping someone can help me out.
I have a html/php form, which basically dynamically pulls in values from a DB for a dropdown.
//HTML/PHP (original page)
<div style="position: relative; float: left; width:236px; margin-right: 20px;">
<div id="variablebox" style="position: relative; float: left; width:215px; border: solid #0096D6; border-width: 1px; padding: 10px;">
<H2>Step 2: Select Variable Type</H2>
<form id="var" enctype="multipart/form-data">
<span style="float: left; margin-top:8px;">
<label class="fieldlabel"><span>Variable Type:</span></label></br>
<select id="variabletype" name="variabletype" class="selectfieldshadow">
<option value="">Select</option>
<?php
$list=mysqli_query($con, 'SELECT * FROM valuelist');
while($row_list=mysqli_fetch_array($list)){
?>
<option value="<?php echo $row_list['valuelistid']; ?>">
<?php echo $row_list['valuename']; ?>
</option>
<?php
}
?>
</select>
</span>
When this form is submitted, it basically submits to PHP file via AJAX and then return the same form to the screen within the same DIV.
//PHP Page
echo "<H2>Step 2: Select Variable Type</H2>";
echo "<form id='var' enctype='multipart/form-data'>";
echo "<span style='float: left; margin-top:8px;'>";
echo "<label class='fieldlabel'><span>Variable Type:</span></label></br>";
echo "<select id='variabletype' name='variabletype' class='selectfieldshadow'>";
echo "<option value=''>Select</option>";
echo "<?php";
echo "$list=mysqli_query($con, 'SELECT * FROM valuelist');";
echo "while($row_list=mysqli_fetch_array($list)){";
echo "?>";
echo "<option value="<?php echo $row_list['valuelistid']; ?>">";
echo "<?php echo $row_list['valuename']; ?>";
echo "</select>";
echo "</span>";
echo "<span style='position: relative; float: left; display: inline-block; margin-top: 7px; font: 12px Lucida Grande,Helvetica,Arial,Verdana,sans-serif; padding-right: 60px;'>";
echo "<p>Add Value Control Screenshot:</p>";
echo "<input id='controlimage' type='file' name='controlimage'>";
echo "</span>";
I keep getting errors with my output...T_Variable this and Exception that...my question is, am I going about doing this correctly? I mean, looking at my PHP file that will return content back to the original page, do I have to echo php tags so they work on the original page when returned? ie. echo "<?php" etc..
Any assistance would be much appreciated!
echo is used to output content. As it's currently written, you're just trying to display the PHP code. To execute it, you'll have to restructure your code as follows:
<!-- some HTML code -->
<?php
// display stuff
?>
<!-- continue with HTML -->
Well first of all, PHP is all rendered server-side. So that means returning PHP in an AJAX response doesn't make sense. It won't render on the client side.
Second of all, those echos look crazy too. There are several different ways to output large text like that. Personally, I like to just close the PHP tag and write it. So your second file could look like this instead:
// end all PHP for now
?>
<H2>Step 2: Select Variable Type</H2>
<form id='var' enctype='multipart/form-data'>
<span style='float: left; margin-top:8px;'>
...
<input id='controlimage' type='file' name='controlimage'>
</span>
<?php
// continue writing PHP here
Send PHP is a nonsens cause PHP is a Server side language (run on server and not on the client, the browser).
Why don't you run your PHP code in this script and return the result. (Just display it)
But, please, make us proud of our favorite language and its beginners:
Use mysqli_fetch_assoc() instead of mysqli_fetch_array()
Use only one echo to do a multiline display, PHP natively supports it.
Indent your code, you will really like how it's more readable.
Use jQuery, its AJAX methods and autocomplete widget. Somebody did the job for you. ;-)
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.
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 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.