I don't manage to get my name (Eduard Lid) centered on my website (www.eduardlid.net) (I use browser Google Chrome!)
Who knows why?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<head>
<meta http-equiv="content-type" content="text/ html; charset=UTF-8">
<title>Eduard Lid</title>
<link rel="stylesheet" type="text/css" href="ex1.css">
</head>
<body>
<div id="floater">
<ul id="flags">
<li>us<span id="amer"></span></li>
<li>es<span id="spanish"></span></li>
<li>d<span id="germ"></span></li>
<li>nl<span id="dutc"></span></li>
<li>f<span id="fren"></span></li>
</ul>
<p id="work">needs work<span class="right">busca trabajo</span></p>
</div><!--end #floater -->
<div id="vertical">
</div>
<div id="main">
<img id="eduard" src="eduard.JPG" alt="img Eduard Lid">
<iframe id="video" src="http://www.youtube.com/embed/p8QFOBiWvns" frameborder="0"></iframe>
<img id="waterfall" src="waterfall-10.gif" alt="waterfall animation">
<p>Web designer<span class="right">Diseñador de sitios web</span></p>
<p>Translator <span class="right">Traductor</span></p>
<ul id="links">
<li><a href="american.html">more</a></li>
<li><a href="spanish.html">más</a></li>
</div><!--end #main -->
<div id="bottom">
<p id="name">Eduard Lid</p>
<p id="copyright">Copyright © 2012</p>
</div>
</body>
</HTML>
{
margin:0;
padding:0;
list-style-type:none;
}
html,body{
height:100%;
background-color:#6495ED;
width:100%;
}
body {
min-height:368px; /* total vertical height of the #main */
font:bold 18px verdana,arial,helvetica,sans-serif;
}
#floater {
position:absolute;
z-index:1;
width:100%;
min-width:940px;
top:0;
left:0;
}
#flags {
float:right;
width:256px;
height:20px;
margin:10px 0px;
}
#flags li {
position:relative;
float:left;
width:24px;
margin:0 2px;
font-size:8%;
font-weight:normal;
}
#flags a,#flags span {
position:relative;
display:block;
width:20px;
line-height:2px;
font-size:0%;
font-weight:normal;
}
#flags span {
position:absolute;
top:0;
left:0;
width:-6px;
height:24px;
background-position:0 -2px;
}
#flags span:hover {
box-shadow:#eef 0 0 0px;
}
#amer {
background-image:url(americanflag.gif);
}
#spanish {
background-image:url(spanishflag.gif);
}
#germ {
background-image:url(germanflag.gif);
}
#dutc {
background-image:url(dutchflag.gif);
}
#fren {
background-image:url(frenchflag.gif);
}
#vertical{
float:left;
width:100%;
height:50%;
margin-top:-184px;
} / half the total vertical height of the #main /
h4
{
text-color:#ffffff;
text-align:left;
margin-left:20px;
}
#main {
position:relative;
min-width:840px;
height:380px;
clear:both;
background-color:#FFFFF0;
border:4px solid #808080;
}
#player
{
height:70%;
width:30%;
margin-top:2%;
margin-bottom:2%;
margin-right:%;
margin-left:11%;
}
#eduard {
float:left;
width:285px;
border-right:4px solid #808080;
}
#work {
margin-left:350px;
margin-top:100px;
}
#video {
margin:5px 50px 20px 200px;
width:350px;
height:280px;
}
#trabajo {
float:right:
margin-right:290px;
margin-top:50px;
width:50px;
}
.left
{
float:right;
margin-right:4%:
margin-bottom:1%;
}
#waterfall
{
float:right;
width:286px;
border-left:4px solid #808080;
}
#content
{
margin-right:50px;
padding:0px;
font-size:18px;
font-family: Verdana, Geneva, Arial,
SunSans-Regular, sans-serif;
color:#000000;
}
.right
{
margin-left::23%;
padding-left:20%;
margin-top:0,7%;
}
#
#name{
text-align:r[ght;
margin-left:50px;
}
#links {
text-align:right;
font-size: 12px;
}
#links li {
display:inline;
margin:152px;
}
#links a {
color:#696969;
}
#links a:hover {
color:#000000;
}
#copyright {
position:absolute;
width:99%;
bottom:5px;
left:0;
font-size:50%;
text-align:right;
color:#FFFFFF;
}
#idioma {
position:absolute;
float:left;
width:256px;
height:20px;
margin:20px 10px;
font-size:70%;
color:#FFFFFF;
}
