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.
Related
Ok, so I've got an issue.
Working on a simple site, which has a regular background, and an opaque main container, that also includes nested elements inside of it. Because of the nature of the site, the main container must be able to grow vertically, should the content within the body become larger. Basically, the main container must dynamically grow to fit all the floated content within.
My problem is this.
I can do this one way, where I nest elements in a main container div, and then change the opacity of that main container div to match what I need. This is easy. the problem here is that the opacity of the other elements nested within is inherited from the parent main container. I can fix that, but I do not know if it would be semantically correct for the site, or if the workarounds for alpha filters will be the best workaround.
Another option I have is creating a background img that is set at 90% opacity, and then tiled vertically. The issue here is that I HAVE to specify a height, which does not allow the main container to stretch dynamically in a vertical direction. This takes care of the semantics problem, and the opacity problem, without too much cross browser manipulation, but I don t know how to make the main container div resize itself dynamically. I'm sure there is a solution to do this with javascript or some other programming language, but that's not really my forte.
So I guess what I really want to know is this, Should I go with the first option, and use the browser manipulation for opacity, or is there a better way to be able to dynamically resize the main container div so that the image is tiled to the specific height which the content takes up?
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 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 have this website.
The div container contains a background with a grungy look, and the body contains another background that is repeated on the x coordinate.
If you view the site you'll see whitespace on the left and right side. I am wondering how I can set the background images to expand based on the screen resolution. Would it work to set a width based on percentage for each div?
To my knowledge, CSS does not support scaling background images, which is disappointing to say the least. Long story short, you'll probably have to fake it with a fixed-position, z-indexed img tag. That, or what you did: a large image with a background-repeat.
I dont see any issues with what you've got in FF3/IE6/IE7 and chrome. only issue i see is the transparent png in ie6 with the ugly gray behind it.
ie6 I gotta fix but what the customer wants is for the with of the page to size up based on the users computer resolution
Unfortunately, you can't scale the image itself.
What you could do would be remake the div structure so that the inner div contains the center of the grungy background and the sides were tiled through two separate divs. You could then recut the center piece to tile both vertically and horizontally and give it a width that is a percentage of the window size. You could keep it from getting too small via javascript.
This is not an optimal solution, but if the client is set on having it scale with the browser window, this might accomplish it for them.
thanks for all your answers, when i said white space i didnt mean actual white space what i was refering to was that the entire container div wasnt sizing (width wise) towards what the users computer resolution was. and since allot of the divs are set with a background image there is no css code for setting the width on the image but i guess it would work on the divs. but thankfully after talking with the customer he changed his mind and doesnt want it anymore :)