I have been away from web design for a quite few years and recently got interested again after downloading the free coffee cup, we have a website that was designed by others but we are changing details quite often so I thought I would have a go a modifying the existing site myself, I am having a problem with the linked 3 images (www.ems.co.im/indextest.html) showing on the front page, I am trying to get them to show in a line, the problem arises with the blue section on the bottom of the page with the address and contact information seem to go out of alignment every time I try to get the pictures to go straight across, I can do it with an image only but when I try to put href link in it makes the bottom of the page go out of alignment.
Having been away from web design for a number of years and things have obviously marched on and I am struggling to find an answer, I am very impressed with the coffee cup and the fact that there is a preview, I am sure I need to learn more, I would welcome any comments.
I don't know if its relevant but I have been using a 64 bit CPU at home and a 32 CPU at work trying to get to the bottom of this problem.
Help with HTML #2 - Post ID 213262
Phil Kneen
Registered User
2 posts
SadDuck
Ambassador
2,958 posts
Hi Philk, start here... http://validator.w3.org/
This will help you validate your web site and show most if not all of the errors that may be causing your problem. Check back here if you are still having problems after you correct these errors.
Good luck.
This will help you validate your web site and show most if not all of the errors that may be causing your problem. Check back here if you are still having problems after you correct these errors.
Good luck.
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
-------------------------------------
https://sadduck.com
Inger
Senior Advisor
14,649 posts
Online Now
Phil, Gunsmoke is right, the validator is showing 100 errors in the html and 36 in the css. That may be part of the reason why you can't line up the images. Another reason will be that you have used a header tag for the text of each image. h1 to h6 want to be on a line of their own. You can get away with it though, if you place the three images with the corresponding text in one div each inside the div left-col1.
Another thing you should do is placing all the style sheets one after another, and then all the scripts after that. That will help you to find a property you want to edit a bit faster, and it will also speed up the loading time of the site..
Another thing you should do is placing all the style sheets one after another, and then all the scripts after that. That will help you to find a property you want to edit a bit faster, and it will also speed up the loading time of the site..
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger
Senior Advisor
14,649 posts
Online Now
As to lining up the three images, replace this:
with this:
in your html file. Then that should be sorted.
As you see, I have had to use inline styling, because having to wade through your 6 different style sheets to find the right things to correct, is a hell of a job.
<div class="left-col1" style="display: inline-block; border: 1px solid orange;"><a
href="level1.html"
target="_blank"><img
src="symbol1.jpg" alt="Link to level1" class="centre-image"
height="50" width="50" style="border: 1px solid red;" /></a>
<h4><b>Level 1 <br />
£13.95 per month</b></h4>
<a
href="level2.html"
target="_blank"><img
src="symbol2.jpg" alt="Link to level 2" class="centre-image"
height="50" width="100" style="border: 1px solid blue;" /></a>
<h4><b>Level 2<br /></b>£19.95 per month</h4>
<div class="right-col1"><a
href="level3.html"
target="_blank"><img
src="symbol3.jpg" alt="Link to level 3
" class="centre-image"
height="50" width="150"style="border: 1px solid green;" /></a>
<h4><b>Level 3<br /></b> £24.95 per month</h4>
</div>
href="level1.html"
target="_blank"><img
src="symbol1.jpg" alt="Link to level1" class="centre-image"
height="50" width="50" style="border: 1px solid red;" /></a>
<h4><b>Level 1 <br />
£13.95 per month</b></h4>
<a
href="level2.html"
target="_blank"><img
src="symbol2.jpg" alt="Link to level 2" class="centre-image"
height="50" width="100" style="border: 1px solid blue;" /></a>
<h4><b>Level 2<br /></b>£19.95 per month</h4>
<div class="right-col1"><a
href="level3.html"
target="_blank"><img
src="symbol3.jpg" alt="Link to level 3
" class="centre-image"
height="50" width="150"style="border: 1px solid green;" /></a>
<h4><b>Level 3<br /></b> £24.95 per month</h4>
</div>
with this:
<div class="left-col1" style="display: block; padding: 20px; margin: auto;">
<div class="left-col-inner" style="width: 150px; float: left; padding: 20px 0 20px 20px;">
<a href="level1.html"
target="_blank"><img
src="symbol1.jpg" alt="Link to level1" class="centre-image"
height="50" width="50" /></a>
<h4><b>Level 1 <br />
£13.95 per month</b></h4>
</div>
<div class="left-col-inner" style="width: 150px; float: left; padding: 20px;">
<a
href="level2.html"
target="_blank"><img
src="symbol2.jpg" alt="Link to level 2" class="centre-image"
height="50" width="100"/></a>
<h4><b>Level 2<br /></b>£19.95 per month</h4>
</div>
<div class="left-col-inner" style="width: 150px; float: left; padding: 20px;">
<a href="level3.html"
target="_blank"><img
src="symbol3.jpg" alt="Link to level 3
" class="centre-image"
height="50" width="150" /></a>
<h4><b>Level 3<br /></b> £24.95 per month</h4>
</div>
</div>
<div class="left-col-inner" style="width: 150px; float: left; padding: 20px 0 20px 20px;">
<a href="level1.html"
target="_blank"><img
src="symbol1.jpg" alt="Link to level1" class="centre-image"
height="50" width="50" /></a>
<h4><b>Level 1 <br />
£13.95 per month</b></h4>
</div>
<div class="left-col-inner" style="width: 150px; float: left; padding: 20px;">
<a
href="level2.html"
target="_blank"><img
src="symbol2.jpg" alt="Link to level 2" class="centre-image"
height="50" width="100"/></a>
<h4><b>Level 2<br /></b>£19.95 per month</h4>
</div>
<div class="left-col-inner" style="width: 150px; float: left; padding: 20px;">
<a href="level3.html"
target="_blank"><img
src="symbol3.jpg" alt="Link to level 3
" class="centre-image"
height="50" width="150" /></a>
<h4><b>Level 3<br /></b> £24.95 per month</h4>
</div>
</div>
in your html file. Then that should be sorted.
As you see, I have had to use inline styling, because having to wade through your 6 different style sheets to find the right things to correct, is a hell of a job.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Phil Kneen
Registered User
2 posts
"Inger", thanks very much for your help, I really appreciate your help with this problem I had, More learning needed on style sheets etc.
I have now amended the site ( www.ems.co.im ) and it looks a lot better, I need to make a few tweeks (borders / edges ect to the jpgs).
I have run out of time as I am off to the airport soon, when I get back after my holidays I'm going to look at some tuition on style sheets.
Again thanks for your valuable input.
Also thanks for the link "gunsmoke".
Phil
I have now amended the site ( www.ems.co.im ) and it looks a lot better, I need to make a few tweeks (borders / edges ect to the jpgs).
I have run out of time as I am off to the airport soon, when I get back after my holidays I'm going to look at some tuition on style sheets.
Again thanks for your valuable input.
Also thanks for the link "gunsmoke".
Phil
Inger
Senior Advisor
14,649 posts
Online Now
I'm pleased that you could use my suggestion. When you get back from your holiday, you may want to increase the padding-left for the third 'Level' as it is sitting very close to its neighbour right now.
BTW, I'm not "Inger", just plain Inger. It's my name.
BTW, I'm not "Inger", just plain Inger. It's my name.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger
Senior Advisor
14,649 posts
Online Now
Oh, and if I had known right from the start that those level images were much larger than what I saw on your test site, I would have suggested extending the width of the containing element.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
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.
