Highlighted

Spaces when hovering on navigation

New Here ,
Oct 06, 2017

Copy link to clipboard

Copied

Hello everyone, I have a problem when I hover above the navigation spaces comes out of nowhere here is the html file : https://pastebin.com/nwnk7nXg here is the css file : https://pastebin.com/BzXTvGHe thanks.

TOPICS
Create menus in Dreamweaver, Learn Dreamweaver

Views

327

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Spaces when hovering on navigation

New Here ,
Oct 06, 2017

Copy link to clipboard

Copied

Hello everyone, I have a problem when I hover above the navigation spaces comes out of nowhere here is the html file : https://pastebin.com/nwnk7nXg here is the css file : https://pastebin.com/BzXTvGHe thanks.

TOPICS
Create menus in Dreamweaver, Learn Dreamweaver

Views

328

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 06, 2017 0
Adobe Community Professional ,
Oct 06, 2017

Copy link to clipboard

Copied

Try it without the following CSS properties denoted in red strikeout.

#Home:hover {

    background: #c1c1c1;

    border-radius: 50px;

    border: 10px solid #c1c1c1;

    font-size: 220%;

    transition-duration: 0.5s;

}

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 06, 2017 0
New Here ,
Oct 06, 2017

Copy link to clipboard

Copied

spaces got smaller but still there is.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 06, 2017 0
Adobe Community Professional ,
Oct 06, 2017

Copy link to clipboard

Copied

Can you upload your work so far to your remote server and post the URL?  That's the quickest way for us to troubleshoot layout issues.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 06, 2017 0
New Here ,
Oct 06, 2017

Copy link to clipboard

Copied

what do you mean? how can I do that?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 06, 2017 0
Adobe Community Professional ,
Oct 06, 2017

Copy link to clipboard

Copied

Assuming you're building a website, you'll need to upload it to a public facing web server to put it online.  Do you have web hosting yet?

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 06, 2017 0
New Here ,
Oct 06, 2017

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 06, 2017 0
Adobe Community Professional ,
Oct 06, 2017

Copy link to clipboard

Copied

Well, it's doing exactly what you told it to do.  On hover, the font-size grows 20% bigger and you've added 10px of border all around + 50px of border-radius.  So of course there's increased space around each link.

Delete font-size, borders and border-radius.  It then works as expected.

Nancy

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 06, 2017 0
New Here ,
Oct 06, 2017

Copy link to clipboard

Copied

Well can I have all of those without spaces? in Muse that was not an issue.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 06, 2017 0
Adobe Community Professional ,
Oct 06, 2017

Copy link to clipboard

Copied

No, not the way you have it set-up.

Try this instead of what you have now.

.nav > li > a {

    text-decoration: none;

    color: #fff;

    border-radius: 50px;

    border: 10px solid transparent;

    font-size: 220%;

}

.nav > li > a:hover {

    background-color: #c1c1c1;

    border-color: #c1c1c1;

    transition-duration: 0.5s;

}

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 06, 2017 0