Image in inputtext with border in css - php

IF you see the below picture you can see that the input text consists of image as background.But I want to keep a line in between the text and image.Either by applying image border...or any other trick.Im unable to found exact example or tutorial or trick.Because I applying image as background.So Im unable to apply border...
background: url("~/application/modules/User/externals/images/mail.png") no-repeat scroll 10px 11px #FFFFFF;
background-size: 20px 20px;

The solution for the icons in inputs is using a label element with for="" attribute
the for attribute needs to have the id of the input as a value so when you click this element the input get focused
Check this fiddle

you could do
input { background-image: url.jpg; box-shadow: 0 4px 0 4px black; }
this should create a solid 4px black right hand side border. Adjust accordingly

you can place image in span and set its right border only ... you can change the span height according to wish, the tag containing span should be applied with the property of overflow: hidden; in order to work in bit proper way,
or simply you can add line to your image.

In my guessing you can do it by using border-right:1px solid #333 like,
<div>
<span style="border-right:1px solid #333"><img src="path-to-image" alt=""/></span>
<input type="text" />
</div>
Alternatively, you can add a separator or border in you images like,
CSS
img{
border-right:1px solid #333;
}

Related

Excluding specific elements when styling

I am adding custom CSS to my Wordpress theme to add a border to all images - however I need to figure out how to exclude the logo images in the header and the footer so that they don't have a border around them. Any ideas?
I've tried using the :not command in CSS, however I cannot figure out how to add a class to my header logo and my footer logo.
Here's the simple code I am adding to style the images:
img { border-radius: 4px; border: 1px solid #dddddd; padding: 4px; }
The hard part is now figuring out how to stop that CSS from putting a border around the images in the header and the footer.
Here's the page where I am trying to do this:
http://disaprimary.co.za/silikamva/about/staff-and-teachers/
I suggest to add a class to the images in footer and header like this:
<img src="" class= "noborder">
And in your CSS:
img:not(.noborder){
border-radius: 4px; border: 1px solid #dddddd; padding: 4px;
}
simply add the below given css:
a.brand img {
border: none;
}
div#media_image-4 a img {
border: none;
}
It will exclude the border of header and footer logo images.

How a textarea can display an svg file

Trying to insert some svg's in my chat app. If I use them as PHP files, it's ok they will display in the chat#div but in the text area it's the full code of the svg's. When I'm trying to display them as svg the only thing I can see in the chat is this [object XMLDocument] both in text area and in #div
here's the code for the textarea
<textarea id="comment" style="width: 280px; margin-top: 10px; box-shadow:
inset 0 -15px 35px -5px rgba(0,0,0,0.3); height: 40px; overflow: auto;
pointer-events: all;">
</textarea>
and here is the javascript for the svg
function test(){
$.ajax({
url:"emoticons/cloudda3.svg",
success:function(result){
$("#comment").val(result);
}
})
}
A div Element has a contenteditable attribute, setting it to true will allow the user to enter and modify the data in the div. The best thing: the div can contain rich text including images.
.textarea {
font-family: monospace;
outline: none;
background: #efefef;
border: #888 1px solid;
display: block;
position: relative;
resize: both;
overflow: auto;
font-size: 9pt;
}
img {
height: 9pt;
}
<div class="textarea" contenteditable="true">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Perry-miniature-donkey-in-Palo-Alto-CA-2016.jpg/800px-Perry-miniature-donkey-in-Palo-Alto-CA-2016.jpg" />
</div>
Note: The <img> tag in the <div> can be replaced with any valid image or SVG.
As a sidenote, #emaillenin is correct in saying that textareas are only for text. Also I'm noticing you using the val function to insert, that would mean that the value of the element is updated, not it's innerHTML. This would result in a behaviour similar to what you are seeing now. If you want to get just the text from the div, use the text function.

Width issue with two pages

I've having trouble understanding whats going wrong in the css on this page.
On the left sidebar there a h3 element called testimonials with a 3px green border underneath it.
http://goo.gl/L7Lio
For some reason the border goes right up to the text in the next column next to it.
However on this page which use's exactly the same css it doesn't have that problem everything is aligned in the left sidebar correctly.
http://goo.gl/oL3km
Your CSS class of the content is floatright posts and its width is 500px. The rule is set here:
.single-page-testimonial .posts {
width: 500px;
}
The CSS class of the content of the correct page is post floatright sidebar-exist (with the additional sidebar-exist class) and its width is 490px. The rule is here:
.single-page-no .post.sidebar-exist {
width: 490px;
}
So your main content is wider than the correct one 10px. I think you may miss the class sidebar-exist somewhere.
The content DIV has 490px vs 500px (here it is the space of 10px)
.post h1, .mid-title {
border-bottom: 3px solid #004732;
color: #004732;
font-size: 18px;
line-height: 30px;
margin: 10px 0;
padding: 0;
} this css style is overwriting your h3 style,dude to which your facing that problem.
Solution:
just replace margin: 10px 0; with margin: 10px;. this will solve the problem, i`ve checked in firebug :)
Happy coding :)

HTML overflow:hidden doesn't format text correctly

I'm working on a website for an American Football team. They have these newsitems on their front page which they can manage through a CMS system. I have a problem with alligning the text inside those news items. Two of the news items look like this:
As you can see, the right newsitem text are displayed nicely. But the left cuts it off really bad. You can only see the top half of the text at the last sentence. I use overflow: hidden; to make sure the text doesn't make the div or newsitem bigger. Does anyone have any idea how to solve this through HTML and CSS or should I cut it off serverside with PHP?
Here's my code (HTML):
<div class="newsitem">
<div class="titlemessagewrapper">
<h2 class="titel" align="center"><?php echo $row['homepagetitel']; ?></h2>
<div class="newsbericht">
<?php echo $row['homepagebericht']; ?>
</div>
</div>
<div class="newsfooter">
<span class="footer_author"><?php echo get_gebruikersnaam_by_id($row['poster_id']); ?></span> <span class="footer_comment">Comments <span>todo</span></span>
Lees meer
</div>
</div>
And here is the CSS:
.newsitem{
float: left;
height: 375px;
width: 296px;
margin: 20px 20px 0px 20px;
background-color: #F5F5F5;
}
.newsitem .titel{
color:#132055;
font-size:1.2em;
line-height:1.3em;
font-weight:bold;
margin:10px 5px 5px 5px;
padding:0 0 6px 0;
border-bottom:1px dashed #9c0001;
}
.titlemessagewrapper{
height: 335px;
overflow: hidden;
}
.newsitem .newsbericht{
padding:5px 5px 5px 5px;
font-size: 0.8em;
margin-bottom: 5px;
}
.newsitem .newsfooter{
width: 100%;
height: 25px;
background-color: #132055;
margin: 0px auto;
font-size: 0.8em;
padding-top: 5px;
margin-top: 10px;
border: 1px solid #9c0001;
}
You should not rely on the user to enter <cut> !
User Input = error
What if the user forgets to enter <cut>? Will your news item now look unprofessional?
What would be the point of a user creating a news item to find that some of it was cut off?
If the div can only fit a fixed string length you should validate the max length of the news item Input body instead of relying on <cut>. This can be simply achieved using maxlength attribute.
<textarea id="userinput" maxlength="150">Enter your news</textarea>
If you do use <cut> you should also add in overflow: hidden; to ensure that the content is not unprofessionally displayed if no cut tag is present.
If you want to display the all text and keep the div the same fixed height
Replace
overflow: hidden;
with
overflow:auto;
(Scroll bar won't appear when content is smaller than the div)
Otherwise validate the length of the string / content in your div or remove the CSS height attribute to allow all the content appear with no scroll bars.
Hope this helps
Remove the height attribute on the .titlemessagewrapper. Its this height attribute which is causing the cut off.
If you want the boxes to remain the same height: Take the whole string, perform substr and save in a new variable and echo that.
Eg.
<?php
$str = "abcdefghijkl";
$new_strsubstr($str, 0, 8); // abcdef
// will return abcdefhi
?>

css how to increase the size of rounded image button with varying text

Can somebody please help me out on how to increase the size of the rounded button with respect to text. Please check the image:
I want to be able to write any length of text and rounded button will stretch automatically based on text.
Please help me on how to write CSS for to get this working ?
Note: I don't want to use CSS3 border-radius because it does not work in IE and I don't want to use css3pie, etc, that's why i have created the rounded images. Thanks
Use the Sliding Door Principle. http://www.alistapart.com/articles/slidingdoors/.
In sliding doors you have two extreme as images(rounded) between these images is a background. The images move (slide further) based on the length of the text.
ul {
list-style-type: none;
}
ul li {
height: 31px; // height of the background image *reused below
margin: 10px; // width of the left image *reused below
float: left;
background: url(left.png) no-repeat top left;
}
ul li div {
height: 31px;
margin-left: 10px;
padding-right: 10px;
background: url(right.png) no-repeat top right;
}
//used with
<ul>
<li><div>text</div></li>
<li><div>texttexttext</div></li>
<li><div>texttexttexttext</div></li>
</ul>
I would probably opt for creating a div which inherits a css class like the following
<div class="button">TEXT HERE</div>
The CSS would be the following:
.button { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: blue; }
The above style would allow all browsers (except older IE's) to render the rounded corners rounded which means you will have no need for images

Categories