Member Avatar for eduardar

How can I put the flag icons of my website (www.eduardlid.net) at the same place, but with a different size (24 * 24) (now it´s 48 * 48)?

<!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=UTF-8">
<title>Eduard Lid</title>
<link rel="stylesheet" type="text/css" href="ex1.css">


</head>

<body>

<div id="floater">

<ul id="flags">
 <li>american<span id="amer"></span></li>
 <li>spanish<span id="span"></span></li>
 <li>german<span id="germ"></span></li>
 <li>dutch<span id="dutc"></span><</li>

</ul>

</div><!--end #floater -->

<div id="vertical"></div>

<div id="main">

<img id="eduard" src="eduard.JPG" alt="img Eduard Lid">
<img id="lake" src="lake.jpg"  alt="lake">

<div id="content">

<p>Web design<span class="right">Dise&#241;ador de sitios web</span></p>
<p>Translator<span class="right">Traductor</span></p>

<h1>Eduard Lid</h1>

<ul id="links">
 <li><a href="spanish.html">m&#225;s</a></li>

</ul>

</div>

</div><!--end #main -->

<p id="copyright">Copyright &copy; 2012</p>


</body>
</HTML>


* {
    margin:0;
    padding:0;
    list-style-type:none;
 }
html,body{
    height:100%;
    background-color:#008;
 }
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:252px;
    height:24px;
    margin:15px 9px;
 }

#flags li {
    position:relative;
    float:left;
    width:47px;
    margin:0 8px;
    font-size:50%;
    font-weight:normal;
}


#flags a,#flags span {
    position:relative;
    display:block;
    width:24px;
    line-height:0px;
    font-size:25%;
    font-weight:normal;
 }
#flags span {
    position:absolute;
    top:0;
    left:0;
    height:24px;
    background-position:0 -6px;
 }
#flags span:hover {
    box-shadow:#eef 0 0 16px;
 }
#amer {
    background-image:url(americanflag.gif);
 }
#span {
    background-image:url(spanishflag.gif);

 }
#germ {
    background-image:url(germanflag.gif);
 }
#dutc {
    background-image:url(dutchflag.gif);
 }
#vertical{
    float:left;
    width:100%;
    height:50%;
    margin-top:-184px;     /*  half the total vertical height of the #main  */
 }
#main {
    position:relative;
    min-width:940px;
    height:360px;
    border:4px solid #808080;
    clear:both;
    background-color:#fff;
 }
#eduard {
    float:left;
    border-right:4px solid #808080;
 }
#lake {
    float:right;
    border-left:4px solid #808080;
 }
#content {
    margin:0 270px;
    padding:0px;
    font-size:22px;
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif;
    color:#000000; 
 }
.right {
    float:right;
    width:260px;
    text-align:right;
 }
h1 {
    margin:155px 0 31px;
    font-size:250%;
    text-align:right;
    color:#708090; 
 }
#links {
    text-align:right;
    font-size: 12px;
 }
#links li {
    display:inline;
    margin:0 10px;
 }
#links a {
    color:#000;
 }
#links a:hover {
    color:#008;
 }
#copyright {
    position:absolute;
    width:98%;
    bottom:5px;
    left:0;
    font-size:50%;
    text-align:right;
    color:#FFFFFF;
 }
Edited by Dani because: Formatting fixed
  • 2 Contributors
  • 1 Reply
  • 143 Views
  • 3 Months Discussion Span
  • Latest Post Latest Post by dany12
Member Avatar for dany12

www.eduardlid.net

try to design them and then size them and use ids for each flag and change the width and height to what dimensions you want

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.