Take a look at the link. The p element within it's parent has more width. I want to display p within the dialog box. How would I do this?
http://jsfiddle.net/2y1wj0mm/
.dialog-box {
margin:0 auto;
width:300px;
height:200px;
background-color:#326A16;
-webkit-filter:drop-shadow(0px 0px 5px #000000);
border-radius:20%/34%;
}
.dialog-box:before {
content:"";
position: absolute;
width: 0px;
height: 0px;
border-right: 21px solid transparent;
border-left: 18px solid transparent;
border-top: 42px solid #326A16;
margin:195.71428571428572px 90px;
}
.dialog-box p {
display:inline;
margin:10% 14%;
text-wrap:normal;
}
Update your .dialog-box:
.dialog-box p {
display: block;
margin:10% 14%;
width: 200px;
word-wrap: wrap;
word-break: break-all;
padding-top: 30px;
}
3 things to do here:
display: inline does not work in your case; you have to use the width & height of p element
You have to wrap & break the words using word-wrap and word-break
You probably need to place the words inside the green dialog, using padding-top
Side note:
There is no point to set margin with so many decimal places. Use integers only.
Demo: http://jsfiddle.net/9bpyjnfL/1/
It happens because you put text without any whitespaces in it, so browser is not sure how to break those long line. You can instruct it with word-wrap property:
.dialog-box {
/* ... */
word-wrap: break-word;
}
Demo: http://jsfiddle.net/2y1wj0mm/1/
Try this i change p to block element and gave it a width
.dialog-box {
margin:0 auto;
width:300px;
height:200px;
background-color:#326A16;
-webkit-filter:drop-shadow(0px 0px 5px #000000);
border-radius:20%/34%;
}
.dialog-box:before {
content:"";
position: absolute;
width: 0px;
height: 0px;
border-right: 21px solid transparent;
border-left: 18px solid transparent;
border-top: 42px solid #326A16;
margin:195.71428571428572px 90px;
}
.dialog-box p {
display:inline-block;
width:260px;
margin:20px;
text-wrap:normal;
word-break:break-all;
}
<div class="dialog-box">
<p>hi there?kjhkjhkgygyfyjfffhjvhvvjhjassasasasa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa c c vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv</p>
</div>
Try like this: Demo
CSS:
.dialog-box p {
display:block;
margin:10% 14%;
width:80%;
word-wrap: break-word;
}
.dialog-box p {
display: block;
height: 180px;
margin: 10% 14%;
overflow: hidden;
word-wrap: break-word;
}
Use this
dialog-box p {
margin: 10% 10%;
padding: 13px 0px 0px 0px;
word-wrap: break-word;
}
JSFIDDLe
http://jsfiddle.net/2y1wj0mm/4/
.dialog-box p {
//you can use inline-block also but you need to adjust the margin and padding
display:block;
margin:10%;
width:80%;
word-wrap: break-word;
padding:5%;
}
BY default p is a Block level element. so default css will be applied here
So you cannot use as inline element
Related
I am having issues placing my dT(Date/Time) div at the bottom of it's containing div. I have tried setting bottom: 0px; to no avail. Below is the html and css code I am using.
HTML:
<div class='container'>
<aside>
<img id="user-pic" src="images/blank-user.jpg">
#User_Name
<div id="trend"><h6>TRENDING</h6></div>
</aside>
<section class="main">
</section>
</div>
CSS:
#dT{
width:inherit;
bottom: 0px;
border-top: gray;
background-color: gray;
font-size: small;
}
.container{
margin-top: 80px;
}
section{
margin: auto;
width: 400px;
clear: left;
top: 100px;
}
.tweet{
width: 450px;
height: 225px;
background-color: #FFFFFF;
border: 4px solid #F1433F;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
margin-bottom: 15px;
padding: 25px 15px 0px 15px;
}
.tweetContent{
width: inherit;
height: inherit;
margin: 5px 5px 0 5px;
border-bottom: 1px solid #EEEEEE;
border-top: 1px solid #EEEEEE;
}
There is some JQuery elements within my code that I have not poseted because I do not believe it would have any effect on the positioning of a div.
It appears that the jquery aspect of the code might have something to do with it so here it is.
UPDATE: removed JQuery because it was not relevant.
Add position:relative to parent of your #dT element . Only if it is relative you can control the child elements using left , right , bottom and top.
Update:
And to the child elements for which you want to change position using left add position:absolute
P.S : Need to add relative for the div that contains #dT and absolute for #dT
#parentofdT
{
position:relative;
}
#dT
{
position:absolute
}
Easily pixed with position:absolute;: https://jsfiddle.net/1Lsnjou9/
Good luck.
You should add position: relative or position: absolute property to make the bottom: 0px work
#dT{
width:inherit;
bottom: 0px;
border-top: gray;
background-color: gray;
font-size: small;
position: relative;
}
use position property like position absolute or position relative so as to work with top, left,right,bottom properties
In my project, I have this <div> which receives, via jquery function, the content read from several pages and display them as a popup window:
<div id="popup">
<div id="header"> <span id="title"></span> <span id="button">X</span> </div>
<div id="text"> </div>
</div>
The css associated to this is the following:
#popup {
border-style: solid;
border-color: #E0E0E0;
box-shadow: 2px 2px 2px black;
width: 1000px;
height: 900px;
max-width: 1500px;
max-height: 1000px;
}
#header {
background-color: #66B2FF;
}
#title {
text-decoration-color: #E0E0E0;
font: 28px arial;
}
#button {
background-color: #99CCFF;
min-width: 32px;
max-width: 5%;
min-height: 32px;
max-height: 100%;
position:absolute;
right:0px;
text-align:center;
padding-left:10px;
padding-right:10px;
}
#text {
background-color: #FFFFFF;
border-style: solid;
border-color: #E0E0E0;
text-decoration-color: #E0E0E0;
font: 24px sans-serif;
overflow: auto;
}
.ui-resizable-handle {
width: 5px;
height: 5px;
background-color: red;
}
and the content is appended in this <div> through this jquery code:
<script>
$('document').ready(function(){
$('#popup').draggable({
cointainment: "#container"
});
$('#popup').resizable({
cointainment: "#container"
});
$('#popup').hide();
$('#button').click(function(){
$('#popup').hide();
});
$('a').click(function(e){
if($(this).attr('href') != '<c:out value="${pageContext.request.contextPath}/acesso/logout.html"/>') {
e.preventDefault();
$.get($(this).attr('href'), function(data){
var $temp = $('<div/>', {html:data});
$('#title').text($temp.find('title').text());
$('#text').html($temp.remove('head').html());
$('#popup').show();
});
}
});
});
</script>
My problem is the content attached to <div> being displayed ou of the boundaries of the popup, like this:
Someone knows how to solve this?
UPDATE
new code for the css file:
#popup {
border-style: solid;
border-color: #E0E0E0;
box-shadow: 2px 2px 2px black;
max-width: 85%;
max-height: 85%;
}
.ui-resizable-handle {
width: 5px;
height: 5px;
background-color: red;
}
#header {
background-color: #66B2FF;
}
#title {
text-decoration-color: #E0E0E0;
font: 28px arial;
}
#button {
background-color: #99CCFF;
min-width: 32px;
max-width: 5%;
min-height: 32px;
max-height: 100%;
position:absolute;
right:0px;
text-align:center;
padding-left:10px;
padding-right:10px;
}
#text {
overflow: scroll-y;
}
It depends on how you want to solve it:
Make the popup scroll:
#popup {
overflow:scroll-y;
}
The ideal thing is to make the popup fit the content. But the problem is, that size depends on what is generated inside the popup. If it is predictable, maybe you can define some styles to force the geerated stuff to use relative (%) sizes, in this case your problem is solved. I mean, kind of:
#popup {
position:relative;
display:block;
}
#popup > div {
width: 100% !important;
height: 100% !important;
}
This will work if inside #popup there's one div with the rest of the contents. Find out what's inside to make this fit your needs. You can overwrite styles with the !important tag.
If, on the other hand, you really have no idea what will be inside the popup, or everytime is different, you can detect the size of what's inside via javascript, and adjust #popup accordingly. Take a look at clientHeight and clientWidth properties of DOM elements.
I have an input text box, on which I would like to display some text area when the user's mouse get over it, giving to him informations on the text to enter.
here is my HTML code :
<html>
<body>
<style type="text/css">
.mouseover
{
}
</style>
<span onmouseover="this.classname='mouseover'" onmouseout="this.classename=''"></span>
<input id="mybox" type="text" />
</body>
</html>
What is the best CSS trick that would help to do that ?
Thank you for help in advance.
You can do all of this with CSS. Play around with CSS triangles for the tooltip but what you're mainly looking for is to use the :hover pseudo-class. No need for Javascript.
.input {
position: relative;
}
.tooltip {
display: none;
padding: 10px;
}
.input:hover .tooltip {
background: blue;
border-radius: 3px;
bottom: -60px;
color: white;
display: inline;
height: 30px;
left: 0;
line-height: 30px;
position: absolute;
}
.input:hover .tooltip:before {
display: block;
content: "";
position: absolute;
top: -5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid blue;
}
http://jsfiddle.net/v8xUL/1/
You can use Jquery Tooltip:
Jquery Tooltip
Just one more way to do that...
Filldle Demo
For me in IE8 OK DEMO
<input type="text">
<span>Some Text inside... </span>
span {
background-color: rgba(0,102,255,.15);
border: 2px solid rgba(0,102,255,.5);
border-radius: 10px;
color: #000;
display: none;
padding: 10px;
position: relative;
}
span:before {
content: "";
border-style: solid;
border-width: 0 15px 15px 15px;
border-color: transparent transparent rgba(0,102,255,.5) transparent;
height: 0;
position: absolute;
top: -17px;
width: 0;
}
input {
display: block
}
input:hover + span {
display: inline-block;
margin: 10px 0 0 10px
}
* simple css-based tooltip */
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
text-align:left;
font-size:12px;
/* outline radius for mozilla/firefox only */
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}
// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
// custom opacity setting
opacity: 0.7
});
got to this link http://jquerytools.org/demos/tooltip/form.html
Try this property it's asp but may work for your case
ErrorMessage="Your Message";
How can i align text and image verticle align middle ??
jsfiddle demo here : http://jsfiddle.net/j3wDP/
My CSS:
.rating{
border: 1px solid red;
font-family: verdana;
font-size: 12px;
width: 180px;
height: 20px;
}
span img{
width: 20px;
height: 20px;
padding: 0px 3px;
}
My HTML:
<body>
<div class="rating">Rating <span><img src="like.jpg">233<img src="dislike.jpg">100</span></div>
</body
add some property
span img{ vertical-align:middle;}
See DEMO
Demo
.rating{
border: 1px solid #8e8e8e;
font-family: verdana;
font-size: 12px;
width: 180px;
line-height:50px;
height: 50px;
}
span img{
width: 20px;
height: 20px;
padding: 0px 3px;
}
You can use line-height
Change your css like this
.rating{
border: 1px solid #8e8e8e;
font-family: verdana;
font-size: 12px;
width: 180px;
height: 20px;
line-height:20px;
}
span img{
width: 20px;
height: 20px;
padding: 0px 3px;
vertical-align:middle;
}
the best way is to use Line-height or us can use
.rating{
display:table-cell;
vertical-align:middle;
}
There are different solutions. You can wrap your content into two (e.g. div-)containers and handle them like a table. Something like that:
<div style="display:table; height: 200px; background:red;">
<div style="display:table-cell; height:200px; vertical-align:middle">
<span>Your Content</span>
</div>
</div>
it's important to give them a height property and use display: table and display:table-cell instead of it. another way is to center this span with position: absolute:
<div style="height:200px; background:red; position:relative">
<span style="height:20px; position:absolute; top:50%; margin-top:-10px;">Your content</span>
</div>
In that example the margin-top value is calculated by the half value of the height (height: 20px = margin-top:-10px). But I would prefer the first way.
In this example http://bit.ly/t2ImYS width of wrapper of all elements is fixed 8520px
#scroller {
width: 8520px;
height: 100%;
float: left;
padding: 0;}
I want width dynamic so if i add more elements inside <div id="scroller"> this #scroller should take the width upon elements inside it.
So tried to set width
#scroller {
width: 100%;}
and
#scroller {
width: auto}
but then scroller doesn't work properly.
is there a way to get width in % with properly working scroll?
Set the li elements to display:inline-block; and remove the float:left; (you could also remove the vertical-align, since that will only work on table-cell elements)
Remove the fixed width from the wrapper.
Add white-space:nowrap; to the ul
And you should be fine...
(Except in <=ie7, but I suppose that's no problem in your case?)
#scroller li {
display: inline-block;/* changed */
/*float:left; */ /* deleted */
padding: 0 10px;
width: 120px;
height: 100%;
border-left: 1px solid #CCC;
border-right: 1px solid white;
background-color: #FAFAFA;
font-size: 14px;
}
#scroller ul {
list-style: none;
display: block;
float: left;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
text-align: left;
white-space:nowrap; /* added */
}
#scroller {
/* width: 8520px; */ /* deleted */
height: 100%;
float: left;
padding: 0;
}
If you are using iScroll4 you should refresh the scroller or destroy and recreate it.
Excerpt from here:
"iScroll needs to know the correct dimensions of both the wrapper and the scroller. They are computed the first time at start up but if your code changes the elements size, iScroll needs to be warned that you are messing with the DOM."
Using Display:inline-block
and using percentages worked for me:
#scroller li {
height: 100%;
width: 2%;
display: inline-block;
}
#scroller ul {
list-style: none;
display: block;
float: left;
width: 100%;
height: 100%;
}
#scroller {
width: 5000%;
height: 100%;
float: left;
}
Try calling the iscroll refresh() method after adding dynamic items within the scroller to set the width.
try this css code, it worked for me: http://jsfiddle.net/manseuk/r9VL2/2/
#wrapper {
z-index:1;
width:100%;
background:#aaa;
overflow:auto;
}
#scroller {
z-index:1;
/* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
padding:0;
}
#scroller ul {
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
#scroller li
{
background-color: White !important;
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}