Log In · Register

 
Interested in making a website, need ur help!!
SHAWTYxxSOxxFLY
post Apr 28 2006, 07:30 PM
Post #1


Yall Can't Neva Play Me
***

Group: Member
Posts: 43
Joined: Sep 2005
Member No: 230,431
okay, so I'm trying to learn how to make a website because I want to make a fan site. Now I want my layout to some how end up like this one

CLICK

Now what should I do first to start this up. I already have a site (a practice site), but I don't know where to begin. Help me
 
 
 Start new topic
Replies (1 - 22)
SHAWTYxxSOxxFLY
post Apr 28 2006, 07:37 PM
Post #2


Yall Can't Neva Play Me
***

Group: Member
Posts: 43
Joined: Sep 2005
Member No: 230,431
okay, so I'm trying to learn how to make a website because I want to make a fan site. Now I want my layout to some how end up like this one

CLICK

Now what should I do first to start this up. I already have a site (a practice site), but I don't know where to begin. Help me

PLEASE
 
think!IMAGINARIL...
post Apr 28 2006, 09:49 PM
Post #3


.
*******

Group: Member
Posts: 3,264
Joined: Jan 2004
Member No: 761
in resource center. website. use that stuff to help you design.
 
sprezzatura
post Apr 28 2006, 09:56 PM
Post #4


Peggy.
******

Group: Member
Posts: 2,508
Joined: Aug 2005
Member No: 214,025
It is not a good layout to START with, IMO. It is a good layout and all that, but it is quite hard to do, especially the tables.

You can just start with a two column div layout, tables aren't such a great idea to start out with.

I agree, a mod should move this to resource center>>website.
 
technicolour
post Apr 28 2006, 10:59 PM
Post #5


show me a garden thats bursting to life
********

Group: Staff Alumni
Posts: 12,303
Joined: Mar 2005
Member No: 115,987
Learn design software.

Learn about divs.
 
towntown2
post Apr 28 2006, 11:35 PM
Post #6


Mais je ne l'aime pas
*****

Group: Member
Posts: 971
Joined: Mar 2005
Member No: 108,135
Nobody can truly help you make a site like the one you showed us.
I found that web design and web building are things that you need to learn yourself by trial and error. Lots of trials and errors.

Why don't you show us your practice site so the experts here can help a little?
 
SHAWTYxxSOxxFLY
post Apr 29 2006, 02:19 PM
Post #7


Yall Can't Neva Play Me
***

Group: Member
Posts: 43
Joined: Sep 2005
Member No: 230,431
where would i go from here:

CODE
<html>
<center>
<table cellspacing="1" cellpadding="0" border="0" bgcolor="#000000" id="shell" height="223" width="525">
<tr height="50"><td colspan="2" bgcolor="black">
<table title="Banner" id="banner" border="0">

<tr><td>
<img src="http://img322.imageshack.us/img322/7550/biteme9lm.gif">
</td></tr>
</table>
</td></tr> <tr height="800"><td bgcolor="black">
<table id="navigation" title="Navigation" border="0">
<tr><td><font color="red">Links and other</font></td></tr>
<tr><td><font color="red">things will go</font></td></tr>
<tr><td><font color="red"> here i dont</font></td></tr>
<tr><td><font color="red">quite know yet</font></td></tr>
<tr><td><font color="red">yea soooooo</font></td></tr>

</table>
</td><td bgcolor="black">
<table title="Content" id="content" border="0">
<font color="red">
<tr><td><font color="red">Content goes here</font></td></tr>
</table>
</td></tr></table>
</center>
</html>


so how do i get the words to move toward the top and how do i make the background behind it not white?
 
SHAWTYxxSOxxFLY
post Apr 29 2006, 03:37 PM
Post #8


Yall Can't Neva Play Me
***

Group: Member
Posts: 43
Joined: Sep 2005
Member No: 230,431
also, where do I put the tag that would say what the font color and type is. PLEASE help me! I'm dying of confusion right now
 
talcumpowder
post Apr 29 2006, 03:48 PM
Post #9


You'll find me in your dreams.
*******

Group: Official Member
Posts: 8,536
Joined: Mar 2005
Member No: 114,010
Don't double post. Really. It's been a little over an hour.
[ http://htmlgoodies.com/primers/html/ ]
I suggest you read that, because you haven't even got the basic page structure down. And then, when you've got your basics, move on to the tables part.
[ http://htmlgoodies.com/tutorials/tables/ ]
Or the CSS.
[ http://htmlgoodies.com/beyond/css/ ]

edit// Eurgh. Don't post duplicate topic.
-> Topic Merged.
 
ikn0wurm0m
post Apr 29 2006, 05:29 PM
Post #10


When the sun sleeps.
*****

Group: Member
Posts: 532
Joined: Nov 2005
Member No: 289,628
This actually not that hard. learn divs and how to create graphics and its really simple.

oh its php too by the way.
 
SHAWTYxxSOxxFLY
post Apr 29 2006, 05:53 PM
Post #11


Yall Can't Neva Play Me
***

Group: Member
Posts: 43
Joined: Sep 2005
Member No: 230,431
obviously I did somthing wrong. I put in this:

CODE
<html>
<head>
<title>Two Column CSS Layout</title>
<style type="text/css">

A:link
{ text-decoration: value; [none] color:#000000; }
A:visited
{ text-decoration: value; [line-through] color:#000000; }
A:active
{ text-decoration: value; [none] color:#000000; }
A:hover
{ text-decoration: value; [underline overline] color:#000000;


cursor: value; [crosshair]}

h1 {font-family: value; [arial]
color: value; [#FF00000] }

p {font-family: value; [arial]
color: value; [#FF0000] }

body
{ background: #FFFFFF;
background-image: url(value); [http://tinypic.com/sfxx6f_th.gif]
background-repeat: value; [repeat]
background-attachment: value; [fixed]

font-family: value; [arial]
color: #38B0DE;
letter-spacing: value; [3pt]
font-weight: value; [normal]
font-size: value; [small]


scrollbar-face-color :#FFFFFF;
scrollbar-highlight-color : #FFFFFF;
scrollbar-3dlight-color : #FFFFFFF;
scrollbar-shadow-color : #FFFFFF;
scrollbar-darkshadow-color : #FFFFFF;
scrollbar-track-color : #FFFFFF;
scrollbar-arrow-color : #ED9121;

margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}

td
{ font-family: value; [arial]
color: #FF0000;
padding-left: value; [4cm]
padding-right: value; [4cm]
padding-top: value; [2cm]
padding-bottom: value; [2cm]
padding: value; [2cm]
padding: value value; [2cm] }

input, textarea
{ background: #FFFFFF;
font-family: value; [arial]
color: #EE6AA7;
border-style: value; [dotted]
border-color: #FFFFFF;
border-width: valuepx; [3] }


#menu {
  position: absolute;
  left: 15px;
  top: 160px;
  width: 200px;
    background-color:#FFFFFF;
  border: 1px solid #EE6AA7;
}
#content{
  top: 0;
  margin-left: 230px;
  margin-right: 15px;
  background-color:#FFFFFF;
  border: 1px solid #38B0DE;

}

</style>
</head>
<body>

<div id="menu">

Your menu will go here.  You can place images, text links, etc. in this div.  To change the properties of this layer you can change the #menu selector in the style sheet that is located on this page between the head tags.

</div>


<div id="content">
All of your content goes in this div.  This side is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly.  To change the properties of this div you can change the #content selector in the style sheet that is located on this page between the head tags.
</div>


</body>
</html>


and end up with this:

CLICK
 
talcumpowder
post Apr 29 2006, 05:55 PM
Post #12


You'll find me in your dreams.
*******

Group: Official Member
Posts: 8,536
Joined: Mar 2005
Member No: 114,010
Because that's what you told it to do. mellow.gif You edit this section:
CODE
#menu {
  position: absolute;
  left: 15px;
  top: 160px;
  width: 200px;
    background-color:#FFFFFF;
  border: 1px solid #EE6AA7;
}
#content{
  top: 0;
  margin-left: 230px;
  margin-right: 15px;
  background-color:#FFFFFF;
  border: 1px solid #38B0DE;

}
To move the divs around.
 
SHAWTYxxSOxxFLY
post Apr 29 2006, 06:06 PM
Post #13


Yall Can't Neva Play Me
***

Group: Member
Posts: 43
Joined: Sep 2005
Member No: 230,431
Ohhhh... okay. I didn't notice that. thanks. Can you also tell me why the bg picture won't show?
 
freeflow
post Apr 29 2006, 06:11 PM
Post #14


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270
Try chaging"
CODE
body
{ background: #FFFFFF;
background-image: url(value); [http://tinypic.com/sfxx6f_th.gif]
background-repeat: value; [repeat]
background-attachment: value; [fixed]

font-family: value; [arial]
color: #38B0DE;
letter-spacing: value; [3pt]
font-weight: value; [normal]
font-size: value; [small]


to
CODE
body
{ background: #FFFFFF;
background-image: url("http://tinypic.com/sfxx6f_th.gif");
background-repeat: repeat;
background-attachment: fixed;

font-family: arial;
color: #38B0DE;
letter-spacing: 3pt;
font-weight: normal;
font-size: small;


You editied the stuff inbewteen the [] bracket's your supposed to edit where she put "value" the brackets were just examples for you.
 
starlette
post Apr 29 2006, 06:19 PM
Post #15


RAWR.
******

Group: Member
Posts: 2,585
Joined: Feb 2005
Member No: 102,641
get your hands on dreamweaver. Thats how I built my website. Then ding things like divs and tables and aligning everything properly isnt such a pain.
 
SHAWTYxxSOxxFLY
post Apr 29 2006, 06:35 PM
Post #16


Yall Can't Neva Play Me
***

Group: Member
Posts: 43
Joined: Sep 2005
Member No: 230,431
ok so i fixed all the values but now the boxes aren't showing

CODE
<html>
<head>
<title>Two Column CSS Layout</title>
<style type="text/css">

A:link
{ text-decoration: none; color:#99CC32; }
A:visited
{ text-decoration: line-through; color:#99CC32; }
A:active
{ text-decoration: none; color:#99CC32; }
A:hover
{ text-decoration: underline overline; color:#99CC32;}


cursor: crosshair;}

h1 {font-family: kartika
color: #38B0DE;}

p {font-family: value; [arial]
color: #38B0DE; }

body
{ background: #FFFFFF;
background-image: url(http://tinypic.com/sfxx6f_th.gif);
background-repeat: repeat;
background-attachment: fixed;

font-family: kartika;
color: #38B0DE;
letter-spacing: 3pt;
font-weight: normal;
font-size: 16pt'


scrollbar-face-color :#FFFFFF;
scrollbar-highlight-color : #FFFFFF;
scrollbar-3dlight-color : #FFFFFFF;
scrollbar-shadow-color : #FFFFFF;
scrollbar-darkshadow-color : #FFFFFF;
scrollbar-track-color : #FFFFFF;
scrollbar-arrow-color : #ED9121;

margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}

td
{ font-family: kartika
color: #EE6AA7;
padding-left: 4cm;
padding-right: 4cm;
padding-top: 2cm;
padding-bottom: 2cm;
padding: 2cm;
padding: 2cm; }

input, text area
{ background: #FFFFFF;
font-family: kartika;
color: #EE6AA7;
border-style: dotted;
border-color: #FFFFFF;
border-width: 3px; }


#menu {
  position: absolute;
  left: 0px;
  top: 5px;
  width: 200px;
    background-color: #FFFFFF
  border: 1px solid #EE6AA7;
}
#content{
  top: 0px;
  margin-left: 230px;
  margin-right: 15px;
  background-color:#FFFFFF;
  border: 1px solid #38B0DE;

}

</style>
</head>
<body>

<div id="menu">

Your menu will go here.  You can place images, text links, etc. in this div.  To change the properties of this layer you can change the #menu selector in the style sheet that is located on this page between the head tags.

</div>


<div id="content">
All of your content goes in this div.  This side is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly.  To change the properties of this div you can change the #content selector in the style sheet that is located on this page between the head tags.
</div>


</body>
</html>
 
freeflow
post Apr 29 2006, 06:50 PM
Post #17


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270
I already edited the values for you mellow.gif

Just use this:
CODE
<html>
<head>
<title>Two Column CSS Layout</title>
<style type="text/css">

A:link
{ text-decoration: none; color:#99CC32; }
A:visited
{ text-decoration: line-through; color:#99CC32; }
A:active
{ text-decoration: none; color:#99CC32; }
A:hover
{ text-decoration: underline overline; color:#99CC32;}


cursor: crosshair;}

h1 {font-family: kartika
color: #38B0DE;}

p {font-family: value; [arial]
color: #38B0DE; }

body
{ background: #FFFFFF;
background-image: url("http://tinypic.com/sfxx6f_th.gif");
background-repeat: repeat;
background-attachment: fixed;

font-family: kartika;
color: #38B0DE;
letter-spacing: 3pt;
font-weight: normal;
font-size: 16pt'


scrollbar-face-color :#FFFFFF;
scrollbar-highlight-color : #FFFFFF;
scrollbar-3dlight-color : #FFFFFFF;
scrollbar-shadow-color : #FFFFFF;
scrollbar-darkshadow-color : #FFFFFF;
scrollbar-track-color : #FFFFFF;
scrollbar-arrow-color : #ED9121;

margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}

td
{ font-family: kartika
color: #EE6AA7;
padding-left: 4cm;
padding-right: 4cm;
padding-top: 2cm;
padding-bottom: 2cm;
padding: 2cm;
padding: 2cm; }

input, text area
{ background: #FFFFFF;
font-family: kartika;
color: #EE6AA7;
border-style: dotted;
border-color: #FFFFFF;
border-width: 3px; }


#menu {
  position: absolute;
  left: 15px;
  top: 160px;
  width: 200px;
    background-color:#FFFFFF;
  border: 1px solid #EE6AA7;
}
#content{
  top: 0;
  margin-left: 230px;
  margin-right: 15px;
  background-color:#FFFFFF;
  border: 1px solid #38B0DE;

}
</style>
</head>
<body>

<div id="menu">

Your menu will go here.  You can place images, text links, etc. in this div.  To change the properties of this layer you can change the #menu selector in the style sheet that is located on this page between the head tags.

</div>


<div id="content">
All of your content goes in this div.  This side is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly.  To change the properties of this div you can change the #content selector in the style sheet that is located on this page between the head tags.
</div>


</body>
</html>
 
SHAWTYxxSOxxFLY
post Apr 29 2006, 07:50 PM
Post #18


Yall Can't Neva Play Me
***

Group: Member
Posts: 43
Joined: Sep 2005
Member No: 230,431
okay yeah I'm slow... could you tell where I should put the <center> tag so the boxes will be in the middle.

THANK YOU throb.gif
 
freeflow
post Apr 29 2006, 08:53 PM
Post #19


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270
Well if you want the boxes to be in the center you have to reposition them

To reposition them you would edit the bold.


#menu {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
background-color:#FFFFFF;
border: 1px solid #EE6AA7;
}
#content{
top: 0;
margin-left: 230px;
margin-right: 15px;
background-color:#FFFFFF;
border: 1px solid #38B0DE;

}

Just make the number higher to move more to the right.

to center the text in the boxes put
<center> before the text </center> at teh end.
 
ikn0wurm0m
post Apr 29 2006, 09:14 PM
Post #20


When the sun sleeps.
*****

Group: Member
Posts: 532
Joined: Nov 2005
Member No: 289,628
Your still going to need some php to get it to that level.
 
SHAWTYxxSOxxFLY
post Apr 30 2006, 10:58 AM
Post #21


Yall Can't Neva Play Me
***

Group: Member
Posts: 43
Joined: Sep 2005
Member No: 230,431
ooh btw toya i went to your page and Im am in love with your Ecstatic layout
 
SHAWTYxxSOxxFLY
post Apr 30 2006, 11:57 AM
Post #22


Yall Can't Neva Play Me
***

Group: Member
Posts: 43
Joined: Sep 2005
Member No: 230,431
where do I go from here:

CLiCKY

What should I be doing to it now?
 
freeflow
post Apr 30 2006, 12:14 PM
Post #23


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270
QUOTE(SHAWTYxxSOxxFLY @ Apr 30 2006, 8:58 AM) *
ooh btw toya i went to your page and Im am in love with your Ecstatic layout

Ty =]

QUOTE
where do I go from here:

CLiCKY

What should I be doing to it now?


Now you can add a header image if you want one, add any content , make site pages etc. Just finish up the site now.
 
« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic