Jump to content
Sign in to follow this  
Melford1

Horizontal List Stretch Assistance Required

Recommended Posts

Hi there, I've been working on a site project for a little while; not too sure exactly what I've done but I can't seem to even edit my CSS list without it all either vanishing or breaking entirely. I'd like to have it just stretch the top of the screen and would be incredibly thankful to whoever can help!

/*Strip the UL of padding and list styling */

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
    
}
/* Create a horizontal list with spacing */

li {
    display: inline-block;
    float: left;
    margin-right: 10px;
    position: center;
    display: inline-block;
    
}

/*Style for menu links */

li a {
    display: block;
    border: double 6px;
    border-color: darkseagreen;
    min-width: 140px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: cursive;
    color: aquamarine;
    background: #6b6969;
    text-decoration: none;
}

/* Hover state for top level links */

li:hover a {
    background: #c79816;
    color: #fff;
}

/* Style for dropdown links */

li:hover ul a {
    background: #e3ad19;
    color: #fff;
    height: 40px;
    line-height: 40px;
}

/* Hover state for dropdown links */

li:hover ul a:hover {
    background: #ad8413;
    color: #ffffff;
}

/* Hide dropdown links until they are needed */

li ul {
    display: none;
}

/* Make dropdown links vertical */

li ul li {
    display: block;
    float: none;
}

li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}

/* Display the dropdown on hover */

ul li a:hover + .hidden, .hidden:hover {
    display: block;
}

#gf {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
}
    
#gf img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    min-width: 50%;
    min-height: 50%;
}

 

This is the entirety of my CSS, hopefully its not too much; each part is annotated which I thought would help me but evidently not ':| many thanks to whoever takes their time to help!

Here's a screenshot of what it currently looks like:

fcc1385bc9fdb8bef9803c6d4ab00d2f.png

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...