I am trying to get an image to show up behind the text as a hover effect.
It is just a simple splash page for now, but I can't seem to figure out how to get this to work.
Here is the current page. The words below the logo are links.
https://gyazo.com/8fac5b310ed8febd80032cc19b57d76e
Here is the image I want behind the text when a user hovers.
https://gyazo.com/67852dd57789458942952b1dd3b3cb55
It is like a scribble effect in different colors. They wouldn't all show up at one, but just the different one behind each word as you hover.
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800,600,300' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Lira.net</title>
<link rel="stylesheet" href="css/style.css">
<script src="script.js"></script>
</head>
<body>
<div id="middlegroup">
<div id="topimage">
<img src="images/LiraLogo325.png">
</div>
<div id="links">
<p>
Liquidation -
<a href="#">Monetization<a> -
Brokerage
</p>
</div>
</div>
</body>
<footer>
<p>© 2016 Lira.net </p>
</footer>
</html>
and here is the CSS:
h1 {
font-family: "Open Sans" , serif;
color: #FFFFFF;
text-shadow: 2px 2px 3px #4d4d4d;
font-size: 5vw;
text-align: center;
}
body {
margin: 0;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#topimage{
width: 100%;
text-align:center;
size: 1vw;
}
#links{
width: 100%;
list-style-type:circle;
}
#middlegroup{
width:600px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-125px 0 0 -300px;
}
a:link{
color:#01197d;
text-decoration: none;
}
a:visited{
color:#01197d;
text-decoration: none;
}
a:hover{
text-decoration: none;
}
a:active{
color:#01197d;
text-decoration: none;
}
p {
font-family: "Open Sans" , serif;
font-weight: 600;
font-size:15px;
text-align:center;
}
ul {
font-family: "Open Sans" , serif;
font-weight: 400;
font-size:20px;
text-align:center;
list-style-type:circle;
}
footer p{
font-family: "Open Sans" , serif;
font-weight: 400;
font-size:14px;
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
}
Any help would be greatly appreciated!
The easiest way to get this done is to use background images
You can try something like this:
.class1:hover {
background-image: url("paper.gif");
}
.class2:hover {
background-image: url("paper.gif");
}
.class3:hover {
background-image: url("paper.gif");
}
Just replace the class names for the ones that suits your links, and obviously play with sizing, something like display inline-block to the links will be enough. Here you have everything you will need for this task
You'll just have to add a background image on hover. Here's a fiddle : https://jsfiddle.net/rd7zbytc/
and here's the code:
#links p a:hover {
background-image:url("https://images.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
background-size:100px;
}
Is this what you are talking about?
http://codepen.io/xkurohatox/pen/qbPXOb
HTML changes:
<div id="links">
<p>
<a id="a1" href="#">Liquidation</a> -
<a id="a2" href="#">Monetization<a> -
<a id="a3" href="#">Brokerage</a>
</p>
</div>
CSS changes:
#a1:hover {
background-image:url("http://previews.123rf.com/images/pzaxe/pzaxe1104/pzaxe110400016/9242659-Seamless-monochrome-square-texture-scribble--Stock-Vector-pattern- scribble-background.jpg");
background-size:100%;
}
#a2:hover {
background-image:url("http://st.depositphotos.com/1466799/1121/v/950/dep_11211843-Full-color-abstract-scribble-background.jpg");
background-size:100%;
}
#a3:hover {
background-image:url("http://thumbs.dreamstime.com/z/child-scribble-12020973.jpg");
background-size:100%;
}
/* images above are not my own and only being used for demo purposes */
Hope this helps!
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Need help with the text on my navigation bar. The items in it are all messed up, and jumbled I know my code is really sloppy I am new to coding. This is the link with JS bin here http://jsbin.com/cibuvozido/edit?html,output
Here you can see the new code with the navbar corrected already, but I recommend that you use a framework starting can be bootstrap or foundation 6 which is also very good.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<title> Contact Us Legacy's Web-Design</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
.home, .security, .contact, .about, .portfolio {
display: inline-block;
text-align: center;
padding: 10px;
}
a {
text-decoration: none !important;
}
.all {
margin-top:0px;
position:absolute;
margin:none;
border-style:solid;
border-color:#008000;
border-width:4px;
}
#aside {
color:#0ddde7;
text-align:center;
padding-top:20px;
margin:none;
}
nav {
border-bottom:solid;
border-right:solid;
border-left:solid;
border-radius:10px;
border-color:#0ddde7;
border-width:4px;
/* padding-top:20px; */
font-size:1.5em;
background-color:#0f171b;
z-index:0;
}
h2 {
text-align:center;
color:#0ddde7;
padding: 0 0 0 50px;
}
h3 {
text-align:center;
color:#0ddde7;
padding: 0 0 0 330px;
}
.imgg {
margin-top:24px;
margin-left:40px;
border-style:solid;
border-color:#0ddde7;
border-width:2px;
border-radius:18px 18px 18px 18px;
}
.img {
padding: 14px 0 0 1220px;
pointer-events: none;
position:absolute;
}
#search {
padding: 0 0 0 1105px;
height:0;
}
.jwery {
margin-left: auto;
margin-right: auto;
display: table;
}
.jwery a {
-webkit-transition:width 2s;
transition: 2s;
}
.jwery a:hover {
font-size: 1.1em;
}
body {
margin:0;
padding:0;
background-color:#a4a4a4;
}
a:link {color:#0ddde7; text-decoration: underline; }
a:active {color: #0000ff; text-decoration: underline; }
a:visited {color: #008000; text-decoration: underline; }
a:hover {color: #ff0000; text-decoration: none; }
</style>
</head>
<div id="Header">
<div id="search">
<form>
<form id="img" method="get" action="http://www.google.com">
<input type="text" class="tftextinput" name="q" size="18" maxlength="120">
<input type="submit" value="" style="border-style:
none; background: url('searchbutton3.gif') no-repeat; width: 13px; height: 15px;">
</form>
</div>
<img class="img" src="images/search.png" height="19.4">
<nav>
<div class="jwery">
<a class="home" href="Home.html">Home</a>
<a class="security" href="Security.html">Security</a>
<a class="FAQ" href="Portfolio.html">Portfolio</a>
<a class="about" href="About.html">About Us</a>
<a class="contact" href="Contact Us.html">Contact Us</a>
</div>
</nav>
<body>
<img class="imgg" src="images/legacy.png" align=left width=300>
<div id="aside">
<p>You Can Also Email Me At LegacyWebCreations#gmail.com Or Call/Text 252-207-
6688</p>
<p>Feel Free To Leave Me A Message, Question, Comment, Or Recommendation.</p>
<h2>Follow Me! Please Share My Site! </h2>
<h3>Instagram Account: LegacyWebDesign</h3>
<h3>Personl Account: Surfskateskim57</h3>
<h3>Facebook Account: Ryan Miller</h3>
<h3>Group Name: LegacyWebDesign</h3>
<h3>Twitter Account:LegacyWebDesign</h3>
<h3>LinkedIn Account: LegacyWebCreations</h3>
</div>
<div class="all">
<a id="foxyform_embed_link_747752" href="http://www.foxyform.com/">Questions?
Comments?</a>
</div>
<script>
(function(d, t){
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = "http://www.foxyform.com/js.php?id=747752&sec_hash=fd11cc5da35&width=380px";
s.parentNode.insertBefore(g, s);
}(document, "script"));
</script>
</body>
</html>
tell me if this good and only touch the css that I recommend that you
place it in the tab that says css which is best practice that placed
it directly in the html See Ya!! and keep on hacking
I want to be able to click on "My Work" and have it open on the same page but only on the right half of the page, while everything on the left stays the same. Basically the page splits in two once someone clicks "My Work". I'm sure this is a juvenile question but I am lost and just beginning my journey. I have found some JavaScript but I could not get it to work. I believe the file was Split.js.
h1 {
font-family: "Fira Sans";
font-style: bold;
font-size: 40px;
color:lightgray;
}
body {
background-color:black;
font-family: "Fira Sans";
}
#nav {
color:lightgray;
}
#nav a{
width:150px;
}
#img{
opacity:0.85;
position:absolute;
}
a {
font-family: "Fira Sans";
font-size: 20px;
color:lightgray;
text-decoration: none;
}
a:hover {
color:white;
}
#footer{
padding: 20px;
position:absolute;
bottom:0;
margin-left: 65px;
}
<!DOCTYPE html>
<html>
<head>
<title>Designs by RM</title>
<link rel="stylesheet" href="main.css">
<script src="split.js" type="text/javascript"></script>
</head>
<h1>Ryan Manthey</h1>
<body>
<div id="nav">
My Work
</div>
<div id="img">
<img src="ferris_wheel.jpg" alt="ferris wheel" width="700" height="600">
</div>
</body>
</html>
I just started learning HTML/CSS/JS 2 days ago and today I made a little tool for personal use.
I made it on computer with a 1980 x 1080 resolution but on other resolutions it doesn't look right.
What I made is a little tool which basically allows me to put a band and the band's genre into an input field and then add it to a list.
Everything looks fine on different resolutions except for when I add a band to the list.
The text that's supposed to go into the border goes all the way to the right side of the screen and the border becomes just a tiny square.
Another question I had, which I might aswell ask in here:
I would like to add a function where I can click one of the bands I added to the list, then highlight the band I clicked, and remove it by clicking a remove button.
But I have no clue where to start.
Html:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel='stylesheet' href='stylesheet.css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h2>Bands I Like</h2>
<form name="checkListForm">
<input type="text" id = "Item" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>
<ol class = "Header">
<li>Band // Genre</li>
</ol>
<br/>
<ol class ="Bands">
</ol>
</body>
</html>
Css:
.Header {
list-style-type: none;
position: relative;
}
.Header {
background: black;
border-radius: 5px;
border: 1px solid white;
margin: 4px 20px;
padding:0.4em;
font-size: 1em;
height: 16px;
font-family: Verdana, Arial, Sans-Serif;
color:white;
text-align:center;
}
.Bands li {
list-style-type: none;
position: relative;
}
.Bands li {
background: #eeeeee;
border-radius: 5px;
border: 1px solid black;
margin: 4px 750px;
padding:0.4em;
font-size: 1em;
height: 16px;
font-family: Verdana, Arial, Sans-Serif;
//text-align:center;
}
h2 {
font-family:arial;
color:white;
}
form {
display: inline-block;
}
#button{
display: inline-block;
height:20px;
width:70px;
background-color:grey;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
}
.list {
font-family:garamond;
color:#cc0000;
}
body {
background-image: url("http://fc04.deviantart.net/fs71/f/2011/027/d/e/sphere_of_doom_by_crackoala-d386se9.png");
JS/jQuery:
$(document).ready(function(){
$("#button").click(function(){
$('.Bands').append('<li>'+$('#Item').val()+'</li>');
$('#Item').val("");
});
$('.Bands').sortable();
});
You can find all my code here:
http://jsfiddle.net/mLkcr501/
Any help would be appreciated!
This line in your CSS was bumping it to the right.
margin: 4px 750px;
Then just needed to float the links left so the border thingy covered them:
.bands{
float:left;
}
http://jsfiddle.net/mLkcr501/1/
-Cheers,
you must use mediaquery to ajust the size on diferent resolutions.
#media (max-width: 640px){
'here contains the class or ids'{width:100%; float: left;}
.greyBox2{display:none;}
.text{width: 100%; text-align: left; font-size: 17px;}
}
Edit: Plunker preview here - http://embed.plnkr.co/2afyRrde2rxncxPelB69/preview
Probably a terrible title but after a minute I haven't been able to come up with better.
I have created a simple page with angularjs and some html. The issue I'm having is actually with css. When you click on a menu item, it highlights the block, but I'm getting a weird 1-2 px border that isn't highlighted along the bottom.
Been at this for hours and seriously going up the wall with it...
My html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link type="text/css" rel="stylesheet" href="css.css" />
<!--AngularJS code-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Adding the ng-app declaration to initialize AngularJS -->
<div id="main" ng-app>
<!-- The navigation menu will get the value of the "active" variable as a class.
The $event.preventDefault() stops the page from jumping when a link is clicked. -->
<div id="header">
<div id="title">
<h3 class="pull-left company-heading">Tool Title</h3>
</div>
<nav class="pull-right {{active}}" ng-click="$event.preventDefault()">
<!-- When a link in the menu is clicked, we set the active variable -->
Home
Projects
Services
Contact
</nav>
</div>
<!-- ng-show will show an element if the value in the quotes is truthful,
while ng-hide does the opposite. Because the active variable is not set
initially, this will cause the first paragraph to be visible. -->
<p ng-hide="active">Please click a menu item</p>
<p ng-show="active">You chose <b>{{active}}</b></p>
</div>
fd
</body>
</html>
My css:
*{
margin:0;
padding:0;
}
body{
font:15px/1.3 'Open Sans', sans-serif;
color: #5e5b64;
}
#header {
position: relative;
background: none repeat scroll 0% 0% #185A82;
margin-bottom:45px;
line-height: normal;
}
#title {
display:inline-block;
padding: 18px 200px;
color:#fff;
font-weight:bold;
font-size:18px;
}
a, a:visited {
outline:none;
color:#389dc1;
}
a:hover{
text-decoration:none;
}
section, footer, header, aside, nav{
display: block;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
/*-------------------------
The menu
--------------------------*/
nav{
display:inline-block;
border-radius:2px;
}
nav a{
color:#fff;
text-transform: uppercase;
display:inline-block;
padding: 18px 30px;
text-decoration:none !important;
-webkit-transition:background-color 0.25s;
-moz-transition:background-color 0.25s;
transition:background-color 0.25s;
}
nav a:first-child{
border-radius:2px 0 0 2px;
}
nav a:last-child{
border-radius:0 2px 2px 0;
}
nav.home .home,
nav.projects .projects,
nav.services .services,
nav.contact .contact{
background-color:#e35885;
}
p{
font-size:22px;
font-weight:bold;
color:#7d9098;
}
p b{
color:#ffffff;
display:inline-block;
padding:5px 10px;
background-color:#c4d7e0;
border-radius:2px;
text-transform:uppercase;
font-size:18px;
}
You can try to add on your a tags the following css
line-height: 60px;/*height of your header*/
padding: 0px 30px;/*remove the top and bottom padding*/
hope it will help you
Update the below css values with:
nav a{
color:#fff;
text-transform: uppercase;
display:inline-block;
padding: 22px 30px;
text-decoration:none !important;
-webkit-transition:background-color 0.25s;
-moz-transition:background-color 0.25s;
transition:background-color 0.25s;
}
Your titles padding is the problem
This will work:
#title {
display: inline-block;
padding: 14px 200px;
color: #fff;
font-weight: bold;
font-size: 18px;
}
Update your css style of nav > a with this:
nav a {
color: #fff;
display: inline-block;
padding: 23px 30px 19px;
text-decoration: none !important;
text-transform: uppercase;
-webkit-transition: background-color 0.25s;
-moz-transition: background-color 0.25s;
transition: background-color 0.25s;
}
Otherwise you can set a custom height to the a.
Trying to adjust the size of the elements by using padding can be tricky. In this case it is better that the size is determined by the content of the elements. I propose the following changes:
First remove the padding of #tittle and instead add the desired positioning.
#title {
display:inline-block;
position: relative;
top: 18px;
left: 200px;
color:#fff;
font-weight:bold;
font-size:18px;
}
For the height of #header match the height of the child elements, we must include an element with style clear: both. This is so because #nav has float: right and the floats algorithm will extract the box from the normal flow. (reference: Visual formatting model )
HTML:
<div id="header">
<div id="title">...</div>
<nav class="pull-right {{active}}" ng-click="$event.preventDefault()">...</nav>
<div class="clear"></div>
...
</div>
CSS:
.clear {
clear: both;
}
Finally, the elements contained in #header that we do not want in the normal flow are include in a div with the style float: left.
I updated your example:
http://embed.plnkr.co/ekxYOXLp4UUZD7ikHMHM/preview
I hope this helps.
When you use floats, you need to add a "clear" style to clear the floats:
<br style="clear:both" />
This is because anything inside of a div that's floated does not take space inside the div. The clear float CSS instructs the DIV to ensure that it encloses its floated children.
For example:
<div id="header">
<div id="title">
<h3 class="pull-left company-heading">Tool Title</h3>
</div>
<nav class="pull-right {{active}}" ng-click="$event.preventDefault()">
<!-- When a link in the menu is clicked, we set the active variable -->
Home
Projects
Services
Contact
</nav>
<br style="clear:both" />
</div>
You also have to remove the margin-bottom CSS style for your header.
#header {
position: relative;
background: none repeat scroll 0% 0% #185A82;
line-height: normal;
}
Demo Plunker
Change the padding of nav a to
nav a {
padding: 21.5px 30px;
}
I know this must be an easy fix but I've spent the better part of the morning trying to find a solution (before posting here) to no avail.
I have a very simple jQuery "slideToggle" script that, when clicked, slides a div to the bottom of the button to the height I want it to display. It fits to the width I want(400px), starting at the left of the top div size(130px) and stretching to the right. problem is, I need it to stretch to the left (The top "button" is set to the far right of the page and it stretches off the page).
Here's the code I have:
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<style type="text/css">
#cartBox {
width: 110px;
height: 90px;
position: absolute;
margin-left: 90%;
top: 28px;
border: 3px solid #800000;
background-color: #800000;
border-radius: 12px;
z-index: 999;
}
#cartDropMenu {
position:absolute;
z-index:999;
width: 130px; /* width of top items (img + text (Cart Items) */
float:right;
top: 0px;
right: 0px;
color: white;
font-family: Arial, Helvetica, Sans serif;
font-size: 12px;
text-align: left;
}
#cartDropMenu p {
margin:0;
padding-left:24px; /* moves text to the left of img */
cursor:pointer;
background-image:url('../img/open.png');
background-position:left; /* positions image to the left or right 300px(cartDropMenu width parameter) */
background-repeat:no-repeat;
text-align: left;
}
#cartDropMenu p.close {
background-image:url('../img/close.png');
}
#DropMenu {
position:absolute;
z-index:999;
background-color:#fff;
border:solid 1px rgb(220,220,220);
padding:12px;
width:400px; /* width of drop down box */
box-shadow:1px 1px 4px rgb(220,220,220);
top:90px; /* position of start point for drop down box */
left:8000; /* ??? */
display:none;
color: black;
font-family: Arial, Helvetica, Sans serif;
font-size: 12px;
}
</style>
<script>
$(document).ready(function() {
$('#cartDropMenu p').click(function() {
$('#DropMenu').slideToggle(300);
$(this).toggleClass('close');
});
}); // end ready
</script>
</head>
<body>
<div id="cartBox">
<div id="cartDropMenu">
<p>      Display Cart</p>
<div id="DropMenu">
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
</div>
</div>
</div>
</body>
</html>
Here's the link to jfiddle:
enter link description here
Try adding right: 0; to #DropMenu
Add right:0; to #DropMenu. This will make the dropdown to start from the right end of the
Display cart p tag.