Menu position relative to other elements

9 replies [Last post]

Mon, 2010-08-30 20:38

SINEKT

Offline

newbie

Timezone: GMT+3

Joined: 2010-08-30

Posts: 6

Points: 7

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.

Tags:

Mon, 2010-08-30 20:40

SINEKT

Offline

newbie

Timezone: GMT+3

Joined: 2010-08-30

Posts: 6

Points: 7

ok, I forgot the code. Is

ok, I forgot the code. Is there no way to edit any new posted message ?

HTML:

<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">
 
<font color="#FFFFFF">
<center>
 
<img src="back.jpg" class="image">
<img src="up.png" class="up">
<img src="menu.png" class="menu_back">
 
 
</center>
</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;
}

Tue, 2010-08-31 07:35

jon19870

Offline

Enthusiast

Timezone: GMT+1

Joined: 2007-01-05

Posts: 195

Points: 194

From the HTML I see here, you

From the HTML I see here, you are still at the beginning with this too. Your HTML contains many deprecated tags such as <center> and <font>. You need to start using CSS properly and then you can get rid of these. I suggest you start here... www.htmldog.com . Learn about doctypes as you have not declared one which means you will have IE running in quirks mode which is bad bad bad. http://csscreator.com/node/29284

ASP.NET jQuery JavaScript CSS XHTML Tea

Tue, 2010-08-31 11:00

SINEKT

Offline

newbie

Timezone: GMT+3

Joined: 2010-08-30

Posts: 6

Points: 7

I really appreciate the help

I really appreciate the help you are offering, but I am having an urgent issue here.

I solved the doctypes problem moments after posting, yesterday, but the line isn't included in the code above, because there is no edit button (weird for a forum).

If I wanted to discuss about web page optimization, I would have done that, but for the moment I don't care how the code is written as long as it's OK on the frontside.

So please, let's stick to the main problem from now on.

Tue, 2010-08-31 15:08

Deuce

Offline

Guru

Timezone: GMT-5

Joined: 2005-11-20

Posts: 4421

Points: 1840

Well, we are a standards

Well, we are a standards centric board. We care about well formed markup. If your HTML is bad, your CSS has nothing reliable to work off of. If you don't want to code your site properly, we could really care less, but if you want our help to have your site look the way you want it to, we require that you code your site properly, validate your markup, and provide either a link or posting all of your code using the CODE tags.

So, let's stick to the rules of this board from now on.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Tue, 2010-08-31 15:53

SINEKT

Offline

newbie

Timezone: GMT+3

Joined: 2010-08-30

Posts: 6

Points: 7

Ok. Same initial question for

Ok.

Same initial question for the following:

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;
}

Tue, 2010-08-31 16:02

CupidsToejam

Offline

Guru

Timezone: GMT-6

Joined: 2008-08-15

Posts: 2634

Points: 1552

position: absolute is not

position: absolute is not your friend in this case. try to layout the page with floats. Its a good idea to have a container that hold everything. Also, the menu should be constructed as a UL list.

First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Tue, 2010-08-31 17:22

SINEKT

Offline

newbie

Timezone: GMT+3

Joined: 2010-08-30

Posts: 6

Points: 7

Sorry for being noob, but

Sorry for being noob, but could you please be more specific?

I found that method of automatically resizing the background image among the first results in Google, and it does exactly what I want.

However, I remember when I first wanted to learn PHP, I was totally confused and I needed some months of tutorials and coding to get the basics only. I admit that I don't know much about CSS at his time, but I was curious why the page behaves like this with what I have done so far. I have no intention of asking you to build my site for me, but a few hints might help

Tue, 2010-08-31 19:16

CupidsToejam

Offline

Guru

Timezone: GMT-6

Joined: 2008-08-15

Posts: 2634

Points: 1552

SINEKT wrote: I admit that I

SINEKT wrote:

I admit that I don't know much about CSS at his time

If you're looking for best advise, it will be for you to take the time to discover and learn. The path you are on isnt the best practice. Please take some time to learn how html and css work together by visiting the following links.

http://www.htmldog.com
http://www.w3schools.com/default.asp

In order to be successful with css, you must first understand how it works in relation to proper formed html.

First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Wed, 2010-09-01 09:06

SINEKT

Offline

newbie

Timezone: GMT+3

Joined: 2010-08-30

Posts: 6

Points: 7

So no hints for why the menu

So no hints for why the menu behaves like that ?

I say again, am am not programming-illiterate, but I'm just new to CSS.

Sorry to say, but if I still get no answer it will be the last time I ever post here and find more competent communities.

And for the love of god, I do not need 1+1=2 kind of links.

Menu position relative to other elements

ok, I forgot the code. Is

From the HTML I see here, you

I really appreciate the help

Well, we are a standards

Ok. Same initial question for

position: absolute is not

Sorry for being noob, but

SINEKT wrote: I admit that I

So no hints for why the menu

New forum topics

User login

Navigation