Jump to content

[SOLVED] Help creating a menu bar


pleek

Recommended Posts

ok, i have a concept for a menu bar i want to make. When i put it together looks all jacked up. I really need some help here.

 

This is what i want it to look like (I have the psd i made, if you need it).

idbppqke0d3cja22ips.jpg

 

this is what i've got so far

f0ba15b9kl28xtemf7s.jpg

 

Things i really need help with.

 

1. ALIGNMENT!!! i have tried align, valign, and more and i can't get everything strait.

  • The valign of the images and text
  • Getting the search box to stay all the way to the right

2. The search box, i want this as the background d754mceq0ge2h6xhylkz.gif but don't have a clue on how to do it.

 

The code i have

 

html

<TABLE class="bar">
<TR>
	<TD>
	Hello <A HREF="#" class="menu">Pleek</A> <A HREF="#"><IMG SRC="Logout.png" border="0"></A>
	<IMG SRC="Divider.gif"> You have 2 <A HREF="#" class="menu">new messages</A>
	<IMG SRC="Divider.gif"> <A HREF="#" class="menu">Profile</A>
	</TD>
	<TD>
	<INPUT TYPE="text" NAME="search" VALUE="Search...">
	</TD>
</TR>
</TABLE>

 

css

a.menu:link {
 color: white;
 text-decoration: underline;
}
a.menu:visited {
 color: white;
 text-decoration: underline;
}
a.menu:hover {
color: #1e1e1e;
 text-decoration: none;
}

.bar {
background: url(barbg.jpg);
width: 100%;
height: 30px;
position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
color: white;
padding-left: 10px;
}

 

Any suggestions?

Link to comment
Share on other sites

That's a good start, I like it.

 

A few things:

1) You're using tables.. on non tabular data...

-If this is going to be stuck to the top or bottom, imo it would be best to space it with some padding from the top or bottom and have the bar pad the opposite side to make it look centered.  My CSS is a little rusty, but it looks to me like you have a few <p></p> elements that could be floated next to each other and then a form that could be floated on the right..

 

 

2) http://www.web-source.net/html_image_submit.htm .. google is pretty cool "form submit button image"

 

I know this wasn't the answer you're looking for, but I would take some time and check out what CSS has to offer without using Tables.  Experiment a little bit and you'll thank yourself later.  If this is a time sensitive thing and you're determined to use tables, try taking the image out (your red x-circle) and work on trying to move the text around and then add the image... not sure if that's it though.

Link to comment
Share on other sites

Just knocked this up...

<html>
<head>
  <title>Pleek</title>
  <style type="text/css">
    #statbar {
      width: 100%;
      background-color: #888888;
      font-family: calibri,arial,sans-serif;
      font-size: 1.2em;
      color: #ffffff;
      padding: 4px 0px 4px 6px;;
    }
    #statbar a {
      color: #ffffff;
    }
    #statbar a:hover {
      color: #ccffcc;
    }
  </style>
</head>
<body>
  <div id="statbar">
    Welcome <a href="#">Pleek</a> | You have 2 <a href="#">new messages</a> | <a href="#">Profile</a>
  </div>
</body>
</html>

Link to comment
Share on other sites

ok, wow those tips helped a ton. I made a lot of progress. I also solved my image problem by using "align="absmiddle"". I have everything how i want it except the search box. I tried a few things, but im not sure how to get it aligned to the right without it going to a new line. And using the link posted for the image input button uses tables and that makes it start on a new line.

 

New code:

<html>
<head>
  <title>Pleek</title>
  <style type="text/css">
    #statbar {
      width: 100%;
      background-color: #888888;
      background: url(barbg.jpg);
      font-family: calibri,arial,sans-serif;
      font-size: 1.2em;
      color: #ffffff;
      padding: 4px 0px 4px 6px;
      position: fixed;
  		top: 0px;
  		left: 0px;
  		right: 0px;
    }
    #statbar a {
      color: #ffffff;
    }
    #statbar a:hover {
      color: #1e1e1e;
    }
  </style>
</head>
<body>
  <div id="statbar">
    Welcome <a href="#">Pleek</a> <A HREF="#"><IMG SRC="Logout.png" border="0" align="absmiddle"></A> <IMG SRC="Divider.gif" align="absmiddle"> You have 2 <a href="#">new messages</a> <IMG SRC="Divider.gif" align="absmiddle"> <a href="#">Profile</a> 
<INPUT TYPE="text" NAME="search" VALUE="Search...">
  </div>
</body>
</html>

 

go2q2r08lkqrkq1g6883.jpg

Link to comment
Share on other sites

I'd recommend using an unstyled unordered list (you know, ul with li tags) for sections in your navbar, and use border-right to make the border.

 

Also, you can use some CSS3 for non-standard fonts instead of having it only display for people with that specific font installed.

 

#statbar{
    font-family:Calibri, Arial, sans-serif;
}
@font-face{
    font-family:Calibri;
    src:url('Calibri.otf') format('opentype');
}

Few current browsers support it, and you'll have to upload the font file, but it's a better solution that more browsers will support in the future.

Link to comment
Share on other sites

um, not sure how to do that. But with the help of the posts before you i have it looking how i like it. And im working on getting the search bar with the style i want. But i can't figure out how to get it to stay all the way to the right.

Link to comment
Share on other sites

do you want just the code or the images and everything? Its a design for part of a personal website theme.

 

I learned how to make it using these websites

 

http://www.nimlok-louisiana.com/blog/create-custom-search-bars-with-image-replacement-using-css/

http://www.nkuttler.de/2008/09/20/html-forms-and-onclickonfocus/

 

Everything i used is from there and a little googling.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.