Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 3 of 5 FirstFirst 1 2 3 4 5 LastLast
Results 21 to 30 of 45
Like Tree2Likes

Thread: earn big bucks... well, 30 lol

  1. #21
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    Vapr did hit on what the deal is, but perhaps not clearly enough. There's nothing in that space, and when you set the bottom to 0, it's placing the bottom of the element at the bottom of it's parent, which has little to no height.

    Set an outline on all of your elements with different colors for each so you can see where the boxes are. You set it much like a border:
    Code:
    outline:1px solid red;
    What you need to do is get the body to take up the entire window and set it to position:relative, then it should respect your bottom:0.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  2.  

  3. #22
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    the body does take up the entire window, its the wrap that i narrower. the elements are easy, theres the top banner thich is outside the wrapper, thats 100px from the top. the navbar is 40px high and the width of the wrapper. the userbar is just two buttons the same height as the navbar and set just below it. i have specified 100% height on the body and wrapper, and also tried auto so by my understanding it shouldnt matter if there is nothing inbetween, when i say bottom it should og to the bottom. i mean i had it at the bottom already, changed something and bam, traight to the top changed it back and it stayed there. thi cant be that complicated theres only 3 divs in the wrapper and two outside... *scratches head*

  4. #23
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    I'll have to look at this tomorrow when I have time/access to the page. It isn't complicated, but it's hard to go from your descriptions of it without seeing it myself.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #24
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    wooooo made some progress, its now sitting at the bottom, but still a problem

    Fused-ma

    see its floating all the way to the left. i want it inline with the top navbar. i set the footer div to the same width and margin 0 auto so i dont get why its going to the edge of the page, shouldnt footer left stick to the width of the footer div?

    i did this by closing the wrapper div off before footer so footer isnt contained inside the wrapper div. sitting at the bottom, but not floating properly.

  6. #25
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Im not near my computer again so it is a lil hard for me to help you right now..

    Can you explain what it is doing wrong now? From my cell everything lines up so i cant see your problem just yet..

    From the sounds of it you just need to rework your css now, things like width and margins changes should do what you want.


    Sent from my iPhone using Tapatalk

  7. #26
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    well, its now positioning at the bottom but i want it to line up with the navbar on the horizontal plane. the way i have it, the navbar fits into a 1072px wrapper in the center of the page so theres a gap either side. but the footer-left i floating to the very edge of the page.

    originally i had the navbar div, the user div, and the footer div (containing footer-left) in the wrapper div, but for some reason i couldnt get the footer div to stay at the bottom.
    to remedy this i removed footer from wrapper div i then set the footer div to the same width as the wrapper and set it to bottom 0px. went to the bottom, awesome. so i float footer-left to the left. remember that footer-left is within footer div which i 1072px wide but for some reason when i floated footer-left it went outside the bounds of the footer div and floated to the edge of the window.

    ideally i want it all to be contained within the wrapper div but for whatever reason that didnt work.

  8. #27
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    Ok, Cole. I went through and recoded what you have. I used your styling, but restructured the HTML a bit, upped it to HTML5 (you used the doctype, but none of the actual elements), and added the correct CSS for the positioning of everything. One thing I did not do is add hover effects. I'll explain each bit.

    Here's the HTML:
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title> Fused-ma </title>
    <link rel="stylesheet" href="her.css">
    </head>
    <body>
    <header>
    <nav>
    <ul>
    <li><a href="#"> BIO </a></li>
    <li><a href="#"> MEDIA </a></li>
    <li><a href="#"> CUSTOM </a></li>
    <li><a href="#"> BOOKINGS </a></li>
    <li><a href="#"> BLOG </a></li>
    <li><a href="#"> CAM </a></li>
    </ul>
    <div class="members"><a href="#"> members area </a></div>
    <div class="register"><a href="#"> register </a></div>
    </nav>
    </header>
    
    <!-- Content Area Here -->
    
    <footer>
    <div class="footer-content">
    <ul class="footer-left">
    <li class="fb"><a href="#"> </a></li>
    <li class="tb"><a href="#"> </a></li>
    <li class="in"><a href="#"> </a></li>
    <li class="tw"><a href="#"> </a></li>
    </ul>
    </div>
    </footer>
    </body>
    </html>
    Ok, so for the whole header area, I used the HTML5 header tag. it wraps your nav elements. I set it to 100% width so I could get the gray gradient background. I wrapped your nav elements in <nav> tags. I did that for the menu and for the members/register buttons together. That allowed me to set the 1072px width and center it with margin:0 auto. I set the menu <ul> to the width of its container, which pushed the member/register links down. The rest of the menu is all styling from you except for the CSS-fu I used for the sizing of the list items, which I'll explain later. The members and register links are set inside their own div, which isn't entirely necessary, but it keeps you from having two random links just hanging around in your code. It's more of a preference thing, so I went with it. Members got a class of "members" and was floated left. Register got a class of "register" and was, you guessed it, floated right.

    On to the footer. I used a similar set up. I set the footer element to 100% width, set up a content area, this time a div with a class of footer-content. I gave .footer-content the 1072px; width. I floated the footer-left div to the left and added the images. I put the images on the <li> instead of the link. I can't say that it matters too much, but again, preference thing.

    I'll post the CSS in a bit. I need to go thru and comment it.

    EDIT: Pasting from Sublime Text doesn't work very well, future ref.
    Last edited by Ronald Roe; Feb 22nd, 2014 at 07:52 AM.
    coleio likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  9. #28
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    cool dude, i the html5 bit the <header> and <nav> and <footer>?

  10. #29
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    Instead of posting the CSS here, I just put the whole thing up on CodePen. The CSS is commented.
    Here's the link to the page: CodePen - A Pen by ronaldroe
    And the link to the code: CodePen - A Pen by Ronald Roe
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  11. #30
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by coleio View Post
    cool dude, i the html5 bit the <header> and <nav> and <footer>?
    Yes. HTML5 introduced some pretty awesome new tags.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Page 3 of 5 FirstFirst 1 2 3 4 5 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:17 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com