Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help, CSS arrow Fustrating me No end!

    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:

    Code:
    /*
    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:

    Code:
    <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... >.<
    Last edited by Zulfus; 07-06-2011 at 01:27 AM. Reason: New info.

  • #2
    New Coder
    Join Date
    May 2011
    Posts
    79
    Thanks
    3
    Thanked 4 Times in 4 Posts
    What is the triangle, exactly? An image?
    Quote Originally Posted by bullant View Post
    Basically - Java is to Javascript as Ham is to Hampster.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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/

  • #4
    New Coder
    Join Date
    May 2011
    Posts
    79
    Thanks
    3
    Thanked 4 Times in 4 Posts
    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.
    Quote Originally Posted by bullant View Post
    Basically - Java is to Javascript as Ham is to Hampster.

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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 >.<
    Last edited by Zulfus; 07-06-2011 at 12:56 AM.

  • #6
    New Coder
    Join Date
    May 2011
    Posts
    79
    Thanks
    3
    Thanked 4 Times in 4 Posts
    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.

    Code:
    <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.
    Code:
    <p></p><br />
    Thats bad practice. Never use paragraph or break tags for layout.
    Quote Originally Posted by bullant View Post
    Basically - Java is to Javascript as Ham is to Hampster.

  • #7
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!

  • #8
    New Coder
    Join Date
    May 2011
    Posts
    79
    Thanks
    3
    Thanked 4 Times in 4 Posts
    I think I got it actually.

    Code:
    .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;
    }
    Code:
    <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:



    And if you want them all lined up nicely just add a margin-left:5px; selector to the arrowselectLi class.
    Last edited by xFinaLx; 07-06-2011 at 01:20 AM.
    Quote Originally Posted by bullant View Post
    Basically - Java is to Javascript as Ham is to Hampster.

  • Users who have thanked xFinaLx for this post:

    Zulfus (07-06-2011)

  • #9
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oh my god, you are a Legend! Literal SuperStar. Merci Hombre!

  • #10
    New Coder
    Join Date
    May 2011
    Posts
    79
    Thanks
    3
    Thanked 4 Times in 4 Posts
    No prob.
    If you could mark the thread as resolved that would be great.
    Quote Originally Posted by bullant View Post
    Basically - Java is to Javascript as Ham is to Hampster.

  • #11
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    Quote Originally Posted by xFinaLx View Post
    Also, I just noticed this.
    Code:
    <p></p><br />
    Thats bad practice. Never use paragraph or break tags for layout.
    Why is it bad practice?

  • #12
    New Coder
    Join Date
    May 2011
    Posts
    79
    Thanks
    3
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by Daniel_A_Varney View Post
    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.
    Last edited by xFinaLx; 07-06-2011 at 03:46 AM.
    Quote Originally Posted by bullant View Post
    Basically - Java is to Javascript as Ham is to Hampster.

  • #13
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Rest assured, that's mearly a bug in the php, I would never use code like that intentionally.

  • #14
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by xFinaLx
    Code:
    <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?verbos...Fcontact-me%2F

    I'd do something like
    Code:
    <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>
    Code:
    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;
    }
    Last edited by abduraooft; 07-06-2011 at 12:36 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #15
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    Quote Originally Posted by xFinaLx View Post
    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.
    Last edited by Daniel_A_Varney; 07-07-2011 at 05:34 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •