Jump to content

Height doesn't change in css

Zendex

By Zendex,
in General Support

 Share

Recommended Posts

Zendex Starter

Zendex

Posted
Posted

Hi,

I am trying to make a site for a studio, and I wanted to set a specific hover effect for my text. I want the background of the text to be lit up in the full height of the nav bar but it doesn't do it. I showed the expected result in the png in the attached files. I will also set the code here below, the top part is a css reset.

 

HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Zendex</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <link rel="preconnect" href="https://fonts.gstatic.com"> 
<link href="https://fonts.googleapis.com/css2?family=Offside&display=swap" rel="stylesheet">
</head>

<body>
    <div id="nav_bar">
        <div id="Zendex">ZENDEX</div>
<ul>
    <a href="contact.html"><li>CONTACT</li></a>
    <a href="films.html"><li>FILMS</li></a>
    <a href="about.html"><li>ABOUT</li></a>
    <a href="home.html"><li>HOME</li></a>
        </ul>
    </div>
    <div class="main"></div>
</body>
</html>

CSS:

@charset "UTF-8";
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
    background-color: #6A6969;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*-------------------------------------------------------------------------------------------------------------------------------------------------*/

#nav_bar{
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100vw;
    height: 125px;
    background-color: #484848;
    border: solid 1px black;
}

li{
    font-size: 24px;
    text-shadow: 1px 1px 100px white;
    font-family: 'Offside', cursive;
    float: right;
    margin: 45px 50px 0px 0px;
    height: 125px;
}

#Zendex{
    font-size: 24px;
    text-shadow: 1px 1px 100px white;
    font-family: 'Offside', cursive;
    float: left;
    margin: 45px 0px 0px 100px;
    color: azure;
}

#home{
    
}

#about{
    
}

#films{
    
}

#contact{
    
}

ul{
    margin: 0px 50px 0px 0px;
    color: azure;
    height: 125px;
}

a:link{
    color: white;
}

li:hover{
    height: 125px;
    background-color: #6A6969;
    color: white;
}
 

css problem.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...