+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Coding (https://hackforums.net/forumdisplay.php?fid=151)
+---- Forum: Coders Lounge (https://hackforums.net/forumdisplay.php?fid=5)
+---- Thread: [Help] Need Help Centering/Scaling My Website! (/showthread.php?tid=4927034)
Need Help Centering/Scaling My Website! - Exodian - Jul 29, 2015
Hey Guys, Im new to html and css so sorry if I use bad terms and stuff. But anyways let me explain my problem. I have this website that I coded (Very poorly because im new) and when im on Google Chrome at 100% zoom the website kinda looks centered and that's all good. But when you zoom out or in, the text and button goes off in one direction when I want it to roughly stay in the middle. So here's my code, please ignore what the website is about because it's for a who is a lot younger than me :P
HTML (The html is extremely messy, yes I know, I'm only a beginner so please excuse that and there even might be stuff in their I don't need, but the html code works how I want so ye :P!)
<html>
<head>
<title>Exodian_22_3</title>
<style>
div.text {
position: fixed;
bottom: 500;margin:0 auto;
right: 0;margin:0 auto;
width: 1960px;margin:0 auto;
}
div.button {
position: fixed;
bottom: 445;
right: 0;margin:0 auto;
width: 1965px;margin:0 auto;
color: #2EFE2E;
}
</style>
<audio autoplay>
<source src="audi2o.ogg" type="audio/ogg">
<source src="audi2o.mp3" type="audio/mpeg">
</audio>
</head>
<body>
<body bgColor="Black">
<center>
<div class="text">
<font face="calibri light"><font color="white" size="6"><b>--= Exodian 22 =--</b>
<font face="calibri light"><font color="white" size="4"><br>Welcome, We are wanting Problem Solvers from around the Globe,<br>Complete this simple test and we will Let you have
the choice<br>to be invited to our organization.
</div>
<div class="button"
<form>
<form action="Password_1.php">
<input type="submit" value="ENTER" style="font-size:1.1em; color:#FFFFFF;background-color:#071907;">
</form>
</div>
</center>
</body>
So when you save that as a .html, a button and text comes up with a black ground. I want that text and button to be centered and even if you zoomed out it would roughly be in the center. If someone could give me some code and show me where to put it, or just edit what I just gave you that would be awesome :D
Thanks!
* - JIM NASIUM'S GYMNASIUM - Jul 29, 2015
Code tags are your friend.
Code
text-align: center;Add that attribute to the CSS of your body and your text nodes and input elements should be centered.
Also, don't make your shit 1960 pixels wide.
* - Exodian - Jul 29, 2015
I don't really get what you are saying, can you maybe supply you html? sorry Im new :S
* - MidnightWolf - Jul 30, 2015
Probably set up the html as index.html and then make a css folder and add a style.css and then
type in your html file under </head>
<link rel="stylesheet" href="css/style.css">
To get a better looking and it will be easier to setup things.
And in the style.css is where you are going to import your css. 😁
* - JIM NASIUM'S GYMNASIUM - Jul 30, 2015
(Jul 30, 2015 08:45 AM)MidnightWolf Wrote: Probably set up the html as index.html and then make a css folder and add a style.css and then
type in your html file under </head>
<link rel="stylesheet" href="css/style.css">
To get a better looking and it will be easier to setup things.
And in the style.css is where you are going to import your css. 😁
Did you even read the original post? Because you did absolutely nothing to answer his question.
OP: Remove the styles that set width to 1960 pixels and add a style tag to your body that gives the "text-align: center" property.
* - Exodian - Jul 30, 2015
Hey Guys, Thanks for the responses it really helped me out, I did what you said and it worked, and I just looked at another websites source code to find out how they did it with css and showed me a couple of things i didn't know. So now it's centered and working so thank you guys, I have really been needing this for ages :D