Jump to content

CSS help


MoltenTesseract
 Share

Recommended Posts

Hey. i need some help positioning some things.So i pretty much have a header div with a x-repeated background for the header.Now i want to add a text logo (an image) to the center of this header.But at the same time, i want to have a tab navigation sit over to the bottom left of the header.I can upload the mess i have made of my site if its needed. I'm new to css and using dreamweaver CS3. (i didnt use a template i started from scratch)Thanks!

Link to comment
Share on other sites

You probably want something like this:HTML:

<div id="header"><img src="title.png" alt="[Image]"><ul id="nav"><li><a href="URL">Menu item</a></li><li><a href="URL">Menu item</a></li><li><a href="URL">Menu item</a></li></ul><span class="clear"> </span></div>

CSS:

#header { background: url(header.png) repeat-x; }#nav { padding: 0; }#nav li {float: left;background: url(tab.png) no-repeat top left;height: 20px;}.clear { height: 1px; line-height: 1px; clear: both; }

It's pretty much required that you know at least some CSS to adapt this to your site. So please look through the CSS tutorial.

Link to comment
Share on other sites

You probably want something like this:HTML:
<div id="header"><img src="title.png" alt="[Image]"><ul id="nav"><li><a href="URL">Menu item</a></li><li><a href="URL">Menu item</a></li><li><a href="URL">Menu item</a></li></ul><span class="clear"> </span></div>

CSS:

#header { background: url(header.png) repeat-x; }#nav { padding: 0; }#nav li {float: left;background: url(tab.png) no-repeat top left;height: 20px;}.clear { height: 1px; line-height: 1px; clear: both; }

It's pretty much required that you know at least some CSS to adapt this to your site. So please look through the CSS tutorial.

Thanks, but how do i get the text image centered vertically and horizontally?Also, i need to center the text on the tabs vertically too.Thanks again!EDIT: hmm... i'm also getting some browser incompatibility. (just the tabs, not the padding around the header in IE)btw: this isnt my actual page, i redid just the header in a new document just incase my other code was causing the issue, but it wasnt.15362273cm8.jpg46507692hl1.jpg
Link to comment
Share on other sites

If you tell me the width of the image, I can tell you how to fix it. I can't help you really unless I can see where the problem is. I DO know, however that it involves the float, margin and width elements.

Link to comment
Share on other sites

I think there's a list-style problem in there too :)

I'm not too sure... how to i find out?
What DTD are you using? The DOCTYPE right up the top.Edit: Oh yes, if you upload your files that would be very helpful.
Link to comment
Share on other sites

I think there's a list-style problem in there too :)What DTD are you using? The DOCTYPE right up the top.Edit: Oh yes, if you upload your files that would be very helpful.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Also, i seem to have fixed most issues i was having, by changing the padding values for certain things, although i'm still have a slight issue with firefox adding a little bit more under the tabs than in IE. (the same height as shown in the firefox screen above)I'm using firebug on http://www.dezinerfolio.com/ to look at the css code related to certain bits to see how they did it, because i simply love their layout.Heres my zipped website, i'm using the template, so you will have to edit that one. :)http://www.mediafire.com/?gje1mx2xzl1Also, if anyone could give me some tips as to what i could do better it would be much appreciated.EDIT: also, i want to add a border image to the left and right size of the header.

Link to comment
Share on other sites

You can always control padding and margins on your <li> item with CSSAnd it might also help if you don't put spaces or line breaks between your list items:

<ul id="nav"><li><ahref="URL">Menu item</a></li><li><ahref="URL">Menu item</a></li><li><ahref="URL">Menu item</a></li></ul>

Link to comment
Share on other sites

You can always control padding and margins on your <li> item with CSSAnd it might also help if you don't put spaces or line breaks between your list items:
<ul id="nav"><li><ahref="URL">Menu item</a></li><li><ahref="URL">Menu item</a></li><li><ahref="URL">Menu item</a></li></ul>

Thanks, i plan to fix the tab text up when i get the right font size and whatnot happening.heres my updated zip; http://www.mediafire.com/?wmduf4y4nd1I'm having some issues with the two side header columns, in IE they render fine, but in FF, the centre column spans underneath the other two columns.but most other issues i have fixed.
Link to comment
Share on other sites

Try validating the page. You've probably forgotten to close a tag, and that's why it doesn't work.The CSS for font changing is the following, where p is a selector/class/ID you want to apply the settings to, and "The Font" is the name of the font:p {font-family: "The Font";}May we have the name of the font?!?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...