Gap in Image

[Graeme]

Hello All,

 

I have a gap appearaing that I really don't want. It is under an image that I would like to fit into the div.

 

The image is at the top of the page at http://www.btinternet.com/~gj.d/ian/ mys test page.

 

Thank you as always.

 

Best wishes

Graeme

[virtual]

Give your #image the same height as the actual image.

[Andrea]

Graeme, you can usually avoid problems like this by starting out your CSS with a * {margin: 0; padding: 0, border; 0;}.

 

And I'm pretty sure we've taught you better than this:

 

<h2>First Build!</h2> <br>

<p>Every company requires to consistently attract new customers as well as new business in

order to reach its ultimate potential. This is where a good web site design can help you.

However with businesses frequently advertising within inches of each other in selected

publications, it is quite possible that your web site is not overlooked. <br />

<br /> </p>

<p>

This means it needs to be <strong>unique eye-catching and powerful</strong>. Designs that are

smart and stylish and are created to stand out ensure a good first impression from your

potential customers.</p>

<br />

 

[Graeme]

You have Andrea but you know what I'm like!

 

Why strike the < br/>'s?

 

Best wishes

Graeme

[Graeme]

Give your #image the same height as the actual image.

 

Hello, tried it, still the same

[Andrea]

Graeme, you added:

 

height: 200;

 

try it with:

 

height: 200px; -- that'll work.

 

The only time you do NOT need a unit of measure, is when something is zero - zero is zero, no matter if it's years or Hummel figurines - or in the size declaration of an image - as in <img src="whatever.jpg" height= "300" width="400"> - Personally, I apply the px here, too, but it does seem to be understood that image dimensions are given in pixels.

 

And the reason I deleted you <br>s is that it's a tag for a line break - it's not paragraph spacing, and it's not to create space. What you have up there, are 2 separate paragraphs, and they should each be surrounded with an opening and closing paragraph tag. And if you want more space between your <h2> header and your paragraph, apply margins and/or padding to either your h2 or your p tag.

 

And, you're using an XHTML doctype, even so HTML would be the correct choice, so if you do use the break tag, it has to have the closing slash, not just <br> like the one (improperly) following the <h2>.

[Graeme]

Thanks Andrea,

 

I'll give it a go.

 

Best wishes

Graeme

[Graeme]

Hello Again,

 

I've stumbled across another query. I would like the name at the top to be in red, I altered the

 

#logo h2 {

text-align: center;

font-size: 1.8em;

color: #FF0000;

}

 

but it still shows in the old colour. I'm guessing that because it is a link I need to alter someting else but not too sure what.

 

Thank you

 

Best wishes

Graeme

[virtual]

You need to change this link to show the red

#logo a {
color:#FF0000;
text-decoration:none;

[Graeme]

You need to change this link to show the red

#logo a {
color:#FF0000;
text-decoration:none;

 

Thank you

[Graeme]

Hello Again,

 

I'm bugged again.

 

I wouldlike the image with the company name to be centred and a little padding around so it's not exactly against any side, I tried to alter the float in the css but there is no centre. Help!!

 

http://www.btinternet.com/~gj.d/ian/

 

Best wishes

Graeme

[Andrea]

Add a text-align: center; to your #logo and then adjust the padding to the image via .imgholder img

[Andrea]

But you still haven't fixed the problem with the improperly used <br> tags yet.

[Graeme]

Hello Andrea,

 

Hands slapped!

 

The logo is an image. I altered the alignment when it was text and this was ok but now it is an actual image I need to change the alignment in .imageholder but not too sure how. I tried altering the float but I guess this is not the ideal way plus how do I add padding to it?

 

Thank you,

 

Best wishes

Graeme

[falkencreative]

Here's a more in-depth version of Andrea's comment above:

 

-- remove the #imgholder div entirely. There's no need for it, and the less code you have, the better (easier to understand, faster to download)

-- add "text-align:center;" to #logo

-- remove the "height" from #logo (no need for this)

-- the adjust the spacing either by adjusting the padding on #logo, or on "#logo img"

[Graeme]

Wow, that's amazing thank you. Would you mind explaining how the -- add "text-align:center;" to #logo

 

and

 

-- the adjust the spacing either by adjusting the padding on #logo, or on "#logo img"

 

Should I re-size the actua og so tha i loks like t is higher?

 

hnk u as aways,

 

Best wihes

Graeme

[falkencreative]

You just need to add "text-align:center" to the CSS on #logo

 

Then adjust the padding on the CSS on #logo to move it into the correct position. I believe you have a padding-top of 30 or 35px, so adjusting that would move the logo higher.

[Graeme]

Could I keep the ~logo the same height and move the image up?

[falkencreative]

Assuming you are still using http://www.btinternet.com/~gj.d/ian/

 

I'm not quite sure what you are asking. The 10px top padding on #logo is the only thing that is modifying the positioning of the logo image at the moment. Removing that would move the logo up. Beyond that, there isn't much you can do, besides recreating the logo image so it has less height.

[Graeme]

It's OK thanks, it was just origionally the top blue div was higher so when I altered the top padding it was not so tall. I think it looks great now though thanks to you.

 

Best wishes

Graeme

[Andrea]

Note that your image itself has uneven padding to the right and left side of the text:

 

http://www.btinternet.com/~gj.d/ian/images/title.gif

[Graeme]

Thanks Andrea,

 

I guess I could use the image to position it also?

 

Please tell me again about those flippin < /br>'s

 

Best wishes

Graeme

[Andrea]

Please tell me again about those flippin < /br>'s

 

Just read the post # 3 to this thread - I explained it there.

 

I think you're getting confused by the term 'text-align' - it doesn't just align test, but anything in that division.

 

And yes, you could create your logo image as wide as your content with the text in the middle, or you could try what we've been suggesting above. For that, however, I'd first even out the image itself, as the uneven sides you have now won't allow it to truly appear centered.

[Graeme]

Yes, got it, it looks great now, thank you