Pixelpost Forum - help with position of title/logo & nav.

Pixelpost Forum (http://www.pixelpost.org/forum/index.php)

- Template design and Front-End Code (http://www.pixelpost.org/forum/forumdisplay.php?f=20)

- - help with position of title/logo & nav. (http://www.pixelpost.org/forum/showthread.php?t=7880)

help with position of title/logo & nav.

I am having issues having my site title and nav links stay where they are supposed to.
example: i can get them where i want, via 'fixed' positioning, but when the scroll bar is used, they stay put... if I use 'absolute' they move with the scroll bar, but I can NOT get them to where i want them located.
Here is my site: Gathering of Pixels
how i have it now, is where i want them. if you shrink the window a bit and use scroll bar, you will see they don't move along with the bg image and/or the page.

and here is my css code for the top part of page:

Code:

/* ========== Universal Elements ========== */



body {

        background-color:#202020;

        font: 9px/20px verdana, helvetica, arial, sans-serif;

        color:#acacac;

        margin:0px;

        padding:0px;

        background-image:url(../images/bg.jpg);

        background-repeat: repeat-x;

        background-position: center top;

        

}



a:link {

        color: #eee;

        text-decoration: none;

}



a:visited {

        text-decoration: none;

        color: #eee;

}



a:hover {

        color: white;

        text-decoration: none;

}



a:active {

        text-decoration: none;

        color: #eee;

}



p {

        padding: 0px;

        margin-top: 10px;

        margin-right: 0px;

        margin-bottom: 10px;

        margin-left: 0px;

}

h2 {

        font-size:18px;

}



h3 {

        font-size:16px;

}



h4 {

        font-size:14px;

}



h2 h3 h4 {

        color:#fff;

}



h5 {

        font-size:12px;

        color:#3F7795;

        color:#9dd5ed;

        padding-top: 0;

        margin:0px 0 10px 0;

}

#styleswitcher {

        top:0px;

        left:0px;

        z-index:100;

        position:absolute;

        width:100%;

        text-align:right;

}



#styleswitcher img {

        margin:8px 8px 8px 0;

}



#header {

        top:0px;

        position:absolute;

        width:100%;

        height:60px;

}

#logo {

        height:27px;

        position:fixed;

        left:5px;

        z-index:500;

}



#logo_sub {

        width:100%;

        position:absolute;

        bottom:0;

        padding-bottom:7px;

        font-size:15px;

        letter-spacing: 2px;

}



#nav {

        height:21px;

        position:fixed;

        right:60px;

        z-index:1000;

}



#nav_sub {

        position:absolute;

        bottom:0;

        right:0;

        padding:0px;

        margin:0px;

        color:white;

}



#nav_sub a {

        padding:2px;

        color:white;

}



#nav_sub a:hover {

        color:#000000;

}

thanks in advance for any help.
kevin

oh, meant to also add... i already did much researching on w3schools.com to try and figure it out, and searched these forums before posting this question.

HTML:

Code:

<div class="container">



  <div class="left-element">

  Content in left item

  </div>



  <div class="right-element">

  Content in right item

  </div>



</div>

CSS:

Code:

.container {

   position: relative;

   height: 50px;

   }



.left-element {

   position: absolute;

   left: 0;

   width: 50%;

   }



.right-element {

   position: absolute;

   right: 0;

   width: 50%;

   text-align: right; /* depends on element width */

   }

This one did the trick for me. :)

thanks...although I am not 100% sure on how and where to apply this.

do i insert the code you provided in place of this:

Code:

#logo {

        height:27px;

        position:fixed;

        left:5px;

        z-index:500;

}



#logo_sub {

        width:100%;

        position:absolute;

        bottom:0;

        padding-bottom:7px;

        font-size:15px;

        letter-spacing: 2px;

}



#nav {

        height:21px;

        position:fixed;

        right:60px;

        z-index:1000;

}



#nav_sub {

        position:absolute;

        bottom:0;

        right:0;

        padding:0px;

        margin:0px;

        color:white;

}



#nav_sub a {

        padding:2px;

        color:white;

}



#nav_sub a:hover {

        color:#000000;

}

or do I keep my code, add the css you listed, or combine them somehow?

I just tried, every which way that I thought could work, and no matter where I apply the html code in the image_template.html, it is not working.

fixed works just as you describe, it stays fixed through scrolling and resizing. Furthermore it acts different in several browsers.
Try to work with position:relative and use float:right for the things at the right.
Don't use thousands of nested divs, try to consolidate the things which belong together and style them one by one.
CSS is not an easy thing to learn since there are so many dependencies and tricks...

I have looked into your CSS more than one time but as said before, the HTML code is so cluttered that it is almost impossible for me to give you a quick help :(

thanks.

I wonder why the html is cluttered.
you mentioned it being a mess when I was asking for assistance when I was using the Horizon template. However, I switched to the delicious template, and I thought to myself it looked a tad bit tidier, cleaner and streamlined.
I obviously am unsure of what clean html & css is supposed to look like...to me it's all messy :-)

I will mess around with position:relative and see what I can come up with.

Sorry that the code and html are messy & cluttered to look at.
It's what I have to work with since my knowledge is pretty much nil when it comes to this. I don't believe I did much tinkering with it, if anything I just replaced a few lines to suit my layout.
thank you again.

Kevin

Kevin, sorry for being misunderstandable. The "cluttered HTML" is not your fault and I didn't mean to blame you for this.
I am using a browser tool where I can edit the appearance of HTML and CSS of any webpage (without changing anything of course) and I tried several things on your site using this tool. It is great for trying small changes like margins, borders and positioning. But since it is not possible to change HTML and CSS things simultanously by that tool it is not so easy to find a way through your page ;)
If I find time I will download your HTML and CSS file and give it a try but I cannot promise if and when this will be.

br
KArin

well i figured it out.
i just placed the <div id> for nav and logo, into a different area in the html files.
not sure if explained correctly, but i inserted them right after <body> and right before
<div id="image_wrapper" style="width:<IMAGE_WIDTH>px;"> where it was located previously.

now they stay put and scroll when i scroll....yay.

Kevin, great you figured it out by yourself!