i am new in html and php so i want your help,
I want to add an image behind some objects (2 textbox, one link, one submit button) on html. How can i do that? take example the facebook the blue bar where over it is the login items..
Thanks
Take a look at the background-image clause in CSS
Examples here
http://www.tizag.com/htmlT/htmlbackground.php
Just add a "div" and insert what you want inside him.
Then set it a width and a height to fit your background image.
You just have to specify an image as background for the element which contains your objects. I guess this will be a div. All about background-images can be found via google or here:
http://www.w3schools.com/css/pr_background-image.asp
You can use CSS to set the background color, or as other people have mentioned, a background image.
Assuming your elements are contained in a <div id="my-background"> element, the following style will apply a blue background to the div:
#my-background { background-color:#0000FF }
You may want to read up on CSS.
<table background="image.png" width=100%>
<tr>
<td>
<font color="white">Email</font><br>
<input type="text" name = "email" size="25"><br>
</td>
<td>
<font color="white">Password</font><br>
<input type="password" name = "password" size="25">
<input type = "Submit" value = "Log in" height='5'><br>
</td>
</tr>
</table>
but the texbox is not looks nice... there is huge space between one...
Related
I've made a small image gallery with 'Image Thumbnail Viewer 2' Link here
script allows title attribute below image that is expanded. Everything works fine but I cannot find a way to style the text in the title attribute.
All i want to do is change some basic features i.e. font-family, font-size, margin etc. nothing fancy.
<tr>
<td>
<a href="img/test%20images/IMG305eng.jpg"
rel="enlargeimage"
rev="targetdiv:main,trigger:click,preload:yes,fx:fade"
title="<em>Hello World</em> - 2014 - 20x30x5cm">
<img src="img/test%20images/IMG305eng.jpg">
</a>
</td>
</tr>
above is an example of one image thumbnail
Each image will will need a different caption underneath it. not sure if its worth using the title attribute or just doing it another way entirely.
Thanks - second post on stack-overflow so let me know if i'm doing anything wrong.
You need to target the markup (HTML) that the plugin generates as #Aziz has pointed out.
Your text (when hovering an image) is contained in an element with the ID of #loadedarea.
#loadedarea {
font-weight: bold;
color: red;
}
you may need to modify the js script to insert a specific tag :
example: instead <br/> i added a <p> https://jsfiddle.net/x7w12etr/2/ (fixed and updated fiddle)
modified: (notice that you can add a class or id to this extra tag holding the alt attribute value of image)
if (setting.link)
imghtml=''+imghtml+''
imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<p>'+$anchor.attr('title') : '')+'</p></div>'
return $(imghtml)
}
From here you can target that p with css .
original:
if (setting.link)
imghtml=''+imghtml+''
imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<br />'+$anchor.attr('title') : '')+'</div>'
return $(imghtml)
},
I'm trying to make the background of a button change color, depending on the property of it's neighboring checkbox. But since I'm dependent on the HTML rendered by the questionnaire software I use, I'm unable to change the markup.
Let me show you what I mean:
![This the first situation: everything is OK here [1]http://i.stack.imgur.com/QEoUa.png
Upon clicking 1 of the 8 options, it get's highlighted. But once you click on the "next" button below, and then on the "back"button in the following screen you will encouter the following...
![D'oh!][2]http://i.stack.imgur.com/RCq1S.png
Here the option is still selected, but the button is no longer highlighted. This is a problem, as I want to hide the checkboxes later on.
I want to solve this problem using CSS only. However the checkbox and buttons are automatically placed inside a table. The table uses the following structure:
<table>
<tr>
<td class="checkbox">
<input type="checkbox">
</td>
<td class="item">
<span class="Option">
Answer
</span>
</td>
</tr>
</table>
I've tried using:
input[type=checkbox]:checked + a{background-color:red;}
This only works when checkbox and answer button are siblings.
Hope you can help me with this...
EDIT: I should mention that the layout was done with tables. I've even tried styling the parent <td> element to get the desired appearance. Still, no bananas.
How do you change the font color of text in an HTML email in AOL's client?
I've tried the following code:
<td>
<span style="color:#FFFFFF;">My Text</span>
</td>
After some suggestions from the community, I've also tried the following approach:
<td>
<font color="white">My Text</font>
</td>
Unfortunately, the text color doesn't change at all. In fact, when viewing the computed styles in Firebug, it doesn't show any color being applied to the element.
I'd expect this to work since all other inline styles work fine and the email is rendered beautifully in every other major client.
Thanks in advance for your help.
Try using the <font> tag. This site doesn't list <span> as a supported tag.
<font color='#FFFFFF'>My Text</font>
font tag is one option, but if possible in your layout, you might want to break out the text into a td and call something like <td style="color:#FFFFFF;">My Text</td>
AOL provides a format icon. Click on that and use the eyedropper on the Format Banner to select color for your text.
try <td><span style="color:#990011;">Text</span></td> (eg. uses some shade of red to stand out)
<a style="text-decoration: none;" href="{$shareWithFriendsLink}">
<span style="text-decoration: none; color: #ffffff;">
htt<span></span>{$shareWithFriendsLink|substr:3} </span></a>
Empty <span></span> prevent mail client for recognizing string as link.
|substr:3 are in use for Smartys variables for cut off first 3 symbols (htt) added before manually.
I am new to struts2... I designed a page in plain html.. now i have use this html page in struts2 project.. how can i convert html field elements to Struts2 ui tags ???
My html page looks like:
<tr>
<td class="style4">**Customer Name***</td>
<td><input type="text" name="Scr_Inq_CName" class="body-fieldsTextFields" id="Scr_Inq_CName_id" tabindex="4" onkeypress="return CommonKeyPressIsAlpha(event);"/></td>
</tr>
I have assigned style(style4) to a label "Customer name" and style(body-fieldsTextFields) to text box and also i have performed validation on this..
When i use Struts-tag
It displays text field with style(body-fieldsTextFields) applied, When i run project... But Customer name label is displayed in separate row <tr><td>Customer name</td></tr>.
And text field is displayed in below table row <tr>. i found this kind of disorder using FireBug.
how to apply style4 to Customer name label and body-fieldsTextFields style to all textfields and also how can i make both label and text field to be displayed in same row ?????
Thanks..
<tr>
<td class="style4">**Customer Name***</td>
<td><s:textfield cssClass="body-fieldsTextFields" theme="simple" name="Scr_Inq_CName" id="Scr_Inq_CName_id" onkeypress="return CommonKeyPressIsAlpha(event);"/></td>
</tr>
This will give you what you want
theme="simple" will remove the struts styling. cssClass attribute is used by struts2 tags to use css classes.
Also take a look at Steven's comment.You need to increase your accept rate.
For the alignment problem I guess you have some errors in your CSS rules for style4, you should check if you have put some display:block or similar rules that would make the next cell go under the first, otherwise the html is correct.
If you prefer creating a real label you could do this (I'm using Struts tags):
<tr>
<td><label for="Scr_Inq_CName_id">**Customer Name**</label></td>
<td><html:text property="Scr_Inq_CName" styleClass="body-fieldsTextFields" styleId="Scr_Inq_CName_id" tabindex="4" onkeypress="return CommonKeyPressIsAlpha(event);" /></td>
</tr>
For the CSS Rule, you can use attribute selectors:
input[type="text"]{
//This rule is valid for every input of type text, or textfield.
}
The two fields as I said should already be visible on same row.
I've got the following control working called Uploadify. So I've placed the control inside a table. Here's a rough example:
<tr>
<td>
<div id="holdcontrol">
<input id="file_upload" name="file_upload" type="file" />
</div>
</td>
<td> OTHER STUFF </td>
</tr>
<tr>
The control is placed in a div called "holdcontrol". It is not possible to use hide or attr to disable the uploadify control because of its flash content. The simple solution is to simply set the height of the div to zero.
So I used $(#holdcontrol).css("height", 0); - so this "disables" the control which really 'hides' the button.
The problem is that it only partially closes down on the Uploadify control - Half of it - Which means that I can see "half of the control button". When I want to use the control again, I issue the command:
$(#holdcontrol).css("height", null); - that rebounds and it works fine. It's the setting of the div height inside the table cell to "hide" or to "disable" the Uploadify control that is bugging me.
Any thoughts or tips to truly setting that div height value to 0?
thanks and Happy Holidays!
After uploadify is loaded it changes your HTML code using JavaScript. In one of my Projects it adds an object outside of #holdcontrol so hiding #holdcontrol won't do anything.
<div id="holdcontrol">
<input id="file_upload" name="file_upload" type="file" />
</div>
<object
width="226" height="24" type="application/x-shockwave-flash"
data="http://www.example.com/ext/flash/uploadify.swf"
id="flashfileUploader"
>
<!-- even more code-->
</object>
As you can see the object gets the id #flashfileUploader - so if you just try to change #flashfileUploader instead of #holdcontrol you should be fine.
You can find this kind of undocumented stuff using FireBug (https://addons.mozilla.org/de/firefox/addon/1843/).
so long,
Tim