want to justify the navigational header to the right

4 views
Skip to first unread message

dadd...@gmail.com

unread,
Jun 14, 2007, 11:49:05 AM6/14/07
to WuCoco Users
Wucoco looks so great on my blog

www.daddyrhon.com

My knowledge of CSS does have its limits. but I would simply like to
scoot the navigation links in the header to the right.

Do you have a moment to clue me?

Thank you for your time and thank you for allowing the world to use
your design.

Rhon

Mike Lococo

unread,
Jun 14, 2007, 12:00:21 PM6/14/07
to wucoco...@googlegroups.com
> My knowledge of CSS does have its limits. but I would simply like to
> scoot the navigation links in the header to the right.

Look in style-core.css for '#header .nav' section. The 'left' statement
controls horizontal position. It's specified as a pixel offset from the
left margin of it's parent div (basically the left edge of the header
image, if I remember correctly), so you'll just want to increase that
value a few pixels at a time until you're happy with your horizontal
position.

Thanks,
Mike

dadd...@gmail.com

unread,
Jun 14, 2007, 5:35:25 PM6/14/07
to WuCoco Users
Mike!

Thank you so much for writing me back. What you are saying makes
perfect sense. The reason I am thinking I don't know as much about CSS
as I thought I did is because I had tried adjusting the left margin
all kinds of ways, but it doesn't seem to budge the navigational bar.
I even changed the word "left" to "right" and no workie. Am I
overlooking something? Any clues you could offer would be so
appreciated.

Here is the way the core style reads now:

#header .nav {
position: absolute;
top: 35px;
left: 600 px;
height: 36px; /* Is this necessary? */
/* font: 1.2em Verdana, Sans-Serif; */
font-size: 1.2em;
color: #404040; /* Is this necessary? */
}


and just in case I did something weird to the header.php.... here's
that

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="<?php
bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?>
&raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?
>" /> <!-- leave this for stats -->

<link rel="alternate" type="application/rss+xml" title="RSS 2.0"
href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php
bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3"
href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<style type="text/css" media="screen">
<!--
@import url(<?php bloginfo('stylesheet_directory'); ?>/style-
core.css);
@import url(<?php bloginfo('stylesheet_directory'); ?>/style.css);
<?php if (eregi("MSIE",getenv("HTTP_USER_AGENT")) || eregi("Internet
Explorer",getenv("HTTP_USER_AGENT"))) { ?>
@import url(<?php bloginfo('stylesheet_directory'); ?>/style-
ie.css);
<?php } ?>
-->
</style>

<script language="javascript" type="text/javascript">
// <![CDATA[
function resetSearchText() {
if ("search..."==document.searchform.s.value)
{ document.searchform.s.value = ""; }
}

fixHeight=function(){
// Declare and initialize variables
var divs,contDivs,maxHeight,divHeight,d;
maxHeight=0;
contDivs=[];

divs=document.getElementsByTagName('div'); // get all <div>
elements in the document
for(var i=0;i<divs.length;i++){ // for all divs...
if(/\bfixheight\b/.test(divs[i].className)){ // find those with the
class attribute 'fixheight'...
d=divs[i];
contDivs[contDivs.length]=d;

// determine their height, defined as either offsetHeight or
pixelHeight
if(d.offsetHeight){ divHeight=d.offsetHeight; }
else if(d.style.pixelHeight){ divHeight=d.style.pixelHeight; }

// Keep track of the largest div height
maxHeight=Math.max(maxHeight,divHeight);
}
}

// assign all divs the height of the tallest div
for(var i=0;i<contDivs.length;i++){
contDivs[i].style.height=maxHeight + "px";
}
}

// Run fixheight on page load
window.onload=function(){
if(document.getElementsByTagName){ fixHeight(); }
}
// ]]>
</script>

<?php wp_get_archives('type=monthly&format=link'); ?>

<?php wp_head(); ?>
</head>
<body>
<div id="header">
<div class="nav">

<div>
<?php /* CUSTOMIZE HEADER LINKS HERE */ ?>
|&nbsp;&nbsp;<a href="<?php echo get_settings('home'); ?
>">blog</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://www.daddyrhon.com/
about-daddy-rhon/">bio</a>&nbsp;&nbsp;|&nbsp;&nbsp; <a href="http://
www.daddyrhon.com/paintings/">paintings</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="http://www.daddyrhon.com/photography/">photography</
a>&nbsp;&nbsp;|&nbsp;&nbsp; <a href="http://www.daddyrhon.com/butch-
femme-bash/">butch-femme.com bash</a>&nbsp;&nbsp;|&nbsp;<a
href="http://www.daddyrhon.com/contact-me-2/">contact</a>&nbsp;&nbsp;|
&nbsp;<a href="http://www.daddyrhon.com/rss/"><img src="http://
www.feedburner.com/fb/images/pub/feed-icon16x16.png" alt="rss"
width="16" height="16" border="0" /></a>&nbsp;
<?php /* END HEADER LINKS */ ?>
</div>
</div><?php /* UNCOMMENT THE LINE BELOW IF YOU WISH TO SEE YOUR
BLOG'S TITLE IN THE HEADER */ ?>
<!-- <div id="blogtitle"><h1><?php echo get_bloginfo ( 'name' ); ?
></h1></div> -->
<div class="searchform"><?php include (TEMPLATEPATH . '/
searchform.php'); ?></div>
</div>

dadd...@gmail.com

unread,
Jun 16, 2007, 4:54:11 PM6/16/07
to WuCoco Users
Any clues? :)

I tried it with some outrageous numbers this morning and it still does
not change position.

Right now it reads

#header .nav {
position: absolute;
top: 35px;

right: 300000 px;


height: 36px; /* Is this necessary? */
/* font: 1.2em Verdana, Sans-Serif; */
font-size: 1.2em;
color: #404040; /* Is this necessary? */
}

I tried it with small numbers and huge numbers, right and left.

If you can help, I would be so grateful.

Rhon

On Jun 14, 11:00 am, Mike Lococo <mikeloc...@gmail.com> wrote:

mikel...@gmail.com

unread,
Jun 17, 2007, 9:09:01 AM6/17/07
to WuCoco Users
Rhon,

I typically try not to troubleshoot theme customizations unless they
have some prospect of contributing improvements back into the main
codebase, such troubleshooting sessions often go on tangents that have
little to do with WuCoco development. In this case, the problem is
simply that you're not using correct CSS syntax.

However, you've gone through some trouble to ask a well-formed
question,
and I appreciate folks that try to ask good questions. Soooo...

> top: 35px;
> right: 300000 px;

There a space between the number (300000) and the unit (px). Can't do
that, it's not syntactically correct. In the future, try
troubleshooting your CSS with FireFox's built in DOM inspector, it
makes
it very easy to see if your code is behaving the way that you expect
(in
this case it would have shown you that there was no right/left
statement
being applied to the NAV block because the browser ignores any lines
with syntax that it can't figure out).

Thanks,
Mike

Daddy Rhon

unread,
Jun 17, 2007, 12:48:56 PM6/17/07
to wucoco...@googlegroups.com
DOH! I knew I was overlooking something simple. Perfect! Thank you for taking time to share your knowledge, and for the use of your design.

Have a good weekend!
Rhon
--
Regards,
Rhon
Reply all
Reply to author
Forward
0 new messages