pleek Posted March 31, 2009 Share Posted March 31, 2009 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). this is what i've got so far 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 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? Quote Link to comment Share on other sites More sharing options...
pleek Posted April 2, 2009 Author Share Posted April 2, 2009 so, nobodys got a clue whats wrong... Quote Link to comment Share on other sites More sharing options...
xtopolis Posted April 3, 2009 Share Posted April 3, 2009 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. Quote Link to comment Share on other sites More sharing options...
Yesideez Posted April 3, 2009 Share Posted April 3, 2009 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> Quote Link to comment Share on other sites More sharing options...
pleek Posted April 3, 2009 Author Share Posted April 3, 2009 ok, using the tips from xtopolis and the code supplied by Yesideez im off to tinker. Ill post back with my progress and if i need any more help. Thanks for your replies. Quote Link to comment Share on other sites More sharing options...
pleek Posted April 3, 2009 Author Share Posted April 3, 2009 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> Quote Link to comment Share on other sites More sharing options...
fabrydesign Posted April 4, 2009 Share Posted April 4, 2009 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. Quote Link to comment Share on other sites More sharing options...
pleek Posted April 4, 2009 Author Share Posted April 4, 2009 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. Quote Link to comment Share on other sites More sharing options...
pleek Posted April 5, 2009 Author Share Posted April 5, 2009 kk, i figured out everything. thanks for all the help! finished project Quote Link to comment Share on other sites More sharing options...
xtopolis Posted April 6, 2009 Share Posted April 6, 2009 Nice, can you post the code for that btw? at least the search button image part? Quote Link to comment Share on other sites More sharing options...
pleek Posted April 6, 2009 Author Share Posted April 6, 2009 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.