okay I have a 100% width layout here and I have a sub menu on the left and content on the right side of the menu which have links which cant be clicked on because the left side sub menu has a z-index of 99 so I cannot click on the links on the right side content area. My sub menu is setup so that the overall area is 1000px in the center then auto right and left margins so the sub menu sits on top on the main content area. I tried to reposition without using the 1000px in the center but was not able to get it to work so that it stays on the left side of the content. I tried using pointer: none css for the submenu which allows the right side content links to work but then disables the sub menu button links.
Basically what I need is a solution which would allow both layered divs to have links on them...I dont know much javascript but is there any solution that will work on all browsers?
Here is the link to the site design http://liquidchrome.net/price_transfer/terminal-contacts.html
you can see that only the very bottom links on the right side content area work and none of the top links are clickable.
thank you
The HTML structure you are using seems to be the problem. It seems overly complicated when it doesnt need to be.
I suggest you restructure the basic layout of the core elements like in the link below
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
Related
iam currently trying to create a "split view" site with a scrollable navigation bar on the left side and a content area on the right.
The navigation area on the left contains a search field (with a submit button) and below there is a scrollable tree view similar to windows explorer.
I looked around and found solutions for scrollable divs and divs that fill the rest of the height in a window but combining those gives me some headache
Iam looking for a solution without absolute positioning because the created page will be embedded somewhere else where this would break things.
Here is a demo of what i tried so far: http://codepen.io/anon/pen/Aesgk/
As you can see, instead of 2 scrollbars as intended, i get a third one on the right because the navigation area's height.
Thanks in advance!
Try this CSS
height: 100%
overflow: scroll
When developing a site in HTML/CSS how do you position divs on a page to hold content in place and exactly where you want them. Not just in a straight up in down manner. Is there a unified method/technique that everyone uses to achieve this placement? Or more generally how is it done?
Example: Here is an image of an example page I'm building with a container div and 5 other divs inside it.
IMAGE: http://go-dl.eve-files.com/media/1310/image.png
I was able to place the header div at the top, I was able to place the sidebar div below it and to the left (floated left), and I was able to position the content div below the header and to the right of the sidebar div (floated right). Now I have put the footer div in but the footer floats under the sidebar but also to the left of the content div. NOT under it and at the bottom of the page.
There are so many possible options/values in Dreamweaver to a assign to each div like box, float, margin, position, padding, etc,. I have linked my code below. Is there anything I can do to facilitate positioning divs on a page more efficiently and at all for that matter. I'd like for the footer to stay at the bottom of the page.
Here is my code:
PASTEBIN: http://pastebin.com/xbvPEfjA
I am truly stuck on this. Any help would be greatly appreciated. Also there are some other questions similar to this question but not the exact same of what I am asking. Thanks in advance!
in your css apply clear:both to the footer. That means floated elements are not allowed on either side of it.
I wasnt to make something like this site where I can scroll up and down and my menu goes with me, but the logo remains at the top. How did they do this? I tried some CSS, but was not able to get the logo to stay in his place.
it's called a persistent header, it's too long to explain on here so you can use this tutorial: http://css-tricks.com/persistent-headers/
You can start with position:fixed and defining either top and left properties or bottom and left properties.
This web can help you too : CSS Sticky Footer
I am developing a website where the menu it should be the end of the page. Besides the menu, another div with two images should also sit at the bottom of the page.
Follow the link to the complete source code of the page;
In red, the menu should be aligned at the bottom of the page, aligned to the center of div#leftcontent.
In the div#blue social-networks must be aligned at the bottom of the page, aligned to the center of the div#nav.
When I say bottom, I mean right at the end of the page.
If you mean not statically positioned, but just naturally occurring at the bottom of the page even when the sidebar content causes the page to exceed beyond the main content under which the bottom nav occurs, then you are out of luck using divs. This is one of CSS 2.1's major shortcomings.
You are left with two options:
Use a table for the basic layout
Use javascript to dynamically position the div based on the length of the sidebar
It's up to which you want to choose, but the javascript option will not work for people with javascript disabled, such as older mobile browsers.
I have a static aspx menu. (horizontal)
I have content on the screen the sometimes requires horizontal scroll.
I would like to keep the menu the width of the visable screen and centered while scrolling. AKA. the menu would stay in the same position on the screen even when the user scrolls.
Is this possible?
Thanks in advance!
EDIT: I'm relaly looking for simple. Even something that would just keep the menu items aligned left would work for me. So the menu bar can go all the way accross, but the items in it would align left, so the right most part fo the menu bar would be empty on longer screens...
Try this one..it works well for me. It uses jquery & css. I put it on my masterpages.
http://net.tutsplus.com/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/
You can adjust the css to position it wherever you like