Hi all,

I'm building a webpage for a friends shop and I've downloaded a template but I need to remove the word "home" and "blog" from the navigation at the top of the page. When I remove the links from the index.html the navigation gets all mis-aligned so I'd be really grateful if someone could help me out with this.

Click to view attachment

Click to view attachment

Thanks,


Tom.

You need to show the actual page. An image doesn't tell us what markup and CSS look like. If you have it online, please link to it. Otherwise paste the lot in your post or attach the files to it.

Sorry about that, I've tried attaching a zip file to this post but it doesn't seem to work for some reason. I'm going to try and get the site online tonight and I'll be back with a link.

Thanks,

Tom.

Did you notice the attachment process is twofold? When you click Add this attachment a new field appears and you have to also click Add into post.

Sorry for taking so long to get back. I've tried adding the files as a zip file but it won't attach for some reason. It just disappears when I click "Add this attachment".

My next problem is I've tried uploading the files to my server but it won't display, I just keep getting a 404 error so I can't show you that way either. The web address is http://279churchstreetbarbers.co.uk/ if that helps.

Edit: One of the files seems to have attached but not sure what happened to the others :-/ Am I supposed to add the files unzipped?

No, I think zip should work.

What's the exact name of the file that's supposed to display at http://279churchstreetbarbers.co.uk/ , case and all? Are you sure you uploaded to the right directory?

I can't get the zip file attached at all, here's the link to the files in dropbox - https://www.dropbox.com/s/7tq677neppp1es7/2...rbers.co.uk.zip

The name of the file which is supposed to be displayed is index.html. I've uploaded the files to the public_html directory which is where all my other sites are.

Sounds right, but something must be wrong.

I can't see your CSS. The CSS file only contains the URLs to other CSS files.

Does this not mean that it's importing the css from other css files?

You could set a float:right; to the last two LI elements.

Or add up the widths of the 4 LI elements that are navigation links, then calculate : 960 minus total li width and set the result as width of the middle one (containing an empty logo image?).

There's nothing wrong with the CSS includes. The index.html, from the dropbox download, loads fine.

BTW, you do have problems with the domain. There I get a 404 File not found, even when I add index.html to the domain. Be sure you have uploaded the files at the right directory on your server.

Is there any reason why this wouldn't work when I uploaded to my server then? I'm getting a 404 error at http://279churchstreetbarbers.co.uk

Yeah, I noticed. The links on that page can be clicked for further info. I have no experience with Hostgator. Maybe there's something you can do in their cPanel?

[edit] You might contact them and ask what wrong.

Ok, thanks guys. I'll get in touch with hostgator support.

Ah, I didn't see the assets folder was included.

How do I get the last two LI elements to float right? Would this be in the CSS or in the index.html?

If you set the float inline to the last LIs in the HTML, they will be reversed in order.
That can be arranged, if you exchange the order of those two LIs in the HTML source.
That seems to me the simplest solution.

There might be a way by using either two DIVs or two ULs, one left, one right. But you have that empty logo image in the middle too.

Thanks but I have no idea how to implement this fix. I'm a complete noob with css :-(

Like I said, use the simplest solution then.

You now have:

Set it to:

Thanks, that's kind of worked but as I have now have a logo in the middle that is still misaligned. Any way I can fix this?

Only, you didn't do that in the online site. And there, you changed "Say Hello" to "Opening times", which is larger and is pushed below as there is not enough space in the parent element.

I have no time to fiddle with the centering of the logo. Enlarge the parent element, calculate the widths of the LI links and you might enlarge the middle LI and center the div or logo image inside.

Had another look at the online page.

If you get rid of the max-width on the UL and set a min-width: 143px; to the LI's, then it seems to work, more or less.

Of course that spaces out the links some more. Anyway, both sides don't have the same widths.

Ok so how do I do that? I think I know how to remove the max width on the UL but not too sure were to alter the LI's. In the CSS layout there are a couple of sections with LI's in them so don't want to change the wrong thing.


By the way, I think I owe you a beer or something for your help. I've realised I'm totally clueless at this so I'm going to teach myself CSS once I've got this site out of the way.

That's the max-width of "header nav.main ul" on line 114 and setting the min-width to "header nav.main ul li" on line 120, both in layout.css.

Starting to learn CSS is a good idea. Start with the basics and build upon that.
http://westciv.com/style_master/house/index.html (pity that the CSS Guide returns a PHP error)