Need Help with Four Problems

HTML & CSS
1

Use this site for reference.

The logo in the top right corner does not render when published
I’ve had this problem before, but now I can’t figure this out.

Width to large when tablet-sized
When you re-size the window, it goes into tablet view, but the width is too wide causing a horizontal scroll bar and white-space on the right to appear.

Go to ‘Classes > Web Design 2’ and click on Day 1
Scroll down to the end of the drop down that appear. There is no margin below the drop down separating it from the bar below it. I can’t find the right way to apply one.

Can’t hide links in mobile navigation
I try to set the display to some of the links to none, but the JavaScript seems to clear any properties I apply to them. I’m also not sure which JavaScript class is doing this.

Thanks in advanced!

  • Also suggestions are nice (and this is not my site).
2

First thing to check is that the file is at the right address. You are looking for it here but it doesn’t seem to be at that address. The [URL=“wolbertswebtest.azurewebsites.net/images/layout/logo.png”]png version however does seem to be there.

Width to large when tablet-sized
When you re-size the window, it goes into tablet view, but the width is too wide causing a horizontal scroll bar and white-space on the right to appear.

I don’t see the tablet version kicking in until about 500px but you do have a scroll issue at larger sizes where you have set the h2 to 1200px width. Try adding this:


.bar h2{width:auto}

Your page doesn’t resize well at all and has a horrible flash of unstyled content when you swap the css files dynamically. Why aren’t you using media queries instead which are easier to debug and produce a smoother experience for the viewer?

From 1000px down to 500px you have a fixed width so you get a scrollbar on all devices. You need to look at making the site fluid throughout the range and not just at a selection of fixed width sizes. This page is quite a simple page but the code is making it massively complicated to debug and to change.

It is not a good idea either to stop mobile users from scaling the page as that will annoy almost all of them. Just use this meta tag instead of the one you use:


<meta name="viewport" content="width=device-width, initial-scale=1.0">

Go to ‘Classes > Web Design 2’ and click on Day 1
Scroll down to the end of the drop down that appear. There is no margin below the drop down separating it from the bar below it. I can’t find the right way to apply one.

Hmm that’s an awkward construction with some odd rules. I would change it to something more solid like this.


.dropBar {
	background: #fff;
	display:block;
	height: auto;
	margin:0 0 10px;
	width: auto;
	padding:0;
	border:none;
}
.dropBar:hover {
	background:#fff
}
.dropBar span {
	background: #F1F1F1 url("images/barArrow.png") no-repeat 98% center;
	border:1px solid #CCC;
	display:block;
	height: 60px;
	margin:0px;
	width:auto;
	padding:0 0 0 10px
}
div.show {
	border:1px solid #cc;
	border-top:none
}
.dropBar span:hover {
	background-image: url("images/barArrow_hover.png")
}
3

Regarding the terrible construction, this site was made mostly using a template, which my Web Design class requires. It’s good enough for

First thing to check is that the file is at the right address. You are looking for it here but it doesn’t seem to be at that address. The png version however does seem to be there.

The file is there. Should I just use the PNG? It appears locally, just not when published.

Issues one and two are fixed, though they’re not published.

The only issues remaining are: I can’t hide any of the mobile navigation links (probably due to the JS), and the absence of the SVG logo.

4

If the svg was there it would show up when you clicked that link like[URL=“http://s.cdpn.io/3/kiwi.svg”] this svg example image from [URL=“http://css-tricks.com/using-svg/”]CSS tricks .

Show me the absolute link to your svg image and we can work out what’s gone wrong.

The only issues remaining are: I can’t hide any of the mobile navigation links (probably due to the JS)

I meant to ask you about this earlier as I wasn’t sure which specific mobile links you were having trouble hiding? I don’t see any navigation at mobile size screen widths so I must be looking in the wrong place :slight_smile:

5

The absolute path on my drive is ‘file:///C:/Users/Stephen/SkyDrive/Projects/Websites/wolbertsweb/images/layout/logo.svg’, with ‘/wolbertsweb/’ being the root of the site.
When viewed on localhost, the SVG appears with the absolute url of ‘http://localhost:20172/images/layout/logo.svg’.
The absolute url when published is ‘http://wolbertswebtest.azurewebsites.net/images/layout/logo.svg’.

I meant to ask you about this earlier as I wasn’t sure which specific mobile links you were having trouble hiding? I don’t see any navigation at mobile size screen widths so I must be looking in the wrong place

When the page is shrunk down to mobile size, it should shift into mobile view. At the top right corner there should now be a button that can be “tapped” to open the navigation.

I just realized that because the button (and the mobile logo) are SVGs, they also won’t appear. The link still works, you just can’t see it. The difference between the mobile SVGs and the desktop/tablet SVG is that mobile is linked in CSS and desktop/tablet is through HTML.

6

That’s not where the file is. That link gives this message:

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

If the resource was there you should be able to see the image when you clicked the link just like the svg image I showed in my last post. This indicates that the svg image has not been uploaded or is in a different directory to the one you have specified (or the svg contains external resources and will be ignored). Can you not give a direct link to the svg file that we can see?

When the page is shrunk down to mobile size, it should shift into mobile view. At the top right corner there should now be a button that can be “tapped” to open the navigation.

I just realized that because the button (and the mobile logo) are SVGs, they also won’t appear. The link still works, you just can’t see it. The difference between the mobile SVGs and the desktop/tablet SVG is that mobile is linked in CSS and desktop/tablet is through HTML.

The CSS style for the side menu is written inline in the tag itself so the only way to over-ride it with css is by using !important.

e.g.


#navPanel .link {display:none!important}

Of course that would hide all of them so you will need to add classes to the ones you want to hide and adjust the above as required.

7