I am currently creating many figures using the JavaScript library D3 (but I don't think D3 has any relevance for my problem). The figure is placed in div X and the text explaining the figure is in div Y. I basically want to create a pattern like this:
XYXYXY
XYXYXY
but instead (depending on how wide my window since I do not want to fix the width), what I get this:
XYXYX
YXYXY
I tried putting XY in a parent div Z<XY>, so that every pair of XY stays together, but that does not work. I also don't think clearing is necessarily the answer here, but I have tried all combinations without success.
Any help is greatly appreciated.
Try
white-space: nowrap
You may also have to change the floats to for your XY divs:
display: inline-block
If I understood the problem correctly, you don't need to use float. Display the divs as inline blocks: display: inline-block.
That will flow the divs as "character blocks" doing the wrap, you'll need to have a parent for the XY to keep the text together with the image.
An example: http://jsfiddle.net/D9BAv/
HTML:
<div class="figure">
<div class="picture"></div>
<div class="text">Example 1</div>
</div><!-- reapeated ... -->
CSS:
.figure {
display: inline-block;
}
.picture {
width: 3rem;
height: 3rem;
margin:auto;
background-color: blue;
}
If I have understood you correctly, maybe this will work. You could also use display: inline-block instead of float: left if you don't need to support IE8 and below.
http://jsfiddle.net/GQ8Uw/
HTML
<div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div><div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div><div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div><div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div><div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div>
<div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div>
CSS
.cont {
width: 100px;
float: left;
}
.x, .y {
width: 50%;
float: left;
}
.x {
background: #ccc;
}
.y {
background: #ecc;
}
Ok, I solved the problem. So I was wrong, it did have something to do with D3. Each time, I was essentially adding a child div to the same parent, and therefore the inline-block simply had no effect.
I ended up adding a "last-child" feature in my code like "d3.select(".figure:last-child").append(...", for both the picture and the text, and it works perfectly.
I saw the problem by adding a border around the parent div, and I noticed that all children were in the same div. I then found the solution from: What is the equivalent of jQuery's $(".cell:first") in D3?
Related
As you can see above, I cannot select the overflowed events on the calendar date. It looks like it's because I have the overflow:hidden/visible toggle triggering on the class of the calendar date: '#cell-shell'.
Here is the HTML code for that specific date:
<td>
<div id="09" class="cell-shell>
<div class="date-num">9</div>
<div class="event-wrap>
<span></span> <!--these hold edit buttons when editor is logged in-->
<span></span>
<div id="e1" class="cell-data">Event 1</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e2" class="cell-data">Event 2</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e3" class="cell-data">Event 3</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e4" class="cell-data">Event 4</div>
</div>
... <!-- pattern repeats-->
</div>
</td>
Here is my current relevant CSS:
.cell-shell {
height: 152px;
width: 152px;
overflow: hidden;
}
.cell-shell:hover {
overflow:visible;
}
.event-wrap {
position: relative;
display: inline-block;
font-size: 0;
}
.event-wrap:hover {
opacity: .5;
}
Is there any way through CSS or JS that I can prioritize the '#cell-data' elements? I need to be able to click on those events 6 & 7 and beyond, but once my mouse wanders out of the '9' '.cell-shell' box into the '16' '.cell-shell' box, '16' seems to take over.
EDIT: I added more information as requested by david. I thought it was irrelevant but perhaps not. I added the elements as well as the children below them. I also added in the event-wrap CSS
It looks like it's not because you mouse over 16, but because your mouse went between the event divs, thereby touching the 16 div between the event divs.
See the frame below where you're over an event on top of 16 just before you cross the gap:
The way that hover works is that if the mouse is over any sub-element of the element with hover, that hover CSS will continue to be used. But the moment the mouse leaves the border-box of the sub-element AND is outside of the element with over, the hover CSS will stop working.
I bet that if you're fast and accurate enough, you can get the mouse to clip over the gap between frames and keep it open. But your users might not find that useful. ;P
One method that might fix this would be making sure that the event divs have no space between them. That means no margins separating them.
In order to keep your current visual without having to add too much code, you can do something like the following:
...
<div class="event-wrapper"><div id="e1" class="cell-data">Event 1</div></div>
<div class="event-wrapper"><div id="e2" class="cell-data">Event 2</div></div>
...
...where the event-wrapper class looks like:
.event-wrapper {
margin: 0px;
padding: 0px;
}
Another method might be having the whole date box expand its size, but that might require some changes to how the layout works in order to keep it from messing things up.
Anyway, I hope that helps.
Use z-index to give priority to your cell-data elements over '16'.
Find a sample demo of it's usage below:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
Add CSS property z-index: -1 into your css.
.cell-shell {
height: 152px;
width: 152px;
overflow: hidden;
z-index: -1 // Here
}
.cell-shell:hover {
overflow:visible;
z-index: -1 //Here
}
Hope it will work for you.
So I have two elements, in my case an image and a button. I have the image at the top of the page and the button at the bottom. I want to have a div (or some other element) to display text, but I need it centered between the two elements.
<div style="text-align: center;">
<img src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" />
<div style="text-align: center; border: 3px solid blue;">Help</div>
<button style="position: absolute; bottom: 5px;">Hi</button></div>
JSFIDDLE
I'm using HTML and Javascript.
Look into flexbox for modern layouts:
a guide to flexbox
You could use flexbox, as suggested in other answers. This can be hard to wrangle sometimes though, at your first go at it. Though it's highly recommended to add flexbox to your tool belt.
To fix this perhaps more simply:
1.) You could set the height of the parent div (to whatever you want) and then set the margin-top on the element that you want to make centered. You can tweak it until it sits right.
OR...
2.) Alternatively: You could also set the position:relative; and the top: 100px (or whatever sets it into the middle. Setting the position rule will allow you to set top, or left, right or bottom. Without setting the position rule, you can't use those rules.
Create a <div></div> to hold your text whatever you want to put in it and then manipulate that with CSS.
Flexbox provides the best and the short solution from the traditional solutions.
You can find the working fiddle here https://jsfiddle.net/rr0e4qh7/14/
Your Html
<div class="container">
<div class="image">
<img src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" />
</div>
<div class="text">
Help
</div>
<div class="btn">
<button>
My Button
</button>
</div>
</div>
Here is CSS part
.container{
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
align-items: center;
}
.text{
display: flex;
height: 100%;
align-items: center;
justify-content: center
}
I have the following problem:
When the text I wrote is to long for the DIV, it breaks at unpleasant places, how do I set it at where to break?
Long text: Test: Hello My Name Is Tim4497
But it breaks after "Test:" so it looks like below:
Test:
Hello My Name Is Ti
Do you know how to make it look like:
Test: Hello My Name
is Tim4497.
after the line break, it has to line up after "Test:"
Also, if it breaks into multiple lines, the line spaces must be the same.
So far this is what I have but doesn't do what I wanted.
HTML-Code:
<div>
<span class="user_name" style="color:#FF7000">Test</span>
": "
<span class="user_message">Hello my name ist Tim and my english is terrible.</span>
</div>
How to solve this problem with JS or Html/CSS?
Thank you :),
tim4497
There are many ways to do it... Perhaps one of the cleanest would be through css table and table-cell. This will place your elements side-by-side perfectly.
Make your wrapper div a display: table and your spans display: table-cell. (don't forget to put your ":" inside a span too, for better visual)
<div class="wrapper">
<span class="user_name" style="color:#FF7000">Test</span>
<span>:</span>
<span class="user_message">Hello my name ist Tim and my english is terrible.</span>
</div>
CSS:
.wrapper {
display: table;
}
.wrapper span {
display: table-cell;
}
http://jsfiddle.net/jy7d431p/1/ - Resize the screen and see, or set a width to the last span...
You can use floated DIV's to achieve something like this effect:
<div style="width: 200px; background: blue;">
<div style="float:left; background: red;">Name:</div>
<div style="float:left; text-align: justify; background: green; width: 100px;">Some extremely long text would go in here that should wrap around several times and be flush with the first and last charcters.</div>
<div style="clear: both;"></div>
</div>
Floating can be a complicated topic if you don't know much about it, though. See All About Floats from css-tricks.com.
http://jsfiddle.net/eezpzj0L/
My problem is I would like a set of side by side divs. These divs can grow to an arbitrary height so vertical aligning is important. As suggested by another SO post, in order to tackle the vertical align problem I have a structure similar to this. Please help me fill in the blanks.
<div id="main-container">
<div class="formatter">
<div class="content1">
<!--- I am fixed at 200px ---->
</div>
</div>
<div class="formatter">
<div class="content2">
<!--- I have a rendered element. I don't know exactly how high or wide I am, but I'm not going to take up the whole thing. --->
</div>
</div>
<div class="formatter">
<div class="content3">
<!--- I have some text and just want to take up the rest of the main container less padding and borders ----->
</div>
</div>
</div>
Display within the browser:
CSS:
#main-container {
width: 900px;
}
.formatter {
display: inline-block;
vertical-align: middle;
}
.content1 {
float: left;
width: 200px;
}
You need to declare them as table-cell.
Lets try an unorthodox approach
Auto width and vertical alignment becomes very easy using CSS flex display
Code to get your basic layout, vertical and horizontal alignment (withour padding or borders or text-alignment)
<div id="main-container">
<div class="content1">a
<!--- I am fixed at 200px ---->
</div>
<div class="content2">bbb
<!--- I have a rendered element. I don't know exactly how high or wide I am, but I'm not going to take up the whole thing. --->
</div>
<div class="content3">c
<!--- I have some text and just want to take up the rest of the main container less padding and borders ----->
</div>
</div>
#main-container {
width: 900px;
display: flex;
}
.content3 {
flex-grow: 1;
}
.content1 {
width: 200px;
}
Fiddle - http://jsfiddle.net/n3CwB/
Now you may want to retain your original HTML structure if you want more control of the alignment of the content (like vertically align middle the content), but this should get you started with the basic layout.
I have an application in which I am kind of stuck.
i have created a widget which needs to be placed in such a way that it needs to auto place itself.
Eg:
I have something like this on a page, now initially all these are arranged perfectly(horizontally aligned), but as soon as the size of one of the component changes
Eg:
It becomes like this. What I want is it auto adjust itself to consume the empty spaces.
I played around with the css to make it float :left and display: block, by which I am able to align each component horizontally, but still I am not able to utilize the space on my page.
Any help is appreciated
a CSS only solution:
taken you want to have 3 "connection" items per row this should be your CSS:
#wrapper{
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
.itm{
display:inline-block;
width:100%;
border-top:1px solid red;
border-bottom:1px solid red;
margin-bottom:1em;
}
.itm:nth-child(3n+1){
clear:left;
}
and this your HTML
<div id="wrapper">
<div class="itm">
<h1>connections a</h1>
<div class="info">
<span class="label">server</span>
<span class="value">100</span>
</div>
</div>
[... copy paste as many "itm"s as you need]
</div>
See here a fiddle with "add more items on click" to see the result -- old -- http://jsfiddle.net/5FsLm/ -- old --
UPDATED fiddle http://jsfiddle.net/c2nkn/
This is definitely a perfect case for jQuery Masonry. The plugin can automatically arrange columns so they can fit together. Something like this:
html
<div id="wrapper">
<div id="list">
<div class="item"> ... </div>
<div class="item"> ... </div>
<div class="item"> ... </div>
<!-- ... -->
</div>
</div>
jquery
$(window).load(function(){
$('#list').masonry({
itemSelector: '.item'
});
});
P.S.: At the moment, the official website is down for some reason, I will put a temporary link here.
UPDATE: Temporary link for jQuery Masonry (actually from cutestpaw.com which has a local copy of it, so if you want to test it, you should copy the file instead of linking to it)
If you dont want much animations and need a script that very easy to understand and satisfies your purpose try jquery.popbild.js.
You can download the project from :http://funscripts.popbild.com/jquery_popbild/
Its mainly created to arrange element in the pinterest style for three columns(uses three divisions)
If I'm understanding you correctly, it looks like what you really want is a three column structure for these widgets. In which case it would look something like this.
HTML
<div class='three-column'>
<div class="widget">...</div>
<div class="widget">...</div>
<div class="widget">...</div>
</div>
<div class='three-column'>
...
</div>
<div class='three-column'>
...
</div>
CSS
.three-column {
width: 30%;
padding-right: 3%;
float: left;
}
UPDATED: http://jsfiddle.net/cBgj4