Results 1 to 13 of 13

Thread: HTML/CSS Website Help

  1. #1
    Join Date
    Apr 2015
    Location
    FireFox
    Posts
    528
    Mentioned
    10 Post(s)
    Quoted
    227 Post(s)

    Default HTML/CSS Website Help

    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?

    HTML Code:
    <!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
    Scripting with ogLib

  2. #2
    Join Date
    Feb 2006
    Location
    Tracy/Davis, California
    Posts
    12,631
    Mentioned
    135 Post(s)
    Quoted
    418 Post(s)

    Default

    https://teamtreehouse.com/community/...-a-margin-40px
    Was a left padding of 40px on your ul, link above explains why.

    I put this to remove it.
    HTML Code:
    ul{
        padding-left: 0;
    }
    https://jsfiddle.net/34rpvwaf/

  3. #3
    Join Date
    Apr 2015
    Location
    FireFox
    Posts
    528
    Mentioned
    10 Post(s)
    Quoted
    227 Post(s)

    Default

    Quote Originally Posted by YoHoJo View Post
    https://teamtreehouse.com/community/...-a-margin-40px
    Was a left padding of 40px on your ul, link above explains why.

    I put this to remove it.
    HTML Code:
    ul{
        padding-left: 0;
    }
    https://jsfiddle.net/34rpvwaf/
    Ahh brilliant! Much appreciated YoHojo!
    Scripting with ogLib

  4. #4
    Join Date
    Apr 2015
    Location
    FireFox
    Posts
    528
    Mentioned
    10 Post(s)
    Quoted
    227 Post(s)

    Default

    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?



    HTML Code:
    <!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>
    Scripting with ogLib

  5. #5
    Join Date
    Jun 2008
    Location
    Somewhere
    Posts
    117
    Mentioned
    2 Post(s)
    Quoted
    4 Post(s)

    Red face

    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!
    Last edited by Ghostman; 05-13-2016 at 05:06 PM.

  6. #6
    Join Date
    Apr 2015
    Location
    FireFox
    Posts
    528
    Mentioned
    10 Post(s)
    Quoted
    227 Post(s)

    Default

    Quote Originally Posted by Ghostman View Post
    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:


    My final code:
    HTML 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>
    Scripting with ogLib

  7. #7
    Join Date
    Jun 2012
    Posts
    586
    Mentioned
    112 Post(s)
    Quoted
    296 Post(s)

    Default

    Quote Originally Posted by Ghostman View Post
    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.




    Skype: obscuritySRL@outlook.com

  8. #8
    Join Date
    Jun 2008
    Location
    Somewhere
    Posts
    117
    Mentioned
    2 Post(s)
    Quoted
    4 Post(s)

    Default

    Glad it works!

    Quote Originally Posted by Obscurity View Post
    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

  9. #9
    Join Date
    Feb 2012
    Location
    Wonderland
    Posts
    1,988
    Mentioned
    41 Post(s)
    Quoted
    272 Post(s)

    Default

    Right click any web page, choose the inspect option (firefox/chrome)

    bootstrap

    my input to achieve you webpage goal

    cheers
    lj

  10. #10
    Join Date
    Jun 2014
    Posts
    463
    Mentioned
    27 Post(s)
    Quoted
    229 Post(s)

    Default

    I worked on it a little bit and sent the files to your skype.

    Tsunami

  11. #11
    Join Date
    Mar 2013
    Posts
    1,010
    Mentioned
    35 Post(s)
    Quoted
    620 Post(s)

    Default

    What are you trying to do here? Make a phishing site? Get sued?
    #slack4admin2016
    <slacky> I will build a wall
    <slacky> I will ban reflection and OGL hooking until we know what the hell is going on

  12. #12
    Join Date
    Jun 2014
    Posts
    463
    Mentioned
    27 Post(s)
    Quoted
    229 Post(s)

    Default

    Quote Originally Posted by Harrier View Post
    What are you trying to do here? Make a phishing site? Get sued?
    I think he's just trying to learn If he wanted to steal their site he'd of just used HTT track
    Tsunami

  13. #13
    Join Date
    May 2013
    Posts
    205
    Mentioned
    1 Post(s)
    Quoted
    85 Post(s)

    Default

    highly recommend using a framework like bootstrap. It will make learning web development much more fun and easier.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •