So, i've made my HTML file, checked it, it all works just so fine.
But how can I make it look "good" ?
I mean, i can't find a way to make these things work out.
Here's my code:

<!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" lang="en" xml:lang="en">

        <head>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
          <title>Web Page</title>
        </head>
<body>

<div id="Lorem">
<p>
<i>Lorem ipsum dolor sit </i>
<i>amet et consectuter adipiscing </i>
<i>elit sum eget dolor penatibus...</i>
</p>


</div>

<!--<div id="casuta">
<img src="images/casuta.png" />
</div>
-->
<div id="December">
<p>10th December</p>
</div>

<div id="Friends">
<p><b>Friends Online</b>
</p>
</div>

<div id="TwoHundredFriends">
<p>

247 Friends

</p>
</div>

<div id="SeeAll">
<p>

See all friends

</p>
</div>

<div id="ceas">
<img src="images/ceas.png" alt=""/>
</div>

<div id="img1">
<img src="images/img1.png" alt="" />
</div>

<div id="editstatus">
<img src="images/editstatus.png" alt="" />
</div>

<div id="img2">
<img src="images/img2.png" alt="" />
</div>



<div id="header">
<img src="images/header.png" height="300" width="1150" alt=""/>
</div>

     <div id="groups">
     <img src="images/multipleusers.png" alt="" />
     </div>

     <div id="business">
     <img src="images/business.png" alt=""/>
     </div>

     <div id ="messages">
     <img src="images/messages.png" alt=""/>
     </div>

     <div id="home">
     <img src="images/home.png" alt=""/>
     </div>

     <div id="privacy">
     <img src="images/privacy.png" alt=""/>
     </div>


     <div id="heart">
     <img src="images/heart.png" alt=""/>
     </div>

     <div id="messagesmall" >
     <img src="images/messagesmall.png" alt=""/>
     </div>


<div id="xbutton" >
<img src="images/xbutton.png" alt=""/>
</div>

<div id="searchbutton">
<img src="images/searchbutton.png" alt=""/>
</div>

<div id="peope">
<img src="images/peope.png" alt=""/>
</div>

</body>
</html>

Now here's my CSS:

#December
{

margin-bottom:30px;
margin-right:100px;
margin-left:100px;
}
#Lorem
{
margin-top:150px;
margin-bottom:50px;
margin-right:200px;
margin-left:100px;
}

#casuta
{
padding-bottom:450px;
padding-top:50px;
padding-left:0px;
padding-right:150px;
}
#peope
{
padding-bottom:0px;
padding-top:0px;
padding-left:50px;
padding-right:100px;
}

What am I doing wrong?
I just don't know why it won't work.. I know the CSS syntax and the HTML so well but..it just..doesn't do it..
Why is that?
Thanks.
Please answer me, I really need that.

Recommended Answers

All 12 Replies

I don't know what "look good" to you and what not? Also, it is odd to me that people like to use "#" and assign ID to elements. That's not what style is intended to be in my opinion. It should be "class" instead of "id" for styling even though "id" is allowed.

Anyway, you also did not assign style to all other elements?

PS: You cannot link HTML to CSS but you can link CSS to HTML. :)

That's not a simple job to accomplish the same look and feel. There are many components in the page. If you want to make your page look similar to what in the picture, I strongly suggest you to first layout the component of each content area the same way the page does.

/*
  The over all page
  +------------------------------------------+
  |              Header Component            |
  +------------------------------------------+
  |                                          |
  |                 Content                  |
  |                                          |
  |                                          |
  |                                          |
  |                                          |
  |                                          |
  |                                          |
  +------------------------------------------+
  |              Footer Component            |
  +------------------------------------------+

  Inside the "Content" part only
   +---------+------------------------------+
   |         |                              |
   |  Left   |             Right            |
   | Portion |            Portion           |
   |         |                              |
   |         |                              |
   |         |                              |
   |         |                              |
   |         |                              |
   |         |                              |
   |         |                              |
   +---------+------------------------------+

   Inside the "Left" portion only
   +--------------+
   | +----------+ |
   | |  Account | |
   | |  summary | |
   | +----------+ |
   |              |
   | +----------+ |
   | |  Friend  | |
   | |   info   | |
   | +----------+ |
   |              |
   | +----------+ |
   | |  Search  | |
   | +----------+ |
   |              |
   | +----------+ |
   | |    Ads   | |
   | |          | |
   | +----------+ |
   +--------------+

   Inside the "Right" portion only
   +------------------------------------+
   | +--------------------------------+ |
   | |                                | |
   | |     Menu & Action portion      | |
   | |                                | |
   | +--------------------------------+ |
   |                                    |
   | +----------------------+ +-------+ |
   | |                      | |       | |
   | |  Recent activities   | |  Nav  | |
   | |                      | |       | |
   | |                      | |       | |
   | |                      | |       | |
   | +----------------------+ +-------+ |
   +------------------------------------+
*/

Thanks buy may you code something in the CSS file?
Just to see how it all works?
Please?
It would really help me..
So in the HTML file I have to use div id to define a picture or a text..and then i'll use # before the name in the .css file, right?

Divs are 'divisions' - blocks that can be used to format a page and hold like elements. There is frequently no need to put each graphic in its own div as a p may do as well.

An 'id' acts as an anchor as well as a css identifier. Id's can be placed inside any element (such as an img) But only one instance of each ID is allowed per page.


Classes (.class) are used when you use the same formatting on multiple elements.

as Taywin indicated, duplicating a complex page is not easy. In his/her post diagramming the indicated page, there are 12 potential divs with 4 probable floats.

Check out http://www.w3schools.com/css/ for some tutorials.

I've read and i know the syntax and everything but .. I just don't get it.. It's really strange, I can't get to link it ..really.
i just need to see one think that's been linked in the CSS file..
Like moved on that page, I just need some examples, that's all.

1. Make sure your css file is properly named and in the proper directory. In your example, the file is 'style.css' (all lowercase) and should be in the same directory as your html page.

But without a live page to look at, there's not much we can do to diagnose anything.

...
I just asked for a CSS file..
One that shows me how the files are linked between each other..
That's what I don't get...
I thought that..
You declare an image (a button) with <div id="button> and then in the css file you just put a # before it and write whatever you need to.
Also i have troubles positioning them.

The css file doesn't link to anything. It's the html file that links TO it.

Here is a sample css file. Its name is spirit.css

body { background: #ffffff; color: #000000;  margin:0; font-family: 'Arial', 'Verdana', 'Helvetica', sans-serif; font-size:62.5%;}
p {  text-align:left; } 
img { border:none; }
a { text-decoration: none; } 
a:link { color: #ff0000; background-color: transparent; } 
a:visited { color: #009999; background-color: transparent; } 
a:active { color: #00FF00; background-color: transparent; } 
h1, h2, h3, h4 { color: #990000; background-color: transparent; text-align:center;} 
fieldset p { text-align:left; margin-left:1em; } 

#main { background: #eeeeee URL(pix/082.jpg); color: #ffffff; font-size:1em;}

#div1 {background: #ffffff;  color:#000000;  border: solid #333333 thin; padding:1em 3em; margin:0 5% 0 5%; } 
#div1 ul {text-align:left; margin-top:0;}
#div1 ul li a {font-weight:bold; font-size:1em;}

#lucky { text-align:center; margin:5px 40% 0 40%; padding:5px; border: solid #990000 thin;}
#lucky select, input { font-size:.8em;}

#amazon {background: #ffffff; color:#000000; text-align:center; margin:5px 40% 0 40%; padding: 0 10px 5px 10px; border:solid #333333 thin; }
#china { background: #eeeeee URL(pix/yinyang.gif); color: #000000;  font-size:.8em;}
.chinadiv {border: solid 2px #990000; padding:1em 3em; width:30em; text-align:center; margin-right: auto; margin-left: auto;}
.div1 { padding: 10px; margin:0 5% 0 5%; border: solid #333333 thin; } 
.div2 {text-align:center; margin:0 5% 0 5%; padding: 10px 5%;}
.div3 {padding: 3px; margin:0 2% 0 2%;  border: solid #333333 thin;}
.div3 ul li a {font-weight:normal;}
.div5 {text-align:center; margin:0 25% 0 25%; padding: 1em 5%; border: solid #333333 thin;}
.center {text-align: center; margin-right: auto; margin-left: auto;}
.noborder {border:none;}
.text4 { font-size:.9em;}
.text4c { font-size:.9em; text-align:center;}
.text3l {font-size:1.2em; text-align:left;}
.text3 {font-size:1em; text-align:left;}
#nav { background-color: #cccccc; color:#000000; margin:0 5%; border: solid #333333 thin; list-style:none; text-align:center; font-size:.8em;}
#nav li {font-size:.9em; display:inline; font-weight:bold;}
.navx a {padding:3px 10px 3px 0; text-decoration:none; }
.nav a {padding:3px 10px 3px 30px; text-decoration:none; background: url(pix/nav082.jpg) no-repeat 0px center;}
.nava a {padding:3px 10px 3px 30px; text-decoration:none; background: url(pix/nav082.jpg) no-repeat 0px center;}
.nav a:hover {color:#333333; text-decoration:underline; background: url(pix/nav082.jpg) no-repeat 0px center;}
.navx a:hover {color:#333333; text-decoration:underline;}
.nava a:hover {background-image: url(pix/nav082.jpg); background-repeat: no-repeat; background-position: 0px center;}
.astnav {width:15%; vertical-align:middle; text-align:center; font-size:90%; border: solid #333333 thin; background-color: #ffffff; color:#000000}
.astnav2 {width:14%; vertical-align:middle; text-align:center; font-size:90%; border: solid #333333 thin; background-color: #ffffff; color:#000000}
.typenav {width:11%; vertical-align:middle; text-align:center; font-size:90%; border: solid #333333 thin; background-color: #ffffff; color:#000000}
.typenav2 {width:11%; vertical-align:middle; text-align:center; font-size:90%; border: solid #333333 thin; background-color: #ffffff; color:#000000}
.colornav2 {width:12%; vertical-align:middle; text-align:center; font-size:90%; border: solid #333333 thin; background-color: #ffffff; color:#000000}
.colornav {width:11%; vertical-align:middle; text-align:center; font-size:90%; border: solid #333333 thin; background-color: #ffffff; color:#000000}
.numnav {width:9%; vertical-align:middle; text-align:center; font-size:90%; border: solid #333333 thin; background-color: #ffffff; color:#000000}

It's part of the css belonging to this:

<!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' xml:lang='en' lang='en'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="spirit.css" type="text/css" />
<title>A web site</title>
<script type="text/javascript" src="java/gmt.js"></script>
</head>
<body id='main'>
<div id='div1' style='margin-top:1%;'>
<h1 class='center'>The Metaphysical Zone</h1>
<!--#include virtual="cgi-bin/quotes.pl" -->
<p class='center'>
	<script type='text/javascript'>
		document.write(washtime);
	</script>
	</p>
<hr />
<p>Blah blah</p>
<div style='border-style: solid; border-color: #990000; border-width: medium; padding: 5px; background: #ffffff; color:#000000; margin:10px 20% 0 20%;'>
<h2 class='center' style='margin-bottom:0px'>What's Here</h2>
<p class='center'><img src='image.gif' alt='image' id="image" /></p>
<ul>
<li><a href='cgi-bin/today.pl'>Today</a></li>
<li><a href='books.shtml'>Bookstore</a></li>
<li><a href='links.shtml'>Links to Other Places</a></li>
</ul>
</div>
</div>
</body>
</html>

try this
<link rel="stylesheet" type="text/css" href="../filename/style.css" />

Would be nice if we could have a few forums dedicated to discussion of web design and questions/discussion on writing standards compliant code. I for one would love to see everyone's web sites that they designed using XHTML and CSS so I could learn even more.


Web Design Company in US

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.