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>&nbsp;<a href="iphone.html"
            ><img src="images/iphoneButton.png" width="110" height="25" alt="iPhone Button"
            /></a>&nbsp;<a href="blackberry.html"
            ><img src="images/blackberryButton.png" width="137" height="25" alt="BlackBerry Button"
            /></a>&nbsp;<a href="jailbreak.html"
            ><img src="images/jailbreakButton.png" width="210" height="25" alt="Jailbreak Button"
            /></a>&nbsp;<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;
}

Recommended Answers

All 7 Replies

stop
do not use tables,
go do www.w3schools.com and do some tutorials on the right way to layout your page

css positioned block elements,
css styled appearance
<div> <p>
smaller faster more consistent display over multiple pages
easy debug, maintaining a site with table layout pages is tedious
tables are just bad practice, if you are learning, stay current

would even go so far as to suggest installing netbeans, or another IDE that includes current best practice
If you prefer to work on your own a code highlighting editor like notepad++ or notepad2

good editors use code highlighting to indicate mismatched elements far better than any indenting can

Thank you, I'll start learning it right away.

in css instead of bothering with tables, and having each table cell alter in size by screen resolution, text size, window size, user preference,
you can tell the browser to make eg, a logo, 25% wide 25% high translucent and sit behind the text
have a footer sit at the bottom of the page, regardless of page height (see below) popup displays when you mouseover(image at left of post) or click an object(the arrows above right of post), far better than the alt text usually associated, with images
and other elements resizing to suit the full range of display screens and window sizes from telephones 200*200, to the 8 foot wall projection I get to play with after hours,

from the first tutorial lesson its always an "AHA moment" you can always find another way to use what is essentially a very simple set of rules

I'll give you an idea of a simple fix

<center>
<div style="z-index: 1; position: relative; width: 800px; height: 600px; background-color: #000000;">
<div style="z-index: 2; position: absolute; width: 780px; height: 90px; left: 10px; top: 10px; text-align: left; background-color: #d3d3d3;">
Ron's Iphones
</div>
<div style="z-index: 2; position: absolute; width: 780px; height: 90px; left: 10px; top: 110px; background-color: #ff0000;">
<table align="center" width="780px" height="90px" cellspacing="0" border="0" cellpadding="0">
<tr><td align="center">Button 1</td><td align="center">Button 2</td><td align="center">Button 3</td><td align="center">Button 4</td><td align="center">Button 5</td></tr>
</table>
</div>
<div style="index: 2; width: 370px; height: 385px; left: 10px; top: 210px; background-color: #0000ff;">
Insert random text here.................
</div>
<div style="index: 2; width: 370px; height: 385px; left: 390px; top: 210px; background-color: #00ff00;">
Insert random image here.....................
</div>
</div>
</center>

That will give you a basic layout without any fancy features. All that code does is setup a simple layout with 4 different colored layers and a basic table for the buttons (Layers can do buttons as well but thats a lot of extra code).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.