homepage Welcome to WebmasterWorld Guest from 50.17.21.7
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Menu position in page
Sinektik




msg:4194928
 9:54 am on Sep 1, 2010 (gmt 0)

Hello to the board, in the first place, 'cause I'm new here.

I am quite at the beginning with CSS. HTML, PHP, MySQL are no problem, though for PHP and MySQL I still need some hours of googling from time to time.

The idea is that I want to be able to build my own websites, with no help from CMS-es, templates and others.

The main idea for this specific example is that I want the site to resize itself according to the resolution or window size, so it has the best look all the time. Though resolutions are in fact the biggest issue here.

Ok, so I created a page with a resizable background, and works like a charm. I also have a top-logo that I managed to make it resize with the window and looks cool. But I want to put,in the same way, a menu under the logo, that can be either a long horizontal image with map links (I figured), or individual buttons with simple a href links.

The problem is that when I load the menu image, it doesn't stay where it should, under the top-logo, while changing resolutions or window size. It's either OK, or overlapping with the logo, or way under the logo, to the middle of the page, with low resolultions/window sizes.

I tried all sort of things, nothing worked.

A little help will be appreciated.

HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html charset=utf-8">
<link href="css.css" rel="stylesheet" type="text/css">
</head>

<body id="page-body" bgcolor="#000000">

<img src="back.jpg" class="image">
<img src="up.png" class="up">
<img src="menu.png" class="menu_back">


</body>
</html>


CSS:


.body
{
margin-left:0px;
background:#000000;
}

.container
{
text-align:center;
}

.center_div
{
border:0px solid gray;
margin-left:auto;
margin-right:auto;
width:100%;
background-color:#555555;
text-align:left;
padding:50px;
}

.image
{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

.up
{
width: 100%;
position: fixed;
top: 0;
left: 0;
}

.menu_back
{
width: 100%;
position: relative;
top: 140px;
left: 0px;
}

 

Shado




msg:4195054
 2:55 pm on Sep 1, 2010 (gmt 0)

Welcome!

Put your logo and menu in separate divs

<div id="header"></div>
<div id="menu"></div>

Then in your style sheet give them the properties you need.

Sinektik




msg:4195107
 4:10 pm on Sep 1, 2010 (gmt 0)

I tried that a few minutes ago, doesn't help.

Does the DIV ID name need to be identical with the class in my CSS ?

Sinektik




msg:4195174
 6:24 pm on Sep 1, 2010 (gmt 0)

I managed to solve the problem. The problem was not themenu, but the top logo, which was resizing on height and creating the illusion the menu is going up and down.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved