MooMoo
11-13-2008, 12:43 PM
Hi all,
This is my first post here and pretty much my first venture into any sort of web development. To say that I am finding it challenging and rewarding, even after a few days, is to do a great disservice to how I really feel. :)
One of the challenges I am up against right now is that my website looks fine in Firefox (how I designed it) but not in IE7.
The issue is that it will not center on the page in IE7. I am experimenting with the look where the center of the page has all the info, and the right and left sides are either blank, or a place where secondary and tertiary information would go (or ads, in the future).
Please keep in mind what I said - I am VERY green to web development, so please take it easy on me and use mostly layman's terms in your advice. :o Thanks!
Code:
<html>
<head>
<style type="text/css">
body {background-image: url(http://www.ilyapitin.com/bluegradient.jpg);}
body {font-family:"Comic Sans MS"}
#container { /* this is the holder for the page content */
width: 675px;
border: 2px solid #616D7E;
background-color: #616D7E;
padding: 3px; /* pad the content a little */
margin: 0px auto; /* this centers the container */
}
#header { /* this affects the whole header */
font-family:"Comic Sans MS"
font-style: italic;
background-color: #56A5EC;
}
#header h1 { /* this only affects any h1 tags within the header */
margin: 0; /* remove extra margin from h1 */
padding: 0; /* remove extra padding from h1 */
border-bottom: 1px dotted #616D7E; /* bottom border of header */
font-weight: normal; /* remove bold from h1 tag */
text-align: center; /* center the text */
}
#footer {
border-top: 1px dotted #616D7E; /* top border of footer */
font-size: 60%; /* make the text smaller than body */
color: #616D7E; /* set the text color to gray */
text-align: right; /* right justify the text */
}
#footer a {
text-decoration: none;
border-bottom: 1px dotted #999; /* shorthand for #999999 */
color: #999;
}
#footer a:hover { border-bottom-style: solid; }
-->
</style>
<style type="text/css" media="print">
<!--
footer { display: none; }
-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>www.ilyapitin.com</h1>
</div>
This website will become a testbed for my continuing self-education of web development and programming.
It is currently in its extreme infancy period, and will be changing weekly, if not daily.
<p>The main goal of this page is to, in due time, showcase my skills and abilities using multiple languages.
<p> These languages will include, and aren't limited to:
<li>HTML</li>
<li>CSS</li>
<li>XML</li>
<li>JavaScript</li>
<li>Java</li>
<li>etc.</li>
<p>
I will try and keep a running diary of my accomplishments, triumphs, ideas, and failures. Hopefully not so many failures...
<p>
Also, being a lover of photography, I will be putting up some pictures and perhaps a story or two about them, but this will be a secondary part of the site.
</ul>
</div>
</body>
</html>
This is my first post here and pretty much my first venture into any sort of web development. To say that I am finding it challenging and rewarding, even after a few days, is to do a great disservice to how I really feel. :)
One of the challenges I am up against right now is that my website looks fine in Firefox (how I designed it) but not in IE7.
The issue is that it will not center on the page in IE7. I am experimenting with the look where the center of the page has all the info, and the right and left sides are either blank, or a place where secondary and tertiary information would go (or ads, in the future).
Please keep in mind what I said - I am VERY green to web development, so please take it easy on me and use mostly layman's terms in your advice. :o Thanks!
Code:
<html>
<head>
<style type="text/css">
body {background-image: url(http://www.ilyapitin.com/bluegradient.jpg);}
body {font-family:"Comic Sans MS"}
#container { /* this is the holder for the page content */
width: 675px;
border: 2px solid #616D7E;
background-color: #616D7E;
padding: 3px; /* pad the content a little */
margin: 0px auto; /* this centers the container */
}
#header { /* this affects the whole header */
font-family:"Comic Sans MS"
font-style: italic;
background-color: #56A5EC;
}
#header h1 { /* this only affects any h1 tags within the header */
margin: 0; /* remove extra margin from h1 */
padding: 0; /* remove extra padding from h1 */
border-bottom: 1px dotted #616D7E; /* bottom border of header */
font-weight: normal; /* remove bold from h1 tag */
text-align: center; /* center the text */
}
#footer {
border-top: 1px dotted #616D7E; /* top border of footer */
font-size: 60%; /* make the text smaller than body */
color: #616D7E; /* set the text color to gray */
text-align: right; /* right justify the text */
}
#footer a {
text-decoration: none;
border-bottom: 1px dotted #999; /* shorthand for #999999 */
color: #999;
}
#footer a:hover { border-bottom-style: solid; }
-->
</style>
<style type="text/css" media="print">
<!--
footer { display: none; }
-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>www.ilyapitin.com</h1>
</div>
This website will become a testbed for my continuing self-education of web development and programming.
It is currently in its extreme infancy period, and will be changing weekly, if not daily.
<p>The main goal of this page is to, in due time, showcase my skills and abilities using multiple languages.
<p> These languages will include, and aren't limited to:
<li>HTML</li>
<li>CSS</li>
<li>XML</li>
<li>JavaScript</li>
<li>Java</li>
<li>etc.</li>
<p>
I will try and keep a running diary of my accomplishments, triumphs, ideas, and failures. Hopefully not so many failures...
<p>
Also, being a lover of photography, I will be putting up some pictures and perhaps a story or two about them, but this will be a secondary part of the site.
</ul>
</div>
</body>
</html>