Steve Bohler
asked on
2 CSS questions
Hello,
Regarding this page: https://dev.goebase.com/tools/action_learning_team_worksheets_resource.asp
1) How do I have the word "Tool" vertically centered with the "menu" icon?
2) If you click on the menu icon, you see a drop-down box. However, the bookmark links don't jump to the correct spot, presumably because of the fixed header. What can I do about this so that the hyperlinks to the bookmarks down the page work as one would hope?
Thanks!
steve
Regarding this page: https://dev.goebase.com/tools/action_learning_team_worksheets_resource.asp
1) How do I have the word "Tool" vertically centered with the "menu" icon?
2) If you click on the menu icon, you see a drop-down box. However, the bookmark links don't jump to the correct spot, presumably because of the fixed header. What can I do about this so that the hyperlinks to the bookmarks down the page work as one would hope?
Thanks!
steve
ASKER
Hi Julian,
Thank you for the reply.
Yes, the code is probably a mess. I'm focusing on doing mock-ups and then we'll be creating a Gig project to have someone develop templates using best practices.
Regarding your first suggestion, I'm not exactly clear. Are you saying to have the word "TOOL" appear above the Menu image?
Thank you for the reply.
Yes, the code is probably a mess. I'm focusing on doing mock-ups and then we'll be creating a Gig project to have someone develop templates using best practices.
Regarding your first suggestion, I'm not exactly clear. Are you saying to have the word "TOOL" appear above the Menu image?
No I was saying that to get the effect you want do the following
Change your HTML so that the Tool comes after the menu
Add these styles to the end of https://dev.goebase.com/css/style.css
Change your HTML so that the Tool comes after the menu
<div class="box_shadow">
<div class="dropdown" >
<button class="dropbtn"><img src="../global/Images/icons/nav-menu-wht.png"></button>
<div class="dropdown-content">
<a href="#1">What is It?</a>
<a href="#2">When to Use It?</a>
<a href="#3">How to Use It?</a>
<a href="#4">Downloads</a>
</div>
</div>
<div class="menu-caption">TOOL</div>
</div>
Note we removed <font> and replaced with a <div> with class menu-caption.Add these styles to the end of https://dev.goebase.com/css/style.css
.box_shadow:after {
clear: both;
content: " ";
display: table;
}
.dropdown {
float: right;
}
.menu-caption {
float: right;
line-height: 48px;
font-size: 16px;
color: #fff;
font-face: 'arial black';
}
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Julian,
The tweaks to get the menu icon and all lined up look great.
Any thoughts on my second question about getting the bookmark links in the menu to jump to the right place? Currently they're not, most likely having to do with a fixed header
The tweaks to get the menu icon and all lined up look great.
Any thoughts on my second question about getting the bookmark links in the menu to jump to the right place? Currently they're not, most likely having to do with a fixed header
I did address that - see here
Don't forget to change this (Line 271)
.dropdown-content {
background-color: #f9f9f9;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
display: none;
min-width: 160px;
position: absolute;
right: 0; /*********** <== ADD THIS ***********/
}
ASKER
Hi Julian,
I did see that, just didn't realize it was supposed to address that second issue.
I did insert it.
Possibly I didn't describe the problem correctly ? The drop-down looks fine. The hyperlinks in the menu aren't pulling the content to the right bookmark, possibly because of the offset due to the fixed header?
Thanks,
Steve
I did see that, just didn't realize it was supposed to address that second issue.
I did insert it.
Possibly I didn't describe the problem correctly ? The drop-down looks fine. The hyperlinks in the menu aren't pulling the content to the right bookmark, possibly because of the offset due to the fixed header?
Thanks,
Steve
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks Julian.
I gave that a try. The third link seems to jump to the right spot, but the others are off. (using Chrome)
Your sample does seem to work well, however.
Any thoughts?
Thanks again.
I gave that a try. The third link seems to jump to the right spot, but the others are off. (using Chrome)
Your sample does seem to work well, however.
Any thoughts?
Thanks again.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That did it!
Then give your Tool block a line-height: 48px;
A note on your markup
It is not really conducive to solving this easily. In addition you are using deprecated (<font>) tags - you should consider changing those.
I also noticed your tool bar is absolutely positioned - this is also potentially problematic - and unnecessary as the layout is possible with normal document flow.
Part II
add right: 0;
Open in new window