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 15
  1. #1
    Junior Member
    Join Date
    Nov 2010
    Posts
    6
    Member #
    24779
    My website is lifesgreatquotes.com (it's a domain I used to use but decided to redesign) I'm working on a tutorial site and I'm uploading what I've done to this domain anyways. I'm using div tags and I can center my header div by setting my image as a background in CSS and centering the x and y, also I can center the table and footer but I'm having a problem with the nav bar because I want it to be a rollover bar, the buttons will fit the table exactly 920px. But I want the nav bar to go from one end to the next look at my site for example. Any help would be appreciated the simplest method would be the most effective thanks.

    Mike

  2.  

  3. #2
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    i don't see a nav bar. i'll check back.
    HTML Code:
    div { position: relative; width: whateverpx; margin: 0px auto 0px auto; }

    while($get_it !== true){ continue; }

  4. #3
    Junior Member
    Join Date
    Nov 2010
    Posts
    6
    Member #
    24779
    Well I had the design as a mockup but been messing with it since so that's problly y you don't see a full nav bar but the silver gradient represents the nav.

  5. #4
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    well a graphic doesn't do much for me but i wrote you a basic framework based on what code you do have. i noticed you have a 3 section nav plan so i worked with that.

    HTML Code:
    <html>
    <head>
    <style>
    * { margin: 0px; }
    #nav { display: block; }
    .nav_main { display: inline-block; width: 33%; border-bottom: solid; }
    </style>
    </head>
    <body>
    <div id='nav'>
    <div class='nav_main'>1</div>
    <div class='nav_main'>2</div>
    <div class='nav_main'>3</div>
    </div>
    </body>
    </html>
    examine how this works to find what works for you.

    while($get_it !== true){ continue; }

  6. #5
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    For this you'll have to ditch the percentage for the width in the middle navbar section. Set the width on #middlenavbar to 920px with margin:auto;

    See if that works for you - it did for me in Firefox.

    Cheers,
    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!

  7. #6
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    sorry alpha bur fixed width outside min-width or max-width is ill advised. you always want full page layouts to be fluid. anything else is bad design. try your suggestion in a moch up then view it on a netbook. you'll have things coming out of alignment. not to mention droids and iphones. unless you did browser recognition and changed the css per browser type.

    while($get_it !== true){ continue; }

  8. #7
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Dorky - I agree - but that was not the question - this is what was asked -

    because I want it to be a rollover bar, the buttons will fit the table exactly 920px
    and my answer will work for this.

    There is a specific width specified in the CSS and so this is not a fluid layout to start with
    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!

  9. #8
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    i know. but i don't advise he use fixed width either. thats why i didn't build it that way. not knocking you at all girly.

    while($get_it !== true){ continue; }

  10. #9
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Dorky - I know - 's OK. I advocate fluid layouts myself - but looked at source and CSS and (perhaps wrongly) decided it would take too long to explain why and how to redo the site - you are more precise and concise than I -

    MichealA - if you truly want this to be a user-friendly site, available on more devices than just a full-sized computer, heed Dorky's advice and go fluid - and repair your CSS - you have #body listed twice, with different properties each time, plus you have it in your page as well!
    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!

  11. #10
    Junior Member
    Join Date
    Nov 2010
    Posts
    6
    Member #
    24779
    Well you see I don't have a problem centering the buttons I have 5 buttons in a middle div then I have a div to the left and right of the middle I want 3 divs to appear as one but when I view my site on a smaller screen like my iPhone for example I want just the middle to fit my screen I found 920 fits all screens with almost or no background showing. When I center the middle it's all good but the left and right div collapses to the middle.


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

how to fit navigation to my screen
,
how to get a nav bar to adjust to all resolution size
,
how to make my navbar fit the screen
,

how to make nav bar fit to all screen sizes

,
how to make navigation bar that fit exactly on the screen
,
make navigation bar fit all resolutions
,

nav bar that fit any screen

,
nav fit to page html
,
navigation bar fit screen
,

navigation menu center different screen sizes

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