Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Craig Watson
Craig Watson
27,930 Points

CSS Headache ! Help!

Hi everyone,

I am trying to complete a navigation menu, and am having a niggling issues in certain areas listed below, there is a CodePen to take a look through the code:

  1. At full width (desk top screen) the menu layout is fine but I would like the contact form not to be clipped out of the screen if the screen is for example and Ipad, (you'll see what i mean if you have a play around with screen width)

    1. When the screen changes to mobile width, I would like a "main menu" to then expand into the normal nav I think its getting called a hamburger menu :s.
    2. Again at mobile width, if you hover over the brochure / services the sub menu appears .. all well and good but not so much for a finger or thumb hovering :s how do I have the items stay visible when clicked by user...

CodePen = http://codepen.io/Craig-Watson/full/ByjObG/

I have watched a lot of Guil Hernandez tutorials and is the reason I'm testing FlexBox maybe he'd be kind enough to help too...

Thanks Everyone !!

Craig

1 Answer

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Craig,

I noticed that you used a lot of fixed widths in your CSS by using the "px" unit on your properties. The problem with using the px on widths, heights, etc. (anything not in a tiny area) is that those widths and heights are going to be the same fixed width or height despite the screen size. What you want to do is convert those px units into % units. % units scale with the page instead of remaining fixed.

When converting your units, use the target / context = % * 100 formula. For example, if your current screen resolution is 1366 x 768 (width by height), the context for converting any width will be 1366px. So, using the target / context formula, and converting a 400px width, we get 400px / 1366px = 0.29282576866764275256222547584187 (you can truncate this number to whatever precision you wish). You must convert this decimal into a %, so we multiply by 100 and get 29.282576866764275256222547584187%. This is your responsive width that will scale with the page now instead of a fixed 400px.

I hope that helps!

Craig Watson
Craig Watson
27,930 Points

Hi Marcus,

Thanks a lot for that I will start converting the fixed widths now this will work great with flex-box too really great thanks.

Do you have any ideas on the pseudo class needed to hold the sub menus open when pressed on a mobile device rather than the hover state on a desktop ??

Thank you for your help!

Craig

Marcus Parsons
Marcus Parsons
15,719 Points

You're welcome! It's always a good idea to focus on scaling units instead of fixed units for anything that is going to be larger than a few pixels. It will be fine to use pixels for some padding or rounding corners, but definitely stick to responsive units such as % or em for widths or fonts.

You might try using the ":focus" pseudo class, but otherwise, you might need Javascript to accomplish that.

Craig Watson
Craig Watson
27,930 Points

Thanks for your advice i shall give it a go and when all is well I'll drop the new pen on here to see what you think thanks !!

Craig Watson
Craig Watson
27,930 Points

Hi Marcus,

after a good nights sleep last night i came back with a fresh mind and have this now:

http://codepen.io/Craig-Watson/full/ByjObG/

Thought id let you have a peek, and please if you do have a look and spot anything in the css that is rubbish or needs tweeking / any duplicate content which im sure there is let me know :)

Thanks for your help on this Marcus!

Craig

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Craig,

I'm glad your mind is fresh and risen anew! haha :)

I see what you did there. I actually saw the actual code the other night, but I couldn't respond back thoroughly until now. I liked where you were going with it. I was also happy it took no JS to accomplish it.

But I also see that you are still using these large pixel values instead of percentages. The problem with using large pixel values for spacing and dimensions of elements is that elements will be placed into different positions depending on the screen resolution. What looks good to you at 1280 x 1024 might not look that good to someone who uses a 1920 x 1080 resolution. This is why it is very important to use responsive units that flow with your design.

I actually created you a simple little converter for converting px units to % units on the fly. All you gotta do is copy and paste this into a blank text file and change the extension to ".html" of course and voila! Magic! :)

<html>
<head>
<meta charset="utf-8">
<title>Simple Percentage Converter</title>
</head>

<body>
<h2>This converter uses your screen resolution to create a responsive unit from pixels.</h2>
Enter dimension to convert:&nbsp; <input type="text" id="initDim">px
<br><br>
Choose width or height:&nbsp; <select name="dim" id="dim">
<option value="Width">Width</option>
<option value="Height">Height</option>
</select>
<br><br>
Enter decimal precision:&nbsp; <input type="text" id="prec" value="8">
<br><br>
New responsive value: &nbsp;<input type="text" readonly="readonly" id="finalDim">
<br><br>
<button onclick="javascript:convertDim();">Convert!</button>
<script type="text/javascript">
function convertDim() {
var initDim = document.getElementById("initDim");
var finalDim = document.getElementById("finalDim");
var initDimVal = Number(initDim.value);
var finalDimVal = Number(finalDim.value);
var prec = document.getElementById("prec");
var precVal = Number(prec.value);
var sel = document.getElementById("dim");

if (sel.options[sel.selectedIndex].value == "Width"){
var screenWidth = screen.availWidth;
finalDimVal = ((initDimVal / screenWidth) * 100).toFixed(precVal);
finalDim.value = finalDimVal + "%";
}
else{
var screenHeight = screen.availHeight;
finalDimVal = ((initDimVal / screenHeight) * 100).toFixed(precVal);
finalDim.value = finalDimVal + "%";
}
}
</script>
</body>
</html>
Craig Watson
Craig Watson
27,930 Points

Thanks Marcus this is great I have actually removed all the CSS from the pen with the intention of using this to create the nav bar for my new site.

I am still just a novice at all things web design and would like my site to be extremely user friendly on mobile devices, the same pen has now no CSS as I mentioned and I am sorry to keep bugging you with things, would you be kind enough to help me with the .js needed for the menu to work on what i believe is the on click function :S

I'm on with the treehouse JavaScript course at the moment to get my head around it ... not as simple as HTML / CSS !

Thanks for all your help Marcus really has opened my eyes to fluid design!

Craig

Marcus Parsons
Marcus Parsons
15,719 Points

First off, you might not need JS at all. It depends entirely on what you want the links to do. So, that is the question: what should each link do? And be as descriptive as you can be if it is something complex.

Btw, I revised the converter form I uploaded. Just copy and paste the entire thing if you don't want to find the line I talk about, but the line in the "else" portion that initiates the value of screen height was the wrong usage of height, so it now uses availHeight instead of just height. Side note: screen.availHeight is the entire height of your screen (i.e. your resolution) whereas screen.height is the height of the current viewport i.e. if you don't have your window maximized, the height will be shorter than the screen's resolution.

Craig Watson
Craig Watson
27,930 Points

@ desktop resolutions the nav is to display 4 Links:

1) Home - (Link Home Page) 2)About - (Link About Page) 3)Services - (Link to a General Services Page if "Clicked" or "Hover" display dropdown 3 Items) 4)Contact - (On hover or click this will display a dropdown contact form)

@ mobile resolutions the nav will display one main button (the menu icon [three horizontal lines]) when pressed will open a dropdown menu:

1) Home - (Link Home Page) 2)About - (Link About Page) 3)Services - (Link to a General Services Page [if clicked opening another dropdown 3 items] ) 4)Contact - (On "Click" this will display a dropdown contact form)

I mange to create this using CSS that I'm knowledgeable of, my main concern is that the :hover pseudo class is not user friendly on mobile devices and I am not aware of the way in which I can alter this so that when a user on a mobile device should press one of the links in my menu, if required it will dropdown and hold open the options.

I have copied the new code from above Marcus Thanks !!

Craig

Marcus Parsons
Marcus Parsons
15,719 Points

Because all of the links are going to other pages, you won't need any JS for the link behavior. All you have to do is wrap the links within an "a" anchor tag using HTML just the same way you'd do any other link:

<a href="http://www.google.com">Google</a>

Now as far as keeping the menus open on a mobile device, a neat trick you might try is JQuery's slide function. It is super easy to implement. Check this out for some more info: JQuery.slideDown(). The best thing to do is to play around with it. Trial and error is the key to learning. :)