CSS positioning help.

Discussion in 'HTML & Website Design' started by eight84, Jan 9, 2010.

0
  1. #1
    Hey,

    Ive done graphic and print design for a while. I have designed websites but never understood how to code them correctly. Well I am trying to teach myself and have watched a few tutorials and read through some stuff but I guess the positioning part throws me off. How to place what I want exactly where it should be in all browsers. Heres a sample of what I'm trying to do:


    coded so far (and way off):

    http://www.eight84.com/theidea/

    The image from photoshop:

    http://www.eight84.com/theidea/theidea.jpg


    Thanks for anyone willing to help me out.
     
    eight84, Jan 9, 2010 IP
  2. m7md_cis

    m7md_cis Peon

    Messages:
    91
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi,

    To correct the problem, put ecah row in <div>, and if there is margin top among <div> remove it.
     
    m7md_cis, Jan 10, 2010 IP
  3. J32

    J32 Peon

    Messages:
    94
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I worked on your code and made some changes. You should figure out easily what I have done, if you compare yours now with this one. Hope I could help.

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>eight84</title>
<style type="text/css">
<!--
body {
        background-color: #f9fbf4;
        margin-top: 0px;
}
body,td,th {
        font-family: Arial;
        font-size: 12px;
        color: #64937d;
}
a:link {
        color: #222222;
        text-decoration: none;
}
a:visited {
        color: #222222;
        text-decoration: none;
}
a:active {
        color: #222222;
        text-decoration: none;
}
a:hover {
        color: #88970a;
        text-decoration: none;
}
#title {
        background-image: url(http://www.eight84.com/theidea/images/title_1.jpg);
        background-repeat: no-repeat;
        float:left;
        height: 135px;
        width: 173px;
        margin-top: 0px;
        padding-top: 0px;
}
#wrap {
        text-align: left;
        width: 940px;
        margin: 0;
        padding: 0 90px;

}
#nav {
        float: left;
        margin-left:440px;
        width: 270px;
        height: 135px;
}
#nav ul{
        margin-top:100px;
        list-style:none;
        width:270px;
}
#nav ul li{
        float:left;
        text-align:right;
        width:90px;
}
#text {
        margin-top: 250px;
        width: 475px;
        height: 631px;
        float: left;
        }
#feature
  {
        background-image: url(http://www.eight84.com/theidea/images/image_1.jpg);
        background-repeat: no-repeat;
        margin-top: 250px;
        width: 449px;
        height: 631px;
        float: left;
  }
.clear {
         clear:both;
}
-->
</style></head>

<body>
<div id="wrap">
  <div id="title">
  </div>
  <div id="nav">
  <ul>
  <li>Home</li>
  <li>Porfolio</li>
  <li>Contact</li>
  </ul>
  </div>
  <div class="clear"></div>
    <div id="text"><img src="http://www.eight84.com/theidea/images/text_1.jpg" width="475" height="466" />
  </div>
  <div id="feature">
</div>
</div>
</body>
</html>
    Code (markup):
     
    J32, Jan 10, 2010 IP
  4. Tasameem

    Tasameem Active Member

    Messages:
    288
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #4
    Try Hack Css it may be useful
     
    Tasameem, Jan 10, 2010 IP
  5. eight84

    eight84 Active Member

    Messages:
    104
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #5
    Thanks a lot...I see the difference but how do I now get the wrap div to center?
     
    eight84, Jan 10, 2010 IP
  6. eight84

    eight84 Active Member

    Messages:
    104
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #6
    Thanks for the other tips too! I will try css hack!
     
    eight84, Jan 10, 2010 IP
  7. shrek699

    shrek699 Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Use margin:auto;

    in explorer had to the top of your html file

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    Good Luck :)
     
    shrek699, Jan 10, 2010 IP
  8. J32

    J32 Peon

    Messages:
    94
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Ah sorry I took out the auto in the margin. Just put margin:0 auto; back into the #wrap part. I thought it was a mistake cause in the image it looked left aligned.

    And if you want it horizontal centered you might wanna take out the padding:0 90px; in #wrap. otherwise you have 90px more distance to the left. and less to the right and it wouldn't be centered.
     
    J32, Jan 10, 2010 IP
  9. eight84

    eight84 Active Member

    Messages:
    104
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #9

    Thanks! I am starting to see how to do this! I always need to see how things look coded and I'm finally learning how to do it!
     
    eight84, Jan 10, 2010 IP
  10. eight84

    eight84 Active Member

    Messages:
    104
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #10
    Thanks! :)
     
    eight84, Jan 10, 2010 IP
  11. eight84

    eight84 Active Member

    Messages:
    104
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #11

    so what exactly does this do:

    .clear {
         clear:both;
    Code (markup):
     
    eight84, Jan 10, 2010 IP
  12. J32

    J32 Peon

    Messages:
    94
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #12
    it breaks the float pattern. If an element like a div for example is set to clear:both, it don't allows floating elements on each site of this div/element.
     
    J32, Jan 10, 2010 IP