http://bartoosterveer.nl/stageverslag/
As you can see the first page that loads is completely responsive, when resizing the text pushes down the portfolio section without any problems.
However when clicking "leerdoelen" "over jkv" or "werkwijze" it gives me an instant scrollbar, or a scrollbar when resizing. I want it to look like the first page.
Do not use the object an element to embed your content. You can do it with jQuery if you must (http://api.jquery.com/load/).
But I would stay away from that altogether: if you add content this way to an element without using fixed dimensions, its parent might not be aware of the size of the content and will not be able to make it fit (hence the scrollbar on overflowing content).
I would suggest to keep using jQuery for transitions but keep all of the content on a single page. Much easier for you.
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.
the layout of my html page has a fixed div on top of the page. the content div then has a margin-top to compensate for the fixed div.
However, when the content gets scrolled down, if I do a search on page, the browser would sometimes show matches that would be underneath the fixed div, i.e. invisible.
For example, go to http://mincovlaw.com/services/worldwide_enforcement_checkup, scroll down a little bit, and do several searches for "know". You will see that the one closer to the top of the page will be found but will be hidden underneath the fixed div.
Is there a better way to achieve the same looks, while retaining the functionality of a search that does not get hidden?
Simple answer: no, because that's exactly what you're doing: hiding content. Think of it as if content ceased to exist, that's exactly what you're doing and what you're looking for. Anyway, I doubt many people will search in the page, it's not THAT common
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.
quick question. I have a tabbed interface for my site but I have all the parts of the site crashing into each other. How do I achieve a fluid layout where it simply resizes when the display is smaller. I read a few articles # alistapart and made my containing div relative to the browser window and every other div within the d container relative and still nothing. any clues on what else I should be trying?
alt text http://www.thelawyerschronicle.com/images/siteprob.jpg
The two biggest problems I see are the banner ad on top of everything else, and the tabs running over to the next line.
The tabs seem to do that simply because you have too many. You'll either need to make them smaller/decrease padding, etc. or put fewer items in the menu.
It looks like the banner isn't positioned correctly. Margin/padding?