The gear button in the above picture is positioned absolute inside the textarea element, but the text is getting overlapped with it. I don't want to apply padding-right property.
I am new with HTML and CSS. How to stop text getting collapsed with gear button.
I have created a DEMO using another approach.
I have created a wrapper element with relative positioning, gave border to it and set its width to 300px. Then created a textarea element without any border and set its width to 280px in order to position your gear (positioned absolutely, float:right) at the top-right corner, so the text won't overlap you button.
HTML:
<div class='wrapper'>
<textarea class='textarea'></textarea>
<img src='https://cdn3.iconfinder.com/data/icons/unicons-vector-icons-pack/32/settings-128.png' class='img'>
</div>
CSS:
.wrapper{
width:300px;
height:auto;
border:1px solid red;
position:relative;
}
.textarea{
position:relative;
width:280px;
height:100px;
border:0px solid;
resize:none
}
.img{
float:right;
position:absolute;
width:20px;
height:20px;
}
You don't really can get away from padding as this is the right thing to do in your case.
(else please state why don't you want to use padding?)
Check this code out, maybe you'll find it more elegant to use the icon as a background-image.
You could play with the width, height, and padding-right values:
HTML part:
<textarea>hello hksjf askdjfj akldfla </textarea>
CSS Part:
textarea {
width: 100px;
height: 50px;
padding-right: 20px;
background-image: url('http://www.isilo.com/support/manual/iSiloIP/img/gearIcon.gif');
background-position: top right;
background-repeat: no-repeat;
}
Also in jsFiddle:
http://jsfiddle.net/nQkEG/
You can't.
Either use padding-right on the textarea or float the button to the right.
Related
I'm trying to show a text in a border div located in absolute location inside another div.
Option 1 with width:auto; - fiddle: https://jsfiddle.net/c21kt6r4/
The problem is that the left side box expands too much.
Option 2 - with width:min-content; fiddle: https://jsfiddle.net/ay159rw6/2/
The problem is that the right side box text wraps.
What is the clean way to wrap text in div and show a correct border in both multi and single line texts?
For reference the html is :
<div class="main">
<div class="item" style="left:0;">
<label>SHAMPOO & CONDITIONER</label>
</div>
<div class="item" style="left:165px;">
<label>WHAT EVER</label>
</div>
</div>
And CSS:
.main{
position:relative;
border:solid black 1px;
width:400px;
height:400px;
}
.item{
border:solid blue 1px;
width:160px;
height:150px;
position: absolute;
}
.item label{
position:absolute;
bottom:5%;
left:5%;
border:solid red 1px;
padding:5px;
display:inline-block;
font-size:12px;
width:min-content;
}
Follow these steps.
1) You need to warp the label inside a div and then give it position:absolute. Also you need to use right:5% to give spacing on both lefr-right sides. We're wrapping into a div because we want position relative to div we're applying table cell property.
2) You need to display: table-cell; your label tag .item label
3) Give word-break: break-all; your label tag .item label so word can take whole space
Here is the working demo: https://jsfiddle.net/o5dgzn0c/
Demo image.
Hope it will help!
I would suggest you going with max-width here, because it will limit max width of the item element to some value and keep possibility to include width:auto feature width for all elements less than it, something like:
.item label{
position:absolute;
bottom:5%;
left:5%;
border:solid red 1px;
padding:5px;
display:inline-block;
font-size:12px;
width:auto;
max-width:100px;
}
However, I would go with JS approach on this, as you have no idea what text might appear.
Well.. my english is not good, so i draw what i want..
FULL PAGE: http://d-3.me/full.jpg
The green container it's my content wrap. The Black and Red Squares, are some button's to access another pages.
So when i resize the page, i want to keep theses button's like this another image:
1024px Window Views: http://d-3.me/1024.jpg
this is my initial HTML :
<div id="wrap_home_bts">
<div class="bt_woman"></div>
<div class="bt_man"></div>
</div>
and this is my css:
#wrap_home_bts{
position:relative;
width:100%;
height:100%;
}
.bt_woman{
width:880px;
height:389px;
background:#FFCC00;
position:absolute;
left:0;
bottom:245px;
}
.bt_man{
width:733px;
height:168px;
background:#CC00FF;
position:absolute;
right:0;
bottom:74px;
}
but this way, the "button's" accompanies the resized window.
I clear?
Instead of positioning your blocks using left and right 0px, position them to 50%, and then align them the way you want using a negative margin. This should work, although you'll have to adjust the margins to fit exactly like you want:
#wrap_home_bts{
display: block;
position: absolute;
width: 100%;
height: 100%;
}
.bt_woman{
width:880px;
height:389px;
background:#FFCC00;
display: block;
position:absolute;
left:50%;
margin-left: -650px;
bottom:245px;
}
.bt_man{
width:733px;
height:168px;
background:#CC00FF;
position:absolute;
display: block;
left:50%;
margin-right: -650px;
bottom:74px;
}
http://jsfiddle.net/E4mmz/
.bt_woman and .bt_man are absolutely positioned in #wrap_home_bts which's width is set to 100%. That way #wrap_home_bts size will change with browser resizing and the position of .bt_woman and .bt_man will follow this element. Perhaps it will be better that .bt_woman and .bt_man to be outside the #wrap_home_bts. Then you may set some width to the body element with javaScript, like the width of the screen. That way they will never change there position on resize.
I want to place an absolute popup box at the end of text link.
HTML
<div style="float:left;">Hello World</div><div class="box">BOX</div>
CSS
.box
{
float:left;
border-color:#000;
border-style:solid;
border-width:1px;
width:80px;
height:80px;
text-align:center;
}
http://jsfiddle.net/7N6ye/1/
It works fine only when a box is relative. When I set position:absolute on the box, it looks like
http://jsfiddle.net/7N6ye/3/
Any ideas? Eventually, I'll have a list of links each of which has different text length. (And each box will popup at the end of text).
This might work:
<div class="box">Hello World<div>BOX</div></div>
with the CSS:
.box {
position: relative;
border: 1px solid red;
float: left;
}
.box div
{
position:absolute;
top: 0;
left: 100%;
border-color:#000;
border-style:solid;
border-width:1px;
width:80px;
height:80px;
text-align:center;
display: inline-box;
}
Fiddle Reference: http://jsfiddle.net/audetwebdesign/DWe8B/
Notes
(1) I nested the popup box within the text line. I can work around that.
the problem is that the popup inherits the width of the parent, so the box
can be quite narrow unless you specify a width.
If you set the position to relative, the div is put relative to its original position.
e.g. 100px to the left from where you are
If you set the position to absolute, the div is put relative to its parent (the next parent with relative or absolute positioning).
e.g. 100px from the left corner of the parent
on top of that the div is no longer part of the document flow. So other elements can overlap with it.
The same is true for floating elements. Here the next available position is used.
In general it makes no sense to set absolute positioning as well as a float.
Not sure what I am getting wrong here, but let's say I have two divs, and an h1 element (or P1) for that matter that looks like this:
<div class="wrapper">
<div class="top">
<h1>Content header</h1>
</div>
</div>
I want my element to appear in the 'center middle' of the inner div, that is it's immediate parent. To achieve this, I give it a margin-top:50% & a margin-left:50% with the understanding that this would render it exactly towards the center middle of the div. But while it does get it to the middle, it doesn't quite get it to the center. Infact it seems to position itself relative to the outer div, the one with class wrapper.
I have recreated this using jsfiddle here:
http://jsfiddle.net/KLRsN/
Am I specifying the selectors wrong or is my positioning in itself incorrect?
-the above ans isnt completely correct as the text will still not be completely centered vertically.
.wrapper{
margin:5px;
max-height:250px;
min-height:250px;/*not required only height:250px will do*/
border:1px solid green;
}
.content
{
margin:5px;
border:1px solid black;
height:100px;/*you have to give the parent element a height and a width within which you wish to center*/
width:100px;
position:relative;/*giving it a position relative so that anything inside it will be positioned absolutely relative to this container*/
text-align:center;/*aligning the h1 to the center*/
}
.content h1{
border:1px solid black;
position:absolute;
top:50%;
left:50%;
line-height:50px;
width:50px;
margin-left:-25px;/*half the width of the h1 so that it exactly centers*/
margin-top:-25px;/*half the height of the h1 so that it exactly centers*/
}
explanation:
-ever element in html is in the form of a rectangular box so applying margin-top:50% is aligning the top of that box to 50% of the parent element and not the text inside the box.
-that is the reason the text is not exactly aligned to the center.
-also it is essential to provide the parent element(within which you wish to center the h1) a width and height.
The correct way to do what you are looking for would be by using absolute and relative positioning.
-give the .container a position value of relative and the h1 a value of absolute
-by giving the h1 a width and height we then apply a negative left margin equal to half the width and a negative top margin equal to half the height so that the text is exactly centered.
also for more on positioning - check out the following link
If you want to display text content at a middle you can use text-align:center , or you can apply width to your h1 tag and use margin:auto. To position it vertically middle use relative position and top:50% . Try this css
.wrapper{
height:250px;
min-height:250px;
border:1px solid green;
}
.content{
position:relative;
top:50%;
border:1px solid black;
}
.content h1{
border:1px solid blue;
margin:auto;
width:100px;
background:red
}
Hope it helps
I have a div with a thick border of 10 px. Inside the div there is a pic and some text.
The pic is slightly moved on the border (is a must, should be above the border).
<style>
#main
{
border:10px solid red;
width:400px;
}
.img-to-border
{
margin-left:-10px;
margin-top:-10px;
position:relative;
float:left;
}
.text{
border:1px solid blue;
text-align:right;
padding-right:30px;
}
</style>
<div id="main">
<img src="https://www.google.by/logos/2012/slalom_canoe-2012-sr.png" alt="" class="img-to-border">
<p class="text">DCBA padding-right of text is always 30px </p>
</div>
Here is a working code:
jsFiddle
The problem is if text is one to four symbols longer, it falls down. But, I want it go above the image (above I mean z-indexed, not from uppper side of the screen to the lower side of the screen).
P.S. The padding-right is always 30px.
So, it goes absolutely the same way like you type numbers on the calculator - from right to the left and above the image, in one line. How to do that for my example?
Again, sorry I repeat that, The pic is slightly moved on the border (is a must, should be above the border).
you can make #main position:relative and the image position:absolute so the text goes over it. Check the updated jsfiddle here http://jsfiddle.net/85Zk5/2/ (actually you don't need the float in .img-to-border this way, you can remove it from the jsfiddle should be the same)
I can't get your problem properly. I tried with 1 to lots of letters and the text is always placed on the sameline, so it is the image. If you are having any trouble with the image by itself, you could work on
#main {position: relative;} /* Keep it just the same */
img {
position: absolute;
top: -10px; left: -10px;
}
The image would take no place at the page, but would still be visible and with no bumps with the textbox.
Here is a working fiddle: http://jsfiddle.net/BDFJM/
sorry if I get your question the wrong way.