www.webdeveloper.com
Results 1 to 6 of 6

Thread: Issue with centering element

  1. #1
    Join Date
    May 2014
    Posts
    1

    Issue with centering element

    Hi. My first post / question here. I'm trying to center an element from a template. I find that when I change the
    browser size or view in a mobile device it moves out of place from where I want it. I know about responsive design and media queries etc., but am really just looking for a quick nonresponsive solution.

    The element is the bottom navigation and has a class of left which was the original class name from the template as it was originally on the left. This isn't my page and I'm just helping somebody out. Don't really want to spend a lot of time at it.

    I've uploaded it to a server so that anyone can take a look at it:

    http://449design.ca/test/Stainless_Template.html

    Thanks to anybody who can lend a hand.

  2. #2
    Join Date
    Jun 2014
    Posts
    1
    You can include the contents in a div tag which has the following css.

    #wrapper {
    position:relative;
    text-align:left;
    margin: 0 auto;
    width: 1300px;
    }

    After applying this, when you resize the window it doesn't affect the width of the page content items.

  3. #3
    Join Date
    Mar 2012
    Posts
    1,519
    Quote Originally Posted by Pilancio View Post
    Hi. My first post / question here. I'm trying to center an element from a template. I find that when I change the
    browser size or view in a mobile device it moves out of place from where I want it. I know about responsive design and media queries etc., but am really just looking for a quick nonresponsive solution.

    The element is the bottom navigation and has a class of left which was the original class name from the template as it was originally on the left. This isn't my page and I'm just helping somebody out. Don't really want to spend a lot of time at it.

    I've uploaded it to a server so that anyone can take a look at it:

    http://449design.ca/test/Stainless_Template.html

    Thanks to anybody who can lend a hand.
    I'm not sure what you are asking for??? There is no class "left" nor bottom navigation in the web page you have linked.

    What there is is very poorly coded:
    - inline style (which is quite unprofessional).
    - JS form validation (which is a waste of time because it is easy to bypass, and does not obviate the need for server validation).

    Apart from being an excellent example of how not to code a web page, I'm not sure what use this template is? I suspect that you would be doing your friend a better service by telling them how badly it is coded!!!

    Oh, and centering a div is nothing to do with responsive design and does not require a media query! It just requires a width or max-width setting, and left/right margins set to auto. E.g.

    CSS:

    .demo {
    max-width:960px;
    margin:0 auto;
    }

    HTML:

    <div class="demo">
    Last edited by jedaisoul; 06-09-2014 at 08:01 AM.

  4. #4
    Join Date
    May 2014
    Posts
    912
    .footer p { text-align:center; }

    Since all you have is a flat P, that should do it.

    Though that template is dreadful; headings inside labels? Endless pointless DIV with classes for Christmas only knows what? Massive static scripting inlined in the markup? Gibberish numbered heading orders? Lists around non-list elements? Tags like CENTER that have no business on any site written after 1997 in a HTML 5 doctype? (only further proving what I've been saying about HTML 5 -- it's not for people who embraced any of the progress of the past fifteen years and instead is for the people still sleazing out HTML 3.2)

    Like most off the shelf templates, it reeks of "Did the person who made it even know HTML?" -- but then there's a reason I don't advocate the use of off the shelf templates and consider the entire concept to be one giant scam; as evident by the train wrecks of ineptitude found on template whorehouses like TemplateMonster or ThemeForest.

    ... and all that's without mentioning the broken attempt at responsive design and inaccessible fixed metric (px) fonts stemming from the use of bootcrap and a complete ignorance on the template writer's part of accessibility.

    I say this WAY too often, but my advice is throw it all away and start over from scratch; there is NOTHING worth saving from that inaccessible broken mess. Throwing silver bullet fixes at it is NOT the answer... even if I did provide that silver bullet at the start of this post...

    ... since all you wanted to do is center that text, target #footer p, and center the text.
    Java is to JavaScript as Ham is to Hamburger.

  5. #5
    Join Date
    Jun 2014
    Posts
    27
    As i go through the link, it is clear that you are using the bootstrap framework so alginign is not that hard. Have you gone through the documentation?

    GO to Bootstrap docs and also try text-align:center;

  6. #6
    Join Date
    May 2014
    Posts
    37
    .hero-unit {
    background-color: #EEEEEE;
    border-radius: 6px;
    color: inherit;
    font-size: 18px;
    font-weight: 200;
    line-height: 30px;
    margin-bottom: 30px;
    padding: 0;
    }

    Put this CSS style code into your @media query section.
    In the above CSS code you just change the padding value only.

    "padding:0;".

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles