Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12

Thread: Positioning

  1. #1
    New Coder
    Join Date
    May 2011
    Location
    Chicago, IL
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up Positioning

    Thanks Andrew for really helping me out. I've updated some needed assistance if anyone else can help I would appreciate it. For: http://www.trillionaireme.com

    Last edited by SamuelSweis; 05-10-2011 at 03:38 AM.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    First thing I would do would be to remove all those deprecated (horrible) font tags.

    I would place the date and paragraph combination in a relatively-positioned DIV with a certain class. This way, you can place all of the following date-paragraph combinations in another DIV with the same class and they will all behave the same.

    I would then add a HR - with a class name - within this DIV:
    Position it absolutely; display: inline-block (possibly); width: whatever px; use top and right to position it (relative to its parent DIV).

    Add another HR with a different class name for the second line - use css as above to position and size it.

    Insert the image with another class name and position:absolute; use a top and (negative) right position to take it further away from the paragraph text (and therefore outside its parent DIV).
    Attached Thumbnails Attached Thumbnails Positioning-latestnews1.jpg  
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    SamuelSweis (05-09-2011)

  • #3
    New Coder
    Join Date
    May 2011
    Location
    Chicago, IL
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Andrew that sounds great, but I'm just starting out and learning, I have no idea how to convert most of that language to code. Could you give me an example of code? Wow and thanks for your response.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I see you've already made a start - floating the images to the right.

    Anyway, I might do something like this:
    Code:
    <div class="newsByDate">
    <hr class="line1" /><hr class="line2" />
    <p class="tl no-mar">
    <span class="fs  italic no-mar bg-color">Sunday, May 08, 2011, 9:40 A.M.</span>
    </p>
    <p class="tl">
    <img src="images/moneylogo.jpg" alt="">
    Last night my son and I started our "6 accounts" for financial management.  I tell you I am super excited.  
    Without a plan for money you can kiss it all goodbye.  Head over to the 
    <a href="http://www.trillionaireme.com/money.html">"money"</a> section for info on that right away, and get 
    started now on building the financial empire of your reality not just your dreams...although dreaming is part 
    of the process :)  
    </p>
    </div>
    and some css:
    Code:
    div.newsByDate {
        position: relative;
    }
    hr.line1 {
        position: absolute;
        display: inline-block;
        width: 300px;
        color: gray;
        background-color: gray;
        width: 2px;
        top: 20px;
        right: 20px;
    }
    hr.line2 {
        /* similar to those for line1 */
    }
    but I haven't tested any of this.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    New Coder
    Join Date
    May 2011
    Location
    Chicago, IL
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Wow great insight again Andrew, appreciate it. I updated my first post in this thread with my latest goals for the site if you could help that would be amazing. Thanks again.

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by SamuelSweis View Post
    Wow great insight again Andrew, appreciate it. I updated my first post in this thread with my latest goals for the site if you could help that would be amazing. Thanks again.
    lol wow why not hire someone to do all this coding for you?
    Teed

  • #7
    New Coder
    Join Date
    May 2011
    Location
    Chicago, IL
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Tee, I'm actually looking forward to learning all of this, I've been starting from the basics over at w3schools today with tutorials. I'm having tons of fun, and the advanced coding most of you guys know is really giving me an insight and stepping my game up.

  • #8
    New Coder
    Join Date
    May 2011
    Location
    Chicago, IL
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Still reading up and trying to figure this out...

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Do you have your site on a server now so you could post a link? You can get some free hosting plans that work pretty well. You're gonna need to test your site live eventually anyway, might as well be sooner than later.

    Also, a great tool, especially for learning to code html and css, is firebug. It's free for firefox browsers. You can see your code in real time, as well as select any specific element and see its code and css.

    IE has a similar tool called web developer tools I think, but I like firebug better. But then again I havent played around with developer tools as much.


    Now to your question. Look into margins of elements. Since you havent shown your code though, its hard to tell exactly what you need to do.
    Teed

  • #10
    New Coder
    Join Date
    May 2011
    Location
    Chicago, IL
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hey Tee, my site is on http://www.trillionaireme.com and is live? I edit it through the host's server. Thanks for recommending firebug and margin of elements, I will be looking into that. Here's my code currently:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <base href="http://www.trillionaireme.com/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>TrillionaireMe</title>
    
    <style type="text/css">
    body {
        font-family:calibri,sans-serif;
        font-size:12px;
        color:#808080;
        text-align:center;
        line-height:1.3;
        word-spacing:2px
     }
    #container {
        width:1062px;
        padding-bottom:10px;
        overflow:hidden;
        margin:auto;
     }
    #tme {
        display:block;
        width:221px;
        height:176px;
        border:0;
        margin:auto;
     }
    A:link {color:#808080;text-decoration: none}
    A:visited {color:#808080;text-decoration: none}
    A:active {color:#808080;text-decoration: none}
    A:hover {color:#808080;text-decoration: underline; color: #808080;}
     }
    #nm {
        display:block;
        width:1062px;
        height:275px;
        border:0;
        margin:auto;
     }
    .italic {
        font-style:italic;
     }
    .fs {
    
        font-size:16px;
     }
    .tl {
        text-align:left;
     }
    .tl img {
        float:right;
        padding:20px 80px;
        margin:-20px 0 0 30px;
        border-top:1px solid #bfbfbf;
        border-bottom:1px solid #bfbfbf;"
     }
    .fl {
        float:left;
     }
    h1 {
        margin:110px 0 0;
        font-size:24px;
     }
    .bg-color {
        background-color:#f5f5f5;
     }
    .no-mar {
        margin:0;
     }
       
    </style>
    
    <script type="text/javascript">
    
    function init(){
       var r_text=[
                   '(discover)',
                   '(uncover)',
                   '(rebirth)',
                   '(riches)',
                   '(inspirational)',
                   '(powerful)',
                   '(breathtaking)' /* no comama after final array element */
               ];
       document.getElementById('word').firstChild.nodeValue=
       r_text[Math.floor(Math.random()*r_text.length)]
     }
    
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    </script>
    
    </head>
    <body>
    
    <div id="container">
    
    <a href="http://www.trillionaireme.com"><img id="tme"src="images/trillionaireME.jpg" alt="logo"></a>
    
    <span id="word">&nbsp;</span>
    
    <p>
    Below are the secrets revealed of our everyday lives.<br>
    Isn't it about time someone gave it to you all in one place?<br>
    
    </p>
    
    <img id="nm" src="images/navigationmap.jpg" alt="navigation map">
    
    <h1 class="tl italic">Latest News</h1>
    
    <p class="tl no-mar">
    <span class="fs  italic no-mar bg-color">Sunday, May 08, 2011, 9:40 A.M.</span>
    </p>
    
    <p class="tl">
    <img src="images/moneylogo.jpg" alt="">
    Last night my son and I started our "6 accounts" for financial management.  I tell you I am super excited.  
    Without a plan for money you can kiss it all goodbye.  Head over to the 
    <a href="http://www.trillionaireme.com/money.html"><font color="#3399FF">money</font></a> section for info on that right away, and get 
    started now on building the financial empire of your reality not just your dreams...although dreaming is part 
    of the process :)  
    </p>
    
    <p class="tl no-mar">
    <span class="fs italic  bg-color">Sunday, May 08, 2011, 9:59 P.M.</span>
    </p>
    
    <p class="tl">
    <img src="images/htmlforumslogo.jpg" alt="">
    Well, I would like to give a huge thanks to "coot" over at 
    <a href="http://www.htmlforums.com"><font color="#3399FF">HTMLforum.com</font></a>.  Huge progress being made both online and offline.  
    When someone lends a helping hand it opens an entire new world of learning and adventure if you take the 
    initiative.  I'm very grateful as this has expanded my web designing capabilities.  Love to learn, and 
    grow grow grow!    
    </p>
    
    </div><!-- end #container -->
    
    </body>
    </html>

  • #11
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Hey Tee, my site is on http://www.trillionaireme.com and is live?
    lol Sorry its early. I see your link in your initial post. So yeah you dont need to post your code if you've given us a link.
    Teed

  • #12
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Ok, so number three. You have two paragraphs with a class of t1. In your stylesheet, your target the img in the class of t1..... meaning

    .t1 img {some styles here}

    So that says ANY image within the class of t1 will be styled this way. You need to differentiate between the two images somehow. You could rename one of the paragraphs maybe "t2" and then copy the style rule from t1 over to the new stylerule of t2, then just delete the botton border on t1.
    Teed


  •  

    Posting Permissions

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