How to align two pictures so that they are center of the div when using JqueryMobile and as far from the both sides? --p--p--
<div class="ui-grid-a" style="margin: 10px;"">
<div class="ui-block-a" id="pic" align="center">
<img src="images/image1_100x100.jpg" data-theme="c" id="pictureId"/>
</div>
<div class="ui-block-b">
<label> </label>
</div>
<div class="ui-block-c" id="pic" align="center">
<img src="images/image2_100x100.jpg" data-theme="c" id="pictureId2"/>
</div>
</div>
<style>
div#pic { color:red; border:4px solid grey; border-radius: 15px; width:130px; height:130px
text-align:center; background-color: white; margin: 0 auto;}
</style>
Second question is that what is the correct way to make a gap between divs? I am using now empty div, but I think that there might be something better?
Cheers,
Sami
You can always add css to that and overwrite the JQM stuff when you insert your css after the JQM css links.
I took your code and modified it a little bit so it should give you a starting pont. I don't know if any of your or JQM css interferes with that as I can't try out right now.
The CSS in my case is in no way smaller because of all the compatibility css (prefixed properties). But the advantage is that box layout is a lot more flexible in that it also allows to center the content in 2 directions and also allows for sorting and alignment.
http://www.w3.org/TR/css3-flexbox/
This is just an alternative.
http://dabblet.com/gist/3132163
I got it working. I guess it is not so sophisticated solution, but it is working.
.pics {
background-color: white;
border-radius: 15px;
border: 4px solid grey;
height: 130px;
padding: 0px;
text-align: center;
width: 130px !important;
}
.picLeft {
float:left;
margin-left: 10px !important;
}
.picRight {
float:right;
margin-right: 10px !important;
}
I am open to any better solutions and thanks Torsten!
Sami
Related
is it possible to shrink and grow child HTML elements with just CSS. Here is an example below, I want to see how others would approach this. I have seen solutions with JQuery however wanted to know there is an easier way to do this.
<div class="your_custom_styling_here_for_resizing">
<div style="width: 400px; height: 400px; display: flex;">
<div style="height: 100px; background: #333333; flex: 1;"></div>
<div style="background: #cccccc; flex: 1;"></div>
</div>
</div>
An easier solution would be to create a class for those styles instead of using inline CSS, and for the new styles, then adding / removing / changing just classes from jquery.
You want a child element to scale to the parent elements dimensions? If you do then just do the following:
.parent {
border: 5px solid red;
}
.child {
width: inherit;
height: auto;
background-color: blue;
color: white;
}
<div class="parent">
<div class="child">Expand or shrink your screen to see me scale to my parent</div>
</div>
}
I want to show a popup using qTip1 with 2 divs, the first one contains a picture and has to be on the left, the second one has some text in a table and has to be on the right. The problem is when I create the inner HTML for qTip, the table with the text is always under the picture and not on the right. I've tried some solutions here on stackoverflow but I think I'm missing something.
This is what the generated inner HTML for qTip looks like:
<div id="infoBoxParent" style="margin: 20px 20px 0 0; border: 1px solid #333; overflow: auto">
<div id="infoBoxPicture" style="float: left; border: 1px solid green;"><img
src="foo.png"
alt="" width="111" height="170" class="photo left" style="float: left;"/></div>
<div id="infoBoxFacts" style="float: right; border: 1px solid red; overflow: hidden">
<table>
<tr>
<td style='padding:5px;text-align:left;'>Some Text:</td>
<td style='padding:5px;text-align:right;'>Stack Overflow is a question and answer site for professional
and enthusiast programmers. It's built and run by you as part of the Stack Exchange network of Q&A
sites. With your help, we're working together to build a library of detailed answers to every
question about programming.
</td>
</tr>
</table>
</div>
</div>
What am I doing wrong?
If I am understanding your question this should work. It is from a css framework I built(Responder). I removed a lot of code so it highlights the solution to your question. The .reponsive-image class is not necessary but I added it because you are using images in your project.
If you want to change the width of your columns you can add classes to your style sheet in the folowing fashion:
.column25{
max-width:25%;
width:25%:
}
There is a link below for Responder that has a lot of these classes typed out already if you need to copy them.
Link to Solution Preview: http://codepen.io/larryjoelane/pen/OMEoMq
Link to Responder CSS framework: http://codepen.io/larryjoelane/pen/XmzQba
CSS:
/*makes an image responsive*/
.responsive-image {
display: block;
height: auto;
max-width: 100%;
width: 100%;
}
/* responsive container for the column classes*/
.row {
/*set the max width of the .row class to
*to 100% so the columns within it do not exceed
*a sum of 100% combined
*/
max-width: 100%;
/*keeps the .row divs next each other when the screen
resizes*/
overflow: hidden;
}
.row div {
/* adjust the aspect of the font
* so it displays well and within the div elements
* when the screen is resized
*
*/
font-size-adjust: 0.45;
line-height: 1.5;
/*provide some spacing in between the lines*/
float: left;
/*removes spacing between in line elements*/
clear: none;
/*removes spacing between in line elements*/
display: inline-block;
/*make the div elements align horizonatally*/
/*styling below prevents padding and borders from breaking
the max-width setting of the columns*/
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
/*allow long words to wrap to another line*/
word-wrap: break-word;
}
/*begin section for styling the column widths*/
.column50 {
max-width: 50%;
width: 50%;
}
HTML:
<div class="row" id="infoBoxParent" style="border: 1px solid #333; overflow: auto">
<div class="column50" id="infoBoxPicture" style="border: 1px solid green;"><img src="foo.png" alt="foo image" width="111" height="170" class="photo left" style="" /></div>
<div class="column50" id="infoBoxFacts" style="border: 1px solid red; overflow: hidden">
<table>
<tr>
<td style='padding:5px;text-align:left;'>Some Text:</td>
<td style='padding:5px;text-align:right;'>Stack Overflow is a question and answer site for professional and enthusiast programmers. It's built and run by you as part of the Stack Exchange network of Q&A sites. With your help, we're working together to build a library of detailed answers
to every question about programming.
</td>
</tr>
</table>
</div>
</div>
You could try to remove all the inline css and put the following code in the header.
This should work.
<style>
#infoBoxParent {
margin: 20px 20px 0 0;
border: 1px solid #333;
overflow: auto;
width: 100%;
}
#infoBoxParent div {
position: relative;
float: left;
border: 1px solid;
}
#infoBoxPicture{
border-color: green;
width: 30%;
}
#infoBoxFacts{
border-color: red;
width: 68%; /* 2% margin for the lines */
}
</style>
I have a main div under which there can be one or two sub divs. When there are two sub-divs, I would want them to be displayed side-by-side. But If I have only one sub div, then I'd want it to be displayed in the center. Can this be achieved by using CSS or should I take help of JavaScript? Using the following CSS I'm able to achieve the side-by-side part of it. But I'm not sure how to go forward when there is only one sub div
HTML:
<div id="maindiv">
<div class="subdiv">
<p>Div One</p>
</div>
<div class="subdiv">
<p>Div Two</p>
</div>
</div>
CSS:
div.subdiv {
float: left;
padding: 20px;
}
div#maindiv {
border: 2px solid black;
height: 120px;
width: 200px;
}
Use display:inline-block instead of float:left. Try to remove the second sub div in my example fiddle and you can see the desired result.
div.subdiv {
display:inline-block;
padding: 20px;
}
div#maindiv {
border: 2px solid black;
height: 120px;
width: 200px;
text-align:center;
}
DEMO
I have a simple tooltip which has long JavaScript code in the divs.
I would to make it is as simple way
could any one help please
here is my code
<div onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" style="position:relative;">Tool
<div id="tt1DX1" class="toolTip_new pbc11_ttpos1_1Q_di" style="display: none;">
<div class="tool_wrapper">
<div class="tooltip_top_new"></div>
<div class="tooltip_middle_new">
<div class="content">
<p>Please holder actuall text</p>
<p>Please holder actuall text</p>
</div>
</div>
<div class="tooltip_bot_new2"></div>
</div>
</div>
</div>
css
.tooltip_top_new{
background:url(../images/n_tooltip_top.png) no-repeat;
height:9px;
width:212px;
}
.tooltip_middle_new{
background:url(../images/n_tooltip_middle.png) no-repeat;
width:212px;
}
.tooltip_middle_new .content{
padding:2px 13px 1px;
}
.tooltip_middle_new .content p{
line-height: 1.3;
margin-bottom: 1em;
text-align: left;
}
.tooltip_bot_new2{
background:url(../images/n_tooltip_bot2.png) no-repeat;
height:21px;
width:212px;
}
.Question_di{
position:relative;
}
.pbc11_ttpos1_1Q_di {
border: 0 solid #FF0000;
}
.toolTip_new {
background: none repeat scroll 0 0 transparent;
color: #5C5C5C;
display: none;
font: 10px/12px Tahoma,Geneva,sans-serif;
left: -173px;
top: -90px;
position: absolute;
z-index: 1000;
}
the thing is that I have to copy & paste onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" where ever using the tooltips,I would like to avoid it.
JQueryTools includes a Tooltip module which will get rid of a big chunk of your code.
http://jquerytools.org/demos/tooltip/index.html
It's also possible to create tooltips with no JavaScript at all, using HTML and CSS along these lines:
<div class="has-tooltip">
<button class="huge red">You Know You Wanna...</button>
<div class="tooltip">Do NOT Press This Button.</div>
</div>
And in CSS:
.has-tooltip .tooltip {
position: absolute;
display: none;
<style code to position (with margin-left and margin-top)
and make the tooltip box look how you want>
}
.has-tooltip:hover .tooltip {
display: block;
}
Google "CSS Tooltips" to see lots of examples.
I think this will require javascript. I figured it wouldn't hurt to ask though.
We all know how to float an image or div right or left and have the text flow around and below that image. I'm trying to float a div at a fixed width from the top of a container and have text flow around above and below it.
It would be easiest if I could place this div above the paragraph text, but I could insert it if I had to.
I made this crude image outlining what I'm trying to do.
Thanks!
a bit of a cheat but possible using a dummy spacer
CSS:
#wrapper {
width: 500px;
margin: 0 auto;
border: 1px solid #000;
}
.fl {
float: left;
clear: left;
margin: 10px 10px 10px 0;
}
.fr {
float: right;
clear: right;
margin: 10px 0 10px 10px;
}
.dummy {float: right; height: 300px; width: 1px; background: #f00;}
HTML:
<div id="wrapper">
<img src="http://dummyimage.com/100x100/000/fff" width="100" height="100" class="fl">
<span class="dummy"></span>
<img src="http://dummyimage.com/100x200/DAD/fff" width="100" height="200" class="fr">
<p>all your paragraphs follow</p>
</div>
Working Example: HERE
and the spacer does need to be at least 1px wide, but it can be transparent
Have you tried something like this?
http://jsfiddle.net/8DczT/1/
This is exactly what a float does; it puts a box wherever you specify, and content flows around it. See this jsFiddle.
Put a margin-top on your floated div, to push it down from the top, something like this:
<div> <!-- parent containing div -->
<div style="float: right; margin-top: 50px">floated div</div>
<div>paragraph 1</div>
<div>paragraph 2</div>
</div>
As long as you get the margin right, you can floa it halfway between the center of the two paragraph divs.