You are viewing our Forum Archives. To view or take place in current topics click here.
[FIXED] Need help aligning a button [FIXED]
Posted:
[FIXED] Need help aligning a button [FIXED]Posted:
Status: Offline
Joined: May 04, 201212Year Member
Posts: 806
Reputation Power: 35
Last post was the savior, I figured it out once I got back and now people post the answers, dw though it's fixed and can be closed.
Last edited by N3ON ; edited 1 time in total
I've never done CSS but I need it for a project at school, I've done the design how I want this page of the site but I need the button below the text ( refer to image ) I'll even pay you. This has been annoying me for so long!
Picture to explain:
[spoiler] [ Register or Signin to view external links. ] [/spoiler]
Code for button:
Thank-you for whoever helps me
Picture to explain:
[spoiler] [ Register or Signin to view external links. ] [/spoiler]
Code for button:
body {
background-image: url('Hey.jpg');
background-color: #cccccc;
font-family: 'Lobster', cursive;
text-shadow: 2px 2px #FFFFF;
margin: 30px;
padding: 5em 0;
text-align: center;
}
.button {
font: bold 20px Arial,sans-serif;
color: rgba(0, 0, 0, 0.8);
text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.5);
display: inline-block;
outline: none;
cursor: pointer;
padding: 0.4em 2em 0.5em;
-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border-radius: 0.3em;
border: 1px solid;
border-color: #bbbbbb #a2a2a2 #888888;
background-color: #eee;
background-image: -moz-linear-gradient(#eeeeee, #d4d4d4);
background-image: -webkit-linear-gradient(#eeeeee, #d4d4d4);
background-image: linear-gradient(#eeeeee, #d4d4d4);
-moz-box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.1), 0 0.1em 0.2em rgba(0, 0, 0, 0.3), 0 -0.1em 0.07em rgba(0, 0, 0, 0.3) inset, 0 0.1em 0.07em rgba(255, 255, 255, 0.2) inset;
-webkit-box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.1), 0 0.1em 0.2em rgba(0, 0, 0, 0.3), 0 -0.1em 0.07em rgba(0, 0, 0, 0.3) inset, 0 0.1em 0.07em rgba(255, 255, 255, 0.2) inset;
box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.1), 0 0.1em 0.2em rgba(0, 0, 0, 0.3), 0 -0.1em 0.07em rgba(0, 0, 0, 0.3) inset, 0 0.1em 0.07em rgba(255, 255, 255, 0.2) inset;
-moz-transition: all 100ms;
-o-transition: all 100ms;
-webkit-transition: all 100ms;
transition: all 100ms;
}
.button:hover {
-moz-box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.4), 0 0.1em 0.2em rgba(0, 0, 0, 0.4), 0 -0.1em 0.07em rgba(0, 0, 0, 0.3) inset, 0 0.1em 0.07em rgba(255, 255, 255, 0.2) inset;
-webkit-box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.4), 0 0.1em 0.2em rgba(0, 0, 0, 0.4), 0 -0.1em 0.07em rgba(0, 0, 0, 0.3) inset, 0 0.1em 0.07em rgba(255, 255, 255, 0.2) inset;
box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.4), 0 0.1em 0.2em rgba(0, 0, 0, 0.4), 0 -0.1em 0.07em rgba(0, 0, 0, 0.3) inset, 0 0.1em 0.07em rgba(255, 255, 255, 0.2) inset;
}
.button:active {
padding: 0.4em 2em 0.4em;
margin-top: 0.1em;
border-color: #a2a2a2 #bbbbbb #eee;
background-image: -moz-linear-gradient(#e1e1e1, #eeeeee);
background-image: -webkit-linear-gradient(#e1e1e1, #eeeeee);
background-image: linear-gradient(#e1e1e1, #eeeeee);
-moz-box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.1) inset, 0 0.1em 0.1em rgba(0, 0, 0, 0.2) inset, 0.05em 0 0.07em rgba(0, 0, 0, 0.2) inset, -0.05em 0 0.07em rgba(0, 0, 0, 0.2) inset;
-webkit-box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.1) inset, 0 0.1em 0.1em rgba(0, 0, 0, 0.2) inset, 0.05em 0 0.07em rgba(0, 0, 0, 0.2) inset, -0.05em 0 0.07em rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.1) inset, 0 0.1em 0.1em rgba(0, 0, 0, 0.2) inset, 0.05em 0 0.07em rgba(0, 0, 0, 0.2) inset, -0.05em 0 0.07em rgba(0, 0, 0, 0.2) inset;
-moz-transition: all 10ms;
-o-transition: all 10ms;
-webkit-transition: all 10ms;
transition: all 10ms;
} Thank-you for whoever helps me
Last edited by N3ON ; edited 1 time in total
#2. Posted:
Status: Offline
Joined: May 30, 201013Year Member
Posts: 438
Reputation Power: 49
Status: Offline
Joined: May 30, 201013Year Member
Posts: 438
Reputation Power: 49
Would be more ideal if you posted the html too.
Is the "Welcome To My Gallery" an element? Placing the buttons code after it may just do what you want.
If the text is on the image, you could add a margin of Xpx to the top of the button since the image's height is known. If the background image scales, then a % could work. Could maybe even relative/absolute position it.
Put it all on [ Register or Signin to view external links. ] , just make sure to change url('Hey.jpg'); to point to an imgur equivilent or something. (Also any other images)
Is the "Welcome To My Gallery" an element? Placing the buttons code after it may just do what you want.
If the text is on the image, you could add a margin of Xpx to the top of the button since the image's height is known. If the background image scales, then a % could work. Could maybe even relative/absolute position it.
Put it all on [ Register or Signin to view external links. ] , just make sure to change url('Hey.jpg'); to point to an imgur equivilent or something. (Also any other images)
- 0useful
- 0not useful
#3. Posted:
Status: Offline
Joined: May 04, 201212Year Member
Posts: 806
Reputation Power: 35
UnrealEgg wrote Would be more ideal if you posted the html too.
Is the "Welcome To My Gallery" an element? Placing the buttons code after it may just do what you want.
If the text is on the image, you could add a margin of Xpx to the top of the button since the image's height is known. If the background image scales, then a % could work. Could maybe even relative/absolute position it.
Put it all on [ Register or Signin to view external links. ] , just make sure to change url('Hey.jpg'); to point to an imgur equivilent or something. (Also any other images)
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<button class="button">View Gallery</button>
<body background="Hey.jpg">
<br>
<br>
<br>
<br>
<br>
<font color="black"><h1><center><font size="80">Welcome To My Gallery</font></center></H1></font>
</body>
</html>
</html> I think its the text-align: center; that is messing with it, if I changed the text-align: center;
to
text-align: right; it moves to the right
so how would I get it below the text?
- 0useful
- 0not useful
#4. Posted:
Status: Offline
Joined: Jun 25, 201013Year Member
Posts: 4,078
Reputation Power: 2628
Motto: https://www.thetechgame.com/Forums/t=7804 333/vote-for-tune-of-the-week-friday-nigh ts-lockdown-dj-sets.html
Motto: https://www.thetechgame.com/Forums/t=7804 333/vote-for-tune-of-the-week-friday-nigh ts-lockdown-dj-sets.html
Status: Offline
Joined: Jun 25, 201013Year Member
Posts: 4,078
Reputation Power: 2628
Motto: https://www.thetechgame.com/Forums/t=7804 333/vote-for-tune-of-the-week-friday-nigh ts-lockdown-dj-sets.html
As UnrealEgg said move it bellow. So like this.
That w
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<font color="black"><h1><center><font size="80">Welcome To My Gallery</font></center></H1></font>
<br>
<br>
<br>
<br>
<br>
<button class="button">View Gallery</button>
<body background="Hey.jpg">
</body>
</html>
</html> That w
- 0useful
- 0not useful
You are viewing our Forum Archives. To view or take place in current topics click here.