• 0

CSS Centered Navigation and Content


Question

I'm making a theme for tumblr, or at least attempting to. I have never done html/css before. Just started this last night.

So I was trying to figure out how to make the content center horizontally and vertically while having a floating navigation panel and allow content to scroll.

I looked everywhere for an example to look at the code to figure out how to do exactly what I wanted, but couldn't find one.

The ones I found used iframes or anchored the navigation to the right, left, top and right of the web browser.

But I did it. Figured it out.

Here's what I came up with. It's not much, just an example of the content floating centered horizantally and vertically.

https://dl.dropbox.c...ENTER-OKAY.html

Can some experienced Web Designer take a look at the code and see if there's anything wrong with it and show me a better way to do it if there is one. Also if you know of any website that actually does this. I'd like to take a look at it.

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Hi duhk, i had a quick scan of the code and only being a novice myself cannot give awesome feedback and say this is wrong here and there and this should be like this with example code but i can point you in the direction of something called containers and wrappers (depends which you prefer to call yours). Here is a quick tutorial.

http://css.maxdesign.com.au/floatutorial/tutorial0816.htm

Link to comment
Share on other sites

  • 0

Thanks, but I figured my original idea of how my design was gonna work is too complex with too many divs. It's my first web design and I'm learning everything as I go. So, I think I'll start simple first before doing anything too complex.

This is what I got so far. The first image is the main tumblr page. The left pane scrolls through the posts which are nested next to each other with no gap between them. The scrollbar is hidden under the right div, just until I can find a good skinny scrollbar script.

post-44666-0-46208500-1347910284.png

The second image is what you see when you click on a post.

post-44666-0-37484200-1347910306.png

Those colors are are just what I added so I could see the divs while I was working on their positions. I'm still thinking about how I will arrange the navigation, links and other content in the right pane.

What do you think?

Also, I just realized designing a web page is like Inception.

Edited by duhk
Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.