Jump to content
Stef's Coding Community
Graeme

Gap in Image

Recommended Posts

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: :unsure:

 

<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 />

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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"

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
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.

Guest
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.

Loading...

×
×
  • Create New...