The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> Navigation alignment
tomwalsh77
post Jan 8 2014, 06:13 AM
Post #1


Newbie
*

Group: Members
Posts: 11
Joined: 8-January 14
Member No.: 20,194



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.

Attached Image

Attached Image

Thanks,


Tom.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 8 2014, 07:50 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tomwalsh77
post Jan 9 2014, 10:02 AM
Post #3


Newbie
*

Group: Members
Posts: 11
Joined: 8-January 14
Member No.: 20,194



QUOTE(pandy @ Jan 8 2014, 12:50 PM) *

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.

This post has been edited by tomwalsh77: Jan 9 2014, 10:05 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 9 2014, 11:07 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tomwalsh77
post Jan 24 2014, 06:00 AM
Post #5


Newbie
*

Group: Members
Posts: 11
Joined: 8-January 14
Member No.: 20,194



QUOTE(pandy @ Jan 9 2014, 04:07 PM) *

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?

This post has been edited by tomwalsh77: Jan 24 2014, 06:03 AM


Attached File(s)
Attached File  check.php ( 924bytes ) Number of downloads: 203
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 24 2014, 06:53 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tomwalsh77
post Jan 24 2014, 07:46 AM
Post #7


Newbie
*

Group: Members
Posts: 11
Joined: 8-January 14
Member No.: 20,194



QUOTE(pandy @ Jan 24 2014, 11:53 AM) *

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. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 24 2014, 08:03 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Sounds right, but something must be wrong.

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

CODE
@import url("assets/css/normalize.css");
@import url("assets/css/boilerplate.css");
@import url("assets/css/prettyphoto.css");
@import url("assets/css/jquery.bxslider.css");
@import url("assets/css/layout.css");
@import url("assets/css/skeleton.css");
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tomwalsh77
post Jan 24 2014, 08:07 AM
Post #9


Newbie
*

Group: Members
Posts: 11
Joined: 8-January 14
Member No.: 20,194



QUOTE(pandy @ Jan 24 2014, 01:03 PM) *

Sounds right, but something must be wrong.

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

CODE
@import url("assets/css/normalize.css");
@import url("assets/css/boilerplate.css");
@import url("assets/css/prettyphoto.css");
@import url("assets/css/jquery.bxslider.css");
@import url("assets/css/layout.css");
@import url("assets/css/skeleton.css");




Does this not mean that it's importing the css from other css files?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jan 24 2014, 08:09 AM
Post #10


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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?).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jan 24 2014, 08:13 AM
Post #11


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



There's nothing wrong with the CSS includes. The index.html, from the dropbox download, loads fine.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jan 24 2014, 08:17 AM
Post #12


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tomwalsh77
post Jan 24 2014, 08:17 AM
Post #13


Newbie
*

Group: Members
Posts: 11
Joined: 8-January 14
Member No.: 20,194



QUOTE(Frederiek @ Jan 24 2014, 01:13 PM) *

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


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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jan 24 2014, 08:22 AM
Post #14


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.

This post has been edited by Frederiek: Jan 24 2014, 08:24 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tomwalsh77
post Jan 24 2014, 08:25 AM
Post #15


Newbie
*

Group: Members
Posts: 11
Joined: 8-January 14
Member No.: 20,194



QUOTE(Frederiek @ Jan 24 2014, 01:22 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 24 2014, 09:11 AM
Post #16


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Ah, I didn't see the assets folder was included.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tomwalsh77
post Mar 4 2014, 08:16 AM
Post #17


Newbie
*

Group: Members
Posts: 11
Joined: 8-January 14
Member No.: 20,194



QUOTE(Frederiek @ Jan 24 2014, 01:09 PM) *

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?).


How do I get the last two LI elements to float right? Would this be in the CSS or in the index.html?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 4 2014, 11:14 AM
Post #18


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tomwalsh77
post Mar 4 2014, 01:34 PM
Post #19


Newbie
*

Group: Members
Posts: 11
Joined: 8-January 14
Member No.: 20,194



QUOTE(Frederiek @ Mar 4 2014, 04:14 PM) *

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 :-(
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 5 2014, 04:22 AM
Post #20


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Like I said, use the simplest solution then.

You now have:
CODE
<li><a href="#barbers">The Barbers</a></li>
<li><a href="#hello">Say Hello</a></li>

Set it to:
CODE
<li style="float: right;"><a href="#hello">Say Hello</a></li>
<li style="float: right;"><a href="#barbers">The Barbers</a></li>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 07:14 AM