Jump to content

Simple Web Design


Recommended Posts

hi good morning..have a pleasant day to all...I would like to ask some ideas or some help for my codes in web designing because I have this problem...maybe for you,,this is just so simple, but for me, as a beginner, it's not easy because I can't trace the wrong syntax..I'd been trying to trace it but then, the output is still the same..I want to put the text(List of domains) in the upper side,, not in the center of the content because there are still text i want to write and i think it doesn't look right..here is the codes for my design..Thank you and more power

 

 

<html>

<head>

<br/>

<style type="text/css">

 

div.container

{

width:100%;

margin:0px;

border:3px solid black;

line-height:250%;

}

 

div.header,div.footer

{

width:99%;

padding:0.4em;

color:#600;

background-color:#000;

clear:left;

}

h1.header

{

padding:0;

margin:0;

}

 

div.content

{

margin-left:400px;

margin-top:0px;

border-left:1px solid gray;

padding:15em;

}

div#content {

position: absolute;

left: 225px;

top: 128px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 91%;

color: #000000;

line-height: 140%;

width: 707px;

height: 532px;

}

 

div.left

{

float:left;

width:160px;

margin:10;

padding:0em;

}

</style>

 

<script type="text/javascript">

function show_alert()

{

alert("Are you sure you want to delete message?");

}

</script>

 

</head>

 

<body style="background-color:#FFF">

<div class="container">

<div class="header" align="left">

<class="header"><b><font face="Showcard Gothic" color="Red" size="6">A</align></font>

<font face="Showcard Gothic" color="Dark Pink" size="6">c</font>

<font face="Showcard Gothic" color="Blue" size="6">c</font>

<font face="Showcard Gothic" color="Blue" size="6">o</font>

<font face="Showcard Gothic" color="Violet" size="6">u</font>

<font face="Showcard Gothic" color="Violet" size="6">n</font>

<font face="Showcard Gothic" color="Pink" size="6">t</font></b>

<input type="text" name="name" size="25" /> </label>

<input type="submit" name="search" value="Search Mail"/>

 

 

</div>

 

<div class="left">

<form method="POST" action="'.$_SERVER['PHP_SELF'].'">

<br />

<br />

<font color="black" face="Arial">Add Domain</font> <br />

<input type="text" name="domain" size="40"/><br /> </label>

<input type="submit" name="enter" value="GO"/>

<input type="hidden" name="ID" value="1"/>

</form>

</div>

 

<div class="content" align="top">

<div style="width:100%; text-align:center;"><h3>List of Domains:</h3></div>

 

</div>

 

</div>

 

 

 

 

 

</body>

</html>

Link to comment
Share on other sites

For starters, you're missing the doctype.

line break HTML does not belong into the head section. - http://how-to-build-websites.com/2011/basic-html-how-not-to-use-the-line-break-br-tag/

You have no charset.

Look at this: http://how-to-build-websites.com/2011/the-very-basic-html-structure-the-head-section/

 

In your HTML, you're using deprecated tags - the font tag for example, - http://how-to-build-websites.com/2011/basic-html-deprecated-tags/

 

You should limit inline styling for those situations where a style is needed just one time in the entire site. - http://how-to-build-websites.com/2011/adding-css-to-a-webpage/

 

 

This should get you started. Good luck, and let us know if you have any questions.

Link to comment
Share on other sites

I would do this. A class should start with a . and a id should start with a # sign.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">

 

#container

{

width:100%;

margin:0px;

border:3px solid black;

line-height:250%;

}

 

#header

{

width:99%;

padding:0.4em;

color:#600;

background-color:#000;

clear:left;

}

#footer{

serperated from the header

}

#header h1

{

padding:0;

margin:0;

}

 

#content

{

margin-left:400px;

margin-top:0px;

border-left:1px solid gray;

padding:15em;

 

not sure why the is two content areas

 

position: absolute;

left: 225px;

top: 128px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 91%;

color: #000000;

line-height: 140%;

width: 707px;

height: 532px;

}

not sure what this class is for

.left

{

float:left;

width:160px;

margin:10;

padding:0em;

}

</style>

 

hopes this helps a little

Link to comment
Share on other sites

  • 2 weeks later...

Dreamweaver is a good tool, but the main objective of this forum is to teach/learn how to properly build websites - there is more to it than just using some webdesign WYSIWYG feature.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...