This is my first week of programming in CSS, HTML and PHP. I realized when beginning my site that when I scaled my site by window size that all the text would begin to overlap, cause issues and look terrible.
I was wondering if I could get a clear answer on what I am doing horribly wrong. I have tried methods such as media queries but I still don't understand it at all.
Here is my code:
/* Reset body padding and margins */
body {
margin: 0px;
padding: 0px;
}
/* Make Header Sticky */
#header_container {
background: black;
border: 1px solid #666;
height: 40px;
left: 0;
position: fixed;
width: 100%;
top: 0;
}
#header {
line-height: 5px;
margin: 10px;
auto: width:940px;
text-align: left;
}
#headertext {
font-family: "sans-serif";
size: 20px;
padding: 2px;
font-size: 120%;
text-decoration: none;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
margin: auto;
overflow: auto;
padding: 80px;
width: 100%;
height: auto;
}
#content {}
/* CSS FOR HOME PAGE CONTENTS */
#hometext {
font-family: "arial";
padding: 1px;
font-size: 100%;
text-decoration: none;
position: absolute;
top: 5em;
left: 4em;
color: #585858;
margin-right: 850px;
}
#hometext2 {
font-family: "arial";
padding: 10px;
font-size: 80%;
text-decoration: none;
position: absolute;
top: 7em;
left: 4.24em;
color: #585858;
margin-right: 1200px;
}
#hometext3 {
font-family: "arial";
padding: 1px;
font-size: 100%;
text-decoration: none;
position: absolute;
top: 5m;
left: 65em;
color: #585858;
margin-right: 0;
}
#hometext4 {
font-family: "arial";
padding: 18px;
font-size: 80%;
text-decoration: none;
position: absolute;
top: 10m;
left: 80em;
color: #585858;
margin-right: 0;
}
#home_container<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<title>replay.sc</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
a:link {
color: grey;
}
a:visited {
color: grey;
}
a:hover {
color: white;
}
a:active {
color: grey;
}
text-decoration: none;
}
}
</style>
</head>
<body font="sans-serif" id="container">
<!--- BEGIN: STICKY HEADER -->
<div id="header_container">
<div id="header">
<p><a id="headertext" a href="replay.sc"> replay.sc </a>
<p>
</div>
</div>
<!-- END: STICKY HEADER -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
</div>
</div>
<!-- END: Sticky Footer -->
<div id="home_container">
<h1 id="hometext"> Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
<p id="hometext2"> When the page is generated you will have the option to select which information on the replay you want to display to the public, if you are logged in you will be able to edit this in the future.</p>
<h1 id="hometext3"> Upload a replay pack here to generate a page containing download links for every replay or for a .rar file of every replay. </h1>
<p id="hometext4"> Only basic information for each replay will be made to conserve server load. </p>
</div>
</body>
</html>You're mixing relative and absolute measurements incorrectly. If you are beginners, I would recommend sticking to one model of measurements first and gradually learn how to use the others.
For example, the Stack Overflow is absolutely positioned; if you resize the browser window, nothing will resize. A relatively positioned webpage can adapt the content to the available window size. The JSFiddle site is relatively positioned; it always utilizes the entire window size.
Both model of measurements can produce a good websites, but to produce a successful website though, you have to be intimately familiar with both methods of positioning and how to mix them to produce various effects when used in the same page.
Many people consider absolute positioning to be easier to visualize for beginners; although it has its limitations if you want to create more advanced layouts that works well across widely different screen sizes.
If you want to start with absolute positioning, you first start by deciding a certain width for the overall page. Many people uses a fairly narrow number of pixels that have a large number of even divisibility like 960px or 800px. To make a simple absolutely positioned site, you need to:
position: absolute on most things.For example (edit on jsfiddle or full screen):
#hometext{
font-family: "arial";
font-size: 100%;
text-decoration: none;
color: #585858;
position: absolute;
top: 80px;
left: 60px;
width: 335px;
height: 60px;
line-height: 20px; /* this ensure that 3 lines of text sums up to 3*20px=60px */
}
The drawback of absolutely positioned website is apparent if you try to zoom the site or if your users use a different window size (they'll either have lots of wasted space or have to scroll horizontally. With pure absolute positioning, the website essentially becomes like a static image.
A more modern best practice is to use floated positioning to produce a responsive or elastic website. For this, you need to understand how to float elements and the various layout algorithms. To produce an elastic website you'll need:
For example (edit in jsfiddle or fullscreen). Understanding the various layout algorithm admittedly can be quite difficult, but you will eventually get it naturally if you keep using it for various different layouts.