I'm currently working on a horizontal site looking to make something like http://www.thehorizontalway.com and was looking to add in some great new css3 animations but have found that 4000px wide is a magic number that breaks the animations (appears the divs position stops working) I've looked into the -webkit-box modeling and -webkit-box-orient:horizontal but neither of these seem to be a fix (and can't find slot on the webkit box)
Does anyone know why this is happening and what I could do to
Not sure about the 4000px, never assumed it would be an issue with animation.
Try Using percentages:
The wrapper = width:100%; height:100%; = What you're seeing on screen at a time,
20 pages = width:2000 % height:100%; which will be the mask of the entire site,
I believe these should be position:absolute; to prevent conflicts;
Then you will probably want to put some divs in per page content:
width:100%; height:100%; float:left; with page link #id's as you know.
It won't make your site look like "The Horizontal Way" It can be considered as a
better method as you can make your content fit to every page jump & re-size.
Oh and...Why horizontal... you can stack your page content to give
a diagonal effect if you want but, it's sometimes shaky on lteIE8, with that said if
you choose to go down that road easily you can condition the layout for IE users horizontally.
Related
I am using the Chat design from https://bootsnipp.com/snippets/featured/message-chat-box inside a sidebar with width:250px; and a margin-top:80px; due to a bootstrap navbar.
However I want to resize the height of the chat history to fit the remaining height inside my page and I have no clue how to realize that. I tried height:100%; but that doesn't work.
you can find a fiddle at http://jsfiddle.net/yq3g9djc/
EDIT: I realized it now with jQuery. I calculate the window height and set the height of the chat history minus the offset.
Experimental css such as height: -webkit-fill-available; is one way. It's the laziest way to do it. The better way would be to style your page so that the chat panel can be placed on the right of it. Otherwise, doing anything fancy with this chat panel would prove difficult later on if you do not fix the issue properly now.
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..
I'm creating a website and have a problem with the way it displays in different browsers. I'm testing using Chrome, iOS and IE8. The site displays correctly in the first two, but not so in IE.
The website in question is http://www.edalemill.co.uk/
Can anyone help point out what's wrong with my CSS to solve the problem?
Thanks!
I have taken a look and can replicate the issue.
I would suggest removing the
overflow:auto; from the #stripper
You have also used body more then once as well in your CSS, I would suggest having only one lot and tidying up your code.
Possibly consider using this as a base which should help you:
http://meyerweb.com/eric/tools/css/reset/
UPDATE
Otherwise for your code do the following for the CSS
#sidebar {
position:fixed;
}
I would recommend making that IE8 code only though
If you take out the height:100% on #container the background image fills up the rest of the text area for the about page.
Let me know if this helped.
Update
It might just be easier to have another CSS tag for the content areas that scroll. The height:100% works on those content areas that don't scroll, however, they break on those that do. My recommendation, even though it might not be the best way, is to either make a second CSS tag for the content areas that scroll, or just simply make the image bigger.
i have problems with IE8 :
http://immobilien.la-via.ch/
Website header is not on the right position.
If you open it in chrome or FF it works.
2nd problem: white area is not 960 width....
You need to properly contain your content inside your #nav div, you can do that by triggering the hasLayout effect on it, like so:
#nav {
zoom:1;
}
Are you aware that you mix table-design with div-based design? Just a recommendation: your layout can quite easily be designed with divs only (no tables). Cleaning your code up will help you a lot more than just fixing some issues that occur now in maybe IE8... have you seen your site in Safari/Chrome as well? And IE9+? Probably you should have a look, as you can see the consequences of your (sorry, it is not meant offensive, just nicely in order to help) messed up HTML code...
Also, don't apply a fixed height to a table/div if possible, as you probably want it to automatically adapt the height to the amount of text. You have some parts of your code where you use divs anyway already, just my recommendation would be to design the whole site on divs...
My website has a footer overlap in IE7, while fine in all later browsers.
here's the link:
http://www.kindreviews.com
i have tried finding a solution via google, but answers seem so variant.
Please help!
Thanks,
zeem
You've got bad encoding in your copyright area: Markup Validation of kindreviews.com - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code. Fix that and then revalidate and see if there are other code errors.
And you have a low answer acceptance rate; see the FAQ https://stackoverflow.com/faq and accept answers to your old questions.
I have to say that the site layout is a bit messy: container DIVs with smaller widths and heights than the contents, too many negative margings, and the like..
For instance, the DIV #cuber_div containing the flash banner, having an height set to 515px, is overlapping the text, so the upper part of text isn't selectable.
Besides, the #footer DIV is outside of the #wrapper DIV, so relative positioning in buggy browsers such as IE < 8 gets messed up.
My personal suggestion would be to fix the mark-up and re-style the whole site from scratch.
It may take time, but far less than keeping the site like that and having it to break up every once in a while for seemingly no reason, and then go figure..
It's up to you to decide.