Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I made a simple search engine, all works well except for the design aspect. On the PC, the buttons appear top central but as soon as we get the design up on a phone, buttons are top right.
Applied one change, this is the updated version.
Phone: Android, Samsung Galaxy S4, 5 Inch 1080x1920
Full Code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Search</title>
<style>
*{margin:0px;
padding:0px;
}
#menu {
height:38px;
padding-top:0px;
background-color:white;
margin-left: auto
margin-right: auto
}
.photo {
position:relative;
font-family:arial;
overflow:hidden;
border:0px;
width:811px;
height:98px;
margin-left:250px;
}
.photo .heading, .photo .caption {
position:absolute;
background:#000;
height:50px;
width:816px;
opacity:0.6;
}
.photo .heading {
top:-50px;
}
.photo .caption {
bottom:-42px;
left:3px;
}
.photo .heading span {
color:#26c3e5;
top:-50px;
font-weight:bold;
display:block;
padding:5px 0 0 10px;
}
.photo .caption span{
color:#FF0;
font-size:16px;
display:block;
padding:5px 10px 0 10px;
}
.footer {
font-family: Calibri;
font-size: 18px;
color: #000;
}
head {
text-align: center;
}
menu1 {
text-align: center;
}
.footer a {
text-align: center;
}
.menuhead {
font-family: Calibri;
}
.menuhead {
font-size: 24px;
}
.menuhead {
font-size: 18px;
}
.footer1 {
text-align: left;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 18px;
color: #000;
}
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu"><ul id="MenuBar1" class="MenuBarHorizontal">
<li>Books </li>
<li>Add Url</li>
<li>About Us</li>
<li>Contact Us</li>
</ul></div>
<p><center>
<p class="menuhead"><br>
</p>
<br>
</center>
</div>
<center>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<img src="images/img2.png" width="817" height="110">
</center>
<form action="/search/search.php" method='GET'>
<center>
<p><br>
</p>
<p> </p>
<p>
<input name='search' type='text' class="footer1" size='50'></font></p>
<p> </p>
</center>
<p class="footer1"><center>
<input name='submit' type='submit' class="footer1" value='Search Now'>
</center>
</p>
</form>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1">
<p class="footer1">
<p class="footer1">
<center>
<g:plusone size="tall" annotation="i0nline"></g:plusone>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</center></p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Take a look at my fiddle, the blue box is your old menu and the red box is my new menu.
https://jsfiddle.net/mykx37n9/4/
see how the red box stays centered, I used margin-left: auto margin-right: auto
#menu-2 {
height:38px;
width: 50px;
margin-left: auto;
margin-right: auto;
background-color: red;
}
You had your margin set to a fix sized, by changing it to auto it is now a relative size based off screen width.
EDITED FOR UPDATED QUESTION
Use this:
#menu {
height:38px;
padding-top:0px;
background-color:white;
text-align: center;
}
Here is the fiddle http://jsfiddle.net/28m3fpcv/6/
Also, remove this css, it is not valid:
head {
text-align: center;
}
menu1 {
text-align: center;
}
changed the line left: 500px to left: 50%;
#menu {
height:38px;
padding-top:0px;
background-color:white;
position: absolute;
top: 19px;
left: 50%; /* here it is */
margin-right: -50%; /* also this might be causing problem so try removing this line */
transform: translate(-50%, -50%) }
}
you can use this way to make your menu items align horizontally -
#menu ul li {
display: inline-block;
margin: ; /* add any margin you need between those buttons */
}
and to center the whole menu use the above method I described by removing margin-right: -50% OR go with margin: 0 auto; as suggested by others.
Related
i have a problem where my footer element is not at the bottom of the page while i browse the page over mobile this my html
<!DOCTYPE html>
<html>
<head>
<title>Ziad Alian</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h4>Ziad Alian</h4>
<img class="imgz" src="zCmakv5P_400x400.jpg"/></img>
<ul>
<li>ABOUT ME</li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
<hr>
<div>
<p id="hello">Hello World! </p>
<p id="aboutme">I'm Ziad Alian a 26 years old Software Developer. Born in the 331 BC ancient city of Alexandria, Egypt.<br/>
I studied Geomatics but I don't like it cause computer science is my passion.<br/>
I'm a self taught web developer, My goal is to be a fucll stack developer using
HTML5, CSS, JavaScript, React, Python and Django.<br/>
I love programming and everything that has to do with technology, the internet and writing code.
</p>
</div>
<hr>
<div id="contact">
<ul>
<li>GitHub </li>
<li>LinkedIn </li>
<li>Twitter </li>
<li>Instagram </li>
</ul>
</div>
<br>
<footer>© 2020 Ziad Alian</footer>
</body>
</html>
And this is my CSS
this where my footer element been added
footer {
background-color: black;
color: white;
padding: 0.5em;
}
Edit
i added this code
body {
background-color:whitesmoke;
min-height: 100%;
display: flex;
flex-direction: column;
}
h4 {
text-align: center;
font-size: 68px;
font-weight: 80;
color: teal;
}
.imgz {
width: 200px;
border-radius: 50%;
}
#hello {
text-align: center;
font-size: 30px;
color: teal;
}
#aboutme {
font-size: medium;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
p {
text-align: justify;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color:white;
padding: 0.5em;
margin: 0;
margin-top: auto;
}
and it's now fixed like it's just go down and up with me while i scroll the page i just want it to stay at the bottom
mywebsite
You have not integrated some properties into the CSS-file.
You have not integrated the block of the element footer into the HTML-file.
New footer properties
footer {
background-color: black;
color: white;
padding: 0.5em;
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
}
Old footer properties
footer {
background-color: black;
color: white;
padding: 0.5em;
}
New footer
<footer> © 2020 Ziad Alian</footer>
These properties fix the object for the view of the user visiting the website, which means that the object is dynamic for the view of the user.
You could also try giving the main section a min-height: 100vh so to push the footer down. See if that helps.
Try using position: fixed to keep your footer pinned to the bottom of the viewport.
When using fixed positioning, you'll also want to be sure you set the left: 0 and width: 100% properties to make the footer the same width as the viewport.
footer {
background-color: black;
color: white;
padding: 0.5em;
position:fixed;
bottom:0;
left:0;
width:100%
}
<footer>© 2020 Ziad Alian</footer>
I have developed a website for you with the same structure as your old website, but with only minor changes.
The source code now has a better structure.
Comments have been added to avoid losing track of the source code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB"><head>
<title>2020 Ziad Alian</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<!-- Header start -->
<h1>
<center>2020 Ziad Alian</center>
</h1>
<!-- Header end -->
</div>
<div id="body">
<!-- Body start -->
<center>
<img class="imgz" src="zCmakv5P_400x400.jpg"></img>
<p>
<a href="https://LinkToTheWebsite.com">
<li> ABOUT ME</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>PROJECTS</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>CONTACT</li></a></p>
</center>
<hr>
<p>
<center style="font-size: 30px"> HELLO WORLD</style></center>
</p>
<center>
<p><strong>I'm Ziad Alian a 26 years old Software Developer. Born in the 331 BC ancient city of Alexandria, Egypt.<br><br>
I studied Geomatics but I don't like it cause computer science is my passion.<br><br>
I'm a self taught web developer, My goal is to be a fucll stack developer using HTML5, CSS, JavaScript, React, Python and Django.<br><br>
I love programming and everything that has to do with technology, the internet and writing code.</strong>
</p>
</center>
<hr>
<center>
<p>
<a href="https://LinkToTheWebsite.com">
<li> GitHub</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>LinkedIn</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>Twitter</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>Instagram</li></a></p>
</center>
<!-- Body end -->
</div>
<div id="footer">
<!-- Footer start -->
<center>
<p><font color="#FFFFFF">© 2020 Ziad Alian</font></p>
</center>
<!-- Footer end -->
</div>
</div>
</body>
</html>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#000000;
}
.imgz {
border-radius: 50%;
}
#header p,
#header h1 {
margin:0;
padding:10px 0 0 10px;
}
#footer p {
margin:0;
padding:10px;
}
When I am using the CSS float Property its working partly perfect
as we can see in the HTML that ID #contact float perfect in the right side but the ID #workExperiance should be below the full name in normal order how to do that its also floating.
Require detailed explanation
body {
font-family: Arial, sans-serif;
font-size: 1.1em;
width: 75%;
margin: 0 auto;
}
.main {
color: #4EC5C1;
}
#name {
float: left;
}
#contact {
float: right;
list-style-type: none;
}
<html lang="en">
<head>
<title>Full Name Resume</title>
<meta charset=utf-8>
</head>
<body>
<div>
<section>
<h1 id="name"><span class="main">full </span> Name</h1>
</section>
<section>
<ul id="contact">
<li><span class="main">Cell:</span> +1-000000000</li>
<li><span class="main">Email: </span> aaaaaa#gmail.com</li>
<li><span class="main">Location:</span> NY,USA.</li>
</ul>
</section>
</div>
<section id="workExperiance">Work Experience</section>
</body>
</html>
add div{float:left; width:100%;} it'll work
body {
font-family: Arial, sans-serif;
font-size: 1.1em;
width: 75%;
margin: 0 auto;
}
div{float:left; width:100%;}
.main{color: #4EC5C1;}
#name{float:left;}
#contact{float:right;list-style-type:none;}
<html lang="en">
<head>
<title>Full Name Resume</title>
<meta charset=utf-8>
</head>
<body>
<div>
<section><h1 id = "name"><span class = "main">full </span> Name</h1></section><section>
<ul id="contact"><li><span class = "main">Cell:</span> +1-000000000</li>
<li><span class = "main">Email: </span> aaaaaa#gmail.com</li>
<li><span class = "main">Location:</span> NY,USA.</li></ul></section>
</div>
<section id="workExperiance">Work Experience</section>
</body>
</html>
body {
font-family: Arial, sans-serif;
font-size: 1.1em;
width: 75%;
margin: 0 auto;
}
.main{color: #4EC5C1;}
#name{float:left; display:block;}
#contact{float:right;list-style-type:none; width:50%; padding:0; display:block}
#workExperiance{
float:left;
display:block;
}
#left{
width:40%;
float:left;
}
<html lang="en">
<head>
<title>Full Name Resume</title>
<meta charset=utf-8>
</head>
<body>
<div>
<div id="left">
<section><h1 id = "name"><span class = "main">full </span> Name</h1></section> <section id="workExperiance">Work Experience</section></div><section>
<ul id="contact"><li><span class = "main">Cell:</span> +1-000000000</li>
<li><span class = "main">Email: </span> aaaaaa#gmail.com</li>
<li><span class = "main">Location:</span> NY,USA.</li></ul></section>
</div>
</body>
</html>
Always use display:block and special width when floating
Use clear: both Read more about Clear
The clear CSS property specifies whether an element can be next to
floating elements that precede it or must be moved down (cleared)
below them. The clear property applies to both floating and
non-floating elements.
body {
font-family: Arial, sans-serif;
font-size: 1.1em;
width: 75%;
margin: 0 auto;
}
section#workExperiance {
clear: both;
}
.main {
color: #4EC5C1;
}
#name {
float: left;
}
#contact {
float: right;
list-style-type: none;
}
<div>
<section>
<h1 id="name"><span class="main">full </span> Name</h1>
</section>
<section>
<ul id="contact">
<li><span class="main">Cell:</span> +1-000000000</li>
<li><span class="main">Email: </span> aaaaaa#gmail.com</li>
<li><span class="main">Location:</span> NY,USA.</li>
</ul>
</section>
</div>
<section id="workExperiance">Work Experience</section>
P.S: And better use div in this case and no need to use section. Normally section use for parent wrapper.
i am new here and generally i recently started to learn webdev and i am trying to make little "portfolio" website to train practice skills. I have one problem what i can't solve, and i am siting with eyes on screen about few hourse what makes me so confused
First issue is whitespace on right side of the page.
2.Next issue is a lot of whitespace what remaining after relative positioning.
How can with these get rid of these things?
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<!--header-->
<header>
</header>
<div class = "container">
<div class="text">
<h1 id = "h1">“The life of a designer...” </h1>
<h2 id = "h2">Is a life of fight. Fight against the ugliness.
Just like a doctor fights against disease. For us,
the visual disease is what we have around, and what we
try to do is cure it somehow with design.</h2>
<h3>– Massimo Vignelli. </h3></div></div>
<div class="txt">
<p id ="one">Hi, i am webdeveloper<id></id></p>
<p id ="two">If you want work with me</p>
<p id ="three">leave a message.</p>
</div>
<div class = "icons">
<img src = "icons/cheap.png" alt = "cheap" id="cheap"/>
<img src = "icons/Trust.png" alt = "trust" id="trust"/>
<img src = "icons/timeliness.png" alt = "timeliness" id="timeliness"/>
<img src ="icons/developing.png" alt ="developing" id="developing"/>
</div>
<div class = "Social">
<img src ="icons/facebook.png" alt ="fb" />
<img src ="icons/instagram.png" alt ="insta" />
<img src ="icons/linkedin.png" alt = "linkedin"/>
</div>
<!--Overview-->
<section>
<article>
Aaaa
</article>
</section>
<!-- Social media icons-->
<aside>
</aside>
<footer>
</footer>
</body>
</html>
CSS:
#font-face {
font-family: myFirstFont;
src: url(/fonts/Graviola_Regular.otf);
}
#font-face {
font-family: czcionka;
src: url(/fonts/czcionka.ttf);
}
body {
margin:0px;
padding:0px;
}
header{
background-image:url(bg1.jpg);
background-repeat:no-repeat;
height:800px;
opacity: 0.8;
background-size:100% 100%;
}
.txt {
position:relative;
right:-50px;
top:-1120px;
border-left:3px solid white;
font-family:czcionka;
}
.txt #one {
position:relative;
color:white;
font-size: 50px;
position:relative;
bottom:-60px
}
.txt #two {
position:relative;
color: white;
font-size: 50px;
}
.txt #three {
position:relative;
color: white;
font-size: 50px;
top:-60px
}
.container .text {
color:white;
text-align: center;
position:relative;
top: -450px;
margin: 50px;
font-family: myFirstFont;
}
.container .text #h1 {
font-size:60px;
border-bottom: 3px solid;
font-family:myFirstFont;
}
.container .text #h2 {
font-size: 25px;
font-style:italic;
}
.container .text #another {
position: relative;
top:-500px;
font-family:myFirstFont;
font-size:40px;
}
.Social {
position: relative;
top:-1460px;
right:-50px;
margin:500px;
}
.icons #cheap {
position: relative;
top:-1139px;
right:-1225px
}
.icons #timeliness {
position:relative;
top:-1140px;
right: -1110px
}
.icons #developing {
position:relative;
top:-1140px;
right:-750px;
}
Here's link to img how this looks. When i scroll down page rest of my site elements are very far down.
Like this looks the white space what i talking about
So I've noticed in my website that there if you scroll to the right (not as if there is any content to the right) there is a long vertical white strip. This is only if you scroll that you'll see it. This is only alongside certain div elements. Once I get to the rows, the content just stretches to the extra space to the right rather than have the white space as well. Since the problem isn't consistent, I've included all the HTML and CSS code to see if there may be two problems in two separate locations.
This is the HTML
<!DOCTYPE HTML>
<html>
<head>
<title>ACA Technology</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="MyWebsite.css">
</head>
<body>
<div id="infoHeader" class="header">
<div id="header_container">
<!-- header -->
<header class="header_shadow nav_type_12 sticky_header header_to_shrink clearfix" >
<div style="float: left; margin-left: 20px">
<h2> EAZYnetz </h2>
</div>
<div style="float: right; margin-right: 10px">
<button id="home" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-home"></span> Home</button>
<button id="ourApps" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-phone"></span> Our Services</button>
<button id="contactUs" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> Contact Us</button>
</div>
</div><!-- end panel-footer -->
</div>
</div>
<div class="Home">
<div id="bigPicture" class="container" align="center">
<h1>BUILD YOUR EMPIRE.</h1>
<p>Every idea needs a website to express itself. Tell us what you need and how you'll like it. We'll make the layout, animation, and paint the final picture to your future method of advertisement.</p>
</div>
</div>
<div id="OurServices">
<div id="information" class="row">
<h3 align="center"> What's included in any option </h3>
<hr>
<div class="col-sm-4">
<h3>Your preferences</h3>
<p> Every idea needs a website to express itself. Tell us what you need and how you'll like it, then we'll make it perfect.</p>
</div>
<div class="col-sm-4">
<h3>Layout</h3>
<p> Tell us how you want everything formatted and where to place what according to your liking. </p>
</div>
<div class="col-sm-4">
<h3>Content</h3>
<p>What do you want to show your costumers? What do you want them to see? Put whatever you want to express on your webpage, no limits.</p>
</div>
</div>
<div id="servicesInfo" class="row">
<h3 align="center"> Choices to pick from</h3>
<hr>
<div class="col-sm-4">
<h3>Front End </h3>
<p>This consists of content text only.</p>
</div>
<div class="col-sm-4">
<h3> Front End + Design </h3>
<p>This consists of the content text and the design (colors, layout, menu, animation, etc). </p>
</div>
<div class="col-sm-4">
<h3>Whole Package <br> Front End + Design + Databases </h3>
<p> This is the whole package. It consists of the text of the website, design of the website, and the databases(forums, users, etc) in the website. <p>
</div>
<p> Overall price depends on level of complexity and number of pages </p>
</div>
</div>
<div id="ContactUs" class="jumbotron">
<div class="container">
<h3>Contact Us</h3>
<ul style="list-style-type:none">
<li><span class="glyphicon glyphicon-earphone"></span> 647-550-3998</li>
<li><span class="glyphicon glyphicon-envelope"></span> temporary#easynetz.net</li>
</ul>
<p> If you're interested or have any questions or concerns,<br> feel free to contact us. </p>
</div>
</div>
</body>
</html>
This is the CSS
a{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
}
p{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
font-size: 25px;
}
h1, h2, h3{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
font-size: 35px;
}
li{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
font-size: 25px;
color: #FFFFFF
}
#infoHeader{
height: 70px;
background-color: #1A1C27;
}
.header button{
position: relative;
top: 50%;
transform: translateY(50%);
}
.header a{
text-decoration: none;
}
.body{
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
.Home{
height: 573px;
background-image: url("clouds.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.Home h1,h2,h3{
color: white;
font-weight: 900;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
.Home p{
color: white;
font-weight: 900;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
.Home .container h1{
margin-top: 170px;
}
.top button{
background-color: black;
color: black;
font-size: 18px;
padding: 8px 30px;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
}
#theName{
color: white;
}
#information{
background-color: #68ABDD;
}
#information h3{
color: #ffffff;
text-align: center;
font-size: 20px;
}
#information p{
text-align: center;
font-size: 14px;
color: #ffffff;
}
#servicesInfo h3{
color: #ffffff;
text-align: center;
font-size: 20px;
}
#servicesInfo p{
text-align: center;
font-size: 14px;
color: #ffffff;
}
#servicesInfo{
background-color: #ff0000;
}
#ContactUs{
height: 635px;
padding:0!important;
margin:0 !important;
background-image: url("http://hdwallpaperspretty.com/wp-content/gallery/beautiful-buildings-wallpapers/Best-top-desktop-3d-buildings-wallpapers-hd-3d-buildings-wallpaper-13.jpg");
background-repeat: no-repeat;
}
#ContactUs{
color: white;
}
#contactHeader{
padding:0;
margin:0;
}
add following class to your CSS
#information, #servicesInfo {
margin: 0;
padding: 0;
}
you can fix that with adding the next css to the html tag on the html file or target the html on the css file:
overflow-x:hidden
The overflow means scrolling when the elements on the page are too big for the page. I didn't check your code to the end in order to see which element is too big for the page but this is a quick way to fix that.
The best option though is to check which element is too big and resize it with css in which way you want to.
One way is
max-width:100%;
I'm very new to html and css so feel free to critique any bad practices you see in the code below...
I am trying to create a centered column that's 800 pixels across and the banner will be resized to 800 pixels. When view this page in chrome or firefox it looks great. When I view it in IE8 the font is huge, there is a giant empty spot on the right side of the banner all the way down to the bottom, and the size of the "container" will not change no matter what I do in the css file.
CSS:
body {
font-family: Arial;
font-size: small;
background-color: #FFFFFF;
background-image: url(../images/victorianBackground.jpg);
background-position: top;
background-repeat: repeat;
color: #000000;
}
#container {
margin: -10 auto;
background-color: #D3CDBA;
text-align: left;
}
html>body #container {
width: 800px;
min-height:800px;
padding: 0 0px;
}
#banner {
width:800px;
}
#banner img {
width:800px;
padding:45 0px;
}
#content {
width:500px;
padding: 15px;
background-color: transparent;
}
/* Navigation */
#navigation ul {
list-style-type: none;
width: 800px;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
background-color: #D3CDBA;
}
#navigation li:hover {
float: left;
color: #4676A4;
background-color: #D3CDBA;
}
#navigation a {
font-weight: bold;
text-decoration: none;
color: #000000;
display: block;
padding: 5px;
}
#navigation a:hover {
font-weight: bold;
text-decoration: none;
color: #992332;
}
#content a {
color:teal;
}
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Park Avenue Neighborhood Association</title>
<meta name="keywords" content="Park Avenue Neighborhood Association Syracuse New York"/>
<link rel="stylesheet" type="text/css" href="../styles/style1.css">
</head>
<body>
<div id="container">
<div id="banner">
<img src="../images/banner.jpg" id="banner">
<br/>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>History</li>
<li>Houses</li>
<li>Local Business</li>
<li>Events</li>
<li>Contacts</li>
</ul>
</div>
<div id="content">
<h2>Content Header 1 </h2>
<p>Awesome Content </p>
<h2>Content Header 2 </h2>
<p>Awesome Content </p>
</div>
</body>
</div>
</html>
There are multiple issues I see with your source. Non-exhaustive list:
1) You need a doctype. Otherwise, browsers will render items in a non-standard way.
Example:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2) You have a <div> ending after the </body> tag. This is invalid.
Fix:
<p>Awesome Content </p>
</div>
</div>
</body>
</html>
3) You don't need the extra <br> in <div id="banner">.
Fix:
<div id="banner">
<img src="../images/banner.jpg" id="banner">
</div>
4) Now, if you want <div id="container"> to be centered and have a width of 800px, try the following.
Centering code that goes in your css (replaces existing):
body { text-align: center; }
#container {
text-align: left;
width: 800px;
margin: auto;
}
5) For your font-size declaration, you're using small. This will behave unpredictably. Instead, consider using either em or px for font size.
Font size with em:
body { font-size: 100%; line-height: 1.125em; }
#container { font-size: 0.875em; }
Font size with px:
body { font-size: 16px; line-height: 1.125em; }
#container { font-size: 12px; }
First thing I saw, you need to add this to the very first line of your HTML to force IE to render in standards mode, instead of quirks mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
In regard to centering the banner, try adding the following:
in body selector:
text-align: center;
in banner:
margin-right: auto;
margin-left: auto;
In regard to font size try using em or % sizing.
Other than that just tackle the problems one at a time, fine tune the details incrementally. Throwing in everything all at once will only create confusion - chances are it wont work as expected, but will frustrate you.