My nav looks like crap–help a newbie!

  • lildziner

    (@lildziner)


    14 years, 8 months ago

    Full disclosure, I’m a designer not a developer.

    I’m trying to design a new blog to match an already designed website so that it looks seemless from page to page. I’m trying to modify the “default” kubrick theme but clearly I’m doing something wrong. Is there something obvious I’m missing here?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Mark / t31os

    (@t31os_)

    14 years, 8 months ago

    Ok, but what specifically would you like help with?..

    Seems you given everything but the actual question you need answered, lol.. 😉

    Both pages apart from a few very minor differences look the same..

    Thread Starter lildziner

    (@lildziner)

    14 years, 8 months ago

    Thanks for reading my post!

    well so I guess my question is if I’m using the same code for layout and same CSS styles, why does my nav look jumbled. I guess I’m wondering if its possible to approach layout the same when designing within a PHP blog. Can I code in the same way to layout my nav? Or if I’m supposed to be using this dileo: <?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’);?> Clearly I know nothing about PHP but I read in a tutorial that I’m supposed to swap out li with that piece of code.

    This is what my code looks like below the body tag: 

    <div id="page">
<div id="header" role="banner">
<div id="headerimg">
		<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
		<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>

  <div id="nav">
  	<ul id="ul">
  	<li><a href="../Fiddlehead/webdev/index.html"index.html" class="selected"><img src="images/nav_off_home.png" alt="home"></a></li>
    <li><a href="products.html"><img src="images/nav_off_products.png" alt="products"></a></li>
    <li><a href="classes.html"><img src="images/nav_off_classes.png" alt="classes" ></a></li>
    <li><a href="project.html"><img src="images/nav_off_project.png" alt="project" ></a></li>
    <li><a href="events.html"><img src="images/nav_off_events.png" alt="events" ></a></li>
    <li><a href="directions.html"><img src="images/nav_off_directions.png" alt="directions"></a></li>
    <li><a href="index.html"><img src="images/nav_off_blog.png" alt="blog" ></a></li></ul>
  </div>
<hr />
    Jabbok

    (@jabbok)

    14 years, 8 months ago

    I would guess that it has something to do with your class=”selected”. have you copied that “class” identifier to the new blogs CSS?

    Thread Starter lildziner

    (@lildziner)

    14 years, 8 months ago

    yeah, that’s copied over. But for sh*ts and giggles I deleted that bit and it didn’t do anything.

    Mark / t31os

    (@t31os_)

    14 years, 8 months ago

    Assuming you started editting a WordPress theme to get the job done, you would have had existing CSS in the theme’s stylesheet, there’s likely to be a conflict between the existing WordPress theme CSS and your own (added) CSS…

    WordPress templates act as any HTML equivalent would..

    In a wordpress page

    <div class="example">Hello</div>

    In regular html page

    <div class="example">Hello</div>

    Would both be treated the same, it’s the same code, the only difference is the CSS defintions, and these essentially control how your elements act throughout the page.

    If you know which parts of the stylesheet are from the theme’s original CSS, chop pieces out, save, reload the page, if no change, paste it back in, remove another chunk, rinse and repeat, until you find the area that’s causing a conflict with said element(s)..

    In regard to using..

    wp_list_pages()

    The main reason to use this is simply to avoid having to update the theme every time you create a new page, rather then having to code in a new element.. [example below]

    <li class="example><a href="example">Example</a></li>

    The wp_list_pages function grabs the pages for you and applies CSS classes to elements for styling in the stylesheet, this essentially saves you hours of writing code, you just simply style the elements created, rather then writing them out each time..

    The codex does generally give good examples and points to pages and pages of information… (Docs link at the top)…

    technokinetics

    (@technokinetics)

    14 years, 8 months ago

    In what folder are your “nav_off_” images? The path to them seems to be broken.

    – Tim

    Thread Starter lildziner

    (@lildziner)

    14 years, 8 months ago

    Thanks, t31os_ Thats a helpful explanation.

    Thread Starter lildziner

    (@lildziner)

    14 years, 8 months ago

    Technokinetics, that’s it. Thank you! Even though the nav images were in the same spot as the page images, it wasn’t “seeing” them. I still don’t understand why but once I replaced “images/nav_off_ …” with a full URL of its location, the page can see them.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘My nav looks like crap–help a newbie!’ is closed to new replies.