Hello all, Its been a while since I posted here as I've been heavily googling and working on my portfolio site.

 

http://mattgreenfield.co.uk/

 

Its a one page layout and each page is a div box that is moved off the left side of the screen using a massive negative margin. When a link is selected the CSS :target property is reducing that margin to 0 and as such displaying the page again.

 

I have tried using http://selectivizr.com/ to ensure older browsers that do not support the target selector can still use the site. I believe this has worked but only on some browsers. Fingers crossed! I may add a link to my pdf CV for those one really dated browsers....

 

I am also begging to play around with media queries for different screen sizes and devices.

 

My main concern right now though is that on resizing the page, the content does not begin to scroll. I have tried adding overflow:scroll to the page elements but it doesnt appear to do anything. Ive added another div inside each 'page' to add the content to in the hope that i can style this differently but no luck. Does anyone have any ideas? is this possible? I believe it may be something to do with the positioning of the parent element??

 

Right now it seems a pretty fundamental flaw so I'd love you feedback.

 

Thanks!!

sorry all solved, just missing a closing </div> on my nav section. how frustrating! any other feedback would be great though. thanks!

sorry all solved, just missing a closing </div> on my nav section. how frustrating! any other feedback would be great though. thanks!

 

I am sure I have read somewhere that using the pseudo target in css is not considered got practice. When I want to scroll through a page in any direction from a link I don't use any pseudo elements to select the css classes and id's I want to affect. I simple use the tilde ~ and other selectors to address them directly and apply my animations. This avoids any browser conflicts with them not all behaving the way we would like, and you will get no jump or flicker. An added bonus is that you need no scripts to achieve your animations either.

I think you should create an Init function to pull in at least some data into the right pane on startup. Its looks wrong and broken.

I think you should create an Init function to pull in at least some data into the right pane on startup. Its looks wrong and broken.

 

I totally agree but do not know how! I have tried searching google for a CSS Init function but cannot seem to find anything. Any clues?

 

Thanks for your feedback

i have to be honest and say i really don't like that effect - not sure whether it's the whole concept, or maybe just that the execution needs polishing (some ease in and out? combined with some reduction in opcaity?) also that the main content area on the right is empty when you open the site

 

could be because it slides over hte nav - how about it if came in from the top?

 

no, just can't like it have you asked other people what they think? could be just me

Lol no.

 

A better thing would be to dynamically pull in the content with JavaScript. (Think ajax).

 

You history also stays in tact. Trying to back out of your site was a lesson in patience.

for the flickering of the banner when the site gets smaller remember that when you use values what those values correspond to when the property is assessed.

Let's take the property line-height. it's parameters are read as

 

line-height: normal|number|length|initial|inherit;

 

normal - A normal line height. This is default

number - A number that will be multiplied with the current font size to set the line height

length - A fixed line height in px, pt, cm, etc.

% - A line height in percent of the current font size

initial - Sets this property to its default value. Read about initial

inherit - Inherits this property from its parent element. Read about inherit

 

line-height: 1; ]- is not the same

line-height: 1px; ]- as this

 

"width" property is another one of these such properties as well. saying:

width: 100; is not the same as width: 100%; or width: 100px; And all of them can and may be interpreted differently.

 

try stating exactly what you mean when stating the values of properties. give the intent of the what you want to view. If you want the width to be 100 percent of the parent element then use 100%. if you want the width to be exactly 100 pixels then use 100px;

 

using width:100; is a vague statement and because there was no specific measurement or length size assigned to the (100), you might not get the desired results depending on the property you have set the 'vague' value to.

 

EDIT:

 

As for the content showing as it crosses the nav, you can try to use the

opacity property

use zero as the initial state and change it to 1 on the transition and use 3/4% of the time to make the transition happen so the opacity doesn't reach 100% until almost the end of the translation transition.

 

 

.panel{
    width: 700;
    padding: 30px;
    position:absolute;
    top: 0;
    ; /* for some reason the margin-left property is having a problem on the WDF website  */;   
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    /* -webkit-transition: opacity .5s ease-in-out;  */
    /* -moz-transition: opacity .5s ease-in-out; */
    /* -o-transition: opacity .5s ease-in-out; */
    /* transition: opacity .5s ease-in-out; */
    opacity:0.0;
}
 .panel:target{margin-left: 300px;opacity:1.0}

Edited March 20, 201412 yr by drt_t1gg3r