I'm doing a website that needs to have layout such as the one here:
http://newsmartwave.net/wordpress/trego/home/homepage-1/#featured_products
I've spent 2 days researching how to do proper 2 column layout and tried different options, but none seem to work just right.
Right now I have 2 versions - http://aspenwebsites.com/mpwebsite/index.html and http://aspenwebsites.com/mpwebsite/index_alt.html
The problem with the first one is that if you reduce the height of the browser's window considerably I end up with some white space bellow the sidebar and some of my text ends up outside the border (see screenshot).
The problem with eh second one is that I don't can't place a full-screen background image behind both columns.
In addition, unlike on the sample website ( http://aspenwebsites.com/mpwebsite/index.html and http://aspenwebsites.com/mpwebsite/index_alt.html) that I'm trying to duplicate, I'd like to have a vertical scroll bar appear if browser's window reaches certain minimum height.
I know people sometimes get annoyed with types of questions, but I really just can't figure this out and I did read numerous articles and examples.
I'm not asking to write code for me, although any code samples would be most appreciated. Minimally, I was hoping for directions for some good tutorial, as I really would like to master this layout. It comes up a lot in my work and I'd like to have my own code that I have 100% understanding of rather than using Wordpress.
For the 1st one, add overflow: scroll; to the #sidebar > .row rule.
You do have a fullscreen background image in the second one. It's just that #maincontent, which is in front of it, has a background:white; rule, so you can't see it.
Edit: I did not get annoyed by the way..
Related
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;
*/
}
I'm debugging a website for a code written by somebody else. Typically I used bootstrap for responsive rows and columns but I believe this site is built on zurb-foundation.
Here is the url of the page. (www.edcast.com/privacy)
screenshot for a a visual of what i mean.
http://imgur.com/WTGDQTK
I will play around with this, but having a second eye and some other input would be highly appreciated!
Update: So far I've tried changing "overflow: visible" to hidden and auto
I've also tried to apply a clear: both to a variety of different divs
If you take a look at the image I posted below, you can see that the div with the id image-top-div is pushing everything over. You will need to resize the image and play with the margin and padding. You can see me here in the gif taking out the margin-left which solves it.
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've got to produce a print out of our records as per Creative's requirements. The layout is fairly simple, but it still makes use of the occasional highlight box and hairline ruler to divide up sections.
We have to support IE8, but for now, I'm developing in FF.
I currently have to go into Print Preview to examine my changes. It is a real pain to Close Preview, refresh the page with F5, then Alt-F+v to re-Preview every time I make the smallest change. Any way I can set my system up to view my changes more conveniently? I've got ReCSS, which is cool, but it does not work in Preview mode.
The only borders that seem to be supported are those around tables. So anywhere I need some element boxed, I end up wrapping it in <table><tr><td></td></tr></table> just to take advantage of the table border, which seems to be non-optional. Is there a more efficient way?
I need to divide content sections with horizontal rules (ideally several pixels thick, dashed or dotted). I have found no way to make a horizontal rule at all. I've tried styling my divs with border-bottom, which of course doesn't work. I've tried wrapping them in tables, then turning off the top left and right borders, which also doesn't work. I've tried <hr>, which also doesn't work. Ideas?
I hate to have to tell my Creative that they get text-with-a-side-of-text.
I was trying to customize a theme for a CMS(ocPortal/vanilla) where I wanted the sidebar to be fixed along with the header. Making it fixed it not a tough job, but the problem is that the end user can add widgets to the sidebar which can run out of screen height. And then the fixed attribute would become useless.
Is there a solution to this problem as I have not been able to come around with anything.
There are multiple solutions to this problem, seeing you have not given an example, I will assume these widgets can be added and removed dynamically (meaning at anytime after page load). Assuming this, I have two possible solutions that you can try.
Solution 1 :
Try making each widget inside a tabbed/spoiler type container, so they become small when the end user does not need them at that point in time
Solution 2 :
As Rick Calder mentioned, you can also use the CSS rule overflow-y: scroll; so when the contents of your sidebar becomes larger than the height, a scroll-bar appears allowing the user to scroll through your widgets.
You may also combine these solutions together, to enable a LOT of widgets, dependent on what your personal preference is.
I hope this helps!
NOTE :
A simple search for html javascript spoilers will give you MANY examples of spoilers.