Jquery Anything Slider - Cannot Link to External Websites - php

HI I installed http://css-tricks.com/examples/AnythingSlider/#panel-4 and it works perfect.
But I cannot link a particular slide to a website. I tried the below code but for nothing..
Can someone offer an alternative?
<li style="width: 650px; height: 270px; class="panel">
<a href="'.$slide['link'].'">
<img alt="'.$slide['alt'].'" src="images/home_slideshow/'.$slide['img'].'"
style="width: 100%; height: 100%;">
</a>
</li>
The html/php parses good in the browser... so thats not the issue..
Does this support links ?

You're not closing the style attribute.
<li style="width: 650px; height: 270px; class="panel">
should be:
<li style="width: 650px; height: 270px;" class="panel">
Whilst it may parse well in the browser, if the plugin you are using is looking for a "panel" class for an event then it wouldn't find it.
Also if this is in html and not being generated by php then you need <?=$variable?> rather than '.$variable.' as you've been using

Related

Have image in the navigation bar

I have a navbar.php that is called in the index.php.
The navbar looks and works fine but in one of the tabs I just have the word Logo and I wanted to replace it with an actual image. Just like many websites have it. I've seen many people using bootstrap however I'm not familiar with that at all. What is wrong with the PHP and CSS I'm trying to use?
Path of navbar.php
project/file.css
Path of image.png
project/img/image.png
navbar.php
<div class="navbar">
<a class="logo" href="#" img src="img/image.png"></a>
<div class="navbar-right">
<a class="active" href="../index.php">Home</a>
About
</div>
</div>
style.css
/*Logo*/
.navbar a.logo{
display:block;
width: 300px;
height: 200px;
background: url(img/image.png) 0 0 no-repeat;
}
Your problem with the HTML markup is here
<a class="logo" href="#" img src="img/image.png"></a>
By the above markup, you are saying that a hyperlink should be an image or should act as an image or something like that. This doesn't make sense.
What you can do is you can visit this website:
http://www.icons8.com and search your icons accordingly. You can also download it and store it in your system folder.
Once you have done this, you can write the above code as follows:
<div class="navbar">
<a class="logo" href="#"><span><img src="yourImgURLHere"/></span> </a>
<div class="navbar-right">
<a class="active" href="../index.php">Home</a>
About
</div>
</div>
Hope this helps.

How to create internal links (href="#..." / PHP & Bootstrap

New to coding in general. Creating a simple small website as a class assignment. Using PHP with no frameworks and Bootstrap for the HTML-CSS. Cannot use JavaScript as per assignment requirements.
I cannot find how to properly create internal links in a page.
I use the URL to decide which page to show (all dealt from index.php). Links (via href) to diferent pages in the same website or external links work fine.
But when I try to use what normally would be href="#idName" for a link pointing to the same page, it doesn't work.
I assume it has something to do with how this information goes to the URL and is interpreted by the index.php. But besides that, I'm lost.
Maybe because I don't have the right vocabulary to search for it, but so far, no luck when looking for the answer online.
Part of the index.php:
if (isset($_GET['action'])){
if($_GET['action'] == 'profil-membre'){
include('pages/header_menu.html');
include('pages/profil-membre.php');
}elseif ($_GET['action'] == 'page-activite'){
include('pages/header_menu.html');
include('pages/page-activite.php');
}
}else{
include('pages/header_menu.html');
//and below the html for the main page.
?>
And part of the html in the pages where I would like an internal link:
<!--a menu as tabs (showing just the part with the problematic href-->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#membre-exist">Membre Existant</a>
</li>
<!-- the href should point to the div with id "membre-exist" -->
<div class="tab-content card card-body mb-4">
<div id="membre-exist" class="container tab-pane fade"><br>
<form action=""> <!-- and the html code follows normally -->
Any ideas or links to where I could find the information to solve this would be appreciated!!
If I understand the question correctly, you can use :target CSS pseudo element and use that to show the contents using display. I am doing something really simple for you.
* {margin: 0; padding: 0; line-height: 1; font-family: 'Segoe UI'; text-align: center; border-radius: 5px;}
a {display: inline-block; padding: 5px; border: 1px solid #ccf; background-color: #eef; text-decoration: none;}
a:active, a:focus {background: #f90; border-color: #f60;}
section {margin: 10px; padding: 10px; border: 1px solid #ccf; background-color: #f5f5f5; display: none;}
section:target {display: block;}
one
two
three
four
<section id="one">
This is section one.
</section>
<section id="two">
This is section two.
</section>
<section id="three">
This is section three.
</section>
<section id="four">
This is section four.
</section>
The above code acts like a tab view and it doesn't have any JavaScript or Server Side code. It purely relies on the #hashvalue that's passed to the URL. The above code perfectly matches with your requirement:
Doesn't use any server side language.
Doesn't require JavaScript for this.
It's a pure CSS way of doing things.

HTML - Button mutiplies and disappears

Hello Stack Overflowers,
Hopefully someone can solve this riddle.
I wrote this HTML code for a donate button. And it works perfectly well.
Now, when I place it within a widget in WordPress, it shows multiple
buttons. When I click on it, it goes to the link, but the button disappears.
does anyone know what the exact problem is?
Thank you
<div onclick="location.href='https://aol.com/';" class="result15823794"
style="background-image:
url("https://s25.postimg.org/4cld27ruz/button_RAY.png");width:
180px; height: 45px;"
" onmouseover="this.style.backgroundImage
='url(https://s25.postimg.org/s4uodqtvv/button_RAYbrdr.png)'
" onmouseout="this.style.backgroundImage =
'url(https://s25.postimg.org/4cld27ruz/button_RAY.png)'"
onclick="location.href='https://aol.com/';">
<div style="background-image:
url(https://s25.postimg.org/6sn6g29xn/button_RA.gif)
width: 180px; height: 45px;">
</div>
</div>

Having trouble with my website? Having problems aligning two divs

So i'm at the point where I feel like quitting, because of all the trouble this problem has given me. So if anyone could help me out that'd be great :D!
So on my website what I want to do is have a div box to the left of the website, where there will be a "Learn more" link that will take you to another page explaining what my website is about, I would also like there to be a video right below it (It will be of me explaining my website)
On the other div box I want there to be a "Sign Up form" a basic sign up form for users to sign up for my website
Now my problem isn't getting the boxes or sign up sheet aligned side by side.
Right now my problem is the alignment of the top of the boxes. When I put "float:left;" it aligned them side by side(exactly Like I wanted)
However one of the top borders of the box is higher up then the other
For example this is my website so far http://www.shoportrade.org/
As you can see the boxes don't align perfectly from the top of the border, one is lower then the other
I want it to look sorta like this http://www1.picturepush.com/photo/a/12506959/640/12506959.png
Could anyone help me? I've hit a wall and I really wanna figure this problem out.
I don't know why you have all the break tags, but this is what your syntax needs to be like:
<div id="header">
</div>
<div id="container">
<div class="ex">
</div>
<div class="myform">
</div>
<div class="clear"></div>
</div>
Your header would stay the same way. Your container needs to wrap both boxes. Usually this is center aligned on the page with this CSS:
.container { width:980px; margin: 0 auto; }
Your .ex class would stay the same (float: left;) and your .myform class would also stay the same (float: left;).
The .clear class takes care of helping the browser calculate the final display height and usually looks like:
.clear { clear: both; height: 1px; }
This is because you have <br>'s after your <div id="myform">.
first of all, there is some mistakes in your coding. Like
<div id='header'></a href='http://www.shoportrade.org/'><img src='mylogo1.png'></img></a>
should be
<div id='header'><a href='http://www.shoportrade.org/'><img src='mylogo1.png' /></a></div>
I believe you are declaring class myform in <style>, but I saw in your code you're trying to implement this <div id="myform">, which is totally wrong. It should be <div class="myform">. If you're actually want to implement different style for that div then I think you should use different id name like <div id='boxstyle'></div>
Here is a method without using floats. The heights of the two boxes will change depending on the container height.
If you want the heights of the boxes to be different, change their "bottom" value.
http://jsfiddle.net/Calum/m783T/
CSS
#container {
height: 500px;
width: 800px;
position: relative;
background-color: green;
}
#box, #box2 {
position: absolute;
top: 50px;
width: 200px;
}
#box {
background-color: blue;
left: 50px;
bottom: 50px;
}
#box2 {
background-color: red;
right: 50px;
bottom: 50px;
}
HTML
<div id="container">
<div id="box">
<p>This is box 1</p>
</div>
<div id="box2">
<p>This is box 2</p>
</div>
</div>

hover effect on social icons in header?

I want to have a semi trasparent hover effect on my social icons but cant figure it out.
Here is my header.php:
<div align = "right"><img src="/wp-includes/images/twitter.png"/>
<img src="/wp-includes/images/facebook.png"/>
<img src="/wp-includes/images/mail.png"/>
I see alot off people saying to edit css but i cant find this in my css
here is my website http://ideviceguys.com
You need a hook for your css code.
Give your div an id or class.
Try adding class="socialIcons to your main div.
<div class="socialIcons">
<img src="/wp-includes/images/twitter.png"/>
<img src="/wp-includes/images/facebook.png"/>
<img src="/wp-includes/images/mail.png"/>
</div>
Then add this little nugget to your css.
.socialIcons a:hover {
opacity:0.7; filter:alpha(opacity=40); /* Damn MS and IE8 and earlier */
}
That should give your icons 30% transparency.
Consider what the others say around here. They are much smarter than I am.
You have to define it in css. First give your menu an id or class so your css can target it in a non-generic way.
<div class="nav">
<img src="/wp-includes/images/twitter.png"/>
<img src="/wp-includes/images/facebook.png"/>
<img src="/wp-includes/images/mail.png"/>
</div>
in css:
.nav{
float:right;
}
.nav a{
display:block;
float:left;
margin-right:10px;
}
.nav a:hover{
box-shadow: 0px 0px 10px #ff6600;
}
Obviously this is just an example. I have no idea what your actual design calls for. I am merely showing you that a parent element with a class of nav can select the a tags within and assign an effect on hover. This is trivial, intro level css. A more specific response will require a more detailed question.

Categories