Graeme Posted November 8, 2010 Report Share Posted November 8, 2010 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 Quote Link to comment Share on other sites More sharing options...
virtual Posted November 8, 2010 Report Share Posted November 8, 2010 Give your #image the same height as the actual image. Quote Link to comment Share on other sites More sharing options...
Andrea Posted November 8, 2010 Report Share Posted November 8, 2010 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 /> Quote Link to comment Share on other sites More sharing options...
Graeme Posted November 9, 2010 Author Report Share Posted November 9, 2010 You have Andrea but you know what I'm like! Why strike the < br/>'s? Best wishes Graeme Quote Link to comment Share on other sites More sharing options...
Graeme Posted November 9, 2010 Author Report Share Posted November 9, 2010 Give your #image the same height as the actual image. Hello, tried it, still the same Quote Link to comment Share on other sites More sharing options...
Andrea Posted November 9, 2010 Report Share Posted November 9, 2010 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>. Quote Link to comment Share on other sites More sharing options...
Graeme Posted November 9, 2010 Author Report Share Posted November 9, 2010 Thanks Andrea, I'll give it a go. Best wishes Graeme Quote Link to comment Share on other sites More sharing options...
Graeme Posted November 9, 2010 Author Report Share Posted November 9, 2010 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 Quote Link to comment Share on other sites More sharing options...
virtual Posted November 9, 2010 Report Share Posted November 9, 2010 You need to change this link to show the red #logo a { color:#FF0000; text-decoration:none; Quote Link to comment Share on other sites More sharing options...
Graeme Posted November 10, 2010 Author Report Share Posted November 10, 2010 You need to change this link to show the red #logo a { color:#FF0000; text-decoration:none; Thank you Quote Link to comment Share on other sites More sharing options...
Graeme Posted November 14, 2010 Author Report Share Posted November 14, 2010 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 Quote Link to comment Share on other sites More sharing options...
Andrea Posted November 14, 2010 Report Share Posted November 14, 2010 Add a text-align: center; to your #logo and then adjust the padding to the image via .imgholder img Quote Link to comment Share on other sites More sharing options...
Andrea Posted November 14, 2010 Report Share Posted November 14, 2010 But you still haven't fixed the problem with the improperly used <br> tags yet. Quote Link to comment Share on other sites More sharing options...
Graeme Posted November 14, 2010 Author Report Share Posted November 14, 2010 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 Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 14, 2010 Report Share Posted November 14, 2010 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" Quote Link to comment Share on other sites More sharing options...
Graeme Posted November 14, 2010 Author Report Share Posted November 14, 2010 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 Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 14, 2010 Report Share Posted November 14, 2010 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. Quote Link to comment Share on other sites More sharing options...
Graeme Posted November 14, 2010 Author Report Share Posted November 14, 2010 Could I keep the ~logo the same height and move the image up? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 14, 2010 Report Share Posted November 14, 2010 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. Quote Link to comment Share on other sites More sharing options...
Graeme Posted November 14, 2010 Author Report Share Posted November 14, 2010 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 Quote Link to comment Share on other sites More sharing options...
Andrea Posted November 14, 2010 Report Share Posted November 14, 2010 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 Quote Link to comment Share on other sites More sharing options...
Graeme Posted November 15, 2010 Author Report Share Posted November 15, 2010 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 Quote Link to comment Share on other sites More sharing options...
Andrea Posted November 15, 2010 Report Share Posted November 15, 2010 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. Quote Link to comment Share on other sites More sharing options...
Graeme Posted November 15, 2010 Author Report Share Posted November 15, 2010 Yes, got it, it looks great now, thank you Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.