Help with designing the header
Hi,
I'm new to web design, and I need help with an idea I have for my Wordpress blog. I want to redesign the header. What I had in mind is something like the header of this website but with some gradients and rounded corners on the top too. This is what I had in mind:
I just need some help to get me started. I'm very inexperienced and reading all the tutorials I found was just overwhelming, and I'm now back at the beginning.
Thanks in advance,
Jo
kazimmerman posted this at 18:55 — 3rd February 2009.
He has: 698 posts
Joined: Jul 2005
I'm guessing you're really going to try some color and something bulkier. It's hard to say what just the header should look like, because while it may look great, how are we to know if it's cohesive with the rest of the website? The layout obviously works, though I'm unsure what "LOGO pt1" and "LOGO pt2" means...
Anywho, my point is that the overall layout works...oh wait, what is that big gray thing? Aah, a drop-down menu. For what? And why is it positioned here? Is it going to drop in front of the search box? See, my point is that I need more of an overall design and a more realistic mock-up to judge.
Kurtis
jojui posted this at 20:02 — 3rd February 2009.
They have: 5 posts
Joined: Feb 2009
Well, I'm going for a clean overall look with lots of white (white background) and rounded boxes. The header would be very similar to the mock-up, it's just that I haven't refined the design yet. The colors would be grayish with a bright orange smaller part of the logo and a dark gray bigger part of the logo (basically the description of the blog).
I know, the drop-down menu is bothering me too. I thought that I could use it for "about" and "archives" pages. I'll have to rethink that.
Thanks,
Jo
Renegade posted this at 19:19 — 3rd February 2009.
He has: 3,022 posts
Joined: Oct 2002
Try not to do too many things at once. Coming up with a design before you have a logo may not be the best idea and may cause headaches which could have been avoided.
Decide on what content you want to put up on the site first then come up with a logo. Once you have a logo, you should have an idea of what colours to use.
Only after you have decided on a logo do you start working on how the "look and feel" of the page will be like.
See if the above process works for you
jojui posted this at 20:02 — 3rd February 2009.
They have: 5 posts
Joined: Feb 2009
Decide on what content you want to put up on the site first then come up with a logo. Once you have a logo, you should have an idea of what colours to use.
Only after you have decided on a logo do you start working on how the "look and feel" of the page will be like.
See if the above process works for you :)
I think I covered the most in my response to kazimmerman. I don't have a name yet, but I've decided that the logo would be bright orange so that it would stand out on the gray header. The contents of the page would be very clean and white.
The main reason I'm asking for help is that I don't know how to achieve that rounded box look from the mock-up, especially with the effect of two rounded boxes on top of each other, and the gradient on the lower one. I hope I'm making some sense
Thanks,
Jo
webwiz posted this at 17:05 — 4th February 2009.
He has: 629 posts
Joined: May 2007
Just a suggestion - If you could link to a document that illustrates your problem, I think we'd be better able to help.
jojui posted this at 19:25 — 4th February 2009.
They have: 5 posts
Joined: Feb 2009
Here, I've done a better mockup of the header background.
What's the best way to accomplish this with HTML and CSS?
Thanks,
Jo
kazimmerman posted this at 19:44 — 4th February 2009.
He has: 698 posts
Joined: Jul 2005
There are several ways to achieve rounded corners with CSS, but to achieve the gradient look you're still going to need an image.
pr0gr4mm3r posted this at 19:47 — 4th February 2009.
He has: 1,502 posts
Joined: Sep 2006
Actually, I remember back in the FrontPage days, there was a way to create a gradient background. Of coarse, it's IE only.
jojui posted this at 21:00 — 4th February 2009.
They have: 5 posts
Joined: Feb 2009
Thanks for pointing me to google
, I found some helpful tutorials that I actually missed when I was searching earlier. I understand that I'll be needing an image to accomplish what I want, but the thing that I don't get is how to accomplish that overlapping boxes effect.
kazimmerman posted this at 21:18 — 4th February 2009.
He has: 698 posts
Joined: Jul 2005
Well, you'll just need two DIVs, one inside the other.
For instance:
...<div id="light_gray_box">
<div id="dark_gray_box">
...
</div>
</div>
...
Using appropriate padding, margins, whatever, you can achieve that look.
Kurtis
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.