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 1 of 2 1 2 LastLast
Results 1 to 10 of 18

Thread: More Div Issues

  1. #1
    Senior Member Blackhawk095's Avatar
    Join Date
    May 2011
    Location
    Kentucky (USA)
    Posts
    384
    Member #
    27969
    Liked
    45 times
    I've been working on a new website design for the engineering and technology classes, and the TSA club for my school.

    As posted in previous threads, I've been having a few issues with transferring from using tables, to divs. I have fixed many of the issues, but I'm having some more trouble with the formatting/layout of the pages.

    Here are two pages:

    1. This page (http://my-testing-area.netne.net/Index.html) is my original design which used tables. For some reason, when uploading the horizontal nav bar to the server, it came out weird. It's supposed to look like the one in the second page below, but I can fix that.
    2. I'm trying to make this page (http://my-testing-area.netne.net/TSA_Index.html) to look like the first, but only using divs. I have made a few changes, such as using outlines and borders on this design and I got rid of the background images in the left and right columns that were in the original design.


    Things I need help with on this page:

    1. The layout of the page is supposed to have one main content area, with the JQuery Nav in the left column. But I need the page to be centered around the main content area.
    2. I can't figure out how to make the header aligned in the center. If you can fix this, please do.
    3. THIS IS THE MOST IMPORTANT: I have been learning website design through books and the internet, but I can't find any information on how to make the pages proportional at all times. (when scrolling in/out and on different monitor sizes/resolutions) If you are able to fix this, please post how you did it. I really want to learn that.

    An example of number three would be this page. Try scrolling in and out. No matter how much you scroll in or out, the page and graphics are always proportional.

    I'm sorry to constantly bother everyone but I have no professional training in website design. I'm learning it through textbooks and internet resources and there are things I've not been able to find solutions for.

    If you have any suggestions for designs on this page, or know of any great resources that can help me out with learning divs and their positioning, please post them.
    [COLOR=rgb(0, 51, 102)]Student Web Designer[/COLOR]
    [COLOR=rgb(0, 51, 102)]If you thought something I said was helpful. LIKE IT![/COLOR]

  2.  

  3. #2
    Senior Member Blackhawk095's Avatar
    Join Date
    May 2011
    Location
    Kentucky (USA)
    Posts
    384
    Member #
    27969
    Liked
    45 times
    I just noticed that for some reason, the header in the div design is cut off when you load it up, but if you scroll backward, it shows the whole image.


    I don't want anyone to think that I'm trying to have someone else to do the work for me. There are just some aspects that I can get a full grip around.

    I'll take any advice as long as it will help me in the long run.
    [COLOR=rgb(0, 51, 102)]Student Web Designer[/COLOR]
    [COLOR=rgb(0, 51, 102)]If you thought something I said was helpful. LIKE IT![/COLOR]

  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    First things first...validate your code. Always validate before you do anything else.

    Now, this particular page will never fully validate no matter what you do. The 000hosting.com company dropped in a script for analytics reasons and a somewhat hidden self-promo link for their paid hosting, and they did this outside of the <html> tags. But you can validate everything other than this.

    Next...you don't need to declare height: auto; all of the time. That's the default. Leave it out and save some code. Less code always = better code.

    As far as centering your header, do the following:
    Code:
    div#header {
       margin: 0;
       padding: 0;  /* both of these are probably not necessary, but it's good to specify them just in case. */
        background-image:url(http://www.my-testing-area.netne.net...TSA_Header.png) top center no-repeat; /* top center puts it in the top center of the containing element...in this case, the header. */
        height: 150px;
        width: 100%; /* you want the full width because you need to center that background image.*/
        color:white;
    }
    I also took out the float part. float: none; is the default and you don't want anything inheriting.

    I don't really understand what you're trying to say with 1) or 3). I can't even guess at either of them. Sorry, man. I've read them three times each and they just don't make sense to me.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by TheGAME1264, post: 207077
    I don't really understand what you're trying to say with 1) or 3). I can't even guess at either of them. Sorry, man. I've read them three times each and they just don't make sense to me.
    Number three - I get it - if you are on a Windows machine, go CTRL+ a couple of times and keep an eye on the images - they resize along with the text - pretty neat trick and one I am currently researching since reading BlackHawk's post.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  6. #5
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    You mean the zoom? That's been in play for a while now. I don't think that's what he means, although I could be wrong.

    Blackhawk095...if that is what you mean, the best way to keep that image proportional is to actually make it an image and center it in the div.

    Something like this:
    Code:
    <div style="text-align:  center;">
    <img src="your logo" width="logo width" height="logo height" alt="MSHS Tech Dude Types" />
    </div>
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  7. #6
    Senior Member Blackhawk095's Avatar
    Join Date
    May 2011
    Location
    Kentucky (USA)
    Posts
    384
    Member #
    27969
    Liked
    45 times
    TheGAME1264

    The layout of the page is supposed to have one main content area, with the JQuery Nav in the left column. But I need the page to be centered around the main content area.
    If you look at my original design that used the tables, you will see that there is one main content area and everything is centered around it. Then you have the JQuery vertical nav to the side.
    That is what I want the div design to look like.

    THIS IS THE MOST IMPORTANT: I have been learning website design through books and the internet, but I can't find any information on how to make the pages proportional at all times. (when scrolling in/out and on different monitor sizes/resolutions) If you are able to fix this, please post how you did it. I really want to learn that.
    Try holding down Ctrl while scrolling the wheel on you mouse. If you notice, this page will zoom in and out, but still remain proportional. When I do that this my page, the div starts expanding to the right and everything becomes distorted.

    I'm looking for a way to make my page so that when you zoom in or out, the graphics and divs shrink, or grow with it. Therefore, keeping the page constantly proportional
    [COLOR=rgb(0, 51, 102)]Student Web Designer[/COLOR]
    [COLOR=rgb(0, 51, 102)]If you thought something I said was helpful. LIKE IT![/COLOR]

  8. #7
    Member
    Join Date
    May 2011
    Location
    Baltimore, MD
    Posts
    60
    Member #
    27796
    Liked
    11 times
    Hey Blackhawk,

    I've got a lot of comments here... Please pay me afterwards... j/k

    Dude. You have a terrific site there! I'm talking about the one using tables. So, you want to switch to complete div / css techniques... I'd say stick with what you've got.

    Ok, so moving to div / css techniques.
    The Header:
    Width @ 85% you are automatically cutting off your graphic. Remember that if you have a graphic that is non-repeating, please give the width the full size of the graphic, 100% or the PX amount that it deserves. Alternatives include repeating backgrounds or min-width backgrounds that do not repeat.

    The Body:
    You have it right, so far... it's so close to working too. Your % widths are most likely what is screwing up the div's. As you zoom in you get overlapping. Two things, how often do people actually zoom in on a page? not often, fyi. Second, Keep your fonts and widths consistant; the easiest way is to move from %'s to PX's for zooming into pages. For your side-bar navigation, try a strict 200px width, float: left, where your body has a relative position, margin-left of 200px + whatever padding / margin you decide to use. Remember to clear your floats afterwards. Even mobile devices are becoming better and better at adapting to pure desktop-created websites.

    You could also try floating your body left as well with a correct PX to contain the entire size of the wrapper - minus margins and padding, which would set you up nicely. There are many ways to go about this.

    If you are always trying to use 100% of the screen, you will find difficulty. I'm writing this on my 24-inch Mac and the first example is already messing up, full sized. Restricting the size of the content to a normal monitor of your average user is the best advice. I normally stick to less than 1000 pixels as 1024px wide is very common, but I'm slowly moving to 1100px as my specific audience is growing in screen real-estate.

    Design:
    From a design perspective, I like it. The top graphic with the bird & shadow are great and you could really turn this into something. I would take the top nav out of the second example and implement it with the completeness you have already done with the table example. Keep that aligned right once the div / css issues have been resolved.


    Now to voice some thoughts on TheGAME's and AlphaMare's comments, as I so regularly do.

    * Ohh boy, W3C validation is a joke, sorry... It won't help you format your website's style. Amazon has over 500 errors on their site, so who cares...

    * Mac users have to [%Apple and +] for zooming in. [Ctrl + mouse-wheel] works perfectly because the entire Mac zooms into whatever is already generated on the screen.

    * Centering requires the outside container to use -- margin: 0 auto; -- Crappy versions of IE (7 and below) sometimes better respond to <center></center>. Btw, please poor soap in my mouth for mentioning.

    Summary:
    Try moving to Pixels rather than Percents, don't worry about validation, think of monitors of 1000px, remember that mobile devices and zooming in are working for you, not the other way around, margin-left is your friend, float's are your friend, nice design! I see a lot of potential. Keep on keep'n on.

    Later,
    phillihp
    Blackhawk095 likes this.
    /phillihp/
    Check out my blog @ http://www.phillihp.com
    ~Web~Mobile~Hacking~Tech~Gadgets~More~

  9. #8
    Senior Member Blackhawk095's Avatar
    Join Date
    May 2011
    Location
    Kentucky (USA)
    Posts
    384
    Member #
    27969
    Liked
    45 times
    Phillihp, that really helped. Thanks for your comments.

    From a professional standpoint, do you think I should stay with the tables? I could make this site in a second with them, but organization wise, I've always been told to use divs and I'm really having trouble with them.

    I need to learn them eventually, but I can't get many reliable resources to teach me how to use them correctly.
    [COLOR=rgb(0, 51, 102)]Student Web Designer[/COLOR]
    [COLOR=rgb(0, 51, 102)]If you thought something I said was helpful. LIKE IT![/COLOR]

  10. #9
    Member
    Join Date
    May 2011
    Location
    Baltimore, MD
    Posts
    60
    Member #
    27796
    Liked
    11 times
    I guess the question is, how much money / time will it take to convert to DIV elements. DIV's are how you should style content, so this is the way it "should" be. If you are using this as a learning platform, move to DIV's. If you have other projects in your queue and could lose money / time on this conversion, why switch?

    You are very close on the DIV solution though! I'd say keep going.
    /phillihp/
    Check out my blog @ http://www.phillihp.com
    ~Web~Mobile~Hacking~Tech~Gadgets~More~

  11. #10
    Senior Member Blackhawk095's Avatar
    Join Date
    May 2011
    Location
    Kentucky (USA)
    Posts
    384
    Member #
    27969
    Liked
    45 times
    I'm 15 and I'm not doing this for a job, but I would like to make web design my job in about 6 months. I'm building this website for a school department. I have all summer to complete it.

    This website is going to be entered in a few competitions so I need to make it look really good and be very organized, along with adding a few extra things that would put me above other competitors (RSS feeds, JQuery navs, comment areas, ect.)

    So in other words, yes I am using this website as a learning platform. I know that in the future, I may be asked to design a website that a table won't be able to support so I'm trying to make this website out of divs. I have no professional training. I'm learning through books and the internet, but I learn better hands-on. So figuring out divs/positioning/css is harder to learn without someone to teach me.

    My only option is to learn through trial and error, but I can't figure out how to position the divs the way I want.
    [COLOR=rgb(0, 51, 102)]Student Web Designer[/COLOR]
    [COLOR=rgb(0, 51, 102)]If you thought something I said was helpful. LIKE IT![/COLOR]


Page 1 of 2 1 2 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
  •  

Search tags for this page

div distorts on zoom out

Click on a term to search for related topics.
All times are GMT -6. The time now is 10:29 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com