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.

How can I center the two buttons?

Discussion in 'HTML & Website Design' started by serialentre, Mar 2, 2015.

  1. #1
    Hi all,

    I am trying to center the two buttons - "Free Consultation" and "Request a Free Quote".

    The link is here - http://startups.maxnathaniel.com/

    I've tried several ways but to no avail so far.

    Appreciate any pointers. Thank you!

    P. S. I have not made the site mobile responsive. So it looks like crap if you're viewing on mobile.
     
    Last edited: Mar 2, 2015
    serialentre, Mar 2, 2015 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    Helo.
    Bring it to w3c validator first?
     
    hdewantara, Mar 2, 2015 IP
  3. serialentre

    serialentre Member

    Messages:
    123
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    30
    #3
    Ok, will do that. I noticed that it raised many errors because of my <img> tags.
     
    serialentre, Mar 2, 2015 IP
  4. serialentre

    serialentre Member

    Messages:
    123
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    30
    #4
    I set the width of ul element to 60% and did a margin: 0 auto.
    That did the trick!
    Hope that's the correct way of doing it.
     
    serialentre, Mar 2, 2015 IP
  5. Profitup

    Profitup Greenhorn

    Messages:
    50
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    13
    #5
    With resolution 1366*768 button one is under another. Also, I have horizontal scrolling... this is not good....
     
    Profitup, Mar 2, 2015 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    There are SO many issues with that page it's hard to say where to begin -- you seem to be trying to fix the height of elements (particularly backgrounds) that shouldn't be fixed, percentage widths that just screw up the layout at every resolution, massive fixed images that really have no business on websites in the first place, illegible colour contrasts.. and that's without mentioning the code.

    Where you have P+I doing H1's job (that or your H1 is too far into the code, not sure which since your content order is gibberish), endless pointless DIV for nothing, multiple H1 (which unless you are using HTML 5's idiotic halfwit <SECTION> tag is also gibberish), italic doing generated content's job, UL around a non-list text...

    It's got so many problems, "centering" those two items doesn't mean anything, they're not in a position in the layout TO be centered.
     
    deathshadow, Mar 2, 2015 IP
  7. serialentre

    serialentre Member

    Messages:
    123
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    30
    #7
    Hi Deathshadow,

    Thank you for your feedback!

    Yes you are correct about fixing the height of elements. I fixed the height of # slider because I plan to insert a wordpress plugin in its place. Also, I fixed the image height and set the width to 100%. If I am not wrong you mentioned that we should set width to 100% and height:auto for images in order for image to resize with browser.

    For percentage width, I plan to change the percentage width of the elements from the current 30% to 50% and to 100% on screen break points. Is that the correct way of making it fluid?

    I wasn't sure how to set images to the left of content for the 2 rows of 3 elements in a row. Therefore I gave image and content width %. Sorry but how should I do it to not screw it up as it scales down on screen?

    I actually used i class because I am using font awesome's Web icons. Should I be inserting Web icons with the :before pseudo selector instead?

    I wrapped every section around .container class because I set width to 80% and margin:0 auto to center the elements within the wrap. Is this a very bad way of doing it?

    I've mostly referred to your feedback to others but apologies if I did some things wrongly.

    Looking forward to your feedback and comments! Thank you!


     
    Last edited: Mar 2, 2015
    serialentre, Mar 2, 2015 IP
  8. serialentre

    serialentre Member

    Messages:
    123
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    30
    #8
    Thanks will fix it!

     
    serialentre, Mar 2, 2015 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    Which are two things (sliders and turdpress) I'd never put on a website in the first place. "sliders", "image rotators" or whatever people want to call them this week are a massive waste of screen space, end up being utter and complete rubbish in dynamic/fluid/responsive layouts, and a massive waste of scripttardery and bandwidth -- for no real return other than sweeping a lack of "content of value" under the rug.

    Not a fan. :D

    Of course that I trust turdpress and the plugins for it about as far as I could throw the big stick...

    Correct, though that should be for really small screen targets -- since really big (anything wider than ~320px) images have no damned business on a "normal page" of a website other than developer ineptitude and art faygelah "gee ain't it neat" BS.

    Yes and no. Correcting it with media queries is a good approach, but percentage widths often fail to take EM scaling into account and on the whole tend to break when zoomed BADLY. I've rarely seen a site built with % width elements or columns that wasn't a broken mess -- that's why I usually leave one column fully fluid and make the others elastic (widths declared in EM's)

    Not certain I follow what that means, but it sounds like image/content placements that just aren't compatible with semi-fluid elastic responsive layout. One of those "Not viable for web deployment" things I'm always running my mouth about.

    That is how I'd approach it, even using their font. The massive CSS always loaded with the massive webfont sours me on their icons, sad since I should actually like them. To then piss all over the markup with extra elements and classes?

    Not necessarily bad, when you have full width background with narrow inner width that's how it's done, but

    1) 80% is VERY small, you'll want to widen that as the screen size drops...

    2) You should probably be using min-width and max-width with padding on body INSTEAD of % width (or combine that with widening that width to like 95%)

    3) "container" is uselessly vague, which is why I didn't recognize them for what they are. Say what things are -- it's a DIV, of COURSE it's a "container" -- what is it containing and/or why? Something like "widthWrapper" says what it is, without saying WHAT it does. A bit like how people use "style.css"; uselessly vague as of COURSE it's style, it's a freaking stylesheet. WHICH stylesheet is it for what media target? That's why things like class="col-3" or class="style28" is useless hard to maintain BS as well.

    Generally you're best off avoiding percentage widths or using them as wide as possible -- and sticking to EM widths for things like sidebars and fully fluid content areas. This DOES cause problems with image interactions but that's why really images bigger than 256px wide have no business on a normal page of a site -- you want an image bigger than that it damned well better be content, in which case show it as it's own page or using a lightbox style effect instead of shoe-horning it into a main page.
     
    deathshadow, Mar 2, 2015 IP
  10. serialentre

    serialentre Member

    Messages:
    123
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    30
    #10
    Thanks for the reply!

    I refer to your previous examples and you did something like this -

    #top {
        width:95%;
        min-width:40em;
        max-width:68em;
        margin:0 auto;
        text-align:left;
    }
    Code (markup):
    In my case, where I am trying to build a full width site(to incorporate photo slider), but with inner-container's width approximately 80-90% of the full-width. How should I be doing it in em?

    1. Should the width be 100% in my example?
    2. I'm familiar with percentage as it's pretty intuitive but em doesn't come across as straightforward at face value. Hence, I am not too sure how to use min-width and max-width with em in this case.

    I am trying this for my project -

    #bodyWrapper {
        width: 100%;
        min-width: 40em;
        max-width: 140em;
        margin: 0 auto;
        text-align: left;
    }
    Code (markup):
    And for individual sections, I use padding: 4em 10em 4em 10em. Also, for margins and paddings, I've replaced px with em. Is this the way correct way of doing it?


    Would you mind explaining what does making one column fluid and the others elastic mean?

    I will stay off percentage widths.

    My difficulty so far in scaling down to smaller mobile screens are the 3/4 items on the same row. Currently, the list items are either set to 25% or 30%. Do I change it to 50% and 100% via media (max-width:60em), media(max-width:70em)? Would this be correct?

    Appreciate your advice! Thank you.
     
    Last edited: Mar 3, 2015
    serialentre, Mar 2, 2015 IP
  11. LTheme

    LTheme Greenhorn

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #11
    You should avoid using pixel values for sizes. If you really want to set an explicit value, use dpi units.

    In this case though, you should be able to use a simple LinearLayout with layout_weights. The layout_weight dictates how leftover space is allocated amongst your widgets. If you give one widget a value of 1, and the others 0 the one with 1 will use up all of the extra space.
     
    LTheme, Mar 3, 2015 IP
  12. serialentre

    serialentre Member

    Messages:
    123
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    30
    #12
    Thanks for your reply. Yup I changed my pixel values to em values. What is layout weights? I haven seen this before.

    I centered the buttons with text-align:center since the buttons are content within the container. Learnt that margin:0 auto centers the container while text-align:center centers the content within the container.
     
    serialentre, Mar 3, 2015 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    No offense, but what does that gibberish even MEAN?!? Sure as shine-ola sounds like it has NOTHING to do with HTML or CSS.

    SOUNDS like Android application developer BS that has jack **** to do with the topic at hand! Widgets? LinearLayout? layout_weight? That's Android applications, not websites!

    You may wish to pay attention to what you are responding to. This is the HTML and Web design area, not the Android crapplet area.
     
    deathshadow, Mar 3, 2015 IP