I have an input text in a form that has a problem in MSIE7.
When the text field is filled and I continue typing, the background starts scrolling left along with the text.
This is the form when the text field is filled
The background image, a white rectangle with rounded corners, scrolls left with the text, leaving the black background.
This is the CSS for this text field:
border: none;
background: url('/wp-content/themes/pokerbuddy/images/field.png') top left no-repeat;
width: 100px;
height: 20px;
padding: 0px;
font-size: 80%;
color: #399;
display:inline;
Is there any way to solve this in MSIE7?
input{overflow:hidden;}
Don't know if this will work.
I think you have a problem with this line.
background: url('/wp-content/themes/pokerbuddy/images/field.png') top left no-repeat;
Don't you mean
`background: url('/wp-content/themes/pokerbuddy/images/field.png') top left repeat-x;`
Yes, there is a way to solve this, but it's a bit of a pain. You shouldn't put the textfield in the same div with the background image. It should be more like this (example of HTML structure):
<div style="background-image: url('/wp-content/themes/pokerbuddy/images/field.png');>
<div class="textboxStylesHere" style="(specify width, maybe overflow hidden)">
</div>
</div>
Pain, but it works.
Related
I'm trying to do this for my twitch, I have an image 1600x400 or something like that, it's background of my alert, so if the length of nickname changes, the background width changes relatively, but what I'm trying to do is cut image horizontally if text length changes
something like this
Without knowing much about the details of your code, this is what I can provide:
You can attempt to set the css as such:
#element{
background-image: url('your/image/url.jpg');
background-position:center;
background-size:cover;
}
JS Fiddle: https://jsfiddle.net/1k4aqz13/
Please reply with more detail so we can better answer your question.
You can achieve this with setting the background-image set to image along with background-repeat:no-repeat; and most importantly set the display to either inline-table or inline-block so that the element wraps around it's inner content.
Here is a sample code.
#container{
width: 100%;
}
.textContainer{
background-image:url('http://placehold.it/350x100');
height: 100px;
background-repeat:no-repeat;
display: inline-block;
line-height: 30px;
padding: 0 5px;
/*Uncomment below if you want the image to stretch only when text in div goes beyond the image width-wise.*/
/*background-size:cover;*/
}
<div id="container">
<div class="textContainer">
This is some test text here.
</div>
<br><br>
<div class="textContainer">
This is some test text here too to check.
</div>
</div>
Hope this helps.
I have 2 divs wrapped inside a div (slide).
I would like the lap div to appear inside of wall div. I tried adding minus top-margin to lap div, but it only shows the text 'hello' and I can't see the background.
<div class="slide">
<div id="wall"><img src="http://i.imgur.com/mGjd59Z.png"/></div>
<div id="lap">hello</div>
</div>
#lap {
width: 50%;
height: 100px;
background-color: #F34245;
margin-top:-60px;
}
jsfiddle reference
expected result
but the this is what I'm getting. i'm asking why only text appear ?if lap div goes underneath of wall div ,then why text appear??
edit
I was able to fix the problem with #Alon answer, but there is a question.
if lap div goes underneath of the wall, then why does the text appear?
Try using transform:translateY(-60px); instead of margin-top:-60px;
Or use z-index to make it appear above:
#lap {
width: 300px;
height: 100px;
background-color: #F34245;
margin-top:-60px;
position: relative;
z-index: 1;
}
About your question (if lap div go to underneath of wall ,then why text appear??) I've noticed that if you add position:relative to #wall then the text doesn't appear so it might have something to do with positioning, but again, I'm not sure why this behavior is like that.
I have used float: right; to float a whole paragraph to the right - I am highlighting bits of text with a background & border. My problem is that the text below then moves up and wraps to the left of the object (paragraph) that I've floated right. position: absoloute; right:0px; doesn't work as it overlaps.
So my question is, how do I float it right, but ensure the text below stays below?
CSS:
.fcsi {
background: #1E73BE;
padding:20px;
color: white;
border: 2px solid #1E73BE;
border-radius: 25px;
float: right;
}
I've just used a simple div class in HTML around the text.
<div class="fcsi">
TEXT
</div>
Any help much appreciated on this.
After this, I am looking at including an image inside the background & border, aligned top-right or bottom-right. I think I cannot do this with CSS though and need to re-enter the image with HTML each time?
Below the floated paragraph you could add:
<div style="clear:both;height:1px"></div>
I have an image that I'm trying to display inline with a donate button, but I'd like it to overlap the div it's contained in.
Currently, the image just won't show; the box it's surrounded in has display:table in it:
When I block display:inline in Firebug, the image shows, but above the donate button.
The code I'm using (based on suggestions and usings W3 Schools) is:
<div style="background: url('https://nationalcdp.org/wp-content/uploads/2014/09
/feature-me.png') no-repeat 50% 50%; background-position: center center; background-
attachment: absolute!important; width: 133px; height: 116px; display:inline;
overflow:visible;"></div>
<a href="https://nationalcdp.org/wp-content/plugins/stripe_payment_terminal/terminal
/index.php" class="spt_newpay_button buttondesign28">Donate!</a>
Here is the effect I mocked up in Photoshop that I'm trying to achieve:
The avatar and the arrow is just one image called "feature-me.png". But I'm just unsure how to accomplish what I'd like. There is nothing in the spt_newpay_button class other than just different color options for the button.
I'm really hoping this can be achieved without using jquery, and just using CSS.
Any guidance would be greatly appreciated!
Thanks!
You can achieve what you're trying to achieve quite easily without the hassle of creating another <div>. Currently, this is the code which generates the Donate button and the feature-me image inside your website:
<div class="su-column-inner su-clearfix">
<div style="background: url('https://nationalcdp.org/wp-content/uploads/2014/09/feature-me.png') no-repeat 50% 50%; background-position: center center; background-attachment: absolute!important; width: 133px; height: 116px; display:inline; overflow:visible;"></div>
<div style="display:inline;">
<a data-rel="prettyPhoto" class="spt_newpay_button buttondesign28" href="https://nationalcdp.org/wp-content/plugins/stripe_payment_terminal/terminal/index.php?&serv=false&amount=&comment=true&iframe=true&width=100%&height=100%">Donate!
<span></span>
</a>
</div>
</div>
You will need to remove this line of code from the code above: <div style="background: url('https://nationalcdp.org/wp-content/uploads/2014/09/feature-me.png') no-repeat 50% 50%; background-position: center center; background-attachment: absolute!important; width: 133px; height: 116px; display:inline; overflow:visible;"></div> and replace it with this code: <img src="https://nationalcdp.org/wp-content/uploads/2014/09/feature-me.png" id="sideimage">. The final code will look like this:
<div class="su-column-inner su-clearfix">
<img src="https://nationalcdp.org/wp-content/uploads/2014/09/feature-me.png" id="sideimage">
<div style="display:inline;">
<a data-rel="prettyPhoto" class="spt_newpay_button buttondesign28" href="https://nationalcdp.org/wp-content/plugins/stripe_payment_terminal/terminal/index.php?&serv=false&amount=&comment=true&iframe=true&width=100%&height=100%">Donate!
<span></span>
</a>
</div>
</div>
Next, you will have to add these styles to the bottom of your stylesheet:
img#sideimage {
position: absolute;
margin-left: -97px;
margin-top: 32px;
width: 98px;
}
You can adjust the margin-left, margin-top and the width properties assigned to the CSS of img#sideimage as per your liking. Hopefully, this will resolve the issue which you're facing.
Try this piece of code directly in your page:
<div alt="outer image" style="position:relative;width=741px;height:92px;border:0px;
background: url('http://web-asylum.com/help-images/_tmp1.jpg') no-repeat;">
<a href="https://nationalcdp.org/wp-content/plugins/stripe_payment_terminal/terminal/index.php"
style="position:absolute;left:590px;width=138px;height:65px;border:0px;margin:10px 5px;">
<img src="http://web-asylum.com/help-images/_tmp2.jpg" alt="right button"></a>
<img src="https://nationalcdp.org/wp-content/uploads/2014/09/feature-me.png" alt="Cartoon"
style="position:absolute;left:450px;width: 133px; height: 116px;border:0px;margin:5px 5px;">
</div>
Your original code didn't make it clear what the button is made out of, or if the banner text was part of a background or actual text. You also refer to a CLASS within your example code, which isn't detailed.
I hosted the two temporary images (out box and button) on one of my domains just so you could see it working, replace them for your own code as necessary.
So I created the code above basically using 3x separate images and in element styling just to show you one clean way of achieving what you needed.
Simply remove out any images you wish to recreate with text and pure styles etc.
you will see that it only uses 1 DIV layer that has the style POSITION:Relative - this sets the layer relative to whatever else is on your page. The two inner elements are image elements [One of them surrounded in an HREF link to provide the button action.]
Both these elements use style POSITION:Absolute which anchors to the start of the outer DIV at position x=0. Then its just a case of setting the LEFT style value to move both img elements to the right of its parent DIV.
These two IMG elements will stay in place with the parent, where ever the parent is placed in your main page.
There's other ways to achieve the same, but with no extra info about your page - this works fine.
I'm trying to create info graphics / data panels on a hobby site that I'm working on. I'm wishing to display text for one of the stat totals vertically rotated with supporting text wrapping around this however I'm having great difficulty getting this aligned correctly.
Instead of pasting code I can show my work in progress page at:
http://www.footy-results.co.uk/
The info graphic panel that I can't get to work is the '148 TEAMS' ... hopefully the problem is obvious to css wizards!
Any hints or tips would be much appreciated and anyone who can help me resolve this issue will be credited on the site when I launch!
I have a solution fou you but its not 100% clean. In my opinion its just not allowed to use negative margin but I can't find another solution. And furthermore you have do define height and width of the element...
You have to place the rotaded <span> element into anothe <div>. Then you can position the <div> properly and the text is floating around it. Here the code:
HTML:
<div class="infoPanel">
<span class="infoPanelVertical">
<div class="spanwrapper">
<span class="infoNumberVertical">148 TEAMS</span>
</div> your text here...
</span>
</div>
CSS:
.spanwrapper {
float: left;
height: 157px;
position: relative;
width: 48px;
}
.infoNumberVertical {
background-color: #F5F5F5;
border: 1px dotted #DDDDDD;
color: #1A3C7B;
float: left;
font-size: 32px;
font-weight: bold;
margin-left: -56px;
margin-top: 60px;
transform: rotate(-90deg);
width: 150px;
}
The problem is that you have to give a hight and a width to the wrapping <div> or the span in it otherwise the text does not know where it should get floated. If you don't define any width or height the text is just wrapping around the rotated text which is a big rectangle.
I you use a CMS or want to fill in the content dynamicly this is a bad solution. But you could also define the width and height trough js but thats kinda hacky solution I think.