Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
header design strategies and CSS
so i’m a little unclear on how to make a good header using CSS. i’ve figured out how to make the logo image link to home, i know how to make an inline list for navigation. i also wanted a banner image below those items so i made a new div in the page and a new style for it (background-image). so how do i fit the three pieces of the puzzle together? do all three elements need their own divs?
Logo ___________________Link 1 / Link2 / Link3
————————— banner image—————————————-
———————————————————————————————-
———————————————————————————————-
Offline
Re: header design strategies and CSS
I would do it something like this:
<div id="header">
<img id="logo" src="whatever" alt="logo" width="whatever" height="whatever" />
<ul>
<li><a href="link one url">Link One</a></li>
<li><a href="link two url">Link Two</a></li>
<li><a href="link three url">Link Three</a></li>
</ul>
</div>Then the CSS might look like this:
#header {
background: url(header.jpg) no-repeat 0 0;
height: 100px;
width: 800px;
}
#header #logo {
float:left;
height: 100px;
width: 100px; /* Height and Width are specific to your needs*/
}
#header ul {
float: right;
text-align: right;
width: 700px; /*800px - 100px = 700px (make sense?)*/
}
#header ul li {
display: inline;
list-style-type: none;
}That’s my best thought at the moment Elliot. There are tons of ways to achieve what you are looking for. Try that. Get it live, so we can see it, and then we can help you more specifically from there.
:)
Matthew
ps. You’ll get a lot of help here, but I would also think about learning layout and css from some more specific forums that deal with this exclusively. (just a thought)
Last edited by ma_smith (2007-03-28 18:33:57)
- I am Squared Eye and I
am launchinghave launched Pattern Tap
Offline
Re: header design strategies and CSS
hey matthew thanks for posting this. the code looks simple enough to execute. one question about your snippet – does your background-image take into account that it should fall below the logo and nav links? just from looking at your snippet it appears that the logo and nav links will go over top the image. would you say it’s better to design a header image in photoshop that has blank/dead space included, or make the background-image take it’s own div on the xhtml code?
yeah good call on the css forums thing, better to keep things on topic with textpattern specific issues here. i’m also considering getting this book Beginning CSS Web Development: From Novice To Professional
Offline
Re: header design strategies and CSS
Elliot,
You can effect the position of a background image like this:
#header {
background-image: url(header.jpg);
background-repeat: no-repeat;
background-position: 0 -40px; /*This would make it 0(left) and -40px(from the top)*/
}The previous version was shorthand. A good bet for you is to study the W3C Schools stuff
Last edited by ma_smith (2007-03-28 18:34:15)
- I am Squared Eye and I
am launchinghave launched Pattern Tap
Offline