Web Analytics Made Easy -
StatCounter Help with text's position - CodingForum

Announcement

Collapse
No announcement yet.

Help with text's position

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Help with text's position

    http://divlayout.cjb.net

    Here's the source code:

    <html>
    <head>
    <title>
    asd
    </title>
    <style type="text/css">

    a.navi:link {color: #FFF;text-decoration: none;}
    a.navi:visited {color: #FFF;text-decoration: none;}
    a.navi:active {color: #FFF;text-decoration: none;}
    a.navi:hover {color: #FFF;text-decoration: underline;}

    a:link {color: #FFF;text-decoration: underline;}
    a:visited {color: #FFF;text-decoration: underline;}
    a:active {color: #FFF;text-decoration: underline;}
    a:hover {color: #000;text-decoration: underline;}

    body {
    font-family:microsoft sans serif;
    font-size:12px;
    color:white;
    background:url(tausta.bmp);
    }

    #header {
    width:970px;
    height:150px;
    border:1px solid #000;
    }

    #kehys {
    width:972px;
    margin-left:auto;
    margin-top:0px;
    margin-right:auto;
    position:relative;
    }

    #left {
    float:left;
    }

    #boxheader {
    width:196px;
    height:33px;
    margin-top:5px;
    background:url(boxheader.jpg);
    }

    #boxcontent {
    width:196px;
    heightx;
    background:url(boxcontent.jpg);
    text-align:left;
    }

    #boxfooter {
    width:196px;
    height:15px;
    background:url(boxfooter.jpg);
    }

    </style>
    </head>

    <body>

    <div align="center">
    <div id="kehys">

    <div id="header">
    </div>

    <div id="left">

    <div id="boxheader">
    </div>

    <div id="boxcontent">
    <div style="margin-left:13px;">
    <b>Navigation:</b><br><br>
    <a href="http://www.google.fi" class="navi">Link</a><br>
    <a href="http://www.google.fi" class="navi">Link</a><br>
    <a href="http://www.google.fi" class="navi">Link</a><br>
    <a href="http://www.google.fi" class="navi">Link</a><br>
    <a href="http://www.google.fi" class="navi">Link</a><br>
    <a href="http://www.google.fi" class="navi">Link</a><br>
    <a href="http://www.google.fi" class="navi">Link</a><br><br>
    <b>Something:</b><br><br>
    asdasdasd<br>
    asdasdasd<br>
    asdasdasd<br>
    asdasdasd<br>
    asdasdasd<br>
    asdasdasd<br>
    asdasdasd<br>
    asdasdasd<br>
    asdasdasd<br>
    asdasdasd<br>
    asdasdasd<br>
    </div>
    </div>

    <div id="boxfooter">
    </div>

    </div>
    </div>
    </body>
    </html>
    And here's the thing I want to know:

    I've made a div only for the text that's in the box, and I've set for that div a 13px inner margin between the boxes left border and the text's div. Otherwise it would be like this:



    http://divlayout.cjb.net/example1.html

    The text's fine with just 13px margin for the left side, but I just want to know, that how could I set a margin for the upper side. If I set it like this,

    <div style="margin-left:13px;margin-top:5px;">

    it will be shown like this:

    http://divlayout.cjb.net/example2.html

    Notice that the box consists of three divs, whose background-images are these:

    Top div's background: http://users.cjb.net/divlayout/boxheader.jpg

    Middle div's background (The text is in this div):
    http://users.cjb.net/divlayout/boxcontent.jpg

    Bottom div's background:
    http://users.cjb.net/divlayout/boxfooter.jpg

    And is there any better way to position the text in div?

  • #2
    Perhaps you want padding instead of margin?

    You should use a list (<ul>) for those links. I suggest you learn how semantics apply to X/HTML.

    These three articles explain how to style lists.
    http://www.alistapart.com/articles/taminglists/
    http://css.maxdesign.com.au/listutorial/
    http://www.webreference.com/programming/css_lists/

    And this one explains a fix for a common IE bug:
    White space bug revisited--the definitive fix
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Comment

    Working...
    X