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.
