Jump to content



Photo

CSS Centered Navigation and Content


  • Please log in to reply
2 replies to this topic

#1 duhk

duhk

    Neowinian

  • Joined: 07-January 04

Posted 15 September 2012 - 15:29

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.


#2 Xoligy

Xoligy

    Neowinian

  • Joined: 09-May 10

Posted 16 September 2012 - 10:15

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...utorial0816.htm

#3 OP duhk

duhk

    Neowinian

  • Joined: 07-January 04

Posted 17 September 2012 - 19:51

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.

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

asdd.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, 17 September 2012 - 19:57.




Click here to login or here to register to remove this ad, it's free!