New to Web Design Css problem multi page

User 2359461 Photo


Registered User
34 posts

I am new to web design. I have taken some online classes and have a sample website up using your free website. I have seen on this forum you help with question on web design.

I have an issue with my test website which I created for my classes and it may turned into a actual store website.
My site is http://mybookstore.coffeecup.com. My issue is on the contact page. For some reason after multiple changes to add the hours line and make sure it is viewable without scrolling across the screen for smaller screens. The page now doesn't show the address line in the header bar even though it is in the HTML file. Also there is a gap between the navigator bar and the main page that is not on other pages. All 4 pages use the same CSS page for formatting.

Thanks for your assistance and help it will be greatly appreciated.

T.
User 271657 Photo


Ambassador
3,816 posts

Welcome to the forums, T :D

As someone fairly new to HTML/CSS, I've found it's really easy to lose track of closing tags. Make sure every <div> (or <p>, etc.) has a corresponding </div>.
Check your CSS too for picky little things like....
#navbar a:hover,
...has "," rather than ";"
...As well as wait for someone with more experience to have a look at your code and let you know what's up :lol:
If you've made changes since you put the validation tags on your site, you might want to run it past the validators again.
Another good resource: http://chrispederick.com/work/web-developer/
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2359461 Photo


Registered User
34 posts

Thanks for your advice foxfire's web designer add on says CSS is OK I have not run it thru any other validators in the last few days. That line was validated previously and was in my intermediate CSS class. I will check out the website because I am always interested in new information
User 1948478 Photo


Senior Advisor
1,850 posts

T. Brown wrote:
...My issue is on the contact page. For some reason after multiple changes to add the hours line and make sure it is viewable without scrolling across the screen for smaller screens. The page now doesn't show the address line in the header bar even though it is in the HTML file. Also there is a gap between the navigator bar and the main page that is not on other pages. All 4 pages use the same CSS page for formatting....

1. On the Contact page, you need to place the <h4>...address line...</h4> inside the 'branding' div to make it show up the same way as on other pages. I think this will take care of your 'gap' as well, since that seems to be where the address line resides now in a highly distorted (compressed) format...

2. I would suggest you define the main widths of page elements in terms of pixels instead om 'em's. This would include your 'wrapper', 'navbar' and some other things.
Since 'em' refers to the 'current font', you may otherwise end up with some unintended widths. Your current page width, defined as 79.75 em, is about 1400px...
Somehow I suspect that is a bit more than you intended (?)
User 2359461 Photo


Registered User
34 posts

Thank you for your help I have looked at that so long I did not notice the div close line was above the h4 line. That solved my problem. As for suggestion # 2 that is not more than I intended as I am new to web design I took classes less than 1 year ago and appreciate all the assistance I can get. I only used em because I was told that an elastic page was better with if I person enlarged a page and for different size monitors. I was trying to convert pixels to em for measurements. Your Advice is greatly appreciated as I have no one else to ask advance question to. Thank You again.
T.
User 1948478 Photo


Senior Advisor
1,850 posts

I'm glad it worked out. Let us know if/when you get stuck with something else, or have other questions! ;)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.