Develop Reference

Move Triangle Arrow Sideways

I have a main menu on the header with links, and i have a triangle that moves as the user hovers from one page to another. I want to keep it moving, but i would like to see the transition showing like on this website: harris-active.co.uk
CSS Code:
/* Navigation
--------------------------------------------------------------------------------*/
#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
border:none;
}
#nav-wrap table {
width:100%;
border-collapse: collapse;
border-spacing: 0;
padding:0px;
}
#nav-wrap table td {
border-collapse: collapse;
border-spacing: 0;
}
#nav-wrap .container ul {
list-style: none;
float: right;
margin-right:40px;
}
#nav-wrap .container ul li {
list-style: none;
float: left;
margin-left:40px;
position:relative;
top:0px;
}
#nav-wrap .container ul li a {
display: block;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
color: #999999;
text-decoration: none;
padding: 50px 0px;
border: 0;
outline: 0;
list-style-type: none;
font-size: 16px;
transition: 0.5s ease;
}
#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
color: #fff;
border: 0;
text-shadow: 0 0 3px rgba(255,255,255,0.5);
background: url(nav-hover.png) no-repeat center bottom;
transition: 0.5s ease;
}
this is how it is currently showing on my live site: tradey-lb.com

With an html as this:
<ul>
<li class="m1">menu1</li>
<li class="m2">menu2</li>
<li class="m3">menu3</li>
<li class="m4">menu4</li>
<li id="arrowid" class="arrow"></li>
</ul>
You could use absolute position to place the triangle whatever position like:
.arrow {
position:absolute;
bottom:0px;
left:85px;
}
Then add some classes for each different hover like:
.position1 {
left:85px;
}
.position2 {
left:195px;
}
.position3 {
left:300px;
}
And with a easy function, when you hover on your menu you remove any class already there on "Arrow" and then add the position class needed... like:
$(".m1").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position1");
});
$(".m2").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position2");
});
Full example:
$(".m1").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position1");
});
$(".m2").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position2");
});
$(".m3").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position3");
});
$(".m4").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position4");
});
ul {position:relative; border-bottom:2px solid #000;}
li {display:inline-block;padding:12px 30px;overflow:visible;}
.arrow {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
padding:0;
position:absolute;
bottom:0px;
left:85px;
transition: left 0.3s ease-in-out;
}
.position1 {
left:85px;
}
.position2 {
left:195px;
}
.position3 {
left:300px;
}
.position4 {
left:410px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li class="m1">menu1</li>
<li class="m2">menu2</li>
<li class="m3">menu3</li>
<li class="m4">menu4</li>
<li id="arrowid" class="arrow"></li>
</ul>
I was tempted to delete my answer once I saw your rude comment to another user but this may help someone else around so I'll keep it for now. But try ro learn some manners.

HTML and CSS img is connected how to separate?

Here is the code:
body{
background-image:url('http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg');
}
div.header{
background-color:#F0F8FF;
text-align:center;
padding:3px;
opacity:0.2;
height:60px;
}
h1{
font-family:'Lucida Console';
font-weight:bold;
color:blue;
}
div.header ul {
font-style:none;
font-size:50%;
list-style-type:none;
position:relative;
right:700px;
bottom:50px;
}
ul{
list-style-type:none;
line-height:220%;
}
a:link{
color:white;
font-size:150%;
text-decoration:none;
}
a:visited{
color:white;
font-size:150%;
text-decoration:none;
margin:10px;
}
a:hover{
font-size:220%;
color: #7CB9E8;
}
div.gallary img{
position:relative;
left:160px;
top:150px;
margin:5px;
width:200px;
height:200px;
}
img:hover{
width:220px;
height:220px;
border: 1px solid #ccc;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel = "stylesheet" href = "stylesheet.css">
</head>
<body>
<div class = "header">
<h1>Gordong Guitar Lesson</h1>
<ul>
<li>Mailbox:147ox</li>
<li>phone: (151)-232-4576</li>
<li>Zip:223</li>
</ul>
</div>
<div class +"nav" >
<ul>
<li>Home</li>
<li>Lessons</li>
<li>Videos</li>
<li>apply</li>
</ul>
</div>
<div class = "gallary">
<img src = "http://www.londonguitaracademy.com/wp-content/uploads/guitar-lessons1.jpg"></img>
<img src = "http://lessonsthatrock.com/wp-content/uploads/2012/02/guitar-lessons-long-beach1.jpg"></img>
<img src = "http://tampabaymusicacademy.com/blog/wp-content/uploads/2015/10/guitarlessons.jpg"></img>
<img src = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTUpvERhA8lpbGi7ic9GGThcF20NZl1ZrDTT_N-mqvZwTqdpw7vMA"></img>
<img src = "http://hobartguitarlessons.files.wordpress.com/2011/11/guitar-man-new_221.jpg?w=300&h=300"></img>
</div>
</body>
</html>
My questions is when I run this code and hover over the links or the images,
They all seem to be connected through some invisible box. For example when I hover over the "Home" link. Every link and every img moves downward. How do I fix this? Thank you.

They are not connected at all, they are just responding to the elements growth because your links are making your font bigger on hover and your images are getting border on hover.
The best way to avoid this behavior is setting the border-sizing property:
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
* { Box-sizing: Border-box } FTW by Paul Irish

https://jsfiddle.net/j9rxzc2n/
please check this one it's misbehaving because its size was being increased while hovering. so I fixed its size, now it's working fine without up and down.
I only added this one line: ul li{height:30px; }

I'm guessing this is what you wanted? https://jsfiddle.net/link2twenty/8ktphwyo/
body {
background-image: url('http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg');
}
div.header {
background-color: #F0F8FF;
text-align: center;
padding: 3px;
opacity: 0.2;
height: 60px;
}
h1 {
font-family: 'Lucida Console';
font-weight: bold;
color: blue;
}
div.header ul {
font-style: none;
font-size: 50%;
list-style-type: none;
position: relative;
right: 700px;
bottom: 50px;
}
ul {
list-style-type: none;
line-height: 220%;
}
a:link {
display: inline-block;
color: white;
font-size: 150%;
text-decoration: none;
transform-origin: left;
}
a:visited {
color: white;
font-size: 150%;
text-decoration: none;
margin: 10px;
}
a:hover {
transform: scale(1.2, 1.2);
color: #7CB9E8;
}
div.gallary img {
position: relative;
left: 160px;
top: 150px;
margin: 5px;
width: 200px;
height: 200px;
border: 1px solid rgba(0, 0, 0, 0);
}
div.gallary img:hover {
z-index: 100;
transform: scale(1.1, 1.1);
border-color: #ccc;
}
<div class="header">
<h1>Gordong Guitar Lesson</h1>
<ul>
<li>Mailbox:147ox</li>
<li>phone: (151)-232-4576</li>
<li>Zip:223</li>
</ul>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Lessons</li>
<li>Videos</li>
<li>Apply</li>
</ul>
</div>
<div class="gallary">
<img src="http://www.londonguitaracademy.com/wp-content/uploads/guitar-lessons1.jpg" />
<img src="http://lessonsthatrock.com/wp-content/uploads/2012/02/guitar-lessons-long-beach1.jpg" />
<img src="http://tampabaymusicacademy.com/blog/wp-content/uploads/2015/10/guitarlessons.jpg" />
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTUpvERhA8lpbGi7ic9GGThcF20NZl1ZrDTT_N-mqvZwTqdpw7vMA" />
<img src="http://hobartguitarlessons.files.wordpress.com/2011/11/guitar-man-new_221.jpg?w=300&h=300" />
</div>
I've made it so none of the size changes effect the page flow. I've used css scaling rather than actually changing the size values and for borders I gave each image an invisible border that was coloured in rather than adding a border after.

You have:
a:link{
color:white;
font-size:150%;
text-decoration:none;
}
a:hover{
font-size:220%;
color: #7CB9E8;
}
This means when you move the mouse over a link (<a>), your font size becomes 220% instead of the regular 150% - that's what is causing the moving you describe - the size of any text will increase by approximately 50% (150/220).
EDIT / ADDED:
And the same with images (<img>tags) - you have:
div.gallary img{
width:200px;
height:200px;
}
img:hover{
width:220px;
height:220px;
}
which means: Your images in <div class="gallary">are 200x200px, but when you move the mouse over them, they become bigger: 220x220px, which also moves everything that comes after it...

How can I prevent the height of this navbar increasing when I scroll?

I have a floating horizontal navbar positioned using jQuery. It's perfect when the page is static, but as soon as I start scrolling, the navbar's height increases and I am unsure why.
I've a JSFiddle here to show the unwanted effect
Here's the html
<div id="stickyribbon">
<ul>
<li>Week1
</li>
<li>Week2
</li>
<li>Week3
</li>
<li>Week4
</li>
<li>Week5
</li>
<li>Week6
</li>
</ul>
</div>
Here's the css
#stickyribbon {
width:800px;
background: orange;
border-radius: 5px;
}
#stickyribbon ul {
display:table;
width:100%;
list-style-type: none;
}
#stickyribbon li {
display:table-cell;
font-size: 16px;
font-weight: bold;
vertical-align:middle;
}
#stickyribbon li a {
display:block;
color: #fff;
text-decoration: none;
}
#stickyribbon li a:hover {
color: yellow;
}
And lastly the JavaScript
$(function () {
var stickyRibbonTop = $('#stickyribbon').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyRibbonTop) {
$('#stickyribbon').css({
position: 'fixed',
top: '0px'
});
} else {
$('#stickyribbon').css({
position: 'static',
top: '0px'
});
}
});
});
I'd be grateful for any guidance, as I'm completely stumped.
TIA

You can change your CSS to the below, crucially you need to correctly define positioning, padding and margins to establish the layout in both states:
Demo Fiddle
#stickyribbon {
width:800px;
background: orange;
border-radius: 5px;
position:static;
top:0;
margin:15px 0;
}
#stickyribbon ul {
display:table;
width:100%;
list-style-type: none;
padding:0;
margin:0;
}
#stickyribbon li {
display:table-cell;
font-size: 16px;
font-weight: bold;
vertical-align:middle;
padding:0 40px;
}
#stickyribbon li a {
display:block;
color: #fff;
text-decoration: none;
}
#stickyribbon li a:hover {
color: yellow;
}

The div #stickyribbon has some margin and when the page is scrolled, the div is redrawn to fill that margin.
Add
margin:0;
to #stickyribbon ul and #stickyribbon li.

CSS submenu not displaying under main menu

I have a mobile site I'm working on. I finally got the JS code to work for showing submenu on click rather than hover. Now I'm having trouble positioning the submenu directly under the main menu. I researched the best i can, found that i need to make the main menu position "relative" and submenu "absolute". I've been going in circles trying to figure apply that, but no luck. The code is a bit messy so pardon me. I'm just a noob.
HTML
<html>
<head>
<link rel="stylesheet" href="phone.css">
</head>
<body>
<img class="smlogo" alt="" src="clearlogo123.png">
<div id="menuclick" class="smenu_div">
<ul>
<li>Menu
</div>
<div id="hiddenMenu" class="smenu_div" style="display: none;">
<ul>
<li>1Submenu</li>
<li>2Submenu</li>
</ul>
</div>
</li>
</ul>
<br>
<script>
var hidden = true;
document.getElementById('menuclick').onclick = function () {
document.getElementById('hiddenMenu').style.display = (hidden) ? 'block' : 'none';
hidden = !hidden;
};
</script>
</body></html>
CSS
.smenu_div ul
{
padding:0px;
margin-top:35px;
margin-right:40px;
font-family:georgia;
font-size:60px;
color:#ffffff;
list-style:none;
text-indent:15px;
text-align:center;
width:35%;
float:right;
overflow:hidden;
position: relative;
display: block;
}
.smenu_div ul li
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background:#000000;
line-height:justified;
border-bottom:1px solid #333;
margin-top: 10px;
z-index: 50;
position:relative;
}
.smenu_div li ul
{
position:absolute;
float:right;
}
.smenu_div ul li a
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration:none;
color:#ffffff;
display:block;
position:relative;
}
.smenu_div ul li a:hover
{
color:#000000;
background:#fdff30;
}
.smenu_div ul li#active
{
position:relative;
color:#000000;
background:#fdff30;
}

Try changing your HTML so that you dont have a div ending in the middle of the first li.
Then if you put an ID directly onto the hidden menu, you can use the javascript to directly hide / show the hidden menu
http://jsbin.com/fexazihe/1/edit?html,css,js,output
HTML
<body>
<img class="smlogo" alt="" src="clearlogo123.png">
<div id="menuclick" class="smenu_div">
<ul>
<li>
Menu
<ul id='hiddenMenu'>
<li>1Submenu</li>
<li>2Submenu</li>
</ul>
</li>
</ul>
</div>
</body>
CSS
.smenu_div ul
{
padding:0px;
margin-top:35px;
margin-right:40px;
font-family:georgia;
font-size:60px;
color:#ffffff;
list-style:none;
text-indent:15px;
text-align:center;
width:35%;
overflow:hidden;
position: relative;
display: block;
}
.smenu_div ul li
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: rgba(0,0,0,0);
line-height:justified;
border-bottom:1px solid #333;
margin-top: 10px;
z-index: 50;
position:relative;
}
/* Changed this so that your hidden menu is hidden by default */
.smenu_div li ul
{
display: none;
position: relative;
width: 100%;
background: transparent;
}
.smenu_div ul li a
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration:none;
color:#ffffff;
background: #000000;
display:block;
position:relative;
}
.smenu_div ul li a:hover
{
color:#000000;
background:#fdff30;
}
.smenu_div ul li#active
{
position:relative;
color:#000000;
background:#fdff30;
}
JS
<script>
var hidden = true;
document.getElementById('menuclick').onclick = function () {
document.getElementById('hiddenMenu').style.display = (hidden) ? 'block' : 'none';
hidden = !hidden;
};
</script>

Background color and image on li hover at same time

I have a code where I want to apply a image and also background color at the same time. Can anyone help me with it?
CSS
.menu, .menu ul
{
width:1000px;
background-color: #F3F3F3;
margin: 0;
}
.menu{ padding: 0; height:30px;}
.menu li
{
float: left;
padding-top:3px;
height:20px;
text-align:left;
text-transform:uppercase;
position: relative;
display: block;
font-family: Tahoma;
font-size: 8px;
font-weight:bold;
text-align: center;
text-decoration: none;
padding:10px 15px 0 15px;
background:url(../image/border.png) no-repeat right center;
}
.menu li:hover
{
background:#3EBBEC;
color: #FFFFFF;
}
.menu a { text-decoration: none; color:#000000; }
.menu a:hover { text-transform:lowercase; }
HTML
<ul class="menu">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
This is the code of both HTML and CSS where I need to apply an image and also a bckground color at the same time. Please someone help me with this.

Don't use the short-hand notation when you only want to change single values. Or the other way , if you use the short-hand notation, supply all values you don't want to be "default" values.
Use:
.menu li:hover
{
background-color: #3EBBEC;
}
or:
.menu li:hover
{
background: #3EBBEC url(...) ...;
}
Just remember that when you use the short-hand, that all values not provided will fallback to it's default not to it's inherited values.

.menu li {
background: #color url(path to img);
}
.menu li:hover {
background: #hover-color url(path to hover-img);
/* or if only color is changed just write */
background-color: #hover-color;
}

add
.menu li:hover
{
background:#3EBBEC url(image.jpg) no-repeat;
color: #FFFFFF;
}

First your HTML should look like this
<ul class="menu">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
CSS
ul.menu li{display:block; width:100px; height:30px; background:url(yourbackgroundimage.png);}
ul.menu li a{display:block; width:100px; height:30px; background:url(yoursecondbackgroundimage.png);}
and if you like to add hover state
ul.menu li{display:block; width:100px; height:30px; background:url(yourbackgroundimage.png);}
ul.menu li:hover{background:url(yourhoverbackgroundimage.png);}
ul.menu li a, ul.menu li a:visited{display:block; width:100px; height:30px; background:url(yoursecondbackgroundimage.png);}
ul.menu li a:hover{background:url(yoursecondbackgroundimagehover.png);}