Hey guys, like I said before, im new to html and css and im having some trouble with the layout of my website.
I basically have 2 problems/question.
1- I am trying to align the content of my page... but i am having a hard time. I've attached a picture of how my content should look like and how it looks like for the moment.
2- why is it that, for example, I place my logo where i wanted... and then if i add some other items to the table, my logo moves! why!?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="main.css" rel="stylesheet" type="text/css" />
<title>Welcome to Ron iPhone Store</title>
</head>
<body>
<table>
<!--Website Logo-->
<tr><td id="Logo">
<img src="images/logo.jpg" width="359" height="59"/>
</td></tr>
<!--Menu buttons-->
<tr><td id="menuButtons">
<a href="template.html"
><img src="images/homeButton.png" width="110" height="25" alt="Home Button"
/></a> <a href="iphone.html"
><img src="images/iphoneButton.png" width="110" height="25" alt="iPhone Button"
/></a> <a href="blackberry.html"
><img src="images/blackberryButton.png" width="137" height="25" alt="BlackBerry Button"
/></a> <a href="jailbreak.html"
><img src="images/jailbreakButton.png" width="210" height="25" alt="Jailbreak Button"
/></a> <a href="accessories.html"
><img src="images/accessoriesbutton.png" width="154" height="25" alt="Accessories Button"
/></a>
</td></tr>
<!--Page content-->
<tr><td>
<table>
<tr>
<!--left content-->
<td id= "greetingContent">
<p>
Ward Cunningham and co-author Bo Leuf, in their book The Wiki Way: Quick Collaboration on the Web, described the essence of the Wiki concept as follows:
A wiki invites all users to edit any page or to create new pages within the wiki Web site, using only a plain-vanilla Web browser without any extra add-ons.
Wiki promotes meaningful topic associations between different pages by making page link creation almost intuitively easy and showing whether an intended target page exists or not.
A wiki is not a carefully crafted site for casual visitors. Instead, it seeks to involve the visitor in an ongoing process of creation and collaboration that constantly changes the Web site landscape.
A wiki enables communities to write documents collaboratively, using a simple markup language and a web browser. A single page in a wiki website is referred to as a "wiki page", while the entire collection of pages, which are usually well interconnected by hyperlinks, is "the wiki". A wiki is essentially a database for creating, browsing, and searching through information. A wiki allows for non-linear, evolving, complex and networked text, argument and interaction.[12]
A defining characteristic of wiki technology is the ease with which pages can be created and updated. Generally, there is no review before modifications are accepted. Many wikis are open to alteration by the general public without requiring them to register user accounts. Sometimes logging in for a session is recommended, to create a "wiki-signature" cookie for signing edits automatically.[citation needed] Many edits, however, can be made in real-time and appear almost instantly online. This can facilitate abuse of the system. Private wiki servers require user authentication to edit pages, and sometimes even to read them.
Maged N. Kamel Boulos, Cito Maramba and Steve Wheeler write that it is the "openness of wikis that gives rise to the concept of 'Darwikinism', which is a concept that describes the 'socially Darwinian process' that wiki pages are subject to. Basically, because of the openness and rapidity that wiki pages can be edited, the pages undergo a natural selection process like that which nature subjects to living organisms. 'Unfit' sentences and sections are ruthlessly culled, edited and replaced if they are not considered 'fit', which hopefully results in the evolution of a higher quality and more relevant page. Whilst such openness may invite 'vandalism' and the posting of untrue information, this same openness also makes it possible to rapidly correct or restore a 'quality' wiki page."[13]
</p>
</td>
<!--right content-->
<td id = "homeImage">
<img src="images/homeImage.jpg" width="371" height="375" />
</td>
</tr>
</table>
</td></tr>
</table>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
/*Background Image*/
body{
background:url(images/background.jpg);
background-position:center;
background-repeat: repeat-y;
}
/*Centering table*/
table{
margin: 0 auto;
text-align:left;
}
/*All row max width = 1016px*/
td{
max-width:1016px;
}
/*aligning the logo*/
td#Logo img {
margin: 0 0px 0 20px;
}
/*aligning the menu buttons*/
td#menuButtons img{
margin: 30px 0px 30px 45px;
}
/*aligning the leftContent*/
td#greetingContent{
padding: 0 0 0 0px;
}
/*aligning the right content*/
td#homeImage {
max-width:500px;
}