The News & Public Notices section should go overtop of the train image but does not, tried adding a z-index but didn’t do anything.
The Corners of the grey and the orange should extend all the way to the edge of the browser but don’t. I made the with wider and it worked but had major issues trying to line up all the content.
Lining up the content divs so it is centered within the div correctly.
Hopefully someone can lend a helping hand to solve this.
I’ve uploaded a screenshot of how should be, please keep in mind the one online is not completely done yet.
Mike,
please note the following stylesheets are failing to load:1024.css, 768.css, 480.css I would check that first. Start by making sure you have those files in the correct directory
Quick question before I start on this - how do you expect this to look on smaller screens? Your example is set for 1300px and the layout breaks for smaller resolutions.
I personally would just incorporate the gray into hte train image, and the orangeish color into the main content section image or something like that. Looks like a fragile design idea.
I removed the 1024.css, 768.css and 480.css right now.
For smaller screens, I haven’t tackled that yet.
The train picture will be a slider so that won’t really work. I’ve seen sites using the angled approach with CSS. Most likely for smaller screens like mobile will remove the angles all together. But the angles are part of the identity and need to be in there for larger screens. Just not sure how to solve my problems that listed above.
Your solution may work best actually with picture. Just have to solve to make the grey angle a second background picture overtop of the train. There will be text etc sliding in overtop of the train at times so will need it to still be clickable.
It’s definitely the train image causing you the grief. You won’t be able to slide the grey behind the train and the text in front. Well, you can, but it would be ugly, and I’m not sure it’ll be worth the payoff.
I think you need to show us how the text will look as it scrolls - do you want it on top of the train, or do you want the train to scroll as well…
If you want a slanted image over the train the do something like this:
#home:after{
content:" ";
position:absolute;
z-index:2;
bottom:0;
left:0;
right:0;
height:340px;
background:#f9f9f9;/* your image goes here instead of the color*/
background-size:cover;
}
That should still allow text to go over the slanted image as all will be in the same context so adjust z-index as required;
The background images on the other element is quite acceptable I think as you don’t need it to overlay anything specific. There are often many ways to do the same thing but it does depend on the dynamics of the task in hand.
