PDA

View Full Version : HTML/CSS Website Help



srlMW
05-13-2016, 10:43 AM
Hey guys, currently learning how to make websites and right now I'm attempting(work in progress) to make a semi-rip-off of the powerbot landing page but I've a few questions that I can't solve... my code is below.

- How do I make the header image fill to the top and full width because atm it's a tad off?
- How do I center my menu properly because right now it's just off to the right?

Thanks!

E: Any tips welcome

E2: Anyone know how to add a fade effect like so? https://i.gyazo.com/94cb33ff278fe9e463a2741120af52e3.gif


<!DOCTYPE html>
<html>
<head>
<title><< RSBot >> #1 Runescape Bot</title>
<style>
#header {
background-image: url("http://www.ribalaw.com.au/wp-content/themes/thedawn/images/skins/dark-blue/header-bg.jpg");
color:white;
text-align:center;
padding:0px;
postion: fixed;
margin: 0px;
width: 100%;

}
#menu {
background-color:transparent;
color:darkgrey;
text-align:center;
padding:0px;
margin: 0px;
font-family: arial;
}
#footer {
background-color:none;
color:white;
text-align:center;
padding:1px;
position:fixed;
bottom:0;
left:0;
right:0;
}
body {
background-image: url("https://powerbot-dequeue.netdna-ssl.com/assets/img/sprites/splash_blur_hatched.jpg");
background-repeat: no-repeat;
background-size: cover;
}
a:link {
colour: white;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: white;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: white;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: white;
background-color: transparent;
text-decoration: underline;
}
.button {
display:block;
height: 35px;
width: 130px;
text-align: center;
display: inline-block;
line-height: 40px;
padding: 0px;
font-size: 30px;
background: none;
border: 2px solid white;
}
a.button:hover {
background: #3d7a80;
background: -webkit-linear-gradient(top, #3d7a80, #2f5f63);
background: -moz-linear-gradient(top, #3d7a80, #2f5f63);
background: -o-linear-gradient(top, #3d7a80, #2f5f63);
background: -ms-linear-gradient(top, #3d7a80, #2f5f63);
background: linear-gradient(top, #3d7a80, #2f5f63);
}
#menu {
width: 400px;
height: 35px;
font-size: 16px;
font-family: "Arial Black", Gadget, sans-serif;
text-align: center;
}
#menu li {
display: inline;
padding: 16px;
color: grey;
}
#menu li:hover {
background-color: dodgerblue;
padding: 14px 16px;
color: white;
}
h1 {
font-size: 300%;
}
</style>
<center>
<div id="header">
<img src="https://powerbot-dequeue.netdna-ssl.com/assets/img/logos/logo.png">
<center>
<div id="menu">
<ul>
<li><a>Community</a></li>
<li><a>Scripts</a></li>
<li><a>Store</a></li>
</ul>
</div>
</div>
</head>

<body>
<h1 style=color:white;font-family:"Arial";>THE WORLD'S MOST POPULAR RUNESCAPE BOT SINCE 2006</h1>
<a href="https://www.powerbot.org/download/?win" class="button">Download</a>
</body>
<footer>
<div id="footer">
Copyright 2016 RSBot.com
</div>
</footer>
</html>

Preview
https://i.gyazo.com/261a353e9d05a15485e7035be56a48cc.jpg

YoHoJo
05-13-2016, 11:15 AM
https://teamtreehouse.com/community/why-do-i-have-to-add-a-margin-40px
Was a left padding of 40px on your ul, link above explains why.

I put this to remove it.


ul{
padding-left: 0;
}

https://jsfiddle.net/34rpvwaf/

srlMW
05-13-2016, 11:21 AM
https://teamtreehouse.com/community/why-do-i-have-to-add-a-margin-40px
Was a left padding of 40px on your ul, link above explains why.

I put this to remove it.


ul{
padding-left: 0;
}

https://jsfiddle.net/34rpvwaf/

Ahh brilliant! Much appreciated YoHojo!

srlMW
05-13-2016, 11:56 AM
Update: My current progress
- still don't know how to do the fade in action on the buttons in OP
- any advice on how to get two buttons next to each other?
- anything you think I should add or not?

https://i.gyazo.com/6e3c89bb8e4a3318d2f2cab6c5ed5b5d.png


<!DOCTYPE html>
<html>
<head>
<title><< RSBot >> #1 Runescape Bot</title>
<style>
#header {
background-image: url("http://www.ribalaw.com.au/wp-content/themes/thedawn/images/skins/dark-blue/header-bg.jpg");
color:white;
text-align:center;
padding:0px;
postion: fixed;
margin: 0px;
width: 100%;

}
#menu {
background-color:transparent;
color:darkgrey;
text-align:center;
padding:0px;
margin: 0px;
font-family: arial;
}
#textbox {
padding: 30px;
}
#textboxbottom {
padding: 10px
}
#footer {
background-color:none;
color:darkgrey;
text-align:center;
padding:1px;
position:fixed;
left:0;
right:0;
font-family:arial;
font-size: 14px;
opacity: 0.9;
}
body {
background-image: url("https://powerbot-dequeue.netdna-ssl.com/assets/img/sprites/splash_blur_hatched.jpg");
background-repeat: no-repeat;
background-size: cover;
}
a:link {
colour: white;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: white;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: white;
background-color: transparent;
text-decoration: none;
}
a:active {
color: white;
background-color: transparent;
text-decoration: underline;
}
.button {
display:block;
height: 60px;
width: 250px;
text-align: center;
line-height: 60px;
padding: 0px;
font-size: 50px;
background: none;
border: 1px solid white;
font-family: "Arial";
border-radius: 8px;

}
a.button:hover {
text-decoration: none;
font-size: 50px;
border: 2px solid white;
font-family: "Arial";
}
#menu {
width: 400px;
height: 35px;
font-size: 16px;
font-family: "Arial Black", Gadget, sans-serif;
text-align: center;
}
#menu li {
display: inline;
padding: 16px;
color: grey;
}
#menu li:hover {
background-color: dodgerblue;
padding: 14px 16px;
color: white;
}
h1 {
font-size: 200%;
}
p {
font-size: 140%;
}
ul{
padding-left: 0;
}
</style>
<center>
<div id="header">
<img src="https://powerbot-dequeue.netdna-ssl.com/assets/img/logos/logo.png">
<center>
<div id="menu">
<ul>
<li><a>Community</a></li>
<li><a>Scripts</a></li>
<li><a>Store</a></li>
</ul>
</div>
</div>
</head>

<body>
<div id="textbox">
<h1 style=color:white;font-family:"Arial";>THE WORLD'S MOST POPULAR RUNESCAPE BOT SINCE 2006</h1>
</div>
<p style=color:white;font-family:"Arial";>Download now for your desktop!</p>
<a href="https://www.powerbot.org/download/?win" class="button">Download</a>
<div id=textboxbottom>
<p style=color:white;font-family:"Arial">RSBot has been trusted by millions of players worldwide to level up their characters, complete quests and<br> earn gold effortlessly - OSRS, RS3 and DarkScape. Now it's your turn</p>
</div>
<div id="footer">
By downloading you agree to the License Terms and Conditions
</div>
</body>
</html>

Ghostman
05-13-2016, 04:54 PM
Here's a very simple transition effect with css. I try to match what you were looking for but also trying to make it simple. You may want to make it compatible with every browser but for testing this works in google chrome.

https://jsfiddle.net/b6b0kst0/1/


And here's one with buttons next to each other.

https://jsfiddle.net/hr638nm4/4/

If need more help, let me know. And if this didn't help you, well let me know!

srlMW
05-13-2016, 11:08 PM
Here's a very simple transition effect with css. I try to match what you were looking for but also trying to make it simple. You may want to make it compatible with every browser but for testing this works in google chrome.

https://jsfiddle.net/b6b0kst0/1/


And here's one with buttons next to each other.

https://jsfiddle.net/hr638nm4/4/

If need more help, let me know. And if this didn't help you, well let me know!

Thanks a heap man, works fine with firefox!

Update: Moving on to another project - either building my own website or replicating another


My final preview:
https://i.gyazo.com/730439f6f5c2ab8e247c35999ff3fb7b.gif

My final code:

<!DOCTYPE html>
<html>
<head>
<title><< RSBot >> #1 Runescape Bot</title>
<style>
#header {
color:white;
text-align:center;
padding:20px;
postion: fixed;
margin: 0px;
width: 100%;

}
#menu {
background-color:transparent;
color:darkgrey;
text-align:center;
padding:0px;
margin: 0px;
font-family: arial;
}
#textbox1 {
padding: 30px;
}
#textboxbottom {
padding: 10px
}
#footer {
background-color:none;
color:darkgrey;
text-align:center;
padding:1px;
position:fixed;
left:0;
right:0;
font-family:arial;
font-size: 14px;
opacity: 0.9;
}
body {
background-image: url("https://powerbot-dequeue.netdna-ssl.com/assets/img/sprites/splash_blur_hatched.jpg");
background-repeat: no-repeat;
background-size: cover;
}
a:link {
colour: white;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: white;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: white;
background-color: transparent;
text-decoration: none;
}
a:active {
color: white;
background-color: transparent;
text-decoration: underline;
}
.button {
display:inline;
text-align: center;
line-height: 60px;
padding: 8px 12px;
font-size: 50px;
background: none;
border: 1px solid white;
font-family: "Arial";
border-radius: 8px;
transition: all 0.5s ease-in;
transition: all 0.5s ease-out;
color: white;
}
a.button:hover {
text-decoration: none;
font-size: 50px;
border: 1px solid white;
font-family: "Arial";
color: black;
background: white;
}
#menu {
width: 400px;
height: 35px;
font-size: 16px;
font-family: "Arial Black", Gadget, sans-serif;
text-align: center;
}
#menu li {
display: inline;
padding: 16px;
color: grey;
}
#menu li:hover {
background-color: dodgerblue;
padding: 14px 16px;
color: white;
}
h1 {
font-size: 200%;
}
p {
font-size: 140%;
}
ul {
padding-left: 0;
list-style-type: none;
}
</style>

</style>
<center>
<div id="header">
<img src="https://powerbot-dequeue.netdna-ssl.com/assets/img/logos/logo.png">
<center>
<div id="menu">
<ul>
<li><a>Community</a></li>
<li><a>Scripts</a></li>
<li><a>Store</a></li>
</ul>
</div>
</div>
</head>

<body>
<div class="textbox1">
<h1 style=color:white;font-family:"Arial";>THE WORLD'S MOST POPULAR RUNESCAPE BOT SINCE 2006</h1>
</div>
<p style=color:white;font-family:"Arial";>Download now for your desktop!</p>
<a href="https://www.powerbot.org/download/?win" class="button">Windows</a>
<a href="https://www.powerbot.org/download/?win" class="button">Universal</a>
<div id=textboxbottom>
<p style=color:white;font-family:"Arial">RSBot has been trusted by millions of players worldwide to level up their characters, complete quests and<br> earn gold effortlessly - OSRS, RS3 and DarkScape. Now it's your turn</p>
</div>
<div id="footer">
By downloading you agree to the License Terms and Conditions
</div>
</body>
</html>

Obscurity
05-14-2016, 12:59 AM
Here's a very simple transition effect with css. I try to match what you were looking for but also trying to make it simple. You may want to make it compatible with every browser but for testing this works in google chrome.

https://jsfiddle.net/b6b0kst0/1/


And here's one with buttons next to each other.

https://jsfiddle.net/hr638nm4/4/

If need more help, let me know. And if this didn't help you, well let me know!

Yay for not catering to ancient browsers by using JS.

Ghostman
05-14-2016, 02:08 AM
Glad it works!


Yay for not catering to ancient browsers by using JS.

Yup, but those were very simple transitions. No reason to add extra load time =D

Le Jingle
05-14-2016, 02:10 AM
Right click any web page, choose the inspect option (firefox/chrome)

bootstrap

my input to achieve you webpage goal

cheers
lj

Lucidity
05-14-2016, 09:28 AM
I worked on it a little bit and sent the files to your skype.

http://i.sean.pro/05-14-16_02:26:59.png

Harrier
05-14-2016, 09:48 AM
What are you trying to do here? Make a phishing site? Get sued?

Lucidity
05-14-2016, 10:27 AM
What are you trying to do here? Make a phishing site? Get sued?

I think he's just trying to learn:p If he wanted to steal their site he'd of just used HTT track

toxjq
07-13-2016, 09:12 PM
highly recommend using a framework like bootstrap. It will make learning web development much more fun and easier.