Image map in Background

[kobitate94]

Is there a way to make an image map in the background of a website? Specifically, I would like to make the links in the sidebar of http://beefinbeta.tumblr.com (my blog testing grounds) clickable. Bare in mind that the sidebar is static and when you resize the window, it stays the same distance from the content of the blog. This means that postition:static; will not properly work for all browser window sizes. I would also like to note that I am a beginner in CSS.

Thanks!

[TheDoc]

Why don’t you just make them links? Instead of looking into creating a complicated image map, I would start looking into the basics of learning HTML and CSS.

There are many tutorials available that go over converting a design into a HTML/CSS template.

[kobitate94]

I need the sidebar to be static. Like when you scroll down, they stay in place. Doing it with links was too complicated because I could not use position static. The reason I can’t use it is because when you resize the window, the sidebar stays the same distance away from the content of the page. If you use position static, it makes them get farther apart.

I am using an image map because I can easily make the background static without worrying about the y-position of the sidebar, it is always the same distance away and an image map (I believe) uses the amount of pixels on the coordinate plane of the image. This would make it to where a visitor’s window size would not matter.

If I were to use links, how would I go about using them in the way I would like the page to work. (see: http://beefinbeta.tumblr.com )

[clokey2k]

You can apply ‘position: fixed’ to a ‘div’ and have it’s stay in the viewport – like the background. So in your case, why not wrap the entire side section in a ‘div class=”sidebar”‘ and apply the following css.

.sidebar{

float: right;

width: 300px;

position: fixed;

}

That should, in theory*, give you some workspace on the right. Then ditch the text in the background, and place the nav as links and paragraphs.

*I have not personally tried this, as I’m not a fan of scrolling content.

Chris has some good tutorials on creating nav menu’s, watch a few of the photoshop to HTML screencasts:

https://css-tricks.com/video-screencasts/72-building-a-website-2-of-3-htmlcss-conversion/

!Edit: The flowers are nice. :-)

[kobitate94]

I tried that already. That doesn’t work because the sidebar content stays in one place when the browser window is resized. The sidebar border moves when the browser is resized. (at least in Chrome, Safari, and RockMelt)

As for the flowers, its not my theme. It is provided by Tumblr as an option for themes. I am editing this one for a friend that wants the flowers to always be at the top of the page.

[ScottF]

Just throw a scrollbar on the main content div. That way the site stays put while only the content scrolls. It’s not great practice but you’ll get your desired effect.

[clokey2k]

@ScottF: All things being equal – the simplest answer tends to be the right one!

I completely missed that obvious choice.

[kobitate94]

Thanks Scott, that works perfectly! Now, is it possible to make the main content to scroll when the user’s mouse is outside of the content overflow area? See this screenshot for an explanation if you don’t get what i mean. http://d.pr/FBps

[Author]

Posts