1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Unable to Center div in Browser

Discussion in 'HTML & Website Design' started by CodePlay, Apr 3, 2015.

0
  1. #1
    Hi, I am coding my first web site and have followed the code for centering my banner div but when viewing it in Chrome, it's fixing to the left rather than floating in the middle. I was wondering if someone could have a look at my code, if I am missing something? Thx.

    <head>
    <meta charset="utf-8">
    <meta name="description" content="Test Home Page">
    <title>Test Home Page</title>
    <style>
    div#banner {
    width:1920px;
    height:164px
    margin: 0 auto;}
    </style>
    </head>

    <BODY BGCOLOR="#FFFFFF">
    <div id="banner">
    <img src="Images/TestBanner.png" alt="Banner" style="width:1920px; height:164px">
    </div>
    </body>
     
    CodePlay, Apr 3, 2015 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Well... there are several things wrong with the code you present - lets do this step by step.
    First off, setting a banner to a width of 1920px would (for most users) only show part of the banner - the most common resolution for screens nowadays (except on high-end cell-phones and tablets, and high-end laptops) are 1366x768 - I recommend you reduce the width quite a bit.
    Second, you're mixing different ways of doing things, which makes no sense.
    This is a better way of doing what you want (or what I think you want):
    
<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <meta name="description" content="Test Home Page">
      <title>Test Home Page</title>
      <style type="text/css">
          body {
            background: #fff;
         }
         #banner {
           width: 1920px;
           height: 164px;
           margin: 0 auto;
      }
     </style>
    </head>
    <body>
       <div id="banner">
           <img src="Images/TestBanner.png" alt="Banner">
       </div>
    </body>
</html>
    Code (markup):
    As you can see, you need to add a DOCTYPE, get rid of inline styling (or, rather, inline attributes with style information, they're a decade old (or more) and beyond deprecated), avoid using caps for tags, etc. etc. There's also no need to prefix #ids in the stylesheet - an ID can only be present one place on the page, and you shouldn't have the same ID for different elements on different pages either - that will create a complicated and confusing stylesheet. And, as I stated, you should definitely reduce the width of the banner (and avoid using px to represent size on a website, since they have nothing to do with visual, dynamic elements - px is a print size, and completely useless on a screen).
     
    PoPSiCLe, Apr 3, 2015 IP
  3. CodePlay

    CodePlay Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Thanks PopSiCle, I've amended my code. The Doctype was already there, I just didn't post it here to save space. Everything is showing in the browser but, from my end, the margin: 0 auto; doesn't do a thing with Chrome for centering the images. All my divs are fixed to the left in the bowser when I either zoom in or out. Something's not working with the code to center my divs. Cheers.
     
    CodePlay, Apr 3, 2015 IP
  4. CodePlay

    CodePlay Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    Hi PopSiCle, I've fixed the centering problem. Chrome wasn't reading the margin: 0 auto;. I had to type margin-left: auto etc as below.

    #banner {
    width:1920;
    height:164;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;

    with this code, everything is centering beautifully.

    I'm playing with two sizes in my web page. The banner and some body art is 1920 wide for 24" monitors while the main body message is only 1018 wide for smaller monitors.

    The final piece in my puzzle now is how to overlay the contact details to one of the images; Phone (orange), email (white) and address (grey), to the lower left-ish area of the image. Might I ask if you have any CSS suggestions?

    Cheers.
     
    CodePlay, Apr 3, 2015 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    The monitor size doesn't matter; it's the size of the browser window. When wearing my user's hat, I absolutely abhor web pages that won't accommodate my browser at the size [/b]I[/b] want it. One thing I don't do is maximize my browser. I have other applications open and tiled. E.g. right now I have Emacs, XTerm and Firefox open on the desktop and I don' t expect a professionally written web page to require me to resize the browser.

    Regarding centering, if the element is wider than its container, it will align itself on the left edge, {margin: 0 auto;} notwithstanding.
     
    kk5st, Apr 3, 2015 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #6
    Uhm - there's NO reason for Chrome to not adher to margin: - it should NOT be necessary to use margin-left/margin-right specifically. Oh well.
    As for positioning, especially overlays, I'd suggest using position: absolute; and put position: relative; on the containing element.

    As for size - NEVER EVER assume the user have as good equipment as yourself. A few years ago, before the responsive design-craze, it was quite common to build websites with set widths at around 960px max - that fit nicely within a full-size window on a 1024px resolution - also catering or IEs always visible scrollbars.

    Nowadays the resolution of most screens are higher, but that doesn't mean people run their windows maximised - and the most-used resolution is still 1366x768 - way lower than full-HD. I suggest looking up how to create dynamic, responsive webpages, and forego px-widths, especially when going beyond 1200px.
     
    PoPSiCLe, Apr 4, 2015 IP
  7. CodePlay

    CodePlay Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #7
    I'm using Brackets as a code editor and it has a live preview browser which is Chrome, but it might be using an older version which is why, 0 Auto isn't being recognised.

    I reviewed a number of web sites with wide screen graphics I liked before starting with mine, and when looking at their wide-screen images, they were 1900+px wide. One site, Avid, had it it's whole page as a single image. http://www.avid.com/US/products/family/media-composer. Since seeing it though, their site has been redesigned. The single image is now gone. Thanks for your guidance though. I appreciate the best practice or insights.
     
    CodePlay, Apr 4, 2015 IP
  8. derox

    derox Member

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #8
    Try adding relative postion in your code. It's would like this:

    <style>
    div#banner {
    position: relative;
    width:1920px;
    height:164px
    margin: 0 auto;}
    </style>

    hope it may help you :D
     
    derox, Apr 5, 2015 IP
  9. CodePlay

    CodePlay Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #9
    Thanks Derox, I've just found a great example below expanding on what you've mentioned above.
    http://www.barelyfitz.com/screencast/html-training/css/positioning/
    Step four of this web page is exactly what I'm looking for.
    Cheers.
     
    CodePlay, Apr 5, 2015 IP
  10. CodePlay

    CodePlay Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #10
    Hmmm. Well following the example code of parent div (relative position) and the child div (absolute position within the parent div), my phone text is still being positioned outside of the parent div. Using my code below, the text is appearing outside the boundary of my div image rather than overlaying it. Should my div3 image in fact be referred to as a background rather than an image. Maybe that's what's positioning the text outside the image div rather than over it. Here's my code:

    #div3 {
    position:relative;
    width:1920;
    height:491;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    }
    #phone {
    font:arial, helvetica 18px bold;
    color:eek:rangered;
    position:absolute;
    top:200;
    left:0;
    }

    <div id="div3">
    <img src="Images/Div3.png" alt="Div3">
    <div id="phone">
    <p>01 2345 6789</p>
    </div>
    </div>
     
    CodePlay, Apr 5, 2015 IP
  11. derox

    derox Member

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #11
    Try to add a little fix again :D
    add a width to 100% should make centered position and add a center align for the text.
    here is the code:

    #phone {
    width:100%;
    text-align:center;
    font:arial, helvetica 18px bold;
    color:rangered;
    position:absolute;
    top:200;
    left:0;
    }
     
    derox, Apr 5, 2015 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #12
    Not only is the methodology here broken, so is the CONCEPT. Designing ANY giant fixed width image and trying to use it on a website is buggy broken rubbish; part of why fixed width layouts on the whole are broken rubbish and why GOOD designs should be semi-fluid, elastic and responsive. Generally speaking if you are declaring a px width on a container, you are doing something disastrously wrong -- no matter how many artsy fartsy PSD jockeys in their ignorance of accessibility might pray for it to be otherwise. (at which point they need to stick to print)

    PX widths? PX fonts? Absolute positioning of content elements instead of floats and flow? Whatever it is you are trying to accomplish, this is the WRONG way of going about it. Much less if it's a banner it probably doesn't even belong in a IMG tag, but as a background in the CSS if it's just background (your attempting to position stuff over it supports this assumption)

    So far I've not seen anything in this thread I'd allow anywhere NEAR a website. Might help if I could see the image in question and/or what you are ACTUALLY trying to do, but on the whole EVERYTHING presented so far is little more than EPIC /FAIL/ and a complete lack of understanding what a website is, and how to design for one.
     
    deathshadow, Apr 19, 2015 IP
  13. CodePlay

    CodePlay Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #13
    i Deathshadow, many thanks for your open, honest input. I'm here to learn and certainly get things right. This is my first attempt at designing-coding a web site, with no instruction or step-by-step guide, except through W3 Schools - and that's quite skeleton. So, all learning curves have to start somewhere and mine is now with this. So far I'm part the way through W3 Schools in HTML and various videos. But, I am a fast learner.

    To cut to the chase, I ultimately cheated. I structured my web page in Muse to get the finished page up on the net. That's now done. Stage one out of the way.
    • Next step is to tweak the site to make sure all the little odds and ends (graphics, element sizes, colours) are right, and to go back through the generated code and match it against what I'm learning through W3. Tidy up any conventions ands structure.
    • The step after that will be to make it all 'fluid' as your say and make it friendly to most devices.
    After all that it'll all be just practice, technique and more practice. And just like everything else before me, I'll learn this too.

    Thanks Deathshadow, Appreciate it.
     
    CodePlay, Apr 19, 2015 IP
  14. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #14
    The main problem here is your statement about "learning through w3" - you really, really shouldn't. Learn anything, that is, from that site.
     
    PoPSiCLe, Apr 19, 2015 IP
    deathshadow likes this.