Solved

2 CSS questions

Posted on 2016-10-19
11
48 Views
Last Modified: 2016-11-02
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
0
Comment
Question by:skbohler
  • 6
  • 5
11 Comments
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41850148
One way to do this is make your <font> block float: right and then the menu block below it to also float right (you will need to change the order of the two elements around);
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;
.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 */
}

Open in new window

0
 

Author Comment

by:skbohler
ID: 41850226
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?
0
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41850284
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
<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>

Open in new window

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';
}

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 56

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
ID: 41850293
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 */
}

Open in new window


Note with this style (from the post above)
.dropdown {
  float: right;
}

Open in new window

You could just add the float: right to the following rule on line 265 of the styles sheet
.dropdown {
  display: inline-block;
  float: right; /* <== ADD THIS */
  position: relative;
}

Open in new window

Then your additions at the end would just be
.box_shadow:after {
  clear:  both;
  content:  " ";
  display: table;
}
.menu-caption {
  float: right; 
  line-height: 48px;
  font-size: 16px; 
  color: #fff; 
  font-face: 'arial black';
}

Open in new window

0
 

Author Comment

by:skbohler
ID: 41855403
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
0
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41855547
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 ***********/
}

Open in new window

0
 

Author Comment

by:skbohler
ID: 41856059
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
0
 
LVL 56

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41856138
Ok I see what you mean - your fixed menu is causing an issue where the top is under the menu hiding the content.

Just a couple of notes
1. The last link - for the downloads - is not going to "jump" to the right spot because the end of the page will prevent the link from being able to move to the top of the page. The scroll works on the principle that the page will move up until the element matching the id (see next point) is at the top of the page OR until the bottom of the document is reached. Because the last section is shorter than a full page it stops short of the top.

2. We don't us the <a name=""> anymore. <a href="#downloads"> will jump to the element with id="downloads" so instead give your <h2> elements meaningful ID's and change your TOOL menu links to point to those ID's

Now to the problem of your scrolled page being hidden under the menu. As I said the problem is because when the page scrolls - it scrolls until element with the ID that is being linked to is at the top of its container. If you have a fixed menu that sits over the container - as you do then the content will scroll until it is under the menu.

We have a trick that we use to fix this.
1. Make your links point at id's attached to the <h2> elements for example
<h2 class="resource_section_heading" id="what-is-it">What is It?</h2>

Open in new window


2. Give your <h2> a top padding sufficient to push the heading down enough to be below the menu.
.resource_section_heading {
  padding-top: 65px;
  margin-top: -65px;
}

Open in new window


I have put together a sample here that demonstrates the concept
0
 

Author Comment

by:skbohler
ID: 41856189
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.
0
 
LVL 56

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
ID: 41856559
Try increasing your margin / padding to 120px
0
 

Author Comment

by:skbohler
ID: 41856914
That did it!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Html split(text) 2 33
Html using "Or" in condition 3 29
HTML or/and CSS codes to construct numbered paragraphs. 5 22
CSS for Popup in ASP.NET 4 22
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question