Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Jonathan Herman
    @lantech19446
    I feel like i have one roadblock that I need to work through big time right now and then I'd probably feel comfortable with moving forward again but I can't for the life of me get positioning down like when I put images on the page etc
    David Castner
    @davidjcastner
    @Lilyheart I understand your pain. I don't like having to type out the full for statement, especially since atom auto completes them for you.
    Lily Romano
    @Lilyheart
    No one told me there would be math on this quiz....
    Jonathan Herman
    @lantech19446
    I just downloaded 82 books from sitepoint lol
    Lily Romano
    @Lilyheart
    awesome!
    Jonathan Herman
    @lantech19446
    yea only to realize I forgot my kindle lol, at least linux comes with a native mobi reader
    Lily Romano
    @Lilyheart
    :+1:
    Jonathan Herman
    @lantech19446
    so any suggestions for resources that deal with page layout?
    Lily Romano
    @Lilyheart
    To better learn layout? or?
    I found this game the other day to help with flexbox. I haven't tried it yet. http://flexboxfroggy.com/
    Jonathan Herman
    @lantech19446
    like I have issues with placing pictures buttons etc without using margins to do it or understanding why sometimes align doesn't work that sort of thing.
    David Castner
    @davidjcastner
    @lantech19446 alignment works differently depending on what type of display and position values it has, if you have some example code, I could help you out
    Jonathan Herman
    @lantech19446
    I seem to bump into this with all the pages I'm trying but if you look at my img class on the tribute page I did you'll see how I had to use a 10% left margin to get the spacing of the buttons the way I wanted it and I know I shouldn't be doing it that way because it messes it up on different monitors and mobile etc so I need to learn the right way to do it
    http://codepen.io/lantech19446/pen/VjZqyV
    David Castner
    @davidjcastner
    @lantech19446 you're referring to the three images at the bottom of the page correct?
    Jonathan Herman
    @lantech19446
    yes, they all function as buttons to different pages
    David Castner
    @davidjcastner
    and what is your end goal with them, to maintain the margin spacing on all views?
    Jonathan Herman
    @lantech19446
    yes, I like the way I have them spaced but I know there's more appropriate ways to do it I had a hell of a time just getting them into a row like that they all wanted to go top to bottom. On my profile page I'm having an issue getting my picture next to the text things like that and I'm finding it difficult to find the answers for it
    David Castner
    @davidjcastner
    What I would recommend is using a flexbox container around them which @Lilyheart mention and then setting the margin to a pixel value (px) that you like. Here is a nice page that explains how to use flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    Alex H.
    @Alexander-Huh
    do I need to format my CSS differently if i write it in the CSS file as opposed to the HTML file? Trying to change the color of text with an id
    David Castner
    @davidjcastner
    @lantech19446 I can put together an example, or let me know if you have question looking through that
    Lily Romano
    @Lilyheart
    same way
    .className { }
    Jonathan Herman
    @lantech19446
    I guess my big question is does this scale between monitor sizes?
    Alex H.
    @Alexander-Huh
    but if I'm using an id I a # right?
    instead of a period
    Lily Romano
    @Lilyheart
    Right! Sorry. Correct.
    OCTOTHORPE!!!
    If anyone else wants to stream their screen, I'm more than willing to add you!
    David Castner
    @davidjcastner
    @lantech19446 yes, as long as you the buttons you are wrapping have a static pixel width small enough for all of them to fit in the page, or you can give the buttons you are wrapping a percentage width (%)
    Lily Romano
    @Lilyheart
    After I figure out how >.>
    David Castner
    @davidjcastner
    @lantech19446 otherwise you will probably have to use media queries
    Jonathan Herman
    @lantech19446
    ok cool, trying it now doesn't look too complicated. I can apply this class to a div or do I need to invoke it in each image?
    David Castner
    @davidjcastner
    flexbox works by attaching specific styling to both the container the element you want inside (which can be a div) and the elements inside the flexbox (which can be any block element I believe)
    Jonathan Herman
    @lantech19446
    hmm not sure this is going to work the way I made the buttons then
    David Castner
    @davidjcastner

    You can put your buttons in a container with the property of

    .class { display: inline-block; }

    inline block will make the elements have the minimal width around your button and also be a block element at the same time, or you can give your buttons the inline-block property as well

    Jonathan Herman
    @lantech19446
    that doesn't seem to be making a difference :(
    David Castner
    @davidjcastner
    @lantech19446 throwing together an example
    Jonathan Herman
    @lantech19446
    ok
    David Castner
    @davidjcastner
    Alright here is a forked version of your page with flexbox, I didn't do anything with text wrapping, but let me know if you need help with that http://codepen.io/davidjcastner/pen/beNBYw
    @lantech19446 I inserted lots of comments to help explain what the properties are doing, let me know if you need more explanation
    Jonathan Herman
    @lantech19446
    ooo ok so I actually have to have it in 2 different divs
    David Castner
    @davidjcastner

    @lantech19446 yes because your buttons consisted of two elements an image and text, if it was only the images, you could do it with

    .myImageButton { display: block; } /* not inline-block that was my fault */

    inline-block is for alignment in a row without a flexbox, forgot that

    Jonathan Herman
    @lantech19446
    interesting I'm building the code you put into mine step by step so I can see how each things effects them but it's ignoring my flex-direction
    David Castner
    @davidjcastner
    @lantech19446 hmm check if you had added any more css from the time that I forked it (the css above Flex Styling), also the minimal amount of properties required to get it to work are
    .container { display: flex; flex-direction:row; }
    .flex-item { flex-basis: 33%; }
    Jonathan Herman
    @lantech19446
    oooo I think I founbd it
    no I missed that you called the class other places also
    yep working great now, thank you
    David Castner
    @davidjcastner
    @lantech19446 my pleasure, I'm here to help :smile:
    Lily Romano
    @Lilyheart
    How goes Batman @Alexander-Huh ?
    @dbutler22 Enjoying the HTML so far?