What files do you need for a website?

[Spit-wad]

this would be so much easier if you could provide a link so we could see what you're doing

i don't want to just give you the code, because i firmly believe that this stuff is best learned by trial and error, but it would be easier to give you hints if I could see what you have so far.

 

[synergy]

What I do is create a template page with my HTML structure laid out and the style sheet linked. I have a menu and footer with constant links and/or text, then leave the variable divs blank. Then when I create a new page I just enter some content and rename the page.

Back to the ID vs. class: IDs are good for applying a single group of styling elements to one item. A class can be applied to multiple items. Either can be applied across multiple pages through an external sheet. Finally, you can still assign a class to a div with an ID, and a div with an ID doesn't have to have an ID class (#myID) assigned to it. Does that make sense?

 

[wafflehammer]

do I just have to put another

div.wrapper {
	position:relative;
	margin-left: auto;
    	margin-right: auto;
	width: XXXXpx;
	height: XXXXpx;

inside the first? like have one be like 1000x800 while the smaller (where text goes) be like 600x400(just example numbers)?

 

[synergy]

No, because they have to be unique. So inside wrapper you would want like left, right, middle, whatever then assign desired widths and stuff to those.

 

[Spit-wad]

sure, that would work, but not the same name. put the smaller div inside the bigger one in your html

temporarily add a border (or background color) to the divs if you want to see where they are.

 

[wafflehammer]

well putting one inside the other is just making the smaller one appear on the page and that's it


keeping the site secret for now so sorry, can't make it any easier for you guys

I agree with not just telling code, I need to just do it and absorb it over time

div.wrapper {
	position:relative;
	margin-left: auto;
    	margin-right: auto;
	width: 1000px;
	height: 1200px;
	border:1px solid #green;
	background-color: #white;
}

div.wrapper {
	position:relative;
	margin-left: auto;
    	margin-right: auto;
	width: 700px;
	height: 900px;
}

that's what I have for the css ...but I'm sure I've done something wrong (and I know you said those numbers aren't standard, i'm just using them to mess around with)

<div class="wrapper">

<div id="top">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact Me.</a></li>
</ul> 
</div>

<div id="left">
<ul>
<a href="page2.html">Test crap.</a></p>
more links</p>
more links</p>
more links</p>
more links</p>
</div>

</div>

is the html for the first part ..this allows links on top and on side..but I don't know how to get the middle text stuff to work... I tried putting

<div id="wrapper">

<div id="middle">text here</div>

</div>

before I closed the first wrapper but that just made it the size of the second, smaller wrapper...and the text still appeared under the last link on the left

 

[synergy]

you don't need the "div." in the CSS. You just need .class for a class or #myID for an ID. You also have two styles named the exact same and the browser won't know which one to render. The HTML looks fine.

EDIT: actually...noticed some errors in the HTML code. You have an opening UL tag with no LI's (list elements) and no closing UL tag. Also, you have a bunch of closing Paragraph tags with no opening tags.

 

[wafflehammer]

well i named them differently and it came back with the same result of the smaller appearing(done this awhile ago)

so ditch the "div." part of div.wrapper and where do I put .class and the #myID stuff?


I never really used the opening paragraph EVER but I read on the w3 that's it's good practice to always put the close :\ and the links work fine without the li...the li actually puts a bullet in front of them :| that's why I took it out

 

[synergy]

You can get rid of bullets and stuff with the CSS.

Yes, ditch the div. part. It's kind of redundant.

Here is the CSS and HTML for a really basic template. I commented the CSS to explain what an ID and what a Class is. If you can, view this stuff in a editor that colors the code.

* { padding: 0; margin: 0; }
/*Tag style */
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
/*ID style for the wrapper item (whatever div is given the "id=wrapper" parameter) */
#wrapper { 
 margin: 0 auto;
 width: 922px;

}
/*ID style for the header item*/
#header {
 color: #333;
 width: 900px;
 float: left;
 padding: 10px;
 border: 1px solid #ccc;
 height: 100px;
 margin: 10px 0px 5px 0px;
 background: #BD9C8C;
}
/*ID style for the leftcolumn item*/
#leftcolumn { 
 color: #333;
 border: 1px solid #ccc;
 background: #E7DBD5;
 margin: 0px 5px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 195px;
 float: left;
}
/*ID style for the righttcolumn item*/
#rightcolumn { 
 float: right;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 0px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 678px;
 display: inline;
}
/*/*ID style for the footer item*/
#footer { 
 width: 900px;
 clear: both;
 color: #333;
 border: 1px solid #ccc;
 background: #BD9C8C;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}
/*Class style.  This class can be applied to anything given the "class=category" parameter */
.category {
    border-top: 1px solid #660000;
    margin-top: 10px;
    font-weight: bold;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fixed Width CSS Layouts - 2 Column - fw-12-2-col</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>

   <!-- Begin Wrapper -->
   <div id="wrapper">
   
         <!-- Begin Header -->
         <div id="header">
         
               This is the Header         
               
         </div>
         <!-- End Header -->
         
         <!-- Begin Left Column -->
         <div id="leftcolumn">
         
               Left Column
         
         </div>
         <!-- End Left Column -->
         
         <!-- Begin Right Column -->
         <div id="rightcolumn">
               
              <a href="#">Download this CSS Layout</a>         
         
         </div>
         <!-- End Right Column -->
         
         <!-- Begin Footer -->
         <div id="footer">
               
               This is the Footer        
                
         </div>
         <!-- End Footer -->
         
   </div>
   <!-- End Wrapper -->
   
</body>
</html>

 

[wafflehammer]

that's a lot closer to what I want..but I don't want to different "columns" that are separated..I want them together still