WordPress.org

Ready to get started?Download WordPress

Forums

Need help with spacing (21 posts)

  1. noelsaw
    Member
    Posted 5 years ago #

    For some reason, I cannot get rid of the huge spacing between the left sidebar and the content area and also the content area overlapping into the right side.

    http://www.tdling.net/

    I've used Firebug to look at the elements but my CSS/HTML skills are not advanced enough to fix it.

  2. drewactual
    Member
    Posted 5 years ago #

    your #rap has a defined width.. it is too narrow. change it to lik3 980 or so and then play with the rest of the defined widths to make everything fit the way you want it.

  3. noelsaw
    Member
    Posted 5 years ago #

    Hi Drew, thanks for the suggestion but it didn't seem to help...

    Thanks in advance for any other tips...

  4. drewactual
    Member
    Posted 5 years ago #

    body {  width:80%;
    	margin:auto;
    	padding:0;
    	font-family: Georgia, Times, Times New Roman, sans-serif;
    	font-size: 0.9em;
    	text-align:center;
    	color:#29303B;
    	line-height:1.3em;
    	background: #781805;
    }
    
    #rap
    {
    	background:#fbbf07;
            background-image: url('/wp-content/themes/2Exquisite/img/tdl-body-background.jpg');
    	border-left: 1px solid black;
    	border-right: 1px solid black;
    	padding:0px;
    	text-align:left;
    	font-family: Trebuchet MS, Georgia, Arial, serif;
    	font-size: 0.9em;
    }
    
    #content {
    	background: #fef9de;
    	padding:8px;
    	margin-right:30%;
            width:400px;
            float:right
    }
    
    #footer {
    	margin:0;
    	border-top: 0px solid #e6e6e6;
    	font-size: 0.8em;
    	color: #999;
    	background: transparent;
    }

    change the mentioned declarations with these...

  5. drewactual
    Member
    Posted 5 years ago #

    oh, and get rid of the embedded styles that float your sidebar and content and you should be golden.

  6. noelsaw
    Member
    Posted 5 years ago #

    Drew, many thanks for the changes. For some reason now the sidenav is not aligning to the top of the page.

    Also, please give me an example of the embedded styles.

  7. noelsaw
    Member
    Posted 5 years ago #

    Drew, BTW I am more than willing to repay you with a few Sbux drinks (or beers), whatever your preference...

  8. drewactual
    Member
    Posted 5 years ago #

    the embedded styles are buried in your theme.. I would guess the place to look is your header.php. find:

    #content {float: right;}

    delete these lines.
    that allows your menu to rise up where you want it.

  9. drewactual
    Member
    Posted 5 years ago #

    you owe me not a thing. comes around goes around, eh?

  10. noelsaw
    Member
    Posted 5 years ago #

    I tried looking for that and for whatever reason I could not find it any of the theme docs. I finally found it buried inside "functions.php". I'll give that a try!

  11. noelsaw
    Member
    Posted 5 years ago #

    Ok I removed both sets in functions.php and now the content goes above the sidenav...

    Here is the original code (not the modded one)
    ===

    <?php
    /*
    File Name: WordPress Theme Toolkit
    Version: 1.0
    Author: Ozh
    Author URI: http://planetOzh.com/
    */
    
    /************************************************************************************
     * THEME USERS : don't touch anything !! Or don't ask the theme author for support :)
     ************************************************************************************/
    
    include(dirname(__FILE__).'/themetoolkit.php');
    
    /************************************************************************************
     * THEME AUTHOR : edit the following function call :
     ************************************************************************************/
    
    themetoolkit(
    	'mytheme', /* Make yourself at home :
    			* Name of the variable that will contain all the options of
    			* your theme admin menu (in the form of an array)
    			* Name it according to PHP naming rules (http://php.net/variables) */
    
    	array(     /* Variables used by your theme features (i.e. things the end user will
    			* want to customize through the admin menu)
     			* Syntax :
    			* 'option_variable' => 'Option Title ## optionnal explanations',
    			* 'option_variable' => 'Option Title {radio|value1|Text1|value2|Text2} ## optionnal explanations',
    			* 'option_variable' => 'Option Title {textarea|rows|cols} ## optionnal explanations',
    			* 'option_variable' => 'Option Title {checkbox|option_varname1|value1|Text1|option_varname2|value2|Text2} ## optionnal explanations',
    			* Examples :
    			* 'your_age' => 'Your Age',
    			* 'cc_number' => 'Credit Card Number ## I can swear I will not misuse it :P',
    			* 'gender' => 'Gender {radio|girl|You are a female|boy|You are a male} ## What is your gender ?'
    			* Dont forget the comma at the end of each line ! */
    	'floatbar' => 'Sidebar Option {radio|left|Left Sidebar|right|Right Sidebar}',
    
    	),
    	__FILE__	 /* Parent. DO NOT MODIFY THIS LINE !
    			  * This is used to check which file (and thus theme) is calling
    			  * the function (useful when another theme with a Theme Toolkit
    			  * was installed before */
    );
    
    /************************************************************************************
     * THEME AUTHOR : Congratulations ! The hard work is all done now :)
     *
     * From now on, you can create functions for your theme that will use the array
     * of variables $mytheme->option. For example there will be now a variable
     * $mytheme->option['your_age'] with value as set by theme end-user in the admin menu.
     ************************************************************************************/
    
    /***************************************
     * Additionnal Features and Functions
     *
     * Create your own functions using the array
     * of user defined variables $mytheme->option.
     *
     **************************************/
    
    /* mytheme_about
    	use <?php mytheme_about() ?> to print either what the author
    	wrote in his profile (Admin Area, Users page), or a friendly
    	message if nothing has been filled in.
    */
    function mytheme_about() {
    	if (get_the_author_description()) {
    		print get_the_author_description();
    	} else {
    		print "The author does not say much about himself";
    	}
    }
    
    /* mytheme_sidebar()
    	Prints css style according to what has been defined
    	in the admin pannel
    */
    function mytheme_sidebar() {
    	global $mytheme;
    	if ($mytheme->option['floatbar'] == 'right') {
    		echo '
    		/* Menu on the Right */
    		#content {float: left;}
    		#sidebar {float: right;}
    		';
    	} else {
    		echo '
    		/* Menu of the Left */
    		#content {float: right;}
    		#sidebar {float: left;}
    		';
    	}
    }
    
    ?>
  12. drewactual
    Member
    Posted 5 years ago #

    dude I'm sorry, I told you to delete the wrong line. It's your sidebar float you want to change, not the content.

  13. drewactual
    Member
    Posted 5 years ago #

    and it is the last one mentioned in the code you posted, because you have yours set up with the menu on the left.

    replace:
    #sidebar {float: left;}

    with:
    /* #sidebar {float: left;} */

  14. noelsaw
    Member
    Posted 5 years ago #

    Hey that works! Thanks a bunch!

  15. drewactual
    Member
    Posted 5 years ago #

    you can adjust the padding in your regular stylesheet, to dress it up now..

    find #sidebar, put in it padding-top:20px; , and it will be pretty slick.

  16. noelsaw
    Member
    Posted 5 years ago #

    One last request Drew, can you take a look at the site in IE 6 or 7. A part of the background for the center shows in the top and bottom. Any suggestion please?

  17. drewactual
    Member
    Posted 5 years ago #

    find #rap, add to it:

    background-repeat: no-repeat;

  18. noelsaw
    Member
    Posted 5 years ago #

    Drew, did the background repeat code. Fixed on the bottom but shows on top. Also the vertical navbar drops down and content area is on top of it.

    Any ideas please?

  19. noelsaw
    Member
    Posted 5 years ago #

    Another problem that I am having is that the if the browser window is less than 1280 wide, then the content area starts straying into the vertical navbar area. Any ideas?

  20. zeniph
    Member
    Posted 5 years ago #

    add to #rap

    width:1000px;
  21. noelsaw
    Member
    Posted 5 years ago #

    Zeniph, thanks! That worked!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.