Positioning and Scaling Related Issues (Demo)

[Eraser35]

Some positioning and scaling related issues I would like to fix. Thanks for any help, greatly appreciated.

Demo: https://dl.getdropbox.com/u/9191/website/index.html

Just to let you know, I have purposely "frozen" the header and footer bars so that they always remain visible on the screen. The content area of the screen is the only part that scrolls.

Issue 1: I would like the header navigation buttons (i.e. Home, About, Portfolio, Downloads, Contact, Login) to be positioned vertically (y-axis) in the middle of the header.gif (blue gradient header image). In other words, there should be equal space above and below the nav button text. header.gif dimensions are 50×50 pixels.

Issue 2: When you zoom-in the maximum amount with your browser, how can I make it so that the Login button does not collapse down to a new line? I would like for Login to remain at the same height as the rest of the nav buttons if zoomed in all the way.

Issue 3: How can I center my logo in the exact middle of the screen? In other words, right where x intersects with y? Right now the method I use is not consistent when zooming/browser-resize takes place. The x-axis for the image gets misaligned.

Issue 4: The footer box on the right-hand size disappears when zoomed in the maximum amount (last two zoom ticks it disappears.) Is this just something I have to live with?

Issue 5:I would like for there to be equal space above and below each footer box. In other words, from the edge of the black border around each footer box to the edge of the grey footer rectangle should be equal in space on the top and bottom.

Issues 6: I’m having trouble getting my footer links to work. The hover states won’t even activate.

Issue 7: The little "NEW" image that is above "Link5" on the footer does not stick when the browser window is resized. The "NEW" image rather slides as off screen as the window is shrunk. How can I position it to stick?

HTML

Code:

• Home
• About
• Portfolio
• Downloads
• Contact

• Login

• Link1
• Link2
• Link3
• Link4

• Link5
• Link6
• Link7
• Link8
• Link9
• Link10

CSS

Code:

* {
margin: 0;
padding: 0;
}

body {
font-size: 13px;
font-family: Helvetica, Arial, Lucida Grande, Verdana, sans-serif;
padding-bottom: 50px;
}

#header {
background: url(header.gif) repeat-x scroll 0 0;
position: fixed;
height: 100%;
width: 100%;
z-index: 100;
}

#leftheader li {
float: left;
display: inline;
list-style: none;
margin: 0;
padding-top: 15px;
padding-left: 12px;
}

#rightheader li {
float: right;
display: inline;
list-style: none;
margin: 0;
padding-top: 15px;
padding-right: 12px;
}

#leftheader li a, #rightheader li a {
color: black;
padding: 5px 5px 5px 20px;
text-decoration:none;
}

#leftheader li a:hover, #rightheader li a:hover {
color: #4377d0;
}

#leftheader li.home a {
background: url(home.png) no-repeat 0 50%;
}

#leftheader li.about a {
background: url(about.png) no-repeat 0 50%;
}

#leftheader li.portfolio a {
background: url(portfolio.png) no-repeat 0 50%;
}

#leftheader li.downloads a {
background: url(downloads.png) no-repeat 0 50%;
}

#leftheader li.contact a {
background: url(contact.png) no-repeat 0 50%;
}

#rightheader li.login a {
background: url(login.png) no-repeat 0 50%;
}

.footer {
/* Place footer background image here, perhaps transparent like blip.fm? */
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: #939393;
/* #134270 */
}

#line {
background: url(line.gif) repeat-x scroll 0 0;
position: fixed;
bottom: 0;
width: 100%;
height: 53px;
}

#leftfooter {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
padding: 1px;
margin: 10px;
float: left;
border: 3px solid black;
}

#rightfooter {
border-color: black;
border-width: 3px;
border-style: solid;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
padding: 1px;
margin: 10px;
float: right;
}

#leftfooter li, #rightfooter li {
display: inline;
}

.footerlinks:link, .footerlinks:visited, .footerlinks:active {
text-decoration: none;
color: white;
margin: 5px;
float: left;
}

.footerlinks:hover {
text-decoration: underline;
}

.new {
background: url(new.png) no-repeat;
position: fixed;
margin-left: 1025px;
bottom: 0;
width: 100%;
height: 53px;
}

THANK YOU for those who have made it through my laundry-list of issues. I really appreciate any help in tackling these.

[AshtonSanders]

I’ll answer a couple of these before I have to go…

"Eraser35" wrote:

Issue 1: I would like the header navigation buttons (i.e. Home, About, Portfolio, Downloads, Contact, Login) to be positioned vertically (y-axis) in the middle of the header.gif (blue gradient header image). In other words, there should be equal space above and below the nav button text. header.gif dimensions are 50×50 pixels.

It looks like you’ve already done this, but just manually add padding above the links. I’d assume 19px-22px should just about do it… Vertical alignment on the fly is kind of a pain in CSS 2.1

"Eraser35" wrote:

Issue 2: When you zoom-in the maximum amount with your browser, how can I make it so that the Login button does not collapse down to a new line? I would like for Login to remain at the same height as the rest of the nav buttons if zoomed in all the way.

lol, honestly, that’s ridiculous. Who would zoom in that much? But if you really want it to stay in place, use position:absolute; top:0;right:0; to place it in the top right of the screen, and it won’t ever be affected by other elements on the page.

"Eraser35" wrote:

Issue 3: How can I center my logo in the exact middle of the screen? In other words, right where x intersects with y? Right now the method I use is not consistent when zooming/browser-resize takes place. The x-axis for the image gets misaligned.

Give the image: margin:0 auto. Give the image’s parent div: text-align:center;

"Eraser35" wrote:

Issue 4: The footer box on the right-hand size disappears when zoomed in the maximum amount (last two zoom ticks it disappears.) Is this just something I have to live with?

I don’t know why you’re worrying about zooming in 2000x times. I know a couple people who use one zoom… have you looked at any other website that large? You can’t see anything. I don’t worry about more than a couple zooms…

[Eraser35]

Thanks. Lol i don’t know why I am worrying about the zoom at that level. I guess I am just an anal-retentive designer. I need to get my OCD in check lol.

[Eraser35]

Hmm still having trouble getting my logo to center using this:

Code:

margin:0 auto. Give the image’s parent div: text-align:center;

[Author]

Posts