CODEWITHSUNDEEP
jqueryhtmlcss
S. E.
S. E.

Reputation: 415

How to align a list to an image, and jquery problems

So, I've encountered two problems in my code:

  1. I don't know how to align my menu behind my logo. I tried to use

    display:inline;

but it had no effect.

  1. I want my menu elements to get a thicker border when hovered over, but I cant seem to get it to work.

The HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="../css/main.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
</head>

<body>

<div class="navigation">

    <a href="index.html" class="a_logo"><img src="../images/logo_webpage_ellefsen.png" class="logo"     width="20%" height="20%"></a>

    <div class="menu">
        <ul>
            <li class="menu-item"><a href="#home" class="menu-item">Home</a></li>
            <li class="menu-item"><a href="#portfolio" class="menu-item">Portfolio</a></li>
            <li class="menu-item"><a href="#about" class="menu-item">About Me</a></li>
            <li class="menu-item"><a href="#contact" class="menu-item">Contact Me</a></li>
        </ul>
    </div>

</div>



<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript">

 $(document).ready(function(){

$('.menu-item').hover(function(){
    $(this).addClass("active-menu");
},function(){
    $(this).removeClass("active-menu");
});

})

</script>
</body>
</html>

The css:

@charset:"UTF-8";

body {
background-image: url(../images/background.png);
}

.menu ul {
list-style-type: none;
}

.menu li {
font-family: 'Open Sans', sans-serif;
display: inline;
}

.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
font-size: 25px;
margin: 5px;
border-bottom: 1px solid #0A0F2D;
}

.active-menu {
border-bottom: 5px;
}

.logo {
margin-left: 20px;
}

JSFIDDLE

Upvotes: 0

Views: 30

Answers (1)

A.B
A.B

Reputation: 20445

Make these change , see output below

$(document).ready(function () {

    $('.menu-item').hover(function () {
        $(this).addClass("active-menu");
    }, function () {
        $(this).removeClass("active-menu");
    });

});
@charset:"UTF-8";
 body {
    background-image: url(../images/background.png);
}
.menu ul {
    list-style-type: none;
}
.menu li {
    font-family:'Open Sans', sans-serif;
    display: inline;
}
.menu a {
    font-size: 15px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 25px;
    margin: 5px;
    border-bottom: 1px solid #0A0F2D;
}
.active-menu {
    border-bottom: 5px;
}
.logo {
    margin-left: 20px;
}
.navigation img{
    float:left;
}
.menu a:hover{
    border-bottom: 3px solid #0A0F2D;
   
    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="navigation">	<a href="index.html" class="a_logo"><img src="../images/logo_webpage_ellefsen.png" class="logo" width="20%" height="20%"></a>

        <div class="menu">
            <ul>
                <li class="menu-item"><a href="#home" class="menu-item">Home</a>

                </li>
                <li class="menu-item"><a href="#portfolio" class="menu-item">Portfolio</a>

                </li>
                <li class="menu-item"><a href="#about" class="menu-item">About Me</a>

                </li>
                <li class="menu-item"><a href="#contact" class="menu-item">Contact Me</a>

                </li>
            </ul>
        </div>
    </div>
</body>

Upvotes: 1

Related Questions