is there some good way to create a flow / swimline diagram without resorting to scripting or tables? I'm talking about showing different hosts sending packets (so hosts on the X axis, time on the Y and arrows to the destination host). It seems like too much elements for tables (especially the arrows spanning multiple columns either way), but on the other hand, divs would be hard to position in the right place horizontally (they'd have to be basically aligned to a specified "column").
Is there any good way out? Any helper frameworks? (I don't want to do canvas stuff unless really needed)
Edit: Forgot to add why I didn't mention images at all - some elements of the diagram should have :hover actions and should be clickable in the future.
I would suggest using PNG files with a transparent alpha layer (for overlaps), and positioning them absolutely with CSS. I haven't seen your overall layout, so I can't say that this is the best approach for your particular situation though.
Sample CSS code for a circle such as this: <a class="circle" id="myCircle" href="foo">Foo</a>
a.circle {
display:block;
height:100px;
width:100px;
background-image:url(/path/to/circle.png);
background-repeat:no-repeat;
position:absolute;
line-height:100px;
text-align:center;
}
code for an individual circle element:
a#myCircle {
top:234px;
left:357px;
}
The class definition creates a set of attributes for all anchor elements that share the class "circle". The anchor with the ID of "myCircle" would then be positioned with the coordinates of 234,357 in pixels from the top left corner of the parent element with position:relative; set.
Related
I'm trying to color code Hangul(Korean Language characters.) Each 'block' creates a syllable in Korean. Hangul is broken down into Jamo(similar to letters in English.) When you type the jamo/letters in Korean they often combine to create one syllable and the computer often treats that as one block. I want to be able to select a specific character reference among a list of character references that make up the syllables without using span. When I use span the character reference gets separated from the combined block. All I want to do it to know how I can select and color a specific character reference without separating it into a different block.
I have almost succeeded in what I want to do, but it requires using position:absolute; margin and z-index to make elements overlap to create the illusion of 1 block. But it doesn't nicely style the jamo to make it look uniform with the rest of the normal text. Also, I'm thinking there still might be a better way.
Character reference chart http://gernot-katzers-spice-pages.com/var/korean_hangul_unicode.html Below is an example of a list of mixed character references and regularly typed hangul. I can add spaces if I want to add space. When written like this, the hangul forms naturally into it's blocks due to using the chart from the link above. How can I select for example the ㅂ letter(ᆸ)
ᆸ
(last one in the list before 니다) and change it's color and not sperate it into it's own block?
<p>감사 합니다</p>
On display, it will look like this
감사 합니다
The way I can kind of make it work is with this code.
<style>
.element { font-size:16px; position:absolute; }
#element-1 { color:red; z-index:1; }
#element-2 { color:red; margin:0px 0 0 3px; z-index:2; }
#element-3 { color:green; margin:0px 0 0 0px; z-index:3; }
</style>
<body>
<div>
<p><span style="color:red;">네, </span>
<span id="element-1" class="element">ᄀ</span>
<span id="element-2" class="element">ᅡ</span>
<span id="element-3" class="element">ᆷ</span>
<span style="color:green; margin-left: 19px;">사합니다</span>
</p>
</div>
</body>
Which should display
네, 감시합니다
But the 감 doesn't look matched in style because I did span for each letter of 감 which puts each jamo in a relative part of each block and then used techniques to overlap them using z-index, margin and absolute position. The font-style when used as a seperate block is not the same when it combines naturally.
I think the easiest way to do things is if I can figure out how to select character references and change the color in CSS without creating a separate block.
In short, it's impossible with pure html/css.
As you know, Korean(Hangeul) jamos have different shape on diffent syllables. For example, ㄱ of 감 and ㄱ of 곤 has same code(x1100) but diffent shapes(the former is long at left, the latter is wide at top). There are 10 or more shapes for ㄱ(x1100) and the number of shapes are defined by font.
To fullfill your requirement,
You need to draw the jamo on canvas(or svg).
It's not easy but also not practical.
Nonetheless you want to challenge, see https://github.com/hatemogi/hallatype/blob/master/README.md
gg
gl
I want to put an some animation on my screen so I got a really cool idea and the programmed it. I have it ready and now I put it in a table(i really love tables) to create a "bordered" effect. It now sits in the bottom corner of my screen. i have used align="right" and gotten this far. Vertical-align or valign="top" are not doing anything. Can you help?
Not knowing the actual markup, e.g. possible containers like a div where the table is located, one approach can be using absolute positioning (just using the selector table as example, better use a class):
table
{
position:absolute;
top:0;
right:0;
}
Fiddle
To display the table to the right, you can use float:
table
{
float:right;
}
Fiddle
but question because of missing markup / CSS in the OP is, why the table is currently displayed at the bottom. In case this is a misunderstanding and it's not the table that you want to position, but content in a tablecell - <td> - you can consider to update this in your question to avoid confusion.
I have an image, on which I want to place links, which could be either text or an image. Pretty much what Wikipedia has here for example (the map of Germany and its states): http://en.wikipedia.org/wiki/States_of_Germany
Back in the 90s I would've used the map tag to create clickable parts on the image.
I've looked at the source code of the map on Wikipedia and noticed that all the states of an absolute position. So is there an easy way to implement such a thing? Or do I have to use, for example, Photoshop to check for the absolute position and hardcode it in CSS/HTML?
As you already noticed, Wikipedia uses <div>-elements which are positioned over the image. One way or another you would need to provide the (absolute) coordinates for the texts you want to place on top of the image.
You can try to fiddle around to get the correct coordinates or use a(ny) image editing application to exactly find the required coordinates within the image.
Wikipedia uses some structure like this
HTML:
<div class="container">
<img src="myImage.png" />
<div class="text1">Text1</div>
<div class="text2">Text2</div>
</div>
CSS:
.text1 {
position:absolute;
left:50px;
top:100px
}
.text2 {
position:absolute;
left:200px;
top:50px
}
(Except that they directly put the CSS styles in the HTML elements...)
See this jsFiddle for an working example.
I guess you need a HTML map (example http://www.w3schools.com/tags/tag_map.asp) plus some javascript to include the text over it.
Please take a look to the following question, it might help you:
HTML, jQuery : Show text over area of image-map
If you are creating something similar in the link you mentioned, you gotta be pin pointing those positions. Isn't it? absolute positioning is good to go in that case.
But if your scenario does not require you to put those links in the exact locations on the image, you can try something like this.
CSS//////////
div.back{
background:url('path/to/your/image.extension');
width:/*width of the image*/;
height:/*height of the image*/
}
This div with class back will just work like the way you want. Then put the links inside the div and the links will be displayed on top of that image.
Check out this fiddle.
If I have two layers on a page, split horrizontally, with the second layer overlapping part of the first layer, is it possible to make it "click through"?
I have links in the first layer, which the second layer overlaps, which stops the links from being clickable. Is there a way to make the layer display, but be click through, while still having it's own links clickable?
edit:
Here is an example, with html and a stylesheet.
The test links become unclickable when inline with the header in Layer3, but below that they are fine. Is there a way to rectify this?
<title>Test</title>
<link rel="stylesheet" href="test.css" type="text/css">
<body>
<div id="Layer0">
<div id="Layer1" class="Layer1">
<h3 align="left">Brands</h3>
</div>
<div id="Layer2" class="Layer2"><h1>TEST</h1>
<div id="rightlayer">
TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>
</div>
</div>
<div id="Layer3" class="Layer3"><h1>Ed Hardy Auctions</h1>
</div>
</div>
</body>
</html>
And the css
#Layer0 {
width:100%;
height:100%;
}
body {
margin:10px 10px 0px 10px;
padding:0px;
color:#999999;
font-family:"Trebuchet MS",arial,sans-serif;
font-size:70.5%;
}
#Layer1 {
position:absolute;
left:10px;
width:200px;
margin-top:17px;
font-size:1.0em;
padding-left:12px;
padding-top:8px;
}
#Layer2 {
background:#fff;
margin-left:199px;
color:#000;
}
#rightlayer {
float:right;
}
.Layer3 {
position:absolute;
top:67%;
padding:20px;
width: 100%;
}
Thought I would update this as I'd been struggling with this for a few hours and think i've found a solution. Looked into using Jquery but the CSS property:
pointer-events:none;
...did exactly what I wanted.
It is not possible if you want the divs to stay in their current x,y, (and most importantly) z - only the "top" layer is clickable.
Addendum post OP edit:
Think of CSS layout as if you were physically working with bits of paper (this is much easier to visualise if you give all your "layer" divs a different background colour). The rendering engine cuts out a bit of paper in the dimensions you give it (or it works out) for each element it finds. It does this in the order it encounters them putting each bit of paper on the page as it goes - the last item is going to be on top.
Now you've told the rendering engine to put your 3rd div in a position where it overlaps the 2nd. And now you expect to be able to "see" the covered content. Wouldn't work with paper, won't work with HTML. Just because it's transparent doesn't mean it's not taking up space.
So you have to change something.
Looking at your CSS and markup (which honestly could be cleaned up, but I'll assume there's other mark-up you're not showing us which justifies it) there's a couple of easy win ways:
1). Set a z-index of -1 on Layer3 - z-index is how you can change the layering order from the default (as encountered). This just moves the entirety of Layer3 below the rest of the page so what was hidden becomes exposed, but also vice versa depending on content.
2). Change the width from 100% to e.g. 80%, or more likely given your use of pos:abs set left:0px and right:199px; (I'm guessing that padding-left on Layer2 is an intended column width?). The cost of this is that your Layer3 is no longer 100% width
3). Google "CSS column layout" and find a pattern that reflects what you need and adapt that. Every CSS layout which can be done has been done a million times already. Standard techniques exist which solve your problems. CSS is hard if you haven't built up the experience, so leverage the experience of others. Don't reinvent wheels.
It would be a mammoth job, but it is possible.
You would need to capture the click event on the top layer/div, and find the cursor x-y position.
Then find all links in the layer/div underneath the top layer, and see if it's position on the screen falls around the current mouse position.
You could then trigger the click of the matched link.
I would use jQuery (if you are not already) for this and then re-post with a jQuery tag if you run into troubles.
It is hard to tell without seeing some code.
You could try setting z-index on the bottom layer but that works on elements that have been positioned with absolute, relative or fixed (position:absolute).
edit after seeing code:
Add position:relative; z-index:100; to #rightLayer.
Or you could remove the width:100% from .Layer3.
You may want to refactor your code and go with a two column layout for #rightLayer and .Layer3.
css
#Layer0 {
width:100%;
height:100%;
}
body {
margin:10px 10px 0px 10px;
padding:0px;
color:#999999;
font-family:"Trebuchet MS",arial,sans-serif;
font-size:70.5%;
}
#Layer1 {
width:200px;
margin-top:17px;
font-size:1.0em;
padding-left:12px;
padding-top:8px;
}
#Layer2 {
background:#fff;
margin-left:199px;
color:#000;
}
#rightlayer {
float:right;
}
.Layer3 {
}
html
<div id="Layer0">
<div id="Layer2" class="Layer2">
<h1>TEST</h1>
</div>
<div id="Layer1" class="Layer1">
<h3 align="left">Brands</h3>
</div>
<div class="content">
<div id="rightlayer">
TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>
</div>
<div id="Layer3" class="Layer3">
<h1>Ed Hardy Auctions</h1>
</div>
</div>
</div>
I'm assuming from the example that the links in the rightlayer are the only links that need to be clicked, and that you don't have links in the other layers. If so, you could solve the problem by changing the z-index order of the divs.
Layer1 and Layer3 have position absolute, so if you add a position style (absolute or relative) to Layer2, you will be able to pull that div to the front, also pulling the rightlayer div to be in a higher layer than Layer3.
I added the following to the CSS:
#Layer2 {
position: relative;
z-index: 1;
}
From what I can see that leaves the current page setup just the way it is, but pulls all the elements (including the rightlayer with the links) to the front, so you'd be able to click all the links in it.
For debugging purposes I suggest adding background colors to all the different layers to get an idea of the z-index order of the different layers. With the background color in place it was quite easy to spot the layer that was falling over the links, but also to verify that the new z-index order makes the links available.
Hope this helps!
I submitted a bug years ago to the Firefox Bugzilla saying that there was this very bug in Firefox.
I was told by a Mozilla engineer that this was not actually a bug and that it is the correct behaviour as per the HTML/CSS specifications.
Unfortunately I can't find the original bug to reference as it was about 6 years ago.
The reason I submitted the bug was because I could click through the top div onto the links below when using IE (6 I think) but Firefox would not let me.
As usual, it turned out hat IE had the incorrect implementation and Firefox was working as intended by the spec.
Just because a div is transparent does not mean you should be able to click through it.
I'm not sure how you could get around this with JavaScript or CSS. I would take a step back and have a re-think about what you're trying to achieve and how you're trying to achieve it.
Greg
Can you not simply set the width of the div to auto (the default for absolute positioning - i.e. just delete the width:100% from .Layer3).
That way the div will only be as wide as is necessary, rather than unnecessarily overlapping the links.
In one of the recent Stackoverflow podcasts, Jeff talked about having a single image file having all of those tiny images that are all over a page and then cutting it with CSS so that all the images get displayed correctly. The whole point is to reduce the number of server requests so that the page gets loaded faster. I was like "wow, that's really cool, I could really use this in our product".
My question is: How is this done with CSS? I need to load the images with background-image, but then how do I specify the offset of the sub-image in the large image? That is, suppose that there is a hammer icon in the large image at (50px, 50px) and it has a size of 32px * 32px, how can I force the browser to only display that bit?
Basically you use your single image as the background image, but move it off (to the left and up) by the offset of the image you want to display. E.g. to display the hammer icon:
.hammer
{
background: transparent url(myIcons.jpg) -50px -50px no-repeat;
}
But as far as I know, you have to make sure that the element that's using the background image has the correct size (e.g. 32x32 px).
A search for CSS Sprites will give you more information.
It's called css sprites.
I's basically an old trick used in games programming where you load a single bitmap containing all the "states" of some item you need to draw, the advantage is that this way the image get's preloaded and there's no delay when you need to actually use it, in the case of css, it's normally implemented by using the image as background to the element, and applying different offsets and bounds on :hover, :active and "normal" classes.
There's more info in the stackoverflow Blog
Here's a nice generator: http://www.csssprites.com/
You know the answer ... ask google in this case look at the source of the google search results page, with a tool like firebug and you will find
.w10
background-position:-152px 0;
}
.w10, .w11, .w20, .w21, .w24, .wci, .wpb
background:transparent url(/images/nav_logo4.png) no-repeat scroll 0 0;
border:0 none;
cursor:pointer;
height:16px;
margin-left:8px;
vertical-align:bottom;
width:16px;
}
So all w10, w11, w20 etc share the same image (nav_logo4.png) all have fixed hight and width. and all specify (different) backgroup-position's.