A little CSS Help needed.

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

 

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

 

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

 

I added this;

and it looks now nice. But there is a Problem on a Mac with FIrefox (dont know why):


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

Thank you for your assistence!

 

Ok, i think the problem is, if we SCALE the website (zoom in, zoom out vaka makew bigger, smaller) with CTR+mouseweel

 

whats your problem? u want Startseite to be rounded too?

 

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.