Go Back   vb.org Archive > vBulletin 4 Discussion > vB4 Design and Graphics Discussions

Reply
 
Thread Tools Display Modes
  #1  
Old 02-05-2013, 11:27 AM
Xcynic's Avatar
Xcynic Xcynic is offline
 
Join Date: Jul 2007
Location: Sweden
Posts: 87
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default How do I: Div element outside of body.

So, I'm trying to create a topmenu that should stretch the full width of the page, but since it's being affected by the doc width (fixed) it wont expand to full width.

How would I get the div to properly expand the full width of the page?

Thanks.
Reply With Quote
  #2  
Old 02-05-2013, 12:21 PM
LifesGreatestGift's Avatar
LifesGreatestGift LifesGreatestGift is offline
 
Join Date: Jul 2009
Location: Louisville, KY USA
Posts: 885
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

your best bet is to make the entire document 100% width with margin:0 auto; and manually set the main elements .above_body,.body_wrapper,.below_body (i think theres another one) to a fixed width. That way you don't have to mess with absolute positioning and having to margin all the elements down the height of the 'topmenu'.
Reply With Quote
  #3  
Old 02-05-2013, 03:22 PM
Xcynic's Avatar
Xcynic Xcynic is offline
 
Join Date: Jul 2007
Location: Sweden
Posts: 87
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thank you for your response but wont that look really bad for users with small monitors? For example if I set the doc width to 100% and the body_wrapper and the other main elements to 1000px, wont it look weird for people with small monitors/phones etc?
Reply With Quote
  #4  
Old 02-05-2013, 04:47 PM
LifesGreatestGift's Avatar
LifesGreatestGift LifesGreatestGift is offline
 
Join Date: Jul 2009
Location: Louisville, KY USA
Posts: 885
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Well, it would be similar to your current setup i would imagine. what is your current body_wrapper width? If its 1000px most smaller monitors will show a horizonal scroll if you are not using overflow:hidden;

you could always make it fluid

body_wrapper width:100%

other elements 80% with a min-width of 650px or something. and the top bar being 100%

you should also set a max-width of like 1000px on the 'other elements' as people with larger monitors, it is annoying to read posts that stretch too far.
Reply With Quote
Благодарность от:
Xcynic
  #5  
Old 02-05-2013, 04:52 PM
Xcynic's Avatar
Xcynic Xcynic is offline
 
Join Date: Jul 2007
Location: Sweden
Posts: 87
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Yea, it's currently 1000px which as you say will still give smaller monitors a horizontal scroll unless I use overflow:hidden;.

But I guess I'll take your first advice and set doc_width to 100% and manually set the main elements to the width I want, this way the top_menu will stretch the full width of the screen.

Thanks!
Reply With Quote
  #6  
Old 02-05-2013, 04:59 PM
LifesGreatestGift's Avatar
LifesGreatestGift LifesGreatestGift is offline
 
Join Date: Jul 2009
Location: Louisville, KY USA
Posts: 885
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

sounds good. its not usually recommended to use overflow:hidden; as if you have important content past the 'scroll' it will be cut off and unable to be scrolled to.
Reply With Quote
  #7  
Old 02-05-2013, 05:09 PM
Xcynic's Avatar
Xcynic Xcynic is offline
 
Join Date: Jul 2007
Location: Sweden
Posts: 87
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Yea, might not use it, we'll see. Atleast for now the width issue is fixed. Thanks a ton for your help!
Reply With Quote
  #8  
Old 02-05-2013, 05:20 PM
LifesGreatestGift's Avatar
LifesGreatestGift LifesGreatestGift is offline
 
Join Date: Jul 2009
Location: Louisville, KY USA
Posts: 885
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

no problem. care to show your site?
Reply With Quote
  #9  
Old 02-05-2013, 05:22 PM
Xcynic's Avatar
Xcynic Xcynic is offline
 
Join Date: Jul 2007
Location: Sweden
Posts: 87
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

<a href="http://x-productions.com/forum/forum.php" target="_blank">http://x-productions.com/forum/forum.php</a>

As you can see, still a WIP.
Reply With Quote
  #10  
Old 02-05-2013, 05:24 PM
LifesGreatestGift's Avatar
LifesGreatestGift LifesGreatestGift is offline
 
Join Date: Jul 2009
Location: Louisville, KY USA
Posts: 885
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

digging the style. maybe brighten up the color of the font just a tad closer to white. I like the slider you appear to be implementing. Nice site.
Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:02 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.07538 seconds
  • Memory Usage 2,249KB
  • Queries Executed 13 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)ad_showthread_firstpost
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)navbar
  • (3)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (10)post_thanks_box
  • (1)post_thanks_box_bit
  • (10)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (10)post_thanks_postbit_info
  • (10)postbit
  • (10)postbit_onlinestatus
  • (10)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete