This is a read-only archive of the old Scratch 1.x Forums.
Try searching the current Scratch discussion forums.

Pages: 1

Topic closed

#1 2012-07-30 13:15:34

funelephant
Scratcher
Registered: 2010-07-02
Posts: 1000+

HTML/CSS Help

I was trying to create a rounded box thingy in CSS and I'm having trouble.

I can't put a link because it's a secret website, that is going to be released later this summer  tongue

If you want to see an example of a rounded box, go to http://eternityinc-official.com/ and it's the Eternity Apps thing.

The navigation bar is a vertical one, and it's blocking part of the box. I've tried to use

Code:

left: 100px;

(the 100 is a random number.)
in the CSS, but it's not working. Can you please help?

nicki begs to differ
http://24.media.tumblr.com/ab0e6e8fd347c5e39c2821bcab9d16e6/tumblr_mgu35sui1L1rfb7aqo2_500.gif

Offline

 

#2 2012-07-30 13:25:30

veggieman001
Scratcher
Registered: 2010-02-20
Posts: 1000+

Re: HTML/CSS Help

Don't you have to do "position:relative;" beforehand, or use margins?

Posts: 20000 - Show all posts

Offline

 

#3 2012-07-30 13:29:02

funelephant
Scratcher
Registered: 2010-07-02
Posts: 1000+

Re: HTML/CSS Help

veggieman001 wrote:

Don't you have to do "position:relative;" beforehand, or use margins?

Oh, I have to put position...  tongue

Let me fix that...

nicki begs to differ
http://24.media.tumblr.com/ab0e6e8fd347c5e39c2821bcab9d16e6/tumblr_mgu35sui1L1rfb7aqo2_500.gif

Offline

 

#4 2012-07-30 13:31:46

funelephant
Scratcher
Registered: 2010-07-02
Posts: 1000+

Re: HTML/CSS Help

Do you have to put top: 100px; too?

It just goes over the navigation bar, it doesn't actually move it  tongue

nicki begs to differ
http://24.media.tumblr.com/ab0e6e8fd347c5e39c2821bcab9d16e6/tumblr_mgu35sui1L1rfb7aqo2_500.gif

Offline

 

#5 2012-07-30 13:38:30

muppetds
Scratcher
Registered: 2011-02-11
Posts: 1000+

Re: HTML/CSS Help

take a look at this code - its in there somewhere

Code:

ul#menu1,ul#menu1 ul{
    margin:0;list-style:none;padding:0;background-color:#000000;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:28px;-webkit-border-radius:28px;border-radius:28px;}
ul#menu1 ul{
    display:none;position:absolute;left:0;top:100%;-moz-box-shadow:1.4px 1.4px 2px #B1B1B1;-webkit-box-shadow:1.4px 1.4px 2px #B1B1B1;box-shadow:1.4px 1.4px 2px #B1B1B1;background-color:#202020;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.16),rgba(255,255,255,0)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.16),rgba(255,255,255,0));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.16)),to(rgba(255,255,255,0)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.16),rgba(255,255,255,0));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;padding:0;}
ul#menu1 li:hover>*{
    display:block;}
ul#menu1 li{
    position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#menu1 li:hover{
    z-index:1;}
ul#menu1 ul ul{
    position:absolute;left:100%;top:0;}
ul#menu1{
    font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:6px 6px 6px 0;
    *display:inline;}
* html ul#menu1 li a{
    display:inline-block;}
ul#menu1>li{
    margin:0 0 0 6px;}
ul#menu1 ul>li{
    margin:6px 0 0;}
ul#menu1 a:active, ul#menu1 a:focus{
    outline-style:none;}
ul#menu1 a{
    display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;background-repeat:repeat;border-width:0;border-style:solid;border-color:transparent;}
ul#menu1 ul li{
    float:none;margin:0;}
ul#menu1 ul a{
    text-align:left;}
ul#menu1 li:hover>a,ul#menu1 li a.pressed{
    background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;color:#333;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));text-decoration:none;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#menu1 ul span{
    background-image:none;padding-right:8px;}
ul#menu1 li.topmenu>a{
    background-color:;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:16px;-moz-border-radius:16px;-webkit-border-radius:16px;font:bold 13px Arial;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#menu1 li.topmenu:hover>a,ul#menu1 li.topmenu a.pressed{
    background-color:#7dfa00;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));border-style:solid;border-color:#F8F8F8;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,endColorstr=#B355AA00)}
ul#menu1 li.sublast>a{
    border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:9px;-webkit-border-bottom-left-radius:9px;}
SCRATCH'S PARTLY INSANE RESIDENT 
http://internetometer.com/imagesmall/31691.pnghttp://bluetetrarpg.x10.mx/usercard/?name=muppetds

Offline

 

#6 2012-07-30 13:42:50

funelephant
Scratcher
Registered: 2010-07-02
Posts: 1000+

Re: HTML/CSS Help

muppetds wrote:

take a look at this code - its in there somewhere

Code:

ul#menu1,ul#menu1 ul{
    margin:0;list-style:none;padding:0;background-color:#000000;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:28px;-webkit-border-radius:28px;border-radius:28px;}
ul#menu1 ul{
    display:none;position:absolute;left:0;top:100%;-moz-box-shadow:1.4px 1.4px 2px #B1B1B1;-webkit-box-shadow:1.4px 1.4px 2px #B1B1B1;box-shadow:1.4px 1.4px 2px #B1B1B1;background-color:#202020;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.16),rgba(255,255,255,0)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.16),rgba(255,255,255,0));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.16)),to(rgba(255,255,255,0)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.16),rgba(255,255,255,0));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;padding:0;}
ul#menu1 li:hover>*{
    display:block;}
ul#menu1 li{
    position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#menu1 li:hover{
    z-index:1;}
ul#menu1 ul ul{
    position:absolute;left:100%;top:0;}
ul#menu1{
    font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:6px 6px 6px 0;
    *display:inline;}
* html ul#menu1 li a{
    display:inline-block;}
ul#menu1>li{
    margin:0 0 0 6px;}
ul#menu1 ul>li{
    margin:6px 0 0;}
ul#menu1 a:active, ul#menu1 a:focus{
    outline-style:none;}
ul#menu1 a{
    display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;background-repeat:repeat;border-width:0;border-style:solid;border-color:transparent;}
ul#menu1 ul li{
    float:none;margin:0;}
ul#menu1 ul a{
    text-align:left;}
ul#menu1 li:hover>a,ul#menu1 li a.pressed{
    background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;color:#333;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));text-decoration:none;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#menu1 ul span{
    background-image:none;padding-right:8px;}
ul#menu1 li.topmenu>a{
    background-color:;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:16px;-moz-border-radius:16px;-webkit-border-radius:16px;font:bold 13px Arial;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#menu1 li.topmenu:hover>a,ul#menu1 li.topmenu a.pressed{
    background-color:#7dfa00;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));border-style:solid;border-color:#F8F8F8;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,endColorstr=#B355AA00)}
ul#menu1 li.sublast>a{
    border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:9px;-webkit-border-bottom-left-radius:9px;}

I can't read all of that  tongue

nicki begs to differ
http://24.media.tumblr.com/ab0e6e8fd347c5e39c2821bcab9d16e6/tumblr_mgu35sui1L1rfb7aqo2_500.gif

Offline

 

#7 2012-07-30 13:45:15

muppetds
Scratcher
Registered: 2011-02-11
Posts: 1000+

Re: HTML/CSS Help

i think it is the 2nd line

SCRATCH'S PARTLY INSANE RESIDENT 
http://internetometer.com/imagesmall/31691.pnghttp://bluetetrarpg.x10.mx/usercard/?name=muppetds

Offline

 

#8 2012-07-30 13:45:56

veggieman001
Scratcher
Registered: 2010-02-20
Posts: 1000+

Re: HTML/CSS Help

funelephant wrote:

Do you have to put top: 100px; too?

It just goes over the navigation bar, it doesn't actually move it  tongue

Which object are you doing this to?

Posts: 20000 - Show all posts

Offline

 

#9 2012-07-30 13:46:41

funelephant
Scratcher
Registered: 2010-07-02
Posts: 1000+

Re: HTML/CSS Help

veggieman001 wrote:

funelephant wrote:

Do you have to put top: 100px; too?

It just goes over the navigation bar, it doesn't actually move it  tongue

Which object are you doing this to?

The rounded box.

I think that answered the question...  hmm

nicki begs to differ
http://24.media.tumblr.com/ab0e6e8fd347c5e39c2821bcab9d16e6/tumblr_mgu35sui1L1rfb7aqo2_500.gif

Offline

 

#10 2012-07-30 13:46:43

MathWizz
Scratcher
Registered: 2009-08-31
Posts: 1000+

Re: HTML/CSS Help

What exactly do you want? Move the bar to the right 100 pixels?

http://block.site90.net/scratch.mit/text.php?size=30&text=%20A%20signature!&color=333333

Offline

 

#11 2012-07-30 13:47:05

chanmanpartyman
Scratcher
Registered: 2011-05-30
Posts: 500+

Re: HTML/CSS Help

Make a box then put border-radius:xpx;
An example of a rounded box in css is:

Code:

#roundbox {
    background-color:#000000;
    width:200px;
    height:200px;
    border-radius:30px;
}

Tested in Google Chrome

Last edited by chanmanpartyman (2012-07-30 13:51:24)

Offline

 

#12 2012-07-30 13:47:25

veggieman001
Scratcher
Registered: 2010-02-20
Posts: 1000+

Re: HTML/CSS Help

funelephant wrote:

veggieman001 wrote:

funelephant wrote:

Do you have to put top: 100px; too?

It just goes over the navigation bar, it doesn't actually move it  tongue

Which object are you doing this to?

The rounded box.

I think that answered the question...  hmm

Try doing 'margin-left:100px;' instead.

Posts: 20000 - Show all posts

Offline

 

#13 2012-07-30 13:48:05

funelephant
Scratcher
Registered: 2010-07-02
Posts: 1000+

Re: HTML/CSS Help

veggieman001 wrote:

funelephant wrote:

veggieman001 wrote:

Which object are you doing this to?

The rounded box.

I think that answered the question...  hmm

Try doing 'margin-left:100px;' instead.

Okay  big_smile

EDIT: Yay! It worked  big_smile

This can be closed  smile

Last edited by funelephant (2012-07-30 13:48:49)

nicki begs to differ
http://24.media.tumblr.com/ab0e6e8fd347c5e39c2821bcab9d16e6/tumblr_mgu35sui1L1rfb7aqo2_500.gif

Offline

 

#14 2012-07-30 13:48:54

BirdByte
Scratcher
Registered: 2012-07-07
Posts: 1000+

Re: HTML/CSS Help

What I would always recommend doing is adding some padding.

Code:

padding: 10px;

If you already have padding, I'm gonna need to see the CSS.  smile

http://i50.tinypic.com/312u714.jpg

Offline

 

#15 2012-07-30 13:49:00

MathWizz
Scratcher
Registered: 2009-08-31
Posts: 1000+

Re: HTML/CSS Help

Maybe it 0x8BADF00D or something. Lololol.

http://block.site90.net/scratch.mit/text.php?size=30&text=%20A%20signature!&color=333333

Offline

 

#16 2012-07-30 13:50:49

MathWizz
Scratcher
Registered: 2009-08-31
Posts: 1000+

Re: HTML/CSS Help

BirdByte wrote:

What I would always recommend doing is adding some padding.

Code:

padding: 10px;

If you already have padding, I'm gonna need to see the CSS.  smile

Dont use padding if you want to move the whole element. Padding with only move the children inside the element.

http://block.site90.net/scratch.mit/text.php?size=30&text=%20A%20signature!&color=333333

Offline

 

#17 2012-07-30 13:56:00

Lucario621
Community Moderator
Registered: 2007-10-03
Posts: 1000+

Re: HTML/CSS Help

Closed by request of topic owner.

http://i.imgur.com/WBkM2QQ.png

Offline

 

Topic closed

Pages: 1

Board footer