www.webdeveloper.com
Results 1 to 11 of 11

Thread: Flags and links?

  1. #1
    Join Date
    Feb 2012
    Posts
    264

    Flags and links?

    My website (www.eduardlid.net) is almost finished!
    Still 2 mayor difficulties:
    1 How do I get the 4 flags in the top-right corner of the div "below"?
    2 And how do I design 4 attractive text-links (and where do I put them?) in 4 languages (see flags!) (with which texts?)?

    <!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="below">
    </div>

    <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="flags">
    <li><a href="american.html">American<span id="amer"></span></a><li>
    <li><a href="spanish.html">Spanish<span id="span"></span></a><li>
    <li><a href="german.html">German<span id="germ"></span></a><li>
    <li><a href="dutch.html">Dutch<span id="dutc"></span></a><li>
    </ul>

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

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

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

    <div id="footer">
    </div>

    </body>
    </HTML>


    * {
    margin:0;
    padding:0;
    }
    html,body{
    height:100&#37;;
    background-color:#008;
    }
    body {
    min-height:368px; /* total vertical height of the #main */
    font:bold 18px verdana,arial,helvetica,sans-serif;
    }
    #vertical{
    float:left;
    width:100%;
    height:50%;
    margin-top:-184px; /* half the total vertical height of the #main */
    }
    #main {
    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 274px;
    padding:10px;
    }
    .right {
    float:right;
    width:252px;
    text-align:left;
    }
    h1 {
    margin:116px 0 31px;
    font-size:250%;
    text-align:right;
    }
    #flags {
    width:316px;
    height:37px;
    margin:0 auto 11px;
    list-style-type:none;
    }
    #flags li {
    float:left;
    margin:0 16px;
    }
    #flags a,#flags span {
    position:relative;
    display:block;
    width:47px;
    line-height:37px;
    font-size:50%;
    font-weight:normal;
    }
    #flags span {
    position:absolute;
    top:0;
    left:0;
    height:37px;
    background-position:0 -6px;
    }
    #flags span:hover {
    box-shadow:#003 0 0 12px;
    }
    #amer {
    background-image:url(americanflag.gif);
    }
    #span {
    background-image:url(spanishflag.gif);
    }
    #germ {
    background-image:url(germanflag.gif);
    }
    #dutc {
    background-image:url(dutchflag.gif);
    }

    #copyright {
    font-size:50%;
    text-align:center;
    }
    Last edited by asa; 03-18-2012 at 12:52 PM.

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,479
    Hi there asa,
    1. Do you now want the four flags , which are at present within the #main div,
      to be positioned in the #footer div below the landscape image?

      And are they also to remain links to other pages?
    2. Do you now want text links to be placed in the #main div?

      If so where do you want them positioned?

      What text do you require for the links?

      What colors are to be used for normal and hover states?

    p.s.
    When I posted the code for you in that other thread of yours,
    the code - &#241 - for the latin small letter n with tilde,
    was converted to - .

    Make sure that you use &#241.
    coothead

  3. #3
    Join Date
    Feb 2012
    Posts
    264

    Flags and links ......?

    Quote Originally Posted by coothead View Post
    Hi there asa,
    1. Do you now want the four flags , which are at present within the #main div,
      to be positioned in the #footer div below the landscape image?

      And are they also to remain links to other pages?
    2. Do you now want text links to be placed in the #main div?

      If so where do you want them positioned?

      What text do you require for the links?

      What colors are to be used for normal and hover states?

    p.s.
    When I posted the code for you in that other thread of yours,
    the code - - for the latin small letter n with tilde,
    was converted to - .

    Make sure that you use .
    coothead
    1 I think its better to have the 4 flags at the top-right corner of the homepage (not in the div "footer"!)
    2 The links I want to go to 4 separate (english, spanish. german, dutch) pages (with c. v. etc.) and Im thinking of the texts;more, ms, mehr, meer. The colors Im not sure about! Im thinking of blue or black

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,479
    Hi there asa,

    try this code amendment...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    
    <base href="http://www.eduardlid.net/">
    
    <meta http-equiv="content-type" content="text/ html; charset=UTF-8">
    <title>Eduard Lid</title>
    <!--<link rel="stylesheet" type="text/css" href="ex1.css">-->
    <style type="text/css">
    * {
        margin:0;
        padding:0;
        list-style-type:none;
     }
    html,body{
        height:100&#37;;
        background-color:#008;
     }
    body {
        min-height:368px;       /*  total vertical height of the #main  */
        font:bold 18px verdana,arial,helvetica,sans-serif;
     }
    #floater {
        position:fixed;
        z-index:1;
        width:100%;
        top:0;
        left:0;
     }
    #flags {
        float:right;
        width:252px;
        height:37px;
        margin:21px 13px;
     }
    #flags li {
        float:left;
        margin:0 8px;
     }
    #flags a,#flags span {
        position:relative;
        display:block;
        width:47px;
        line-height:37px;
        font-size:50%;
        font-weight:normal;
     }
    #flags span {
        position:absolute;
        top:0;
        left:0;
        height:37px;
        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 274px;
        padding:10px;
     }
    .right {
        float:right;
        width:252px;
        text-align:left;
     }
    h1 {
        margin:116px 0 31px;
        font-size:250%;
        text-align:right;
     }
    #links {
        text-align:center;
     }
    #links li {
        display:inline;
        margin:0 10px;
     }
    #links a {
        color:#000;
     }
    #links a:hover {
        color:#008;
     }
    #copyright {
        position:absolute;
        width:100%;
        bottom:10px;
        left:0;
        font-size:50%;
        text-align:center;
     }
    </style>
    
    </head>
    <body>
    
    <div id="floater">
    
    <ul id="flags">
     <li><a href="american.html">American<span id="amer"></span></a></li>
     <li><a href="spanish.html">Spanish<span id="span"></span></a></li>
     <li><a href="german.html">German<span id="germ"></span></a></li>
     <li><a href="dutch.html">Dutch<span id="dutc"></span></a></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="american.html">more</a></li>
     <li><a href="spanish.html">m&#225;s</a></li>
     <li><a href="german.html">mehr</a></li>
     <li><a href="dutch.html">meer</a></li>
    </ul>
    
    </div><!--end #content -->
    
    <p id="copyright">Copyright &copy; 2012</p>
    
    </div><!--end #main -->
    
    </body>
    </html>
    
    p.s.
    Don't forget to use the &#241 and &#225 in the appropriate places.
    coothead
    Last edited by coothead; 03-18-2012 at 03:13 PM.

  5. #5
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,479
    Hi there asa,

    sorry, but I forgot to add a min-width value to the #floater div rules.

    I would recommend that you use this amendment...
    Code:
    #floater {
        position:fixed;
        z-index:1;
        width:100&#37;;
        min-width:940px;
        top:0;
        left:0;
     }
    
    ...instead.

    coothead

  6. #6
    Join Date
    Feb 2012
    Posts
    264
    Ok, thanks!

  7. #7
    Join Date
    Feb 2012
    Posts
    264
    Done! Thank you very much!

  8. #8
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,479
    Hi there asa,

    at present your page fails validation...


    This is because you have this...
    Code:
    </div><!--end #content -->
    
    ... twice in your html.

    Remove the second instance of it.

    You also have this...
    Code:
    <div id="footer">
    </div>
    
    ...which is redundant.

    This may also be removed.

    Your page can now be re-validated here...

    ...if you want to test it.

    coothead
    Last edited by coothead; 03-18-2012 at 06:16 PM.

  9. #9
    Join Date
    Feb 2012
    Posts
    264
    Many thanks!

  10. #10
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,479
    Hi there asa,

    you have still left a redundant closing div tag.

    Code:
    <p id="copyright">Copyright &copy; 2012</p>
    
    </div>
    
    </div><!--end #main -->
    The one in red need to be removed, to get perfect code validation.

    coothead

  11. #11
    Join Date
    Feb 2012
    Posts
    264
    Ok, many thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles