A little CSS Help needed.

Discussion in 'CSS' started by wowcast, Sep 29, 2012.

0
  1. #1
    Good morning guys!

    I have following problem on http://www.newsocialdynamics.de/

    You see the yellow "Member Area" Button, i want it to go to the end of the menu-bar. How is this possible?

    If i increase the width of the button, it is not round which looks really ugly. Any Pro tipps and ideas to how to manage this?


    Big thanks in advance
     
    wowcast, Sep 29, 2012 IP
  2. Host Volt

    Host Volt Greenhorn

    Messages:
    29
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    15
    #2
    Hey wowcast,

    An easy solution is to float the button right, and change the border radius of the right edges:

    
float:right;
webkit-border-radius: 0 9px 9px 0;
-moz-border-radius: 0 9px 9px 0;
border-radius: 0 9px 9px 0;
    Code (css):
    That should work :)
     
    Host Volt, Sep 29, 2012 IP
  3. wowcast

    wowcast Greenhorn

    Messages:
    89
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #3
    Thank you for the fast reply and help! I did this:

    webkit-border-radius: 0 9px 9px 0;
-moz-border-radius: 0 9px 9px 0;
border-radius: 0 9px 9px 0;
    Code (markup):
    but i am not sure where to put the float code, to work properly. :X Where should it be? ;D
     
    wowcast, Sep 30, 2012 IP
  4. wowcast

    wowcast Greenhorn

    Messages:
    89
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #4
    I added this;
    and it looks now nice. But there is a Problem on a Mac with FIrefox (dont know why):
    [​IMG]

    And now the left border is not anymore round, but rectengular. Can we make bouth ROUND?

    Thank you for your assistence!
     
    wowcast, Sep 30, 2012 IP
  5. wowcast

    wowcast Greenhorn

    Messages:
    89
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #5
    Ok, i think the problem is, if we SCALE the website (zoom in, zoom out vaka makew bigger, smaller) with CTR+mouseweel
     
    wowcast, Sep 30, 2012 IP
  6. sweetkate

    sweetkate Well-Known Member

    Messages:
    381
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    115
    #6
    whats your problem? u want Startseite to be rounded too?
     
    sweetkate, Sep 30, 2012 IP
  7. Host Volt

    Host Volt Greenhorn

    Messages:
    29
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    15
    #7
    To work in Firefox, you'll probably need to add:

    
-moz-border-radius:0 9px 9px 0;
    Code (CSS):
    If you want all the corners to be round, replace all the "0 9px 9px 0" with just "9px"
    The order of the numbers in "0 9px 9px 0" is top left border, top right, bottom right, bottom left. To get them all rounded, just simply replace it by 9px.
     
    Host Volt, Sep 30, 2012 IP