I've got a bunch of elements coming into view on page load from the bottom of the page. So it looks like they're flying in from below and settling in their proper places. Right now what I'm doing is this, having a base class for all the elements like Row, in which I set transition all and position to relative. Then I have another set of classes Starting and Resting. In Starting I just set some position for top like 1000px so it's out of window bounds, then in Resting I set it to 0px and in javascript switch the classes one by one. This works however this seems very backwards, if the user has a 4k monitor or something it would show up, and also the scroll bar shrinks as this goes on since the elements are moving up a page. Is there a more elegant way of doing this?
PS. I understand that there is a work around for each issue I mentioned, like also maybe animating transparency so it's not visible at all on any monitor or setting positions to absolute and reserving the space on page so the scroll bar doesn't go crazy, however I'm not looking for hack like this (unless there is no other way). So what's the most straightforward and elegant design for this?
Related
i have made in my asp.net applictation a small div container, which is draggable (in this way: Make jQuery-ui draggable handle cover entire page).
I want to make clear, that the normal user knows instinctively, that he/she can drag this container around the page.
I have set the cursor via CSS to cursor: move;.
But with this solution the user only gains the knowledge while moving the mouse over the small container.
How can I make sure, the user knows from the beginning, that this small div is draggable?
You can set this kind of image on div which is draggable. This image will always visible so user can get to know easily this div is draggalbe and of course by the css you can put it center over the div. and image will type of png so it will not look ugly and you can apply transparency that hand image so contant of the div can visible even image is over the div.
and yes there are other suggestion also given by #Prabhavith and #Matt Lowe..you can also work around with that.
The only way I've seen this done that makes any sense to me is to have a faintly written message with the word "Drag" and arrows pointing through the four ordinals centered in the div.
Like the image in the linked question, you can make your draggable div look more like a traditional desktop window. Users are used to dragging around windows that have a title bar across the top and minimize,mazimize, and close buttons, and a border with an optional bevel. Approximating this style will help communicate draggability.
Likewise, having the border around the div grow darker or highlight will help communicate draggability as well.
You can go through this site http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/DragPanel/DragPanel.aspx
I've got a design in which the navigation is tilted 10 degrees. It's built using an unordered list and css graphic elements as backgrounds on 'a' classes and display:block to show the whole graphic. Like y'do.
Pretty standard, except when I add the transform to the unordered list, the page scrolls about 1000px or more beyond the end of the page. I've tried adding the transform to the a links, to the list item, all with the same result of page scroll. Visually, transforming the unordered list is what I want to do. Other than the extended scroll, it looks awesome and works as intended.
(Without the display block or when using straight text, the transform works without issue and no extended scroll is added.)
Any ideas for keeping the page scroll from going haywire like that?
Thank you!
Try adding overflow:auto; to the list element in your CSS, and the scroll insanity should (fingers crossed) sort itself out.
I need some help. I am going to school for graphic design and am building a website as a trade of services.
I designed the template in photoshop and then put it through PSD2CSSOnline.com which spat out the code and spliced images.
I was able to edit the HTML and CSS enough to get the two pink lines across the top to stretch across the browser, but I have no clue how to get the bottom ones to do the same since the text on different pages will vary and I assume the div has to be outside of the wrapper to stretch the 100% width so my problem is how to do that AND STILL MAKE IT RELATIVE to the div inside the wrapper?
Any help is appreciated, I have spent hours trying to figure this out!
For reference I have uploaded it so you can look at the source code and visually see what I am talking about. To view it go here: http://bellairo.com/anytime/
i'm not very familiar with psd-css kinda programs so this is a bit hard to understand... for the top purple lines it seems like you have 2 images: 1 is 960 x 30px Layer-13.png, and then there is the 24 x 30px Layer-12-rx.png that repeats into infinity in both directions underneath that. It seems the simplest to get that same png image - Layer-12-rx .png to do the same thing at the bottom of your page - repeat this image underneath the one that is already there: Layer-7.png.
As far as your question about the lines being relative to your content: I notice that almost all your divs have position:absolute applied to them. Be careful of this because when that attribute is applied, it removes the div from the normal flow of how css positions things and then you have to start specifying everything, instead of divs just following upon each other naturally - which is good for things like having your bottom lines just naturally positioning themselves underneath your content, however much there is. The div in which your footer lines are sitting also has this position: absolute applied to it, which means you are always going to have to tell it exactly where to sit for every page. A start is to change it to position: relative and then play with the left: and top: values until it's in the right place. Then it should position itself underneath the text every time.
Good reference is W3 schools - for positioning info check this out: http://www.w3schools.com/css/css_positioning.asp
EDIT*the issue apparently comes down to the fact that, i need to use relative position on the large image, so i can adjust the top value. this causes the thumbs to be put on top of the main image. When i remove the relative positioning of the main image, the flow looks fine, but the top positioning is disregarded- i sort of need both to have the dynamic manipulation of this app im developing*
I wish I could understand why this happens like 90% of the time I go to code div layouts.
You have content in your div with a certain height, and then you have another div directly after it - and somehow it just goes right on top of the first one.
I wish I knew where the problem was, but I can't figure out what CSS is the cause.
Anyways, if you care to take a look, this is the sandbox of the issue I'm having:
the reference is changing because i keep updating it to check sorry.
http://www.drewswinson.com/DP/
I'm making a dynamic jQuery gallery viewer and the thumbs just don't want to put themselves below the image.
It happens all the time though; is there any reason content inside a div would allow subsequent divs to not be placed below the content its supposed to be filled?
You problem is the position: relative attribute on imageDiv.
It pushes the image down from where it should be. If you remove that, the static flow of the page will be used, which is what you want in this case.
I'm having one of those pull-my-hair-out moments that has become an all consuming obsession at work and I can't figure it out for the life of me.
I'm working on a site where I have a repeating background image (gradient of blue) and I need to put another image on top of that which goes beneath my "container" div. The large image that I'm having to put the "container" on top of has designs that appear to pop out of the sides.
The trouble that I'm having is this: when the user shrinks the window size, my buttons (that are within the container div) get all jumbled up and go one on top of another when I do this in IE and Firefox. I would like it to stay in the same spot on top of the large image in its spot despite the size of the window.
I think it has to do with absolute position, something that I'm not too familiar with, but I'm wondering if this is possible. I have also never used tables and have just used div tags to create sites. Fairly new at this - just have been designing websites for about a year now.
Help!
I am answering this without seeing an example, so bear with me.
It sounds as though the container div does not have a width assigned to it.
Since the container div doesn't have a width, it is shrinking and expanding causing the buttons to jumble up. Also, make sure that your buttons and such are positioned absolutely inside of your container div. Your container div must have position:relative; set in its style in order to absolutely position items inside of it. However, it sounds as though you have your positioning already set accordingly, it is just worth re-mentioning.