In a specific page of a web project, I'd like to add a button which "follows" the user while the page is scrolling up and down. With CSS, php, jquery, whatever the way I could do this...
The problem is : I really didn't find any documentation on the web about this (wrong keywords maybe). Where can I find some documentation about it ? Thank you !
I made you a jsfiddle, I hope this is what you're looking for: http://jsfiddle.net/o0me03f5/
HTML:
<div id="button">button
</div>
<div id="content">
</div>
CSS:
#content
{
height:2000px;
}
#button
{
background-color:gray;
width:100px;
height:100px;
position:fixed;
bottom:0;
left:0;
right:0;
}
Related
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.
im working on homepage of my web site like google. in the center one textbox for the search task, and search buton near it , but i have many problem with localization. firstly, i have words top of my web site and i want to locate in different places in same line . left and right. for example language options like DE / FR on the left, Login / Help on the right in the same line. to the right , i tried with this;
#right
{
position:relative;
top:10% ;
left:61%;
margin-right:10px;
}
<a href="login.php" id="right" >Login</a>
when i do this, its look like i want but when i make page smaller whole content messed up include search buton. And finally i tried to position button near the textbox like i said but i couldnt. i mean i have a problem position same lane things.. i looked here about my question but cant find exactly similar to mine, ty.
Here:http://jsfiddle.net/leojavier/gbuLykdj/3/
Just make you container display as table, and the content as a table cell. That will allow you to vertically center your elements
<div class='container'>
<section><input type="text" placeholder="search"><button>search</button></section>
</div>
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
font-family:arial;
}
.container{
display:table;
height:100%;
width:100%;
}
section{
display:table-cell;
vertical-align:middle;
text-align:center;
}
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>
I am stuck with a problem for quite a while now.I have googled and have tried almost all the responses and none of them has worked..
I have a PHP page which has following layout
<div id="wrapper">
<div id="header"/>
<div id="content"/>
<div id=footer/>
</div>
Now the contents of the content div comes from Db and usually takes up much more height than browsers window size.
Here is the CSS that I have used
#footer {
color: #707070;
clear: both;
min-height: 100px;
}
#content {
width: 100%;
min-height: 400px;
margin-bottom: 25px;
}
But when the size of that div increase the footer does not move below it rather the footer is shown in the middle of the content div but 1 layer below it.
Can anyone help me?
First thing I see is that you have no quotes around name of the ID, you need that.
Second thing is that, if everything you gave us is correct, I need to see your PHP to tell you what is wrong, and at least a screenshot of actual problem to be certain, but I think taht part of your php is loading before the footer and part after so it appears that footer is in the middle.
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.