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.

Results 1 to 5 of 5

Thread: 100% Divs?

  1. #1
    Junior Member Jonkyu's Avatar
    Join Date
    Jul 2010
    Posts
    9
    Member #
    22780
    Hello I'm new around here (1st post!) I joined hoping that some of you more experienced could possibly help a novice like me. I'm not trained in web design/coding at all (I'm an architecture student dabbling in web design, I've always loved it!). I basically know enough to be able to manipulate certain things, everything I know has been self-taught through the many tutorials online.

    This project I'm working on is for my godmother's husband who happens to be a photographer. He doesn't know code at all so my mission was to create a blog/gallery that would not require him to delve into any code. I'm implementing a mixture of Tumblr and Flickr (using Flogr for the gallery) to make it easy for him to manage the site.

    unfortunately for me, my understanding of Divs and CSS is pretty bad (this is the first major site I worked on, the last time I played around with CSS was in Highschool 6 years ago!).

    So my problem is that I can't seem to figure out how to make divs go 100% height wise to a page. I followed som tutorials but I don't think I'm doing something right. Here is an example page of what I mean:
    Yeehaw Jim!

    It looks fine on my 15" macbook pro, but on larger screens it just cuts off.

    If you need my stylesheets here is the location:
    http://yeehawjim.com/css/style.css

    Also how do I prevent that scroll bar from popping up on the right side?

    Be for warned, I'm definitely a novice at coding so don't laugh too hard when looking at my sloppy coding haha lol :-D (any tips/help to get better organized is appreciated). Remember this is my first site so go easy :-)

    Edit: I'm having java/jquery problems too the fade/change effects doesn't seem to happen in the tumblr pages and the flogr gallery. Anyone might know why? I'm guessing the scripts are conflicting, I was think of just making it into a regular css mouse over.

  2.  

  3. #2
    Junior Member
    Join Date
    Aug 2010
    Posts
    3
    Member #
    22968
    Hey! I think you're doing awesome for a first-timer.

    To make a div have 100% height, you'll need a parent container that has 100% height. A way you might do this would be:

    HTML Code:
    <html>
      <head>
        <style>
          body { height: 100%; }
          #mydiv { height: 100%; }
        </style>
      </head>
      <body>
        <div id="mydiv">
          I have 100% height.
        </div>
        <div>
          you can't see me
        </div>
      </body>
    </html>
    As for your other two issues, it looks like you took the test page down. If you put it back up we might be able to take a look.

  4. #3
    Junior Member Jonkyu's Avatar
    Join Date
    Jul 2010
    Posts
    9
    Member #
    22780
    Hey! Thanks so much for replying I almost gave up on this thread lol. I somehow was able to get it to work, Not sure why I couldn't before lol.

    Anyway, the site is Yeehaw Jim! Wildlife Photographer. The only thing I'm having a bit of trouble with now is that entrance page. I can't seem to get the container div to just fit the size of the viewer's browser.

    Like for instance I want the "enter div" to span the rest of the page because it has a background that continues the logo element. So I coded the container div to span 100%. But for some reason it always makes you scroll down in smaller browser sizes like my laptop which is at 1440x990.

    Might you know how to solve this problem? It's greatly appreciated!

  5. #4
    Junior Member
    Join Date
    Oct 2007
    Posts
    27
    Member #
    15904
    Your Image3 needs to be floated to the right. It is dropping down because of your css style that all images are floated to the left.

    So that images needs its own css style.

  6. #5
    Junior Member Jonkyu's Avatar
    Join Date
    Jul 2010
    Posts
    9
    Member #
    22780
    Quote Originally Posted by IronMan*** View Post
    Your Image3 needs to be floated to the right. It is dropping down because of your css style that all images are floated to the left.

    So that images needs its own css style.
    Thanks for your input! Could I achieve that by just giving image 3 and class that floats it to the right?

    Edit: Ok well what I ended up trying was putting the background in the main container instead and positioning where the images end. I tried floating the image 3 but it still overshooting the screen a little, it's definitely better now though.

    EDIT2: Ok finally figured it out, I didn't have to float my image 3 to the right, it's just that 1) I forgot to set body 100%, 2) I should have put the background in the main container in the first place rather than sticking in a child div.

    Thanks for all your help guys, seems so simple now. I don't know what I was thinking. I think it might have been that I hadn't gotten any sleep that day haha.


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 03:42 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com