Hi there,

I used to code in html back in the old days and something as what I want to realize now was done in frames back then. How do I realize something like that, in the most simple code?

http://www.tyronelebon.com/

Basicially a menu stays on the left and the images 'disappear' under the menu when scrolling right.

I want to use jpgs for my menu ( because I am using a rare typeface ).

Do I need to create a table for the menu to keep the position of the buttons fixed or is there any ways to realize that with css?

and do u recommend to put all the images in a table to? but then how do I scroll within that table..?

If anyone has an idea how to realize this please let me know, it would be much appreciated!

p.s : If the scrolling bar starts where the images start - that wouldnt be an issue at all.

Edited February 6, 201610 yr by HanSolo1919

Things have changed a lot. First of all: Do not use table elements for layout.

Tables should only be used to display data sets like a sets of of items prices etc.

Instead you should use semantic elements like a nav element for your menu etc.

The layout nowadays is done with CSS only. To produce anything decent (and flexible displayed on todays many devices) you must learn the CSS box model.

To have elements stay at a certain position with you can add a position: fixed property with CSS. This is how it is done in the example you posted. If you want an element to be only fixed when the user scrolls to a certain position you can change CSS properties with JavaScript triggered by a scroll event.

Using images for your "rare typefaces" is also considered bad practice. You can embed any typeface with CSS @fontface so there is no need to use images for fonts

Hi,

 

Thanks for your reply. I did look into the code of the website link and managed to make my own version of it. The problem when using 3 different layout sections is that I somehow cannot make the navigation pane stay in the same area.

 

If I dont have a top section ( logo section ) then for some weird reason the scrolling works exactly like in the website example I have given but I have 3 sections then it doesnt.

 

 

so I want to to divide my website into 3 sections

 

 

top section ( 100 % width ) for logo

left section + right section ( under the top section )

 

 

If I would want the left section ( and top section ) to always stay but enable scrolling on the right section, what do I have to write in the css file?

 

 

I labeled the top section header, the left section 'section; and the right section 'aside' like in this tutorial

http://learn.shayhowe.com/html-css/positioning-content/

 

 

#header { height: 160px; background: #FFF; text-align:center; padding:5px; }

#section { width: 215px; background: #000; float: left; padding: 5px; }

#aside { margin: 0 0 0 215px; }

 

 

So when ID the areas in my html file it all works but when I want to scroll to see more images then unfortunately the 'section' disappears with the images

 

Would u have any idea how to fix that?

 

best

Edited February 7, 201610 yr by HanSolo1919

Maybe this can help:

https://jsfiddle.net/Nillervision/ow76L4L0/

 

EDIT: Note that the semantic use of html tags has nothing to do with appearence of the elements. Eg. just because an element is on the right side of the page it does not have to be an aside element. It all depends on the content. Here is a link to the HTML5 specs:

https://www.w3.org/TR/html5/#contents

Edited February 7, 201610 yr by Nillervision