[Theme: Twenty Eleven] How to Align and Remove Space Between Menu Bar and Content

  • Resolved Beksters Lab

    (@beksters-lab)


    11 years, 9 months ago

    Hi I was wondering if someone could help me please? I posted this question in a different part of the forum and have had no replies so far. I have since realised it would better posted here, so I hope that’s okay?
    I’m using the 2011 theme and am trying to edit the css in the child theme I have created. I would like to remove the space between the menu bar and content to give the appearance of a box with rounded edges. You can view my site so far at: http://www.1978bektest.co.uk/mine/.
    I have also noticed that the page shifts slightly when moving from the home page to any other page and I’m not sure why, so any advice on how to fix that would also be very gratefully appreciated.
    Here is the code for my child theme:

    /*
Theme Name: Twentyeleven Child
Description: Child theme for the twentyeleven theme
Author:
Template: twentyeleven
*/

@import url("../twentyeleven/style.css");

/* = My added code to give wrapper for nav and content
-----------------------------------------------*/
#wrapper {
	margin: 0 auto;
}

/* =Structure
----------------------------------------------- */

body {
	padding: 0 1em;
}
#page {
	margin: 1em auto;
	max-width: 1000px;
}
#branding hgroup {
	margin: 0 7.6%;
}
#access div {
	margin: 0 7.6%;
}
#primary {
	float: left;
	margin: 0 -26.4% 0 0;
	width: 100%;
}
#content {
	/*MY CODE*/
	background: #fff;
	padding: 20px;
	-moz-border-radius: 0px 0px 20px 20px;
	border-radius: 0px 0px 20px 20px;
	/*END MY CODE*/
	margin: 0 34% 0 7.6%;
	width: 58.4%;
}

/* I EDITED WIDTH BELOW */
/* One column */
.one-column #page {
	min-width: 900px;
}
/*end edit width*/

/* =Global
----------------------------------------------- */

body, input, textarea {
	color: #333;
	font: 15px "Century Gothic", Calibri, Verdana, sans-serif;
	font-weight: 300;
	line-height: 1.625;
}
body {
	/*MY CODE*/
	background: #e2e2e2 url('images/bg.jpg') center top repeat-y;
	/*END MY CODE*/
}
#page {
	background-color: transparent;
}

/* Headings */
h1,h2,h3,h4,h5,h6 {
	color: #5d5d5d;
	clear: both;
	text-align: center;
}

/* Text elements */

ul {
	list-style: circle;
}

/* Links */
a {
	color: #333;
	text-decoration: none;
}
a:focus,
a:active,
a:hover {
	text-decoration: underline;
}

/* =Menu
-------------------------------------------------------------- */

#access {
	/*MY CODE to curve top corners of nav*/
	-moz-border-radius: 20px 20px 0px 0px;
	border-radius: 20px 20px 0px 0px;
	/*end curved corners of nav*/

	background: #d7d7d7; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#f7f7f7, #d7d7d7);
	background: -o-linear-gradient(#f7f7f7, #d7d7d7);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f7f7f7), to(#d7d7d7)); /* older webkit syntax */
	background: -webkit-linear-gradient(#f7f7f7, #d7d7d7);
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	clear:both;
	display: block;
	margin: auto ;
	width: 750px;
}
#access a {
	color: #666;
	display: block;
	line-height: 3.333em;
	padding: 0 1.2125em;
	text-decoration: none;
}

/* =Footer
----------------------------------------------- */

/* Site Generator Line */
#site-generator {
	background: transparent;
	border-top: none;
	color: #333;
	font-size: 12px;
	line-height: 2.2em;
	padding: 2.5em 0.5em;
	text-align: center;
}
#site-generator a {
	color: #333;
	font-weight: bold;
}

    I also had a go at adding a wrapper around the content, hoping this would pull things together with css but I’m not sure if I’ve gone about it correctly.
    I added a div called wrapper in the header.php file:

    <body <?php body_class(); ?>>
<div id="wrapper">
<div id="page" class="hfeed">

    and ended it in the footer.php file:

    </div><!-- #main -->
</div><!-- end my code, closes wrapper div -->
<footer id="colophon" role="contentinfo">

    I’m not entirely sure if this is correct as I’m not great with php so any help will be appreciated. Cheers!

    http://wordpress.org/extend/themes/twentyeleven/

  • The topic ‘[Theme: Twenty Eleven] How to Align and Remove Space Between Menu Bar and Content’ is closed to new replies.