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.

Question about CSS

Discussion in 'CSS' started by FPForum, May 21, 2016.

  1. #1
    I'm having an issue getting things lined up properly. Ideally I would like to have the price, then the quantity, then the Add to cart button. Here is what mine currently looks like:
    http://i.imgur.com/1BcVWg5.png

    Here is my css for each currently:
    Box:
    
    style="border:4px solid #ccc; padding: 12px;"
    
    Code (markup):
    Price:
    
    {line-height:1.8}
    
    Code (markup):
    Quantity:
    
    style="max-width:60px;float:right"
    
    Code (markup):
    Add to Cart:
    
    input.button{font-size:100%;margin:0;line-height:1;cursor:pointer;position:relative;font-family:inherit;text-decoration:none;overflow:visible;padding:.618em 1em;font-weight:700;border-radius:3px;float:right;color:#515151;background-color:#ebe9eb;border:0;white-space:nowrap;display:inline-block;background-image:none;box-shadow:none;-webkit-box-shadow:none;text-shadow:none}
    
    Code (markup):
    Any help is appreciated!
    SEMrush
     
    FPForum, May 21, 2016 IP
    SEMrush
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    That is a LOT of CSS just to line up three items in a box...
    You don't really need any of it (well, almost). Have a look here:
    https://jsfiddle.net/zyaauu3c/
     
    PoPSiCLe, May 21, 2016 IP
    FPForum likes this.
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,149
    Likes Received:
    1,705
    Best Answers:
    239
    Trophy Points:
    515
    #3
    Not just a lot of CSS, but a lot of INLINED CSS which automatically means the entire codebase is probably rubbish.

    Of course, CSS without the markup it's applied to is just gibberish.
     
    deathshadow, May 24, 2016 IP
  4. Uzair_mughal

    Uzair_mughal Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    You will have to do inline CSS for it because its easy to change it at the testing...
    but to keep your contents in the same box you will have to deal with position property of CSS.
     
    Uzair_mughal, Jun 16, 2016 IP
  5. karjen

    karjen Member

    Messages:
    54
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    48
    #5
    If I where you, I would do it like this...

    <style>
    .align{
    display:inline-block;
    }
    </style>
    
    <div class="align">box</div>
    <div class="align">price</div>
    <div class="align">quantity</div>
    <button class="align"></button>
    Code (markup):
     
    karjen, Jun 18, 2016 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #6
    Why are you all answering a question that has already been answered (by me), and adding gibberish, useless code as well? Don't you actually read the previous posts?
     
    PoPSiCLe, Jun 18, 2016 IP