PDA

View Full Version : been working on CSS for 5 days now, no progress



simplekin
Apr 1st, 2007, 05:02 AM
Hello, i have been trying to get something to work with css and html to work for 5 days straight without any progress. Here are my questions:

-how do i make a table or a column to hold words and sentences
-how do I align that box with words? (so that it would look the same for all resolutions
-I made my second page adopt my first page's code, but when i fiddle around with the css file, the background image and the menu bar shifts a tiny bit so it looks really bad when you switching pages, how can i do something about it?
-all help would be greatly appreciated.

twodayslate
Apr 1st, 2007, 05:19 AM
CSS just styles. HTML does the content.

Do a simple script.


<!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=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
div { background: red;
margin: 0 auto;
width: 100px;
border: 1px solid black;}
</style>
</head>

<body>
<div>Hey, this is content!</div>
</body>
</html>

That following code will give you a 100px box centered horizontally that says Hey, this is content with a black border!

If you want more specific help please give us your code or a working preview.

simplekin
Apr 1st, 2007, 05:23 AM
CSS just styles. HTML does the content.

Do a simple script.


<!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=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
div { background: red;
margin: 0 auto;
width: 100px;
border: 1px solid black;}
</style>
</head>

<body>
<div>Hey, this is content!</div>
</body>
</html>

That following code will give you a 100px box centered horizontally that says Hey, this is content with a black border!

ok I tried that, it messed up my whole website, this is how my site looks like;



CSS:


body {
margin: 0px;
padding: 0px;
font: Arial, Helvetica, sans-serif;
background-image:url(../pictures/finished laptop backgroundf.jpg);
background-repeat: repeat-y;
background-position:center;

}
#header {
}
#menu {
width: 764px;
height: 1400;
margin: auto;
}




#menu2 {
width: 764px;
height: 1400px;
margin: auto;
}
#content {
width: 100%;


}
#description {
width: 764px;
margin:auto;
height: 1400px;

}

#snddescription {
width: 764px;
margin:auto;
}

#rightcolumn{

padding-top:10px;
width:300px;

padding-left:10px;
border-left: solid 0px #F7EFE2;
padding-right:10px;
text-align:left;
position:fixed;

}


HTML:

<!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=iso-8859-1" />
<title>Cell Shade</title>
<link rel="stylesheet" href="../CSS/master.css" type="text/css">
</head>
<p align="center">
<body background="../pictures/finished laptop backgroundf.jpg">
<body>
<div id="container">
<div id="header">
<div id="menu">
<img src="../pictures/finished lgo 2.jpg" />
</div>
</div>
<div id="content">
<div id="description">


</div>
</div>
</html>
</div>
</div>
</div>

helo sd sgmklnsd lsdkjsdlfn jksdh fsdkfjsdjklf sdlkskl sdklf jsdlfkj sdlkf slkd flksd flksdflk skdjf



<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />




</div>

Arbitrator
Apr 1st, 2007, 09:01 AM
I think that you should start by fixing your XHTML and CSS errors.

ALL elements must be closed in XHTML. Thus, your paragraph and body start tags needs to each be accompanied by an end tag.
An HTML/XHTML document may only have one body element.
URIs may not contain spaces; escape the spaces with the hexadecimal notation %20.
You have more div end tags than you do div start tags.
You have elements outside of the html element. This is not allowed. You also have a paragraph element between the body and head elements; this is also not allowed.
The alt attribute is mandatory for image elements.
The CSS font property requires that both a font size AND a font family be specified; otherwise, it doesn’t work. Use the individual font-size and font-family properties if you only want to set one but not the other.
Length values for the height property require units. I would presume that you meant to indicate a height of 1400 pixels (1400px) for the height of #menu instead of the unitless “1400”.
Remember that the document background must be applied to the html element instead of the body element in XHTML. This also works in HTML, so I would do it in both for consistency.

Next, I would fix some things that are not errors, but are poor practice:

Unless you can name the benefits of using XHTML, I would recommend the use of HTML. Internet Explorer does not support XHTML.
The background attribute is obsolete. Use the CSS background-image property instead.
The align attribute is obsolete. You would use text-align: center or margin-left: auto and margin-right: auto to center inline‐level and block‐level content, respectively.

Also, be warned that Internet Explorer 6 does not support position: fixed.

Sargext
Apr 1st, 2007, 07:26 PM
Maybe a stupid reply but your missing the <script type="text/css"> </script> from the code... you might try adding in comments, even for no one else but you, I was stuck until I found that I was ending a table before I had my code.. so when I put in comments it showed me quickly where I was working. Anyway, just a thought

Arbitrator
Apr 1st, 2007, 07:41 PM
Maybe a stupid reply but your missing the <script type="text/css"> </script> from the code...Not sure what you’re talking about. The first code set has those and the second does not because it’s referencing an external style sheet.


you might try adding in comments, even for no one else but you, I was stuck until I found that I was ending a table before I had my code.. so when I put in comments it showed me quickly where I was working. Anyway, just a thoughtIf you mean comments (<!-- -->) inside the style tags, I wouldn’t recommend that. Otherwise, yes, it’s helpful to add comments when the tags are widely separated:


<div id="container">
… lots of content between here …
</div><!--#container-->

Another way to match tags would be to use consistent indentation and a monospace font. For example (two‐space indentation):


<div>
<div>
</div>
<div>
<div>
<div>
</div>
</div>
</div>
</div>

That tends to be a lots clearer than:


<div>
<div>
</div>
<div>
<div>
<div>
</div>
</div>
</div>
</div>

infotechweb
Apr 20th, 2007, 08:48 AM
sounds like you need help, if you want email: [email protected] and i will send you an Ebook, that comprehensively explains the basics of CSS and goes into detail about the many aspects of it.

ahallicks
Apr 20th, 2007, 11:53 AM
Maybe a stupid reply but your missing the <script type="text/css"> </script> from the code... you might try adding in comments, even for no one else but you, I was stuck until I found that I was ending a table before I had my code.. so when I put in comments it showed me quickly where I was working. Anyway, just a thought

I think you mean <style type=".... >

And to the original poster... you have closed your HTML way before the end of the document?

kosstr12
Apr 20th, 2007, 10:23 PM
If you're trying to make an HTML table its really rather easy, this is the code for a basic table with 2 rows and 2 columns:
<html>
<title>Example Page</title>
<head>
</head>
<body>

<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

Notice that you replace 1&2 with the table headers, and 3 and 4 with the statements you want to put under the header. If you need anymore help with HTML or CSS please e-mail me @ [email protected]:thumbsup:



Hope I offered at least a little help