Jump to content

Back To Web Design, After Several Years Away.


Recommended Posts

I took Web Design a number of years ago, but didn't complete the full certification as things in my life changed. Back then, I had taken HTML, JavaScript and just started CSS. Most of what I learned was through distance education at a local community college and although I was doing well with what I learned, I didn't continue web design, until recently. I started my own company as a Home Inspector and found when I went to create a website, I didn't like the WYSIWYG programs that came with sit hosting as they didn't offer me enough options. So I bought a new version of Coffee Cup HTML Editor, as this is what I used in the past.


Moving forward to my current problems. I also purchased a template from Coffee Cup, which I like the look of for my business, and this came with some pre-designed HTML and CSS pages, which I started modifying to fit my needs. Where I've run into problems and don't have enough knowledge at this point work it out myself, is that when viewing my website on various size monitors, the text in the header doesn't auto-adjust to the screen, but instead ends up covering up part of my company logo.


From this experience, I've decided to re-educate myself in web design and see if I can make this a second business, once I've learned everything properly again. I forgot how much I enjoyed the challenges of web design and the satisfaction at the end of the day when I accomplished set goals or figured out a problem that I had been faced with.


Anyway, if someone could take a look at my website and give me a little advice on how to remedy the problem explained above, I would very much appreciate it. You can take a look at the website at www.integratedbuildinginspections.com


Thanks for any help given.



Link to comment
Share on other sites

The main issue regarding the logo is that the image is inserted into the page as a background image, meaning it is behind the text. Probably your best option is to:


-- Give #logoTxt a width of 960px, to match the rest of your site, and use "margin: 0 auto;" to center it in the window. Also, give it "position: relative;" so you can use absolute positioning on your logo

-- make the font size on the h1 and h3 within your header area smaller, so your logo will fit

-- Adjust your logo image so that the size of the image is cropped closely around the logo. Currently, it looks like you have a lot of transparent space above the logo: http://www.integratedbuildinginspections.com/images/logo.png

-- Rather than using a background image for the logo, insert it within the #logoTxt area as a standard <img> element, and use CSS to position it absolutely ("postion: absolute;") and adjust the top and left position to fit.


Hope that helps?

Link to comment
Share on other sites

Thanks Ben... I'll work on changing this as you suggested and see how it works for me. Part of the problem is that I use a 24" monitor and everything looked okay on it. When others with smaller monitors, laptops, tablets and smartphones viewed the website was when I was told about the problem of it all crowding together.



Link to comment
Share on other sites

Okay Ben, I got the header to work properly for now, but have some reading to do to understand how to make the CSS work and allow me to use the <img> tag along with the CSS suggestions you gave me. Even on my smart phone, everything now lines up properly and there is no cross-over of text as there was before. I will also work on cleaning up the logo, so that it looks and fits better. Once this is completed I want to also design a website to work on all mobile devices.


Because it's been several years since I've done any of this, and right now wishing I'd never stopped web design, I have a lot to re-learn and most of what I did learn back in the late 80's and early 90's is fairly obsolete for today's Web Design. I'm glad I found KillerSites and hope to spend a lot of time here learning all over again.


Thanks again for your help.



Link to comment
Share on other sites

I'm looking at your HTML and it mostly looks pretty good. I do notice a couple things:


Don't use '&' the proper way to write this would be &amp


You have a couple places where you have <h5> directly followed by <p> - that's not right. <h5> is one of the header tags, the <p> - paragraph tag - does not belong inside it. In addition to that, your h5 never closes.;


There is a line of non-breaking space tags around your images - bad practice, if you need to create some space there, use padding or margin to your image or the element that follows.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...