- This topic is empty.
December 16, 2012 at 9:41 am #41380
I’m building my first custom WordPress theme, following Chris Coyier’s (he’s great) tutorial on Lynda . The tutorial uses a sidebar for a nav bar, but I’d like to create a horizontal nav bar. I’ve always done this in Dreamweaver (or Fireworks) with CSS, using images as the tabs, but Dreamweaver uses some sort of swap image code:
My worry is that WordPress won’t accept that sort of code used for Nav bar in Dreamweaver?
The tutorial uses a list order approach, html styled with CSS.
I’m guessing I should use the list order approach? But then how do I get the nav bar to be horizontal, and not vertical?
In Dreamweaver, I’d create a nav bar space with CSS, then float the images/tabs into that space, next to one another.
List order uses text, not images. Not sure how to approach. Anyone familiar?
Thanks!December 16, 2012 at 10:13 am #117621
Ah. I think I need to use a float left option in the CSS…December 16, 2012 at 10:24 am #117623Paulie_DMember
You must be running an old version of DW if it’s recommending using images….not that you can’t but it’s very…erm…20th Century.
A sprite can be the way to go (which is a single combined image) but it entirely depends on the design of your site.
If you have one, why not let us take a look and we could recommend some alternatives.December 16, 2012 at 10:55 am #117627
@tigerpaw Are you talking about something like this? http://codepen.io/chrisburton/pen/AbdKeDecember 16, 2012 at 12:45 pm #117652
Thanks to both of you for responding. Chris: yep, I looked at a sample on the w3schools site, and it looks a lot like what you just showed me. I’d love to show you the design, but it’s not coded or online yet. Only the Photoshop version. I don’t think I can insert a jpg here?
But I can show you a past website I designed: http://www.thepinchdc.com/
The nav bar is the same that I’m trying to do with this new site: simple rollovers where the text changes. I think I figured it out though, from the w3school code sample, using a float left CSS style.
Pauli: In Dreamweaver I just imported the graphic I made in Photoshop (nav bar sliced up into each category: “home” as one graphic, “about” another graphic, etc…). But you can insert/image objects/rollover image. That gives you the option to bring in the graphic as a rollover. Dreamweaver ads some sort of image swap code, that swaps from, say, the “home” graphic, to an 2nd “home” graphic I made in Photoshop that you view when the mouse hovers over. But I don’t know if WordPress will allow that sort of thing. That’s why I’m trying to do things without Dreamweaver’s help. Just html and code, the standard way…which I suck at.
I have a design brain, and am fairly new to code, so I’m sure I’m not doing things the best way. That’s why I joined this site :)December 16, 2012 at 1:03 pm #117656
You can paste images here. Either link us to the file using http://tinypic.com or use html.December 16, 2012 at 1:28 pm #117660
@keving11189 If he’s using images for the text, he’s better off using a sprite.December 16, 2012 at 1:29 pm #117661
Excellent! Thanks for the advice. I’m about to code the design, so we’ll see how it goes.December 16, 2012 at 1:56 pm #117665
Although he probably doesn’t need a sprite. I agree that he should just apply the menu bar as a background image and use a font to render the text.
- The forum ‘CSS’ is closed to new topics and replies.