I'm still learning php, so I'm not entirely sure how to address..
I need to have an image and some text display in a php array. Currently, I'm using a span but it's not working properly- only one span is showing the image I've established in the stylesheet.
I'm wondering if there is a better way to achieve this, or if I've just missed an error?
live site
<div class="pagination">
<ul>
<li><?php previous_post_link('<span class="left-arrow"></span> older posts'); ?></li>
<li><?php next_post_link('<span class="right-arrow"></span> newer posts'); ?></li>
</ul>
</div><!-- end pagination -->
#blog .pagination {
background: url('img/arrow_left.png') no-repeat;
height: 169px;
width: 635px;
float: right;
margin-right: 14px;
padding-bottom: 20px;
text-align:center;
}
#blog .pagination ul {
display:inline;
margin: 0 auto;
}
#blog .pagination ul li {
display: inline;
margin: 0 auto;
width: 290px;
}
#blog .pagination .left-arrow {
padding-right: 20px;
}
#blog .pagination .right-arrow {
padding-left: 20px;
}
#blog .pagination .left-arrow span {
background: url('arrow_left.png') no-repeat;
}
#blog .pagination .right-arrow span {
background: url('arrow_right.png') no-repeat;
}
I think the problem is your #blog .pagination shows the left_arrow.png as a background image. The #blog .pagination .left-arrow span and .right-arrow span are not showing because the extra span on the end means your need another span inside the span with that class name..
→ Try this at the top:
<div class="pagination">
<ul>
<li><?php previous_post_link('<span class="left-arrow"><span> ... </span></span> older posts'); ?></li>
<li><?php next_post_link('<span class="right-arrow"><span> ... </span></span> newer posts'); ?></li>
</ul>
</div><!-- end pagination -->
Does the arrow show up now?
#blog .pagination .left-arrow span {
background: url('arrow_left.png') no-repeat;
}
#blog .pagination .right-arrow span {
background: url('arrow_right.png') no-repeat;
}
This code will attempt to put a background image in a <span> that is inside a block with class="right-arrow", which is not the same thing as <span class="right-arrow">.
I'm not sure why one of them is working though. If you name your classes like this it might work better: #blog .pagination span.left-arrow or just span.left-arrow
The problem on you #blog is with the right arrow image. You have entered an incorrect source for the image.
If you correct the image source, right arrow image will show.
correct:
#blog .pagination span.left-arrow {
background: url('img/arrow_left.png') no-repeat;
}
#blog .pagination span.right-arrow {
background: url('img/arrow_right.png') no-repeat;
}
Related
This question already has answers here:
When coding HTML, browser doesn't always detect changes
(6 answers)
Stylesheet not updating when I refresh my site
(16 answers)
Closed 5 years ago.
I'm not sure if this may be due to php/wordpress but I've got a nav bar that I just realised when you click the link it stays underlined until you hover it again? Seems strange to me I've never had this happen and can't quite work out why..
<nav>
<ul>
<li><img src=" " height="10%" width="10%"/>Link 1</li>
<li><img src=" " height="10%" width="10%"/><a href="#">Link 2</li>
<li><img src="" height="10%" width="10%"/><a href="#">Link 3</li>
</ul>
</nav>
scss..
nav {
margin: 0px;
background-color: $nav_bgcolor;
box-shadow: $nav_shadow;
ul {
color: #979797;
padding: 0px;
display: table;
width: 100%;
padding: 15px;
margin: 0px;
text-align: center;
}
ul li {
list-style-type: none;
display: inline-block;
width: 30%;
}
ul li a {
color: $font_color;
}
ul li a:hover {
cursor: pointer;
color: $hover;
}
a, a:visited, a:active, a:visited, a:focus, a:hover {
text-decoration: none !important;
}
}
change your " ul li a" , to this:
nav ul li a {
color: $font_color;
text-decoration: none;
}
You Need some HTML Fixes.
You have used anchor tag inside anchor tag.
HTML
<nav>
<ul>
<li>
<a href="#">
<img src="" height="10%" width="10%"/>Link 1
</a>
</li>
<li>
<a href="#">
<img src="" height="10%" width="10%"/>Link 2
</a>
</li>
<li>
<a href="#">
<img src="" height="10%" width="10%"/>Link 3
</a>
</li>
</ul>
</nav>
CSS
/*Random colors use your colors here*/
$nav_bgcolor:red;
$nav_shadow:black;
$font-color:white;
$hover:green;
/*Random colors use your colors here*/
nav {
margin: 0px;
background-color: $nav_bgcolor;
box-shadow: $nav_shadow;
ul {
color: #979797;
padding: 0px;
display: table;
width: 100%;
padding: 15px;
margin: 0px;
text-align: center;
}
ul li {
list-style-type: none;
display: inline-block;
width: 30%;
}
ul li a {
color: $font_color;
text-decoration:none;
}
ul li a:hover {
cursor: pointer;
color: $hover;
}
a, a:visited, a:active, a:visited, a:focus, a:hover {
text-decoration: none !important;
}
}
My code above was actually correct in fixing the problem I had. The problem was happening as it wasn't updating any of my code as the browser had cached the site.
Thanks everyone for your help
NOTE: Delete browser history!!
Disclaimer: I am sorry the post looks too big but I just thought I should provide all the details. I am sure the issue is something very stupid but I am not able to figure out :(
Background: I am creating a wordpress site using an awesome theme called Parallax from Access Press. I wanted to play out my business website before buying the pro version so decided to make a few changes myself.
Problem: You can either use the theme's menu (which allows animation and same page scroll; This Golum wantses) or use native wordpress menus (which does not allow scrolling; Golum hateses).
Workaround Tried: I figured I can go into the header.php and add one menu item manually. So following is the code per my understanding:
<nav id="site-navigation" class="main-navigation">
<div class="menu-toggle"><?php _e( 'Menu', 'accesspress_parallax' ); ?></div>
<?php
$sections = of_get_option('parallax_section');
if(of_get_option('enable_parallax') == 1 && of_get_option('enable_parallax_nav') == 1):
?>
<ul class="nav single-page-nav">
<?php
$home_text = of_get_option('home_text');
if(of_get_option('show_slider')== "yes" && !empty($home_text)) : ?>
<li class="current"><?php echo esc_attr($home_text); ?></li>
<?php endif;
if(!empty($sections)):
foreach ($sections as $single_sections):
if($single_sections['layout'] != "action_template" && $single_sections['layout'] != "blank_template" && $single_sections['layout'] != "googlemap_template" && !empty($single_sections['page'])) :
$title = get_the_title($single_sections['page']); ?>
<li><?php echo $title; ?></li>
<?php
endif;
endforeach;
endif; ?>
<li>Pre-order Here</li>
</ul>
<?php
else:
<some more code that picks custom menu if you choose to skip parallax menu>
</nav>
The first LI item just puts the text 'Home' in the page. Second one picks all the values from parallax menu. The Last LI item is the one I have included.
<li>Pre-order Here</li>
Behavior: This perfectly adds the item to the menu and also appears to be clickable. The problem is - when it is clicked, it does nothing. If I right click it and open in a new tab, it works perfectly fine. Including related CSS below for your reference
Edit: If I include a link to another section of the page. it works. Example: http://domain.com/#section-20
.main-navigation {
float: right;
max-width: 80%;
margin-top: 15px;
}
.logo-top .main-navigation{
float: none;
width: auto;
text-align: center;
max-width: none;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
display: inline-block;
}
.main-navigation ul li{
position: relative;
}
.main-navigation > ul > li {
float: left;
position: relative;
font-family: 'Oxygen', sans-serif;
font-weight: 400;
}
.main-navigation > ul > li > a{
text-transform: uppercase;
font-size:14px;
padding: 5px 15px;
}
.main-navigation > ul > li.current a{
color: #E66432;
}
.main-navigation a {
display: block;
text-decoration: none;
color:#333;
}
.main-navigation ul ul {
background: #FFF;
position: absolute;
top: 100%;
left:0;
z-index: 99999;
padding:0 10px;
font-size: 15px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
display: none;
}
.main-navigation ul ul ul {
left: 100%;
top: 0;
}
.main-navigation ul ul a {
min-width: 200px;
}
.main-navigation ul ul li {
border-bottom: 1px solid #EEE;
padding: 8px 0;
}
.main-navigation ul ul li:last-child{
border:none;
}
.main-navigation li:hover > a {
color: #E66432;
}
.main-navigation ul li:hover > ul {
display: block;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a {
color: #E66432;
Thanks #pschueller and #dingo_d!!
You pushed me into the correct direction. The github to the JS plugin for scroll has the secret sauce.
I had to add a class='external' to my tag with the href and update the jquery.nav.js with the following:
Replaced
filter: '',
with
filter: ':not(.external)',
I´m trying to do a navigation menu on a website and for some reason what i defined in the id topnav_ubid is getting applied to the rest of the site, especially on a:link and a:visited. I just wanted the style to be applied to the menu. I tried wraping inside a div but still no luck. What's wrong with my code? Can someone help?
I defined this on my style.css
#topnav_ubid ul li {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#topnav_ubid li {
float: left;
}
#topnav_ubid a:link, a:visited {
display: block;
width: 85px;
height: 20px;
font-weight: bold;
color: #FFFFFF;
background-color: orange;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
#topnav_ubid a:hover, a:active {
background-color: #7A991A;
And had this in HTML:
<div id="topnav_ubid">
<ul>
<li><? print $MSG_501; ?></li>
<?php
if($_SESSION["BPLowbidAuction_LOGGED_IN"]) {
/* user is logged in, give link to edit data or log out */
?>
<li class="<?=$user_menu_style;?>"><? print $MSG_622; ?></li>
<li><? print $MSG_245; ?></li>
<?php
} else {
/* user not logged in, give link to register or login */
?>
<li class="<?=$user_login_style;?>"><? print $MSG_259; ?></li>
<?php
}
?>
<li><? echo $MSG_5085 ;?></li>
<li><? echo $MSG_31_0048; ?></li>
<li> <? print $MSG_164; ?></li>
</ul>
</div>
#topnav_ubid a:link, a:visited { actually are two selectors: #topnav_ubid a:link and a:visited. The second one applies to every visited link, regardless of its parent.
I think you meant this to be #topnav_ubid a:link, #topnav_ubid a:visited {. The same mistake is made in the next selector: #topnav_ubid a:hover, a:active.
I usually add a break after a comma in a list of selectors, so it would be written as:
#topnav_ubid a:link,
#topnav_ubid a:visited {
That way, it's much easier to instantly see all the selectors and you are less likely to make this mistake.
Also note, that in your developer tools (F12) in your browser, you can inspect which styles are applied and which selector caused that. That should help you find any invalid selectors pretty easily.
I am trying to get a jQuery function to slide li items left and right by clicking an arrow. I am using a jQuery script called TinyCarousel.js. While I have it functioning properly, it continues to scroll right until the last li item is in the first position. What I have currently can be seen here in the "Games Currently Testing or Releasing section" under the main slider. If you scroll all the way to the right you will notice the issue.
Is it possible to either...
1) Change the jQuery to make the last li item stop once it is showing all the way on the right side of the window? I know this would have to be relative to the browser window size as well as make one single partial movement incase the window size has a partial item showing. I also know I would have to know the amount of li items which I can do within the php.
2) Or two, append the li continually so that the slider never seems to end. Just continues through repeating over and over? I would guess that I need to continually append li items as well as remove them if they are off screen.
I attempted to create a jFiddle to show the issue. But it is doing something all together different on jFiddle which is closer to what I need. It seems to stop moving right at some point. But it does not need the entire last li to display completely. What is it doing differently than what I have on the live site where it does stop?
Any help is greatly appreciated. I did search and found this but it did not seem to work in this situation. Thank you in adavnce.
I have am using jQuery 1.10.2, php 5.4, TinyCarousel.js version 1.9
Here is what I have currently.
The CSS
.PrevArrow {
width: 5%;
float: left;
margin-top: 20px;
}
.NextArrow {
width: 5%;
float: right;
margin-top: 20px;
}
.ListImage img {
margin-top: 5px;
margin-bottom: 10px;
}
#slider-code .viewport {
float: left;
width:90%;
height: 95px;
overflow: hidden;
position: relative;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
}
#slider-code .buttons {
display: block;
margin: 0px 10px 0 10px;
float: left;
}
#TickHead {
margin-top: 3px;
}
#slider-code .prev {
margin: 0 10px 0 10px;
}
#slider-code .next {
margin: 0 10px 0 10px;
}
#slider-code .disable {
visibility: hidden;
}
#slider-code .overview {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
left: 0;
top: 0;
}
.TestingTickerText {
vertical-align: top;
color: #666666;
font-family:'Open Sans', "lucida grande", tahoma, verdana, arial, sans-serif;
font-size: 10px;
}
#slider-code .overview li {
float: left;
margin: 0 20px 0 0;
padding: 1px;
height: 65px;
width: 105px;
left: 0;
}
#slider-code .pager {
overflow:hidden;
list-style: none;
clear: both;
margin: 0 0 0 45px;
}
#slider-code .pager li {
float: left;
}
#slider-code .pagenum {
text-decoration: none;
text-align: center;
padding: 5px;
color: #555555;
font-size: 14px;
font-weight: bold;
display: block;
}
#slider-code .active {
color: #fff;
}
The php
<div id="slider-code">
<div class="PrevArrow">
<img src="Link to Left Arrow"/>
</div>
<div class="viewport">
<ul class="overview">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
etc...
</ul>
</div>
<div class="NextArrow">
<img src="Link to Right Arrow"/>
</div>';
<center>
<span id="TickHead" class="cat_bg2">Games Currently Testing or Releasing</span>
</center>
</div>
The jQuery
(function ($) {
$(document).ready(function(){
$('#slider-code').tinycarousel({ display: 1});
});
}(jQuery));
I think the problem you're having is due to css positioning of the images. Try adjusting the margins so that they will be placed slightly further away from each other; so that when no image is appended the slider will stop and there will be no space. If thats not the issue, try this:
1:
Create a div and place all of the slider images in it.
2:
Give each arrow button a separate div and class.
3:
Use the jquery append function to dynamically add images to the slider class when a user clicks either button.
$(document).ready(function(){
$('.arrowbutton').click(function(){
$('.imageslider').append('.image');
});
});
Also, remember to give your image slider a set width in css, and set overflow to hidden. That should make sure no appended images go outside of the slider, and no scrollbars appear.
I have a css menu which has a width of 400 for non-Admins... and a width of 500 for Admins. If I set the UL width to 500, the menu centers fine and nicely for Admins. But for non-admins, whose mneu is really only 400 wide... it's off-kilter.
So I removed the width attribute from the UL to try and remove this and then it lost centering altogether; the whole menu is now stuck to the left side of the container.
Anyone have a simple idea for how to make it always centered? Site is here:
http://www.runic-paradise.com/
ul.menu{
height: 40px;
list-style: none outside none;
margin: 0 auto;
/*width: 500px;*/
}
/*li{
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}*/
a.menu{
color:#FFF;
text-decoration:none;
}
p.menu{
padding-top: 10px;
padding-right: 5px;
padding-left: 5px;
}
.subtext{
padding-top: 10px;
}
ul.menu li{
width: 100px;
height: 40px;
float: left;
color: #191919;
text-align: center;
overflow: hidden;
}
/*Menu Color Classes*/
.green{
background:#6AA63B url('/img/menu/green-item-bg.jpg') top left no-repeat;
}
.yellow{
background:#FBC700 url('/img/menu/yellow-item-bg.jpg') top left no-repeat;
}
.red{
background:#D52100 url('/img/menu/red-item-bg.jpg') top left no-repeat;
}
.purple{
background:#5122B4 url('/img/menu/purple-item-bg.jpg') top left no-repeat;
}
.blue{
background:#0292C0 url('/img/menu/blue-item-bg.jpg') top left no-repeat;
}
<ul class="menu">
<li class="green">
<p class="menu">Home</p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p class="menu">-</p>
<p class="subtext">More info</p>
</li>
<li class="red">
<p class="menu">Forums</p>
<p class="subtext">Get in touch</p>
</li>
<li class="blue">
<p class="menu">-</p>
<p class="subtext">Send us your stuff!</p>
</li>
<?php
if ($user->data['group_id'] == 5)
{
echo ' <li class="purple">
<p class="menu">Admin</p><p class="subtext">Legal things</p>
</li>';
}
?>
</ul>
Your CSS sets the ul.menu width to 400px. If the user is admin, the php script adds another 100px wide li to ul.menu. When this happens, you have to set the ul.menu width to 500px. If you do this, the css rule margin:0px auto; will handle the centering as expected.
A simple jQuery fix would be something like this:
<script>
$(document).ready(function() {
var menu=$('ul.menu');
if(menu.find('li')>4) {
//if there are more then 4 menu items, reset menu width to 500px
menu.css('width','500px');
}
});
</script>
Use max-width:500px;for UL.Demo for these http://jsfiddle.net/dhanith/ZMB93/
Can you please try this,
In animated-menu.css (demo url: http://www.runic-paradise.com/), Change margin style as like below
ul.menu {
height: 40px;
list-style: none outside none;
margin: auto 25%;
}