I'm trying to implement a "spider diagram" or "mind map" in CSS.
Essentially, what I'd like, is a ring of boxes around a central box.
Ideally, these would all just be DIVs that I could add more/less content to as I saw fit (and, hopefully, manipulate using JS). They don't need to be draggable or anything like that.
Unlike the diagram, they don't need to have the grey lines etc. from the outer topics to the name of the mind map - I'm really not bothered about that.
Firstly, I really don't know where to start. I guess I'd have to use absolute positioning for each box? That probably wouldn't be too bad if my audience were using the same resolution and browser but that won't always be the case.
So, my real question is, how do I set up DIVs like these that will stay in the same place on different resolutions and in different browsers? Can I use absolute positioning within a relatively-aligned DIV or something?
The browsers I need to support primarily are IE10, Chrome and Safari. So I guess I should be designing for IE10 as a base?
Thanks in advance,
Create fixed width / height div and place other divs there.
<div style='width: 1000px; height: 1000px; position: relative;'>
<div class='note' style='position: absolute; left: 50px; top: 50px;'></div>
<div class='note' style='position: absolute; left: 150px; top: 150px;'></div>
<div class='note' style='position: absolute; left: 350px; top: 350px;'></div>
</div>
Since wrapper is constant width, so inner elements will stay in same position, no matter of browser window size.
Related
I know that this is something we would use JavaScript for, but I was wondering if it's possible or planned in next releases of CSS maybe.
I'm working on a little platform and there's a lot of relative/absolute positions. Content is dynamic so it's not a best solution to specify the static width and elements must be centered somehow. I made it possible with almost no display-errors using CSS only, but it would be great if there is something like this in css.
Today's code (SASS):
element
position: absolute
top: 100px
right: 50%
margin-right: -50px (static width in %/px/em/rem/...)
Something I was thinking about:
element
position: absolute
top: 100px
right: calc(50% - this.width / 2)
So, to not make this question too broad. Do you know some way to implement this kind of behavior in today's CSS? And if not, do you know if there are some plans to implement it in feature releases?
No, it is not possible today, to reference a property of it self.
Will it come? .. Hope so
In your particular sample, centering an absolute positioned div that has dynamic content, you can use transform: translate
Side note: CSS has a lot of properties, where, when combined, one can still achieve similar effect, as with below sample
div {
position: absolute;
top: 100px;
border: 1px solid;
right: 50%;
transform: translateX(50%);
}
<div>Centered with dynamic content</div>
So basically I have in my HTML(using bootstrap classes) a page with products that are showcased using the thumbnail and caption classes. Over the picture of the products there is a ON SELL(rounded red tag). I have given to this red circle element position absolute and to the col-sm-9 position relative. Problem is that when I resize the browser the ribbon that comes over the thumbnail is not responsive.
I know what this two positioning properties mean and how they work in respect with each other. But it looks that in practice I`m missing on something very essential.
I will paste my html and css over here and if you can give me your opinion I`ll be very glad to learn this the proper way and give you my thanks :)
Here you have the whole code: http://www.bootply.com/8TMS5WgWt2
In your CSS for .sale change your positioning value of left: 149px to right: -19px. This will help it better position as the width changes. I would also recommend moving your position: relative off the .col-sm-9 and onto .thumbnail
In your css, replace left for right
top: -19px;
left: 149px;
With left, always it calculate from left position.
top: -19px;
right: yourpixels;
Here is an example with right: 0px
http://www.bootply.com/EzRZnhA2EC#
Please excuse me if there are any mistakes in the following code or with my question, I don't know much about code but am learning :). Sorry for spaces in links and lack of these things - < - really struggling posting code :)
On my website http:// second to nature .co.uk/en/ I am trying to create background images with ivy down both sides of the website. Is it a prestashop website.
I did manage to achieve this with the following css code, however it would not work in ie 6-8 - because those browsers do not support css3.
background:url(http:// second to nature.co.uk/img/backgroundleft.jpg) top left fixed
no-repeat, url(http:// second to nature.co.uk/img/backgroundright.jpg) top right fixed no-repeat;
Therefore after some researching, I tried to create the wanted effect with two divs:
<div id="container">
<div id="inner-container">
</div>
</div>
And then use the following css to implement this.
And as you can see if you visit the site, the left image is shown properly, but the right does not show up.
#container {
background: url(http:// second to nature.co.uk/img/backgroundleft.jpg) repeat-y;
position: fixed;
top: 0px;
left: 0px;
width: 130px;
height: 1000px;
}
#inner-container {
background: transparent url(http:// second to nature.co.uk/img/backgroundright.jpg)) repeat-y;
position: fixed;
top: 0px;
right: 0px;
width: 130px;
height: 1000px;
}
Can anyone see where I am going wrong or have a fix? Help would be much appreciated.
Many thanks
You have a typo in your CSS:
url(http://secondtonature.co.uk/img/backgroundright.jpg))
There is a double )) at the end of the URL where there should be only one.
HOWEVER ... your HTML is all messed up, and there's a better way to do this. Firstly, you have a whole bunch of meta tags and other asset links inside your body element, when they should all be up in the head.
A better way to do this would be to wrap two divs around your content (they would be 100% width by default) and place the bg images on each of those.
You could use Modernizr and then us CSS3 border image. Then the border image will show up in IE6, 7 and 8.
A shame that you have IE6 users to worry about. It's such a bad, buggy and unsafe browser.
http://modernizr.com/
I want to create a div as Facebook's chat bar. I want to see that div however scroll the window up or down. Do you have any sugesstions about this?
Note: I have Devexpress aspx tools licence.
Çağın
use css:
position: fixed
simple as that
Use the position:fixed style on your div. E.g.
<div class="swimming">Content</div>
Css:
.swimming { position:fixed; left:0px; top:0px; }
The correct answer is with CSS position:fixed;.
However, be aware that IE6 doesn't support position:fixed;. This may not matter to you (the few remaining IE6 users are used to sites being broken by now).
More importantly, many mobile browsers don't support position:fixed; either. This is more of an issue for a modern site. The reason they don't support it is because an element that has a fixed position could cause major layout issues on a smaller screen. Most of them treat 'fixed' as 'absolute' so that it is still outside the page flow, but can be scrolled.
See here for more info: http://www.quirksmode.org/m/css.html - it's got a table which shows support for this feature (and others) in the various mobile browsers. (but note that the mobile market is changing rapidly and this table may not be bang up to date)
I believe postion: fixed is the CSS style you want.
<div style="position: fixed; top: 10px; left: 20px; right: 20px; height: 50px">
content
</div>
I am using this to position my menu, it works across all browsers but the links (anchor tags) in the rest of my page stop working.
The menu is in the perfect spot but none of the links or image-map will work in most browsers
Sorry I am new to this
could you peek at the source code -thanks
I am really trying to get this but i am sure stuck.
Success! - Removing the bottom:0 worked - thanks to all who helped. I am most grateful!
<div align="center" style="margin: auto; left: 0pt; right: 0pt; bottom: 0pt; position: absolute; top: 197px; z-index: 1;">
Remove the "bottom: 0pt" and everything is fine for this problem.
But one thing, you should put the styles for this div in your css file ;)
Okay...without code it's next to impossible to give you the right answer, and since your (x)html defines what CSS gets called, showing us one part of the puzzle isn't enough. Still...
1. Have you remembered to place a `position:relative` on the parent element of whatever you're positioning absolutely?
2. If you're positioning the elements to the same absolute position, there's a good chance that they're going to overlap and be hidden by the upper-most/last of the positioned elements
Use semantics and established techniques to help yourself learn:
howtocreate.co.ukCss play.co.uk...and so many others: Google search results
I think that removing the bottom: 0pt; should do the trick?
You were specifying both top:0 and bottom:0 so the div was stretched larger than the menu height.
Because absolute positioning takes it out of the flow and puts the div in its own layer, it was covering the links.
Besides removing the bottom:0, you can remove most of the other styles too.
<div align="center" style="position: absolute; top: 197px;">