Right, I've coded up a basic site in wordpress for a mate, it's my first attempt at wordpress, but so far so good.

Until she asked me to add a little arrow next to the currently viewed page. No worries I though, simple list & some PHP, but alas, I can't get the arrow to display quite right... it's more a trapezium..

Basically I'm adding the ID #current to the currently viewed page which is suppose to position a triangle next to it... the positioning part i'm having trouble with however, also it's looking more like a trapezium than a triangle..

ANYONE Who can figure this out i'll be eternally grateful to. I've put so many hours into just this little arrow...

Here's the CSS:


/*
Theme Name: LForrester
Theme URI: http://laurenforrester.co.uk
Description: A search engine optimized Wordpress Portfolio for Lauren Forrester.
Version: 1.0
Tags: Graphic Design, Art Direction, Portfolio, Leeds, Lauren Forrester
.

Like WordPress, this work is released under GNU General Public License, version 2 (GPL).

http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
*/


/* Reset default browser styles */
@import url('styles/reset.css');

/* Rebuild default browser styles */
@import url('styles/rebuild.css');

/* Essential Wordpress Styling */
@import url('styles/wp.css');

h1 {letter-spacing:2px}


A:link {text-decoration: none; color:#000000;}
A:visited {text-decoration: none; color:#000000;}
A:active {text-decoration: none; color:#000000;}
A:hover {text-decoration: none; color:#000000;}



#header{ z-index: 1;
Position: absolute;
Left:50%;
Top: 40px;
width: 140px;
height: 200px;
margin-left: -470px;
font-size: 40;
color:#000000 ;
background-color:#FFFFFF}

#titletag{ z-index: 2;
Position: absolute;
Left:50%;
Top: 40px ;
width: 200px;
height: 200px;
margin-left: -245px;
font-size: 10;
color:#000000 ;
background-color:#FFFFFF}


#sidebar{ z-index: 3;
Position: absolute;
Left:50%;
Top: 270px ;
width: 150px;
height: 240px;
margin-left: -468px;
font-size: 10;
color:#000000 ;
background-color:#FFFFFF}


#main{ z-index: 4;
Position: absolute;
Left:50%;
Top: 266px ;
width: 600px;
margin-left: -200px;
font-size: 10;
color:#000000 ;
background-color:#FFFFFF;}


ul.arrowselect{
list-style-type: none;
margin:0;
padding:0;

}

ul.arrowselect li{
position: relative;
padding:0;

}



#current{ /* use CSS generated content to add arrow to the menu */

display: inline;
position:relative;
left: -5px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;

border-left: 5px solid purple;
}


Code for the Wordpress Sidebar:



<div id="sidebar">

<h1>ABOUT ME</h1><br>
<p>
<ul class="arrowselect">
<li<?php
if (is_page('about-me'))
{
echo " id=\"current\"";
}?>><a href="http://laurenforrester.co.uk/about-me">About Me</a><br></li>

<li<?php
if (is_page('contact-me'))
{
echo " id=\"current\"";
}?>><a href="http://laurenforrester.co.uk/contact-me">Contact Me</a><br></li>
<li<?php
if (is_page('curriculum-vitae'))
{
echo " id=\"current\"";
}?>><a href="http://laurenforrester.co.uk/curriculum-vitae/">Curriculum Vitae</a></li>
</ul>
</p>
<br>

<h1>PORTFOLIO</h1><br>
<p>
<ul class="arrowselect">
<?php
$pages = get_pages();
foreach ($pages as $pagg) {
if ($pagg->ID > 10) {$option = '<li><a href="'.get_page_link($pagg->ID).'">';
$option .= $pagg->post_title;
$option .= '</a></li><br>';
echo $option;}
} ?>
</ul>
</p>
<h1>BLOG</h1><br>

<p><a href="http://www.laurenforrester.co.uk/wp-content/themes/LForrester/latest.php">Latest Posts</a><br>
<?php wp_get_archives('type=monthly&limit=4&format=custom&before=&after=<br>'); ?>




</div>


I'm going to leave the issue live on the website so you guys can check it out:
www.LaurenForrester.co.uk

Seriously Would LOVE you guys so much if you could fix this.

Thanks,

Zul

EDIT: Also, now seems to not even do anything in chrome... I've no idea what i've done, i've been playing with this for so long I can't even think straight anymore... >.<

What is the triangle, exactly? An image?

No it's CSS, it's being displayed by the selector #current by making an element with 0 width and height and 3 transparent borders... I was following this article:
http://css-tricks.com/snippets/css/css-triangle/

Is there a specific reason you need to use css and not just an image? It seems like you're overcomplicating a simple thing. Its not like an image like that (what, 5x5px?) would add any loading time, and I doubt that method is very friendly with older browsers.

Yeah i'm sure you're right, i'll totally use an image if no one can figure this out.. Any idea how I could get it working this way though? Would love to know, you know, just for the sake of curiosity now..

EDIT: And i'm sure it must be a pretty simple fix... I've had it almost working several times with various different positioning & tweaks >.<

Well I tried adding a div with the ID current containing your active LI, giving them float values, and it makes the arrow appear but the next menu item hops up. Give it a try and tweak it a bit, it might work.


<style type="text/css">
.item_{
float: right;
}


#current{ /* use CSS generated content to add arrow to the menu */

display: inline;
position:relative;
left: 0px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;

border-left: 5px solid purple;
float: left;
}
</style>

<ul class="arrowselect">
<div id="current"><li class="item_"><a href="http://laurenforrester.co.uk/about-me">About Me</a><br /></li></div>

<li><a href="http://laurenforrester.co.uk/contact-me">Contact Me</a><br /></li>

<li><a href="http://laurenforrester.co.uk/curriculum-vitae/">Curriculum Vitae</a></li>
</ul>




Also, I just noticed this. <p></p><br />

Thats bad practice. Never use paragraph or break tags for layout. ;)

Haha you're certainly hardcore ;)

Cheers for that.. Yeah gotta fix that <p></p> tag issue, however i'm loading custom font's into the <p> tags, so gotta keep them in one way or another! ;)

I think I got it actually.

.currentLi{
display: inline;
margin-bottom: 5px;
width: 200px;
height: 10px;
}
.arrowselectLi{
display: inline;
margin-bottom: 5px;
width: 60px;
height: 10px;
}
#current{ /* use CSS generated content to add arrow to the menu */

display: inline;
position:relative;
left: 0px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;

border-left: 5px solid purple;
float: left;
}


<ul class="arrowselect">
<div><div id="current"></div><li class="currentLi"><a href="http://laurenforrester.co.uk/about-me">About Me</a><br /></li></div>

<li class="arrowselectLi"><a href="http://laurenforrester.co.uk/contact-me">Contact Me</a><br /></li>

<li class="arrowselectLi"><a href="http://laurenforrester.co.uk/curriculum-vitae/">Curriculum Vitae</a></li>
</ul>

Results in:

http://i52.tinypic.com/zl7q6v.png

And if you want them all lined up nicely just add a margin-left:5px; selector to the arrowselectLi class.

Oh my god, you are a Legend! Literal SuperStar. Merci Hombre!

No prob. ;)
If you could mark the thread as resolved that would be great. :thumbsup:

Also, I just noticed this. <p></p><br />

Thats bad practice. Never use paragraph or break tags for layout. ;)

Why is it bad practice?

Why is it bad practice?

In HTML, elements should always and only be used only for what they are intended. For example, you should always put a paragraph of text into a <p></p> tag, or a heading into a <h1></h1>,<h2></h2>, etc. tag. This is for a number of reasons:

Cross Browser Compatability
SEO (Search Engine Optimization)
Code Readability
Accessability (Being accessible to people with physical handicaps, such as blindness. (Someone sued Target a while ago because its website wasn't blind-friendly))

The list goes on. The point is, use an element for what it is meant to do, nothing more and nothing less. An element should never be used strictly for aesthetic purposes. Thats the whole point of CSS!

In this case, the OP appeared to be using <p></p><br /> to add vertical spaces in their design. This would not only confuse a search engine spider, but also an accessibility program like text-to-speech. Different browsers will also tend to render these shortcuts differently, causing undesirable effects. <br /> tags should generally only be used to bump some text to the next line, and you should never have 2 or more break tags next to each other. I can't tell you how many times I've seen <br /><br /><br /><br /><br /><br /><br /> in new designers' code.

The proper way to do 99.9% of aesthetics is CSS. In place of <p></p><br />, one could use margin-bottom:20px;, for example. Not only is it more customizable, its a hell of a lot easier.

Rest assured, that's mearly a bug in the php, I would never use code like that intentionally.

<ul class="arrowselect">
<div><div id="current"></div><li class="currentLi"><a href="http://laurenforrester.co.uk/about-me">About Me</a><br /></li></div>
That's an invalid markup! Check http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Flaurenforrester.co.uk%2Fcontact-me%2F

I'd do something like
<ul class="arrowselect">
<li><a href="http://laurenforrester.co.uk/about-me">About Me</a></li>
<li id="current"><span></span><a href="http://laurenforrester.co.uk/contact-me">Contact Me</a></li>
<li><a href="http://laurenforrester.co.uk/curriculum-vitae/">Curriculum Vitae</a></li>
</ul>
body{
line-height:1.5;
}
.arrowselect li{
position:relative;
padding-left:10px;
list-style:none;
}
#current span{ /* use CSS generated content to add arrow to the menu */

position:absolute;
left:0;
top:30%;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid purple;
}
.arrowselect a{
text-decoration:none;
}

In HTML, elements should always and only be used only for what they are intended. For example, you should always put a paragraph of text into a <p></p> tag, or a heading into a <h1></h1>,<h2></h2>, etc. tag. This is for a number of reasons:

Cross Browser Compatability
SEO (Search Engine Optimization)
Code Readability
Accessability (Being accessible to people with physical handicaps, such as blindness. (Someone sued Target a while ago because its website wasn't blind-friendly))

The list goes on. The point is, use an element for what it is meant to do, nothing more and nothing less. An element should never be used strictly for aesthetic purposes. Thats the whole point of CSS!

In this case, the OP appeared to be using <p></p><br /> to add vertical spaces in their design. This would not only confuse a search engine spider, but also an accessibility program like text-to-speech. Different browsers will also tend to render these shortcuts differently, causing undesirable effects. <br /> tags should generally only be used to bump some text to the next line, and you should never have 2 or more break tags next to each other. I can't tell you how many times I've seen <br /><br /><br /><br /><br /><br /><br /> in new designers' code.

The proper way to do 99.9% of aesthetics is CSS. In place of <p></p><br />, one could use margin-bottom:20px;, for example. Not only is it more customizable, its a hell of a lot easier.

I put br tags in all the time - but only inside paragaphs. I agree that CSS is for aesthetics. I don't code for blind people, because everything I do is visual... I have a tough enough time just getting something to look right, let alone be 'blind friendly'! I thought it was only government services which can get into trouble for not catering for disabilities? Even then, I think suing is rather extreme, if the problem could be fixed by them communicating with the webmaster.

In this case, the OP appeared to be using <p></p><br /> to add vertical spaces in their design. This would not only confuse a search engine spider, but also an accessibility program like text-to-speech.

what AT/robot cannot handle <br /> tags?
i call BS!