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.
Related
I have 3 separate graphical elements; the header, the footer, and the content-background. The content background is repeatable, and my intention is to allow the page to dynamically adjust without breaking any flow of the page. I've tried to achieve this by applying the 'header image' to a div at the top of the page - the 'content-background' to the container (of both the content area and the menu), and finally the 'footer image' at the bottom of the page - outside of the container.
It seems to work well when I have very limited content on the page - however, the moment I put a of content in the content area, it just hangs out over the edge of the images and looks awful, as opposed to repeating the background and nudging the other divs down.
I don't want to introduce overflow:scroll, or anything like such - and I'm desperate to try and avoid JavaScript. I'm sure I've made a flaw somewhere in my thinking, but I'm not too sure where. I have a feeling that I need to do something regarding positioning - and changing the heights of certain divs (container, content are still defined as the base; but whatever I set it at, it either has no effect or causes the page to look bizarre).
Instead of copying-pasting the walls of texts, I've posted the address to a temporary section on my website.
It seems like you have a few issues. Setting a height on #container is a problem, and not clearing your floats of your #content and #rightbar elements is another problem. My belief is that fixing both of those things will give you the result you're expecting.
From what I understand from your question, you want your div tags to become bigger as the text gets more and more.
The solution is simple: Use min-width instead of width. it will adjust itself
I think the title explains it all but this is what I'm trying to do:
I have a site that is center-aligned and I want to have a fixed (or sliding, however you want to describe it) move down the page as a user scrolls. I am able to get this to work using jQuery when I define the 's position as absolute but obviously that creates it's position relative to the whole browser window. Relative to the content, it should be 980px to the right, but using Absolute it's somewhere in the middle of the page and does not stay in the same place on the page when the window is resized. Using position:relative puts the in the right place but does not allow it to move when the page scrolls, it scrolls with the page.
Does that make sense? I see all sorts of examples using absolute positioning which would work great if my site was aligned to the left but it's not.
Ideas?
You can see my site as a work-in-progress here: http://cdn.twelvestops.com/wordpress_one. Feel free to poke in the code and whatnot. (and for the record, the theme designer isn't helping much.)
Note: I know that my site isn't centered using auto margins but as if it was all text using the .center class in the CSS.
This looks a lot easier than I am probably making it sound. I have a content div, 600px wide. It is constantly, for the sake of this argument, in the middle of my page. It is set in the middle using
margin: 0px auto;
In the top right hand corner of this div, I have set a second div, which contains options (it will be share options, such as Facebook, Twitter, etc.). It is currently controlled using CSS, no Javascript. When my cursor is away from the Options div, it remains as a button. When my cursor is over the Options div, it expands. I want for it to expand over my content, but for my content to still wrap around the original (in this case) 50px square box.
I have two test pages currently uploaded:
Test 1 - This displays the Options div in the correct place (set using float: right;), but when I roll over it, the content wraps around the reiszed div.
Test 2 - This makes sure my div floats over my content, but it is set using position: absolute, and it remains at the top right hand corner of the page.
I have missed something, I know I have. Are there any suggestions as to how I can get it working together? I would prefer solely CSS, but I am not opposed to Javascript, either standalone or using jQuery (I'd prefer that, since other scripts I use in my site use the jQuery framework). Code is 100% inline for this example, CSS is using and not tags, so if you wish to look, it's all there.
Test 2 would be perfect if you set position: relative; on the containing div and then added a spacer div that remained in the flow of the document: http://jsfiddle.net/sl1dr/GyvM4/
use z-index with absolute postion. Set the z-index to be higher than the content.
Try this fiddle
It's 1:30am where I am so this is not my best work. Hopefully it should be cross browser compatible.
note I changed #options to options for re-use.
http://jsfiddle.net/7T2c6/ I got it with no extra DOM. However I did move the location of the anchor tag. Outer div no longer provides style, just spacing. Inner elements are position absolute and provide all style. Just my variant. :)
Use position:absolute without defining a top/right/left/bottom value, and add a z-index value. This will keep it in an absolute position but since it's not really specified, it will remain at the required location, causing it to overlap other objects. Play with margin to move it around.
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
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.