There's a lot of blank space at the bottom of my page - http://htsmagento.nubis.eu/?
I've been through the CSS lots looking for min-height type attributes but can't find any that would be causing this.
Any ideas what I can do to reduce that blank space at the bottom?
It's because of the top menu.
There are a lot of subcategories in most of the menu items but this is the longest:
installation->rohre-fittinge->stahlrohr-schwarz
And for some reason unknown to me yet, the sub-menu items in Magento do not have display:none when they are not visible. They have left: -10000px;. This moves the menu items outside the visible area but their height is still taken into considaration. See css class #nav ul. Maybe you can do something with that.
[EDIT]
Anyway...even if you manage to fix this you should rethink the category structure. It's not really user friendly to have a lot of sub-items. It's kind of hard to follow for the customer.
I would leave only the first 2 levels in the menu, and let the customer get to the rest of the categories by using the layered navigation. This approach will also speed up your website a little.
But this is just my opinion...you can ignore me.
Related
When using a tumblr theme, I added an extra row for links, but the page won't automatically scroll. When changing the position to absolute, they scroll, but it doesn't show all the way, nor do the titles scroll. Can anyone help me out with this?
I'm not such what to change/add/remove to have the page scroll properly with the titles moving too.
The original code is here.
And here is the code once I added the last row.
The person who made the theme has deactivated their blog and their credit link leads to some odd site, so asking them for help isn't that easy considering I have no way of reaching them.
I suggest you go for a structure change. Currently because of position: absolute it is difficult to overflow the content in a standard way.
Ideally you should do the following
wrap the following series () in a parent
and style it to be on the right hand side and add the style
overflow: scroll to it.
remove the #columni {margin-left: 530px;} instead make it
display:inline-block;
remove the #columnsi{position: absolute;}
I am still trying to sort the size of top menu on "page2";
however I need this work to soon, and wonder if the other way will be to add a couple of boxes, like 2 containers to give ample space for the menu to work as it is designed to and get smaller.
Here is the URL as there are loads of codes: http://www.dijon-egg.com/Possum/
Thanks a lot,
Byron
So I apologize in advance if this question has been answered before- I tried searching but couldn't find much on it.
A designer and I are working to create this website- www.zeinal-jundi.com
This is predominantly a one-page layout using a scroll effect to navigate to different sections, although the site's Discography section does link to a separate page for each album. We also have a fixed header that allows the navigation to be visible the whole time. Originally, I had added a margin to each section of the page to accommodate the height of the fixed header. This however made the space between each section far too large, so my designer requested I find a way around this. I was able to fix it by instead adding a value to the scroll animation script that brings the section around 250px from the top, rather than to the overall top of the page (where it would then be covered by the fixed header)
So now, I've of course encountered the issue of linking to these sections from off another page- using code like the following:
Biography
This of course links back to the front page, but brings the section up to the very top, where it is hidden by our header. I'm wondering if anyone knows of a way I can link to this section from another page but add an action similar to the one I have on the scrolling function that will bring it up to 250px down from the top of the page rather than the very top without me having to add margins to each div.
Another option of course it to just make that pesky fixed header a lot shorter, or possibly hide the site title after the page scrolls to a certain point, but our client seems pretty adamant about having the entire header visible throughout, so I of course am trying to find a work around so we won't have to rethink the entire element (if such a solution even exists).
I hope I explained this well enough! Let me know if you need to see any additional code- would love to hear your thoughts on how to achieve such a thing! :)
If you're placing the block through CSS, you can use the CSS3 :target pseudo selector to position whatever section the link pointed to, e.g.:
:target {
/* ... example:
top: 250px;
*/
}
Any idea's why my nav is showing up under the header and not inside next to the logo?
I spent all day yesterday designing a page just like this. Same everything on design and pretty much the same on coding, except I used DW fixed pixel (or liquid, but i think fixed), but after seeing a course on Lynda.com I decided to redo it in DW's new fluid grid layout (which I love a lot more (never used before)).
I've tried several things (i.e logo image align left etc) to no avail.
Screenshot
Comment Entering inspect mode and resizing the header div shrinks the menu, so it know's it's in the header
P.S. Danko thanks for the screenshot assist. On allowing it to be posted.
Answered in comments. Credit goes to David Randall.
Added div's logo and menu to elements in header div per something I was going to try (floating left). While this brought them inline together it popped both out of header.
Dave suggested
overflow: hidden;
Worked perfect.
I have a web page I am testing that is doing a slight shift to the left when I click on "Solutions". To toggle back and forth go to "Solutions" and then the logo.
http://jmcintosh.aisites.com/TRS/index.html
I know exactly what the problem is in my CSS. It's the "div.breakright ul li" for the orange dotted list items in the "Solutions" page.
I've tried multiple different ways but can not get the page to stop shifting.
Need another set of eyes or another way to apply it, look at it.
It's shifting left because of the scroll-bar. You only notice this shift when other pages don't require scrolling. This isn't a CSS issue, but you can make it unnoticeable via CSS.
html {overflow-y:scroll;}