0

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: Formatting fixed

2
Contributors
1
Reply
2
Views
5 Years
Discussion Span
Last Post by dany12
0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.