Why won't my banner center properly?

Discussion in 'HTML & Website Design' started by mark_s, Jan 9, 2009.

  1. #1
    I've uploaded a new wider banner and it's not centering on the page, it seems too much to the right.

    http://tinyurl.com/95efy4

    Sorry about the dreadful code, I didn't create the website myself.
     
    mark_s, Jan 9, 2009 IP
  2. ronnyb

    ronnyb Well-Known Member

    Messages:
    856
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    170
    #2
    I see this:
    <td width="658" valign="top"><a href="/"><img src="assets/banners/asg-banner-wide.jpg"  height="75"  />
    PHP:
    Try making you image width="800" ( Resize image )

    as i see the
    <table border="0" cellpadding="0" cellspacing="0" width="800" height="75"> 
    PHP:
    I am not sure that this will do it, but it is worth a try...
     
    ronnyb, Jan 9, 2009 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    Do this:
    #topBanner {    /*asgMain.css (line 243)*/
      width:1000px;
      }
    Code (markup):
    Remove top, left, and height properties. They're inappropriate.

    cheers,

    gary
     
    kk5st, Jan 9, 2009 IP
  4. momiexx

    momiexx Greenhorn

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #4
    <center>....all the banner code her ......</center>
     
    momiexx, Jan 10, 2009 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    That is a particularly bad suggestion. The <center> tag has been deprecated in favor of css for 10 years.

    gary
     
    kk5st, Jan 10, 2009 IP
  6. jezzz

    jezzz Notable Member

    Messages:
    4,884
    Likes Received:
    190
    Best Answers:
    0
    Trophy Points:
    200
    #6
    yeah! it is the most influential tag for so many years
     
    jezzz, Jan 10, 2009 IP
  7. carminx

    carminx Peon

    Messages:
    381
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #7
    hi,
    try to modify this code on asgMAIN.css line 44
    to this code
    let me know if it worked. i`m shure it works.
     
    carminx, Jan 10, 2009 IP
  8. singod2

    singod2 Peon

    Messages:
    5
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    
    #logo {
     background-image: url(assets/banners/asg-banner-wide.jpg);
     float: left;
    }
    
    Code (markup):
     
    singod2, Jan 11, 2009 IP
  9. mark_s

    mark_s Peon

    Messages:
    497
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Unfortunately none of the suggestions given here have had any improvement at all. I think one of the main issues is the top banner is split into two parts, the first part is correctly center but when the two parts are together, it doesn't look this way.

    I hope you can still try and help. I really appreciate it, thank you.
     
    mark_s, Jan 12, 2009 IP
  10. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #10
    Did you actually do this? That single correction worked for me. Show us how you applied the fix, and specify which browsers did what.

    gary
     
    kk5st, Jan 12, 2009 IP
  11. mark_s

    mark_s Peon

    Messages:
    497
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Yes, have a look now. I'm using FF3.

    The CSS (I created a new class otherwise the rest of the site will be effected)
    #topBanner2 {
      width:1000px;
      height: 75px;
    }
    
    Code (markup):
     
    mark_s, Jan 12, 2009 IP
  12. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #12
    OK, you have its parent under-width. In fact, remove all the rules you have for #topMenuContainer2 and #topBanner2, and it'll be centered. You can remove the #topMenuContainer div. It's redundant.

    If you decide to bring the markup up to standards, you'll need a different solution due to ridding yourself of obsolete center tags and inappropriate tables. The page would definitely benefit from the refactoring.

    cheers,

    gary
     
    kk5st, Jan 12, 2009 IP
  13. mark_s

    mark_s Peon

    Messages:
    497
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Thank you very much, thank worked! :)
     
    mark_s, Jan 14, 2009 IP